From 1e60dc53cd991259dcc7ad8accc71692fbddb5ac Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 25 Jan 2023 17:43:01 +0100
Subject: [PATCH] updated settings page added icons updated button and text
 alignment

---
 frontend/src/styles/settings.scss        |  28 +-
 frontend/static/html/pages/settings.html | 502 +++++++++++++++++------
 2 files changed, 395 insertions(+), 135 deletions(-)

diff --git a/frontend/src/styles/settings.scss b/frontend/src/styles/settings.scss
index 1cb814281..e877a60a3 100644
--- a/frontend/src/styles/settings.scss
+++ b/frontend/src/styles/settings.scss
@@ -13,13 +13,14 @@
     line-height: 2rem;
     cursor: pointer;
     transition: 0.25s;
-
+    display: flex;
+    align-items: baseline;
     &:hover {
       color: var(--text-color);
     }
 
     .fas {
-      margin-left: 0.5rem;
+      margin-right: 0.5em;
 
       &.rotate {
         transform: rotate(-90deg);
@@ -45,9 +46,10 @@
     display: grid;
     // gap: .5rem;
     grid-template-areas:
-      "title title"
+      "title buttons"
       "text buttons";
     grid-template-columns: 2fr 1fr;
+    grid-template-rows: auto 1fr;
     column-gap: 2rem;
     align-items: center;
 
@@ -159,6 +161,22 @@
       margin: 0;
       grid-area: title;
       font-weight: 300;
+      display: flex;
+      align-items: baseline;
+      .fab,
+      .fas,
+      .far {
+        margin-right: 0.5em;
+        margin-bottom: 0.5em;
+      }
+    }
+
+    &.themes .groupTitle {
+      .fab,
+      .fas,
+      .far {
+        margin-bottom: 0;
+      }
     }
 
     p {
@@ -173,6 +191,10 @@
       grid-area: text;
     }
 
+    .inputs {
+      grid-area: buttons;
+    }
+
     .buttons {
       display: grid;
       grid-auto-flow: column;
diff --git a/frontend/static/html/pages/settings.html b/frontend/static/html/pages/settings.html
index 4df3cab6d..91b475be9 100644
--- a/frontend/static/html/pages/settings.html
+++ b/frontend/static/html/pages/settings.html
@@ -38,12 +38,15 @@
   </div>
 
   <div id="group_account" class="sectionGroupTitle hidden" group="account">
-    account
     <i class="fas fa-chevron-down"></i>
+    <span>account</span>
   </div>
   <div class="settingsGroup account hidden">
     <div class="section discordIntegration">
-      <div class="groupTitle">discord integration</div>
+      <div class="groupTitle">
+        <i class="fab fa-discord"></i>
+        <span>discord integration</span>
+      </div>
       <div class="text">
         When you connect your monkeytype account to your Discord account, you
         will be automatically assigned a new role every time you achieve a new
@@ -76,7 +79,10 @@
       </div>
     </div>
     <div class="section tags">
-      <div class="groupTitle">tags</div>
+      <div class="groupTitle">
+        <i class="fas fa-tag"></i>
+        <span>tags</span>
+      </div>
       <div class="text">
         With tags, you can compare how fast you're typing in different
         situations. You can see your active tags above the test words. They will
@@ -99,7 +105,10 @@
       </div>
     </div>
     <div class="section presets">
-      <div class="groupTitle">presets</div>
+      <div class="groupTitle">
+        <i class="fas fa-sliders-h"></i>
+        <span>presets</span>
+      </div>
       <div class="text">
         Create settings presets that can be applied with one click. Remember to
         edit your preset if you make any changes - they don't save on their own.
@@ -125,12 +134,15 @@
   </div>
 
   <div id="group_behavior" class="sectionGroupTitle" group="behavior">
-    behavior
     <i class="fas fa-chevron-down"></i>
+    <span>behavior</span>
   </div>
   <div class="settingsGroup behavior">
     <div class="section difficulty">
-      <div class="groupTitle">test difficulty</div>
+      <div class="groupTitle">
+        <i class="fas fa-star"></i>
+        <span>test difficulty</span>
+      </div>
       <div class="text">
         Normal is the classic type test experience. Expert fails the test if you
         submit (press space) an incorrect word. Master fails if you press a
@@ -164,7 +176,10 @@
       </div>
     </div>
     <div class="section quickRestart" id="quickRestart">
-      <div class="groupTitle">quick restart</div>
+      <div class="groupTitle">
+        <i class="fas fa-redo-alt"></i>
+        <span>quick restart</span>
+      </div>
       <div class="text">
         Press
         <key>tab</key>
@@ -205,7 +220,10 @@
     </div>
 
     <div class="section repeatQuotes" id="repeatQuotes">
-      <div class="groupTitle">repeat quotes</div>
+      <div class="groupTitle">
+        <i class="fas fa-sync-alt"></i>
+        <span>repeat quotes</span>
+      </div>
       <div class="text">
         This setting changes the restarting behavior when typing in quote mode.
         Changing it to 'typing' will repeat the quote if you restart while
@@ -236,7 +254,10 @@
     </div>
 
     <div class="section blindMode">
-      <div class="groupTitle">blind mode</div>
+      <div class="groupTitle">
+        <i class="fas fa-eye-slash"></i>
+        <span>blind mode</span>
+      </div>
       <div class="text">
         No errors or incorrect words are highlighted. Helps you to focus on raw
         speed. If enabled, quick end is recommended.
@@ -262,7 +283,10 @@
       </div>
     </div>
     <div class="section alwaysShowWordsHistory">
-      <div class="groupTitle">always show words history</div>
+      <div class="groupTitle">
+        <i class="fas fa-align-left"></i>
+        <span>always show words history</span>
+      </div>
       <div class="text">
         This option will automatically show the words history at the end of the
         test. Can cause slight lag with a lot of words.
@@ -286,7 +310,10 @@
       </div>
     </div>
     <div class="section singleListCommandLine">
-      <div class="groupTitle">single list command line</div>
+      <div class="groupTitle">
+        <i class="fas fa-list"></i>
+        <span>single list command line</span>
+      </div>
       <div class="text">
         When enabled, it will show the command line with all commands in a
         single list instead of submenu arrangements. Selecting 'manual' will
@@ -314,11 +341,14 @@
       </div>
     </div>
     <div class="section minWpm" section="">
-      <div class="groupTitle">min wpm</div>
+      <div class="groupTitle">
+        <i class="fas fa-bomb"></i>
+        <span>min wpm</span>
+      </div>
       <div class="text">
         Automatically fails a test if your WPM falls below a threshold.
       </div>
-      <div>
+      <div class="inputs">
         <div class="inputAndButton">
           <input
             type="number"
@@ -349,11 +379,14 @@
       </div>
     </div>
     <div class="section minAcc" section="">
-      <div class="groupTitle">min accuracy</div>
+      <div class="groupTitle">
+        <i class="fas fa-bomb"></i>
+        <span>min accuracy</span>
+      </div>
       <div class="text">
         Automatically fails a test if your accuracy falls below a threshold.
       </div>
-      <div>
+      <div class="inputs">
         <div class="inputAndButton">
           <input
             type="number"
@@ -384,13 +417,16 @@
       </div>
     </div>
     <div class="section minBurst" section="">
-      <div class="groupTitle">min burst</div>
+      <div class="groupTitle">
+        <i class="fas fa-bomb"></i>
+        <span>min burst</span>
+      </div>
       <div class="text">
         Automatically fails a test if your raw for a single word falls below
         this threshold. Selecting 'flex' allows for this threshold to
         automatically decrease for longer words.
       </div>
-      <div>
+      <div class="inputs">
         <div class="inputAndButton">
           <input
             type="number"
@@ -434,40 +470,49 @@
       </div>
     </div>
     <div class="section britishEnglish" section="">
-      <div class="groupTitle">british english</div>
+      <div class="groupTitle">
+        <i class="fas fa-language"></i>
+        <span>british english</span>
+      </div>
       <div class="text">
         When enabled, the website will use the British spelling instead of
         American. Note that this might not replace all words correctly. If you
         find any issues, please let us know.
       </div>
-      <div>
-        <div class="buttons">
-          <div
-            class="button"
-            britishEnglish="false"
-            tabindex="0"
-            onclick="this.blur();"
-          >
-            off
-          </div>
-          <div
-            class="button"
-            britishEnglish="true"
-            tabindex="0"
-            onclick="this.blur();"
-          >
-            on
-          </div>
+      <div class="buttons">
+        <div
+          class="button"
+          britishEnglish="false"
+          tabindex="0"
+          onclick="this.blur();"
+        >
+          off
+        </div>
+        <div
+          class="button"
+          britishEnglish="true"
+          tabindex="0"
+          onclick="this.blur();"
+        >
+          on
         </div>
       </div>
     </div>
     <div class="section language">
-      <div class="groupTitle">language</div>
+      <div class="groupTitle">
+        <i class="fas fa-language"></i>
+        <span>language</span>
+      </div>
       <div class="text">Change in which language you want to type.</div>
-      <select></select>
+      <div class="inputs">
+        <select></select>
+      </div>
     </div>
     <div class="section funbox fullWidth">
-      <div class="groupTitle">funbox</div>
+      <div class="groupTitle">
+        <i class="fas fa-gamepad"></i>
+        <span>funbox</span>
+      </div>
       <div class="text">
         These are special modes that change the website in some special way (by
         altering the word generation, behavior of the website or the looks).
@@ -477,31 +522,39 @@
     </div>
     <div class="sectionSpacer"></div>
     <div class="section customLayoutfluid">
-      <div class="groupTitle">custom layoutfluid</div>
+      <div class="groupTitle">
+        <i class="fas fa-tint"></i>
+        <span>custom layoutfluid</span>
+      </div>
       <div class="text">
         Select which layouts you want the layoutfluid funbox to cycle through.
       </div>
-      <div class="inputAndButton">
-        <input
-          type="text"
-          placeholder="layouts (separated by space)"
-          class="input"
-          tabindex="0"
-        />
-        <div class="button save" tabindex="0" onclick="this.blur();">
-          <i class="fas fa-save fa-fw"></i>
+      <div class="inputs">
+        <div class="inputAndButton">
+          <input
+            type="text"
+            placeholder="layouts (separated by space)"
+            class="input"
+            tabindex="0"
+          />
+          <div class="button save" tabindex="0" onclick="this.blur();">
+            <i class="fas fa-save fa-fw"></i>
+          </div>
         </div>
       </div>
     </div>
     <div class="sectionSpacer"></div>
   </div>
   <div id="group_input" class="sectionGroupTitle" group="input">
-    input
     <i class="fas fa-chevron-down"></i>
+    input
   </div>
   <div class="settingsGroup input">
     <div class="section freedomMode">
-      <div class="groupTitle">freedom mode</div>
+      <div class="groupTitle">
+        <i class="fas fa-feather-alt"></i>
+        <span>freedom mode</span>
+      </div>
       <div class="text">
         Allows you to delete any word, even if it was typed correctly.
       </div>
@@ -525,7 +578,10 @@
       </div>
     </div>
     <div class="section strictSpace">
-      <div class="groupTitle">strict space</div>
+      <div class="groupTitle">
+        <i class="fas fa-minus"></i>
+        <span>strict space</span>
+      </div>
       <div class="text">
         Pressing space at the beginning of a word will insert a space character
         when this mode is enabled.
@@ -550,7 +606,10 @@
       </div>
     </div>
     <div class="section oppositeShiftMode">
-      <div class="groupTitle">opposite shift mode</div>
+      <div class="groupTitle">
+        <i class="fas fa-exchange-alt"></i>
+        <span>opposite shift mode</span>
+      </div>
       <div class="text">
         This mode will force you to use opposite
         <key>shift</key>
@@ -594,7 +653,10 @@
       </div>
     </div>
     <div class="section stopOnError">
-      <div class="groupTitle">stop on error</div>
+      <div class="groupTitle">
+        <i class="fas fa-hand-paper"></i>
+        <span>stop on error</span>
+      </div>
       <div class="text">
         Letter mode will stop input when pressing any incorrect letters. Word
         mode will not allow you to continue to the next word until you correct
@@ -628,7 +690,10 @@
       </div>
     </div>
     <div class="section confidenceMode">
-      <div class="groupTitle">confidence mode</div>
+      <div class="groupTitle">
+        <i class="fas fa-backspace"></i>
+        <span>confidence mode</span>
+      </div>
       <div class="text">
         When enabled, you will not be able to go back to previous words to fix
         mistakes. When turned up to the max, you won't be able to backspace at
@@ -663,7 +728,10 @@
       </div>
     </div>
     <div class="section quickEnd">
-      <div class="groupTitle">quick end</div>
+      <div class="groupTitle">
+        <i class="fas fa-step-forward"></i>
+        <span>quick end</span>
+      </div>
       <div class="text">
         This only applies to the words mode - when enabled, the test will end as
         soon as the last word has been typed, even if it's incorrect. When
@@ -685,7 +753,10 @@
       </div>
     </div>
     <div class="section indicateTypos" section="">
-      <div class="groupTitle">indicate typos</div>
+      <div class="groupTitle">
+        <i class="fas fa-exclamation"></i>
+        <span>indicate typos</span>
+      </div>
       <div class="text">
         Shows typos that you've made. Below shows what you typed below the
         letters and replace will replace the letters with the ones you typed.
@@ -718,7 +789,10 @@
       </div>
     </div>
     <div class="section hideExtraLetters" section="">
-      <div class="groupTitle">hide extra letters</div>
+      <div class="groupTitle">
+        <i class="fas fa-eye-slash"></i>
+        <span>hide extra letters</span>
+      </div>
       <div class="text">
         Hides extra letters. This will completely avoid words jumping lines (due
         to changing width), but might feel a bit confusing when you press a key
@@ -744,7 +818,10 @@
       </div>
     </div>
     <div class="section lazyMode">
-      <div class="groupTitle">lazy mode</div>
+      <div class="groupTitle">
+        <i class="fas fa-couch"></i>
+        <span>lazy mode</span>
+      </div>
       <div class="text">
         Replaces accents / diacritics / special characters with their normal
         letter equivalents.
@@ -764,14 +841,17 @@
       </div>
     </div>
     <div class="section layout">
-      <div class="groupTitle">layout emulator</div>
+      <div class="groupTitle">
+        <i class="fas fa-keyboard"></i>
+        <span>layout emulator</span>
+      </div>
       <div class="text">
         With this setting you can emulate other layouts. This setting is best
         kept off, as it can break things like dead keys and alt layers.
       </div>
-      <select></select>
-      <!-- <div class="buttons">
-      </div> -->
+      <div class="inputs">
+        <select></select>
+      </div>
     </div>
     <div class="sectionSpacer"></div>
   </div>
@@ -786,12 +866,15 @@
   </div>
 
   <div id="group_sound" class="sectionGroupTitle" group="sound">
-    sound
     <i class="fas fa-chevron-down"></i>
+    sound
   </div>
   <div class="settingsGroup sound">
     <div class="section soundVolume">
-      <div class="groupTitle">sound volume</div>
+      <div class="groupTitle">
+        <i class="fas fa-volume-down"></i>
+        <span>sound volume</span>
+      </div>
       <div class="text">Change the volume of the sound effects.</div>
       <div class="buttons">
         <div
@@ -821,7 +904,10 @@
       </div>
     </div>
     <div class="section playSoundOnClick fullWidth">
-      <div class="groupTitle">play sound on click</div>
+      <div class="groupTitle">
+        <i class="fas fa-volume-up"></i>
+        <span>play sound on click</span>
+      </div>
       <div class="text">Plays a short sound when you press a key.</div>
       <div class="buttons">
         <div
@@ -923,7 +1009,10 @@
       </div>
     </div>
     <div class="section playSoundOnError">
-      <div class="groupTitle">play sound on error</div>
+      <div class="groupTitle">
+        <i class="fas fa-volume-mute"></i>
+        <span>play sound on error</span>
+      </div>
       <div class="text">
         Plays a short sound if you press an incorrect key or press space too
         early.
@@ -951,12 +1040,15 @@
   </div>
 
   <div id="group_caret" class="sectionGroupTitle" group="caret">
-    caret
     <i class="fas fa-chevron-down"></i>
+    caret
   </div>
   <div class="settingsGroup caret">
     <div class="section smoothCaret" section="">
-      <div class="groupTitle">smooth caret</div>
+      <div class="groupTitle">
+        <i class="fas fa-i-cursor"></i>
+        <span>smooth caret</span>
+      </div>
       <div class="text">
         The caret will move smoothly between letters and words.
       </div>
@@ -980,7 +1072,10 @@
       </div>
     </div>
     <div class="section caretStyle" section="">
-      <div class="groupTitle">caret style</div>
+      <div class="groupTitle">
+        <i class="fas fa-i-cursor"></i>
+        <span>caret style</span>
+      </div>
       <div class="text">Change the style of the caret during the test.</div>
       <div class="buttons">
         <div
@@ -1026,13 +1121,16 @@
       </div>
     </div>
     <div class="section paceCaret" section="">
-      <div class="groupTitle">pace caret</div>
+      <div class="groupTitle">
+        <i class="fas fa-i-cursor"></i>
+        <span>pace caret</span>
+      </div>
       <div class="text">
         Displays a second caret that moves at constant speed. The 'average'
         option averages the speed of last 10 results. The 'daily' option takes
         the highest speed of the last 24 hours.
       </div>
-      <div>
+      <div class="inputs">
         <div class="inputAndButton">
           <input
             type="number"
@@ -1100,7 +1198,10 @@
       </div>
     </div>
     <div class="section repeatedPace" section="">
-      <div class="groupTitle">repeated pace</div>
+      <div class="groupTitle">
+        <i class="fas fa-i-cursor"></i>
+        <span>repeated pace</span>
+      </div>
       <div class="text">
         When repeating a test, a pace caret will automatically be enabled for
         one test with the speed of your previous test. It does not override the
@@ -1126,7 +1227,10 @@
       </div>
     </div>
     <div class="section paceCaretStyle" section="">
-      <div class="groupTitle">pace caret style</div>
+      <div class="groupTitle">
+        <i class="fas fa-i-cursor"></i>
+        <span>pace caret style</span>
+      </div>
       <div class="text">
         Change the style of the pace caret during the test.
       </div>
@@ -1177,12 +1281,15 @@
   </div>
 
   <div id="group_appearance" class="sectionGroupTitle" group="appearance">
-    appearance
     <i class="fas fa-chevron-down"></i>
+    appearance
   </div>
   <div class="settingsGroup appearance">
     <div class="section timerStyle" section="">
-      <div class="groupTitle">timer/progress style</div>
+      <div class="groupTitle">
+        <i class="fas fa-clock"></i>
+        <span>timer/progress style</span>
+      </div>
       <div class="text">
         Change the style of the timer/progress during a timed test.
       </div>
@@ -1214,7 +1321,10 @@
       </div>
     </div>
     <div class="section timerColor" section="">
-      <div class="groupTitle">timer/progress color</div>
+      <div class="groupTitle">
+        <i class="fas fa-clock"></i>
+        <span>timer/progress color</span>
+      </div>
       <div class="text">
         Change the color of the timer/progress number/bar and live wpm number.
       </div>
@@ -1254,7 +1364,10 @@
       </div>
     </div>
     <div class="section timerOpacity" section="">
-      <div class="groupTitle">timer/progress opacity</div>
+      <div class="groupTitle">
+        <i class="fas fa-clock"></i>
+        <span>timer/progress opacity</span>
+      </div>
       <div class="text">
         Change the opacity of the timer/progress number/bar and live wpm number.
       </div>
@@ -1294,7 +1407,10 @@
       </div>
     </div>
     <div class="section highlightMode" section="">
-      <div class="groupTitle">highlight mode</div>
+      <div class="groupTitle">
+        <i class="fas fa-highlighter"></i>
+        <span>highlight mode</span>
+      </div>
       <div class="text">Change what is highlighted during the test.</div>
       <div class="buttons">
         <div
@@ -1324,7 +1440,10 @@
       </div>
     </div>
     <div class="section tapeMode" section="">
-      <div class="groupTitle">tape mode</div>
+      <div class="groupTitle">
+        <i class="fas fa-tape"></i>
+        <span>tape mode</span>
+      </div>
       <div class="text">
         Only shows one line which scrolls horizontally. Setting this to 'word'
         will make it scroll after every word and 'letter' will scroll after
@@ -1349,7 +1468,10 @@
       </div>
     </div>
     <div class="section smoothLineScroll">
-      <div class="groupTitle">smooth line scroll</div>
+      <div class="groupTitle">
+        <i class="fas fa-align-left"></i>
+        <span>smooth line scroll</span>
+      </div>
       <div class="text">
         When enabled, the line transition will be animated.
       </div>
@@ -1373,7 +1495,10 @@
       </div>
     </div>
     <div class="section showAllLines">
-      <div class="groupTitle">show all lines</div>
+      <div class="groupTitle">
+        <i class="fas fa-align-left"></i>
+        <span>show all lines</span>
+      </div>
       <div class="text">
         When enabled, the website will show all lines for word, custom and quote
         mode tests - otherwise the lines will be limited to 3, and will
@@ -1400,7 +1525,10 @@
       </div>
     </div>
     <div class="section alwaysShowDecimalPlaces">
-      <div class="groupTitle">always show decimal places</div>
+      <div class="groupTitle">
+        <div class="textIcon">00</div>
+        <span>always show decimal places</span>
+      </div>
       <div class="text">
         Always shows decimal places for values on the result page, without the
         need to hover over the stats.
@@ -1425,7 +1553,10 @@
       </div>
     </div>
     <div class="section alwaysShowCPM">
-      <div class="groupTitle">always show cpm</div>
+      <div class="groupTitle">
+        <i class="fas fa-tachometer-alt"></i>
+        <span>always show cpm</span>
+      </div>
       <div class="text">
         Always shows characters per minute calculation instead of the default
         words per minute calculation.
@@ -1450,7 +1581,10 @@
       </div>
     </div>
     <div class="section startGraphsAtZero">
-      <div class="groupTitle">start graphs at zero</div>
+      <div class="groupTitle">
+        <i class="fas fa-chart-line"></i>
+        <span>start graphs at zero</span>
+      </div>
       <div class="text">
         Force graph axis to always start at zero, no matter what the data is.
         Turning this off may exaggerate the value changes.
@@ -1475,27 +1609,38 @@
       </div>
     </div>
     <div class="section fontSize">
-      <div class="groupTitle">font size</div>
+      <div class="groupTitle">
+        <i class="fas fa-font"></i>
+        <span>font size</span>
+      </div>
       <div class="text">Change the font size of the test words.</div>
-      <div class="inputAndButton">
-        <input
-          type="number"
-          placeholder="font size"
-          class="input"
-          tabindex="0"
-        />
-        <div class="button save" tabindex="0" onclick="this.blur();">
-          <i class="fas fa-save fa-fw"></i>
+      <div class="inputs">
+        <div class="inputAndButton">
+          <input
+            type="number"
+            placeholder="font size"
+            class="input"
+            tabindex="0"
+          />
+          <div class="button save" tabindex="0" onclick="this.blur();">
+            <i class="fas fa-save fa-fw"></i>
+          </div>
         </div>
       </div>
     </div>
     <div class="section fontFamily fullWidth">
-      <div class="groupTitle">font family</div>
+      <div class="groupTitle">
+        <i class="fas fa-font"></i>
+        <span>font family</span>
+      </div>
       <!-- <div class="text">Change the font family for the site</div> -->
       <div class="buttons"></div>
     </div>
     <div class="section pageWidth">
-      <div class="groupTitle">page width</div>
+      <div class="groupTitle">
+        <i class="fas fa-arrows-alt-h"></i>
+        <span>page width</span>
+      </div>
       <div class="text">Control the width of the content.</div>
       <div class="buttons">
         <div class="button" pageWidth="100" tabindex="0" onclick="this.blur();">
@@ -1516,7 +1661,10 @@
       </div>
     </div>
     <div class="section keymapMode">
-      <div class="groupTitle">keymap</div>
+      <div class="groupTitle">
+        <i class="fas fa-keyboard"></i>
+        <span>keymap</span>
+      </div>
       <div class="text">
         Displays your current layout while taking a test. React shows what you
         pressed and Next shows what you need to press next.
@@ -1557,12 +1705,18 @@
       </div>
     </div>
     <div class="section keymapLayout">
-      <div class="groupTitle">keymap layout</div>
+      <div class="groupTitle">
+        <i class="fas fa-keyboard"></i>
+        <span>keymap layout</span>
+      </div>
       <div class="text">Controls which layout is displayed on the keymap.</div>
       <select></select>
     </div>
     <div class="section keymapStyle fullWidth">
-      <div class="groupTitle">keymap style</div>
+      <div class="groupTitle">
+        <i class="fas fa-keyboard"></i>
+        <span>keymap style</span>
+      </div>
       <!-- <div class="text">Displays the keymap in a different style.</div> -->
       <div class="buttons">
         <div
@@ -1608,7 +1762,10 @@
       </div>
     </div>
     <div class="section keymapLegendStyle fullWidth">
-      <div class="groupTitle">keymap legend style</div>
+      <div class="groupTitle">
+        <i class="fas fa-keyboard"></i>
+        <span>keymap legend style</span>
+      </div>
       <div class="buttons">
         <div
           class="button"
@@ -1645,7 +1802,10 @@
       </div>
     </div>
     <div class="section keymapShowTopRow fullWidth">
-      <div class="groupTitle">keymap show top row</div>
+      <div class="groupTitle">
+        <i class="fas fa-keyboard"></i>
+        <span>keymap show top row</span>
+      </div>
       <div class="buttons">
         <div
           class="button"
@@ -1686,12 +1846,15 @@
   </div>
 
   <div id="group_theme" class="sectionGroupTitle" group="theme">
-    theme
     <i class="fas fa-chevron-down"></i>
+    theme
   </div>
   <div class="settingsGroup theme">
     <div class="section flipTestColors">
-      <div class="groupTitle">flip test colors</div>
+      <div class="groupTitle">
+        <i class="fas fa-adjust"></i>
+        <span>flip test colors</span>
+      </div>
       <div class="text">
         By default, typed text is brighter than the future text. When enabled,
         the colors will be flipped and the future text will be brighter than the
@@ -1717,7 +1880,10 @@
       </div>
     </div>
     <div class="section colorfulMode">
-      <div class="groupTitle">colorful mode</div>
+      <div class="groupTitle">
+        <i class="fas fa-fill-drip"></i>
+        <span>colorful mode</span>
+      </div>
       <div class="text">
         When enabled, the test words will use the main color, instead of the
         text color, making the website more colorful.
@@ -1742,13 +1908,16 @@
       </div>
     </div>
     <div class="section customBackgroundSize">
-      <div class="groupTitle">custom background</div>
+      <div class="groupTitle">
+        <i class="fas fa-image"></i>
+        <span>custom background</span>
+      </div>
       <div class="text">
         Set an image url to be a custom background image. Cover fits the image
         to cover the screen. Contain fits the image to be fully visible. Max
         fits the image corner to corner.
       </div>
-      <div>
+      <div class="inputs">
         <div class="inputAndButton">
           <input
             type="text"
@@ -1790,7 +1959,10 @@
       </div>
     </div>
     <div class="section customBackgroundFilter fullWidth">
-      <div class="groupTitle">custom background filter</div>
+      <div class="groupTitle">
+        <i class="fas fa-sliders-h"></i>
+        <span>custom background filter</span>
+      </div>
       <div class="text">Apply various effects to the custom background.</div>
       <div class="groups">
         <div class="group blur">
@@ -1816,7 +1988,10 @@
       </div>
     </div>
     <div class="section autoSwitchTheme">
-      <div class="groupTitle">auto switch theme</div>
+      <div class="groupTitle">
+        <i class="fas fa-palette"></i>
+        <span>auto switch theme</span>
+      </div>
       <div class="text">
         Enabling this will automatically switch the theme between light and dark
         depending on the system theme (this will not override custom theme).
@@ -1847,7 +2022,10 @@
       <div><select class="dark"></select></div>
     </div>
     <div class="section randomTheme fullWidth">
-      <div class="groupTitle">randomize theme</div>
+      <div class="groupTitle">
+        <i class="fas fa-random"></i>
+        <span>randomize theme</span>
+      </div>
       <div class="text">
         After completing a test, the theme will be set to a random one. The
         random themes are not saved to your config. If set to 'favorite' only
@@ -1907,7 +2085,10 @@
       </div>
     </div>
     <div class="section themes fullWidth">
-      <div class="groupTitle">theme</div>
+      <div class="groupTitle">
+        <i class="fas fa-palette"></i>
+        <span>theme</span>
+      </div>
       <div class="tabs">
         <div class="button" tab="preset" tabindex="0" onclick="this.blur();">
           preset
@@ -2148,12 +2329,15 @@
   </div>
 
   <div id="group_hideElements" class="sectionGroupTitle" group="hideElements">
-    hide elements
     <i class="fas fa-chevron-down"></i>
+    hide elements
   </div>
   <div class="settingsGroup hideElements">
     <div class="section showLiveWpm">
-      <div class="groupTitle">live wpm</div>
+      <div class="groupTitle">
+        <i class="fas fa-tachometer-alt"></i>
+        <span>live wpm</span>
+      </div>
       <div class="text">
         Displays a live WPM speed during the test. Updates once every second.
       </div>
@@ -2177,7 +2361,10 @@
       </div>
     </div>
     <div class="section showLiveAcc">
-      <div class="groupTitle">live accuracy</div>
+      <div class="groupTitle">
+        <i class="fas fa-tachometer-alt"></i>
+        <span>live accuracy</span>
+      </div>
       <div class="text">Displays live accuracy during the test.</div>
       <div class="buttons">
         <div
@@ -2199,7 +2386,10 @@
       </div>
     </div>
     <div class="section showLiveBurst">
-      <div class="groupTitle">live burst</div>
+      <div class="groupTitle">
+        <i class="fas fa-tachometer-alt"></i>
+        <span>live burst</span>
+      </div>
       <div class="text">
         Displays live burst during the test of the last word you typed.
       </div>
@@ -2223,7 +2413,10 @@
       </div>
     </div>
     <div class="section showTimerProgress">
-      <div class="groupTitle">timer/progress</div>
+      <div class="groupTitle">
+        <i class="fas fa-clock"></i>
+        <span>timer/progress</span>
+      </div>
       <div class="text">
         Displays a live timer for timed tests and progress for words/custom
         tests.
@@ -2248,7 +2441,10 @@
       </div>
     </div>
     <div class="section showKeyTips">
-      <div class="groupTitle">key tips</div>
+      <div class="groupTitle">
+        <i class="fas fa-question"></i>
+        <span>key tips</span>
+      </div>
       <div class="text">Shows the keybind tips at the bottom of the page.</div>
       <div class="buttons">
         <div
@@ -2270,7 +2466,10 @@
       </div>
     </div>
     <div class="section showOutOfFocusWarning">
-      <div class="groupTitle">out of focus warning</div>
+      <div class="groupTitle">
+        <i class="fas fa-exclamation"></i>
+        <span>out of focus warning</span>
+      </div>
       <div class="text">
         Shows an out of focus reminder after 1 second of being 'out of focus'
         (not being able to type).
@@ -2295,7 +2494,10 @@
       </div>
     </div>
     <div class="section capsLockWarning">
-      <div class="groupTitle">caps lock warning</div>
+      <div class="groupTitle">
+        <i class="fas fa-exclamation-triangle"></i>
+        <span>caps lock warning</span>
+      </div>
       <div class="text">Displays a warning when caps lock is on.</div>
       <div class="buttons">
         <div
@@ -2317,7 +2519,10 @@
       </div>
     </div>
     <div class="section showAverage">
-      <div class="groupTitle">average</div>
+      <div class="groupTitle">
+        <i class="fas fa-chart-bar"></i>
+        <span>average</span>
+      </div>
       <div class="text">
         Displays your average wpm and/or accuracy over the last 10 tests.
       </div>
@@ -2360,12 +2565,15 @@
   </div>
 
   <div id="group_dangerZone" class="sectionGroupTitle" group="dangerZone">
-    danger zone
     <i class="fas fa-chevron-down"></i>
+    danger zone
   </div>
   <div class="settingsGroup dangerZone">
     <div class="section importexportSettings">
-      <div class="groupTitle">import/export settings</div>
+      <div class="groupTitle">
+        <i class="fas fa-sliders-h"></i>
+        <span>import/export settings</span>
+      </div>
       <div class="text">Import or export the settings as JSON.</div>
       <div class="buttons">
         <div
@@ -2387,7 +2595,10 @@
       </div>
     </div>
     <div class="section ads">
-      <div class="groupTitle">ads</div>
+      <div class="groupTitle">
+        <i class="fas fa-ad"></i>
+        <span>ads</span>
+      </div>
       <div class="text">
         You can disable or enable ads at any time. "Result" will show one ad on
         the result page, "on" will add floating vertical banners, and "sellout"
@@ -2412,7 +2623,10 @@
       </div>
     </div>
     <div class="section apeKeys needsAccount hidden">
-      <div class="groupTitle">ape keys</div>
+      <div class="groupTitle">
+        <i class="fas fa-key"></i>
+        <span>ape keys</span>
+      </div>
       <div class="text">
         Generate Ape Keys to access certain API endpoints
         <span style="display: inline-flex">
@@ -2440,7 +2654,10 @@
       </div>
     </div>
     <div class="section updateCookiePreferences">
-      <div class="groupTitle">update cookie preferences</div>
+      <div class="groupTitle">
+        <i class="fas fa-cookie-bite"></i>
+        <span>update cookie preferences</span>
+      </div>
       <div class="text">
         If you changed your mind about which cookies you consent to, you can
         change your preferences here.
@@ -2450,7 +2667,10 @@
       </div>
     </div>
     <div class="section updateAccountName needsAccount hidden">
-      <div class="groupTitle">update account name</div>
+      <div class="groupTitle">
+        <i class="fas fa-user"></i>
+        <span>update account name</span>
+      </div>
       <div class="text">
         Change the name of your account. You can only do this once every 30
         days.
@@ -2467,7 +2687,10 @@
       </div>
     </div>
     <div class="section passwordAuthSettings needsAccount hidden">
-      <div class="groupTitle">password authentication settings</div>
+      <div class="groupTitle">
+        <i class="fas fa-lock"></i>
+        <span>password authentication settings</span>
+      </div>
       <div class="text">
         Add password authentication, update your password or email.
       </div>
@@ -2499,7 +2722,10 @@
       </div>
     </div>
     <div class="section googleAuthSettings needsAccount hidden">
-      <div class="groupTitle">google authentication settings</div>
+      <div class="groupTitle">
+        <i class="fab fa-google"></i>
+        <span>google authentication settings</span>
+      </div>
       <div class="text">Add or remove Google authentication.</div>
       <div class="buttons vertical">
         <div
@@ -2521,7 +2747,10 @@
       </div>
     </div>
     <div class="section resetSettings">
-      <div class="groupTitle">reset settings</div>
+      <div class="groupTitle">
+        <i class="fas fa-redo-alt"></i>
+        <span>reset settings</span>
+      </div>
       <div class="text">
         Resets settings to the default (but doesn't touch your tags). Warning:
         you can't undo this action!
@@ -2538,7 +2767,10 @@
       </div>
     </div>
     <div class="section resetPersonalBests needsAccount hidden">
-      <div class="groupTitle">reset personal bests</div>
+      <div class="groupTitle">
+        <i class="fas fa-crown"></i>
+        <span>reset personal bests</span>
+      </div>
       <div class="text">
         Resets all your personal bests (but doesn't delete any tests from your
         history). Warning: you can't undo this action!
@@ -2555,7 +2787,10 @@
       </div>
     </div>
     <div class="section resetAccount needsAccount hidden">
-      <div class="groupTitle">reset account</div>
+      <div class="groupTitle">
+        <i class="fas fa-redo-alt"></i>
+        <span>reset account</span>
+      </div>
       <div class="text">Completely resets your account to a blank state.</div>
       <div class="buttons">
         <div
@@ -2569,7 +2804,10 @@
       </div>
     </div>
     <div class="section deleteAccount needsAccount hidden">
-      <div class="groupTitle">delete account</div>
+      <div class="groupTitle">
+        <i class="fas fa-trash"></i>
+        <span>delete account</span>
+      </div>
       <div class="text">Deletes your account and all data connected to it.</div>
       <div class="buttons">
         <div