font change

assets/favicons/browserconfig.xml

@@ -2,8 +2,8 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/assets/img/favicons/mstile-150x150.png"/>
-            <TileColor>#ff0000</TileColor>
+            <square150x150logo src="/assets/favicons/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

assets/favicons/site.webmanifest

@@ -3,12 +3,12 @@
     "short_name": "",
     "icons": [
         {
-            "src": "/assets/img/favicons/android-chrome-192x192.png",
+            "src": "/assets/favicons/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/assets/img/favicons/android-chrome-512x512.png",
+            "src": "/assets/favicons/android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }

index.html

@@ -12,12 +12,12 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://fonts.googleapis.com/css2?family=Aldrich&family=JetBrains+Mono&display=swap" rel="stylesheet">
     <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
     <link rel="manifest" href="/assets/favicons/site.webmanifest">
     <link rel="shortcut icon" href="/assets/favicons/favicon.ico">
+    <link href="https://fonts.cdnfonts.com/css/whitney-2" rel="stylesheet">
     <meta name="apple-mobile-web-app-title" content="Discord Message Formatter">
     <meta name="application-name" content="Discord Message Formatter">
     <meta name="msapplication-TileColor" content="#ff7700">
@@ -31,7 +31,7 @@
             <h1><span class="date">Discord</span> Formatter!</h1>
         </div>
         <article>
-            <select id="dropdown" onchange="dropdown()">
+            <select id="dropdown" onchange="dropdown()" style="font-size: 1em;">
                 <option value="text">Regular Text</option>
                 <option value="color">Colored Text</option>
                 <option value="time">Timestamp</option>
@@ -68,8 +68,8 @@ <h2>Options</h2>
                 <button type="button" id="blue" onclick="blueFn(textArea.value)" style="color: #287AB5;">Blue</button>
                 <button type="button" id="gray" onclick="grayFn(textArea.value)" style="color: #576D74;">Gray</button>
             </div>
-            <div id="timediv" style="display: none;">
-                <div style="display: flex; align-items: center;">
+            <div id="timediv" style="display: none; width: 75%;">
+                <div style="display: flex; align-items: center; justify-content: space-evenly;">
                     <div>
                         <h3>Short Time (t):</h3>
                         <code id="datet">HH:MM (AM/PM)</code>

src/scripts/index.js

@@ -45,7 +45,7 @@ function resetFn() {
     textArea.style.fontStyle = "";
     textArea.style.textDecoration = "none";
     textArea.style.color = "white";
-    textArea.style.fontFamily = "JetBrains Mono";
+    textArea.style.fontFamily = "Whitney Book";
     boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false;
     redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block";
 }
@@ -66,7 +66,7 @@ function rmFn() {
     textArea.style.fontStyle = "";
     textArea.style.textDecoration = "none";
     textArea.style.color = "white";
-    textArea.style.fontFamily = "JetBrains Mono";
+    textArea.style.fontFamily = "Whitney Book";
     boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false;
     redBtn.style.color = '#D5322F';
     orangeBtn.style.color = '#B7471B';

src/scripts/index.ts

@@ -46,7 +46,7 @@ function resetFn(): void{
     textArea.style.fontStyle = ""
     textArea.style.textDecoration = "none"
     textArea.style.color = "white"
-    textArea.style.fontFamily = "JetBrains Mono"
+    textArea.style.fontFamily = "Whitney Book"
     boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false
     redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block" 
 
@@ -72,7 +72,7 @@ function rmFn(): void{
     textArea.style.fontStyle = ""
     textArea.style.textDecoration = "none"
     textArea.style.color = "white"
-    textArea.style.fontFamily = "JetBrains Mono"
+    textArea.style.fontFamily = "Whitney Book"
     boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false
     redBtn.style.color = '#D5322F';
     orangeBtn.style.color = '#B7471B';

src/scripts/text.js

@@ -115,7 +115,7 @@ function lineFn(text) {
     else if (lineOn === true) {
         text = text.replace(/`/g, "");
         lineBtn.style.color = 'white';
-        textArea.style.fontFamily = "JetBrains Mono";
+        textArea.style.fontFamily = "Whitney Book";
         textArea.value = text;
         lineOn = false;
     }
@@ -131,9 +131,9 @@ function blockFn(text) {
     else if (blockOn === true) {
         text = text.replace(/```/g, "");
         blockBtn.style.color = 'white';
-        textArea.style.fontFamily = "JetBrains Mono";
         textArea.value = text;
         blockOn = false;
+        textArea.style.fontFamily = "Whitney Book";
     }
 }
 function slashFn(text) {