From ddad75abc1aefec36400b4e56b01b98d7cb53a38 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 17 Jan 2023 12:12:00 +0100
Subject: [PATCH] changed class name to a more unique one to aboid applying to
 unwanted elements

---
 frontend/src/styles/settings.scss        |   2 +-
 frontend/static/html/pages/settings.html | 156 +++++++++++------------
 2 files changed, 79 insertions(+), 79 deletions(-)

diff --git a/frontend/src/styles/settings.scss b/frontend/src/styles/settings.scss
index d459a18a2..1cb814281 100644
--- a/frontend/src/styles/settings.scss
+++ b/frontend/src/styles/settings.scss
@@ -153,7 +153,7 @@
       }
     }
 
-    .title {
+    .groupTitle {
       font-size: 1rem;
       color: var(--sub-color);
       margin: 0;
diff --git a/frontend/static/html/pages/settings.html b/frontend/static/html/pages/settings.html
index 01b48fc13..31cf92a8c 100644
--- a/frontend/static/html/pages/settings.html
+++ b/frontend/static/html/pages/settings.html
@@ -43,7 +43,7 @@
   </div>
   <div class="settingsGroup account hidden">
     <div class="section discordIntegration">
-      <div class="title">discord integration</div>
+      <div class="groupTitle">discord integration</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 +76,7 @@
       </div>
     </div>
     <div class="section tags">
-      <div class="title">tags</div>
+      <div class="groupTitle">tags</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 +99,7 @@
       </div>
     </div>
     <div class="section presets">
-      <div class="title">presets</div>
+      <div class="groupTitle">presets</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.
@@ -130,7 +130,7 @@
   </div>
   <div class="settingsGroup behavior">
     <div class="section difficulty">
-      <div class="title">test difficulty</div>
+      <div class="groupTitle">test difficulty</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 +164,7 @@
       </div>
     </div>
     <div class="section quickRestart" id="quickRestart">
-      <div class="title">quick restart</div>
+      <div class="groupTitle">quick restart</div>
       <div class="text">
         Press
         <key>tab</key>
@@ -205,7 +205,7 @@
     </div>
 
     <div class="section repeatQuotes" id="repeatQuotes">
-      <div class="title">repeat quotes</div>
+      <div class="groupTitle">repeat quotes</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 +236,7 @@
     </div>
 
     <div class="section blindMode">
-      <div class="title">blind mode</div>
+      <div class="groupTitle">blind mode</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 +262,7 @@
       </div>
     </div>
     <div class="section alwaysShowWordsHistory">
-      <div class="title">always show words history</div>
+      <div class="groupTitle">always show words history</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 +286,7 @@
       </div>
     </div>
     <div class="section singleListCommandLine">
-      <div class="title">single list command line</div>
+      <div class="groupTitle">single list command line</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,7 +314,7 @@
       </div>
     </div>
     <div class="section minWpm" section="">
-      <div class="title">min wpm</div>
+      <div class="groupTitle">min wpm</div>
       <div class="text">
         Automatically fails a test if your WPM falls below a threshold.
       </div>
@@ -349,7 +349,7 @@
       </div>
     </div>
     <div class="section minAcc" section="">
-      <div class="title">min accuracy</div>
+      <div class="groupTitle">min accuracy</div>
       <div class="text">
         Automatically fails a test if your accuracy falls below a threshold.
       </div>
@@ -384,7 +384,7 @@
       </div>
     </div>
     <div class="section minBurst" section="">
-      <div class="title">min burst</div>
+      <div class="groupTitle">min burst</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
@@ -434,7 +434,7 @@
       </div>
     </div>
     <div class="section britishEnglish" section="">
-      <div class="title">british english</div>
+      <div class="groupTitle">british english</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
@@ -462,12 +462,12 @@
       </div>
     </div>
     <div class="section language">
-      <div class="title">language</div>
+      <div class="groupTitle">language</div>
       <div class="text">Change in which language you want to type.</div>
       <select></select>
     </div>
     <div class="section funbox fullWidth">
-      <div class="title">funbox</div>
+      <div class="groupTitle">funbox</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,7 +477,7 @@
     </div>
     <div class="sectionSpacer"></div>
     <div class="section customLayoutfluid">
-      <div class="title">custom layoutfluid</div>
+      <div class="groupTitle">custom layoutfluid</div>
       <div class="text">
         Select which layouts you want the layoutfluid funbox to cycle through.
       </div>
@@ -501,7 +501,7 @@
   </div>
   <div class="settingsGroup input">
     <div class="section freedomMode">
-      <div class="title">freedom mode</div>
+      <div class="groupTitle">freedom mode</div>
       <div class="text">
         Allows you to delete any word, even if it was typed correctly.
       </div>
@@ -525,7 +525,7 @@
       </div>
     </div>
     <div class="section strictSpace">
-      <div class="title">strict space</div>
+      <div class="groupTitle">strict space</div>
       <div class="text">
         Pressing space at the beginning of a word will insert a space character
         when this mode is enabled.
@@ -550,7 +550,7 @@
       </div>
     </div>
     <div class="section oppositeShiftMode">
-      <div class="title">opposite shift mode</div>
+      <div class="groupTitle">opposite shift mode</div>
       <div class="text">
         This mode will force you to use opposite
         <key>shift</key>
@@ -594,7 +594,7 @@
       </div>
     </div>
     <div class="section stopOnError">
-      <div class="title">stop on error</div>
+      <div class="groupTitle">stop on error</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 +628,7 @@
       </div>
     </div>
     <div class="section confidenceMode">
-      <div class="title">confidence mode</div>
+      <div class="groupTitle">confidence mode</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 +663,7 @@
       </div>
     </div>
     <div class="section quickEnd">
-      <div class="title">quick end</div>
+      <div class="groupTitle">quick end</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 +685,7 @@
       </div>
     </div>
     <div class="section indicateTypos" section="">
-      <div class="title">indicate typos</div>
+      <div class="groupTitle">indicate typos</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 +718,7 @@
       </div>
     </div>
     <div class="section hideExtraLetters" section="">
-      <div class="title">hide extra letters</div>
+      <div class="groupTitle">hide extra letters</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 +744,7 @@
       </div>
     </div>
     <div class="section lazyMode">
-      <div class="title">lazy mode</div>
+      <div class="groupTitle">lazy mode</div>
       <div class="text">
         Replaces accents / diacritics / special characters with their normal
         letter equivalents.
@@ -764,7 +764,7 @@
       </div>
     </div>
     <div class="section layout">
-      <div class="title">layout emulator</div>
+      <div class="groupTitle">layout emulator</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.
@@ -791,7 +791,7 @@
   </div>
   <div class="settingsGroup sound">
     <div class="section soundVolume">
-      <div class="title">sound volume</div>
+      <div class="groupTitle">sound volume</div>
       <div class="text">Change the volume of the sound effects.</div>
       <div class="buttons">
         <div
@@ -821,7 +821,7 @@
       </div>
     </div>
     <div class="section playSoundOnClick fullWidth">
-      <div class="title">play sound on click</div>
+      <div class="groupTitle">play sound on click</div>
       <div class="text">Plays a short sound when you press a key.</div>
       <div class="buttons">
         <div
@@ -923,7 +923,7 @@
       </div>
     </div>
     <div class="section playSoundOnError">
-      <div class="title">play sound on error</div>
+      <div class="groupTitle">play sound on error</div>
       <div class="text">
         Plays a short sound if you press an incorrect key or press space too
         early.
@@ -956,7 +956,7 @@
   </div>
   <div class="settingsGroup caret">
     <div class="section smoothCaret" section="">
-      <div class="title">smooth caret</div>
+      <div class="groupTitle">smooth caret</div>
       <div class="text">
         The caret will move smoothly between letters and words.
       </div>
@@ -980,7 +980,7 @@
       </div>
     </div>
     <div class="section caretStyle" section="">
-      <div class="title">caret style</div>
+      <div class="groupTitle">caret style</div>
       <div class="text">Change the style of the caret during the test.</div>
       <div class="buttons">
         <div
@@ -1026,7 +1026,7 @@
       </div>
     </div>
     <div class="section paceCaret" section="">
-      <div class="title">pace caret</div>
+      <div class="groupTitle">pace caret</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
@@ -1100,7 +1100,7 @@
       </div>
     </div>
     <div class="section repeatedPace" section="">
-      <div class="title">repeated pace</div>
+      <div class="groupTitle">repeated pace</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 +1126,7 @@
       </div>
     </div>
     <div class="section paceCaretStyle" section="">
-      <div class="title">pace caret style</div>
+      <div class="groupTitle">pace caret style</div>
       <div class="text">
         Change the style of the pace caret during the test.
       </div>
@@ -1182,7 +1182,7 @@
   </div>
   <div class="settingsGroup appearance">
     <div class="section timerStyle" section="">
-      <div class="title">timer/progress style</div>
+      <div class="groupTitle">timer/progress style</div>
       <div class="text">
         Change the style of the timer/progress during a timed test.
       </div>
@@ -1214,7 +1214,7 @@
       </div>
     </div>
     <div class="section timerColor" section="">
-      <div class="title">timer/progress color</div>
+      <div class="groupTitle">timer/progress color</div>
       <div class="text">
         Change the color of the timer/progress number/bar and live wpm number.
       </div>
@@ -1254,7 +1254,7 @@
       </div>
     </div>
     <div class="section timerOpacity" section="">
-      <div class="title">timer/progress opacity</div>
+      <div class="groupTitle">timer/progress opacity</div>
       <div class="text">
         Change the opacity of the timer/progress number/bar and live wpm number.
       </div>
@@ -1294,7 +1294,7 @@
       </div>
     </div>
     <div class="section highlightMode" section="">
-      <div class="title">highlight mode</div>
+      <div class="groupTitle">highlight mode</div>
       <div class="text">Change what is highlighted during the test.</div>
       <div class="buttons">
         <div
@@ -1324,7 +1324,7 @@
       </div>
     </div>
     <div class="section tapeMode" section="">
-      <div class="title">tape mode</div>
+      <div class="groupTitle">tape mode</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 +1349,7 @@
       </div>
     </div>
     <div class="section smoothLineScroll">
-      <div class="title">smooth line scroll</div>
+      <div class="groupTitle">smooth line scroll</div>
       <div class="text">
         When enabled, the line transition will be animated.
       </div>
@@ -1373,7 +1373,7 @@
       </div>
     </div>
     <div class="section showAllLines">
-      <div class="title">show all lines</div>
+      <div class="groupTitle">show all lines</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 +1400,7 @@
       </div>
     </div>
     <div class="section alwaysShowDecimalPlaces">
-      <div class="title">always show decimal places</div>
+      <div class="groupTitle">always show decimal places</div>
       <div class="text">
         Always shows decimal places for values on the result page, without the
         need to hover over the stats.
@@ -1425,7 +1425,7 @@
       </div>
     </div>
     <div class="section alwaysShowCPM">
-      <div class="title">always show cpm</div>
+      <div class="groupTitle">always show cpm</div>
       <div class="text">
         Always shows characters per minute calculation instead of the default
         words per minute calculation.
@@ -1450,7 +1450,7 @@
       </div>
     </div>
     <div class="section startGraphsAtZero">
-      <div class="title">start graphs at zero</div>
+      <div class="groupTitle">start graphs at zero</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,7 +1475,7 @@
       </div>
     </div>
     <div class="section fontSize">
-      <div class="title">font size</div>
+      <div class="groupTitle">font size</div>
       <div class="text">Change the font size of the test words.</div>
       <div class="inputAndButton">
         <input
@@ -1490,12 +1490,12 @@
       </div>
     </div>
     <div class="section fontFamily fullWidth">
-      <div class="title">font family</div>
+      <div class="groupTitle">font family</div>
       <!-- <div class="text">Change the font family for the site</div> -->
       <div class="buttons"></div>
     </div>
     <div class="section pageWidth">
-      <div class="title">page width</div>
+      <div class="groupTitle">page width</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 +1516,7 @@
       </div>
     </div>
     <div class="section keymapMode">
-      <div class="title">keymap</div>
+      <div class="groupTitle">keymap</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 +1557,12 @@
       </div>
     </div>
     <div class="section keymapLayout">
-      <div class="title">keymap layout</div>
+      <div class="groupTitle">keymap layout</div>
       <div class="text">Controls which layout is displayed on the keymap.</div>
       <select></select>
     </div>
     <div class="section keymapStyle fullWidth">
-      <div class="title">keymap style</div>
+      <div class="groupTitle">keymap style</div>
       <!-- <div class="text">Displays the keymap in a different style.</div> -->
       <div class="buttons">
         <div
@@ -1608,7 +1608,7 @@
       </div>
     </div>
     <div class="section keymapLegendStyle fullWidth">
-      <div class="title">keymap legend style</div>
+      <div class="groupTitle">keymap legend style</div>
       <div class="buttons">
         <div
           class="button"
@@ -1645,7 +1645,7 @@
       </div>
     </div>
     <div class="section keymapShowTopRow fullWidth">
-      <div class="title">keymap show top row</div>
+      <div class="groupTitle">keymap show top row</div>
       <div class="buttons">
         <div
           class="button"
@@ -1691,7 +1691,7 @@
   </div>
   <div class="settingsGroup theme">
     <div class="section flipTestColors">
-      <div class="title">flip test colors</div>
+      <div class="groupTitle">flip test colors</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 +1717,7 @@
       </div>
     </div>
     <div class="section colorfulMode">
-      <div class="title">colorful mode</div>
+      <div class="groupTitle">colorful mode</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,7 +1742,7 @@
       </div>
     </div>
     <div class="section customBackgroundSize">
-      <div class="title">custom background</div>
+      <div class="groupTitle">custom background</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
@@ -1790,7 +1790,7 @@
       </div>
     </div>
     <div class="section customBackgroundFilter fullWidth">
-      <div class="title">custom background filter</div>
+      <div class="groupTitle">custom background filter</div>
       <div class="text">Apply various effects to the custom background.</div>
       <div class="groups">
         <div class="group blur">
@@ -1816,7 +1816,7 @@
       </div>
     </div>
     <div class="section autoSwitchTheme">
-      <div class="title">auto switch theme</div>
+      <div class="groupTitle">auto switch theme</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 +1847,7 @@
       <div><select class="dark"></select></div>
     </div>
     <div class="section randomTheme fullWidth">
-      <div class="title">randomize theme</div>
+      <div class="groupTitle">randomize theme</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 +1907,7 @@
       </div>
     </div>
     <div class="section themes fullWidth">
-      <div class="title">theme</div>
+      <div class="groupTitle">theme</div>
       <div class="tabs">
         <div class="button" tab="preset" tabindex="0" onclick="this.blur();">
           preset
@@ -2153,7 +2153,7 @@
   </div>
   <div class="settingsGroup hideElements">
     <div class="section showLiveWpm">
-      <div class="title">live wpm</div>
+      <div class="groupTitle">live wpm</div>
       <div class="text">
         Displays a live WPM speed during the test. Updates once every second.
       </div>
@@ -2177,7 +2177,7 @@
       </div>
     </div>
     <div class="section showLiveAcc">
-      <div class="title">live accuracy</div>
+      <div class="groupTitle">live accuracy</div>
       <div class="text">Displays live accuracy during the test.</div>
       <div class="buttons">
         <div
@@ -2199,7 +2199,7 @@
       </div>
     </div>
     <div class="section showLiveBurst">
-      <div class="title">live burst</div>
+      <div class="groupTitle">live burst</div>
       <div class="text">
         Displays live burst during the test of the last word you typed.
       </div>
@@ -2223,7 +2223,7 @@
       </div>
     </div>
     <div class="section showTimerProgress">
-      <div class="title">timer/progress</div>
+      <div class="groupTitle">timer/progress</div>
       <div class="text">
         Displays a live timer for timed tests and progress for words/custom
         tests.
@@ -2248,7 +2248,7 @@
       </div>
     </div>
     <div class="section showKeyTips">
-      <div class="title">key tips</div>
+      <div class="groupTitle">key tips</div>
       <div class="text">Shows the keybind tips at the bottom of the page.</div>
       <div class="buttons">
         <div
@@ -2270,7 +2270,7 @@
       </div>
     </div>
     <div class="section showOutOfFocusWarning">
-      <div class="title">out of focus warning</div>
+      <div class="groupTitle">out of focus warning</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 +2295,7 @@
       </div>
     </div>
     <div class="section capsLockWarning">
-      <div class="title">caps lock warning</div>
+      <div class="groupTitle">caps lock warning</div>
       <div class="text">Displays a warning when caps lock is on.</div>
       <div class="buttons">
         <div
@@ -2317,7 +2317,7 @@
       </div>
     </div>
     <div class="section showAverage">
-      <div class="title">average</div>
+      <div class="groupTitle">average</div>
       <div class="text">
         Displays your average wpm and/or accuracy over the last 10 tests.
       </div>
@@ -2365,7 +2365,7 @@
   </div>
   <div class="settingsGroup dangerZone">
     <div class="section importexportSettings">
-      <div class="title">import/export settings</div>
+      <div class="groupTitle">import/export settings</div>
       <div class="text">Import or export the settings as JSON.</div>
       <div class="buttons">
         <div
@@ -2387,7 +2387,7 @@
       </div>
     </div>
     <div class="section ads">
-      <div class="title">ads</div>
+      <div class="groupTitle">ads</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 +2412,7 @@
       </div>
     </div>
     <div class="section apeKeys needsAccount hidden">
-      <div class="title">ape keys</div>
+      <div class="groupTitle">ape keys</div>
       <div class="text">
         Generate Ape Keys to access certain API endpoints
         <span style="display: inline-flex">
@@ -2436,7 +2436,7 @@
       </div>
     </div>
     <div class="section updateCookiePreferences">
-      <div class="title">update cookie preferences</div>
+      <div class="groupTitle">update cookie preferences</div>
       <div class="text">
         If you changed your mind about which cookies you consent to, you can
         change your preferences here.
@@ -2446,7 +2446,7 @@
       </div>
     </div>
     <div class="section updateAccountName needsAccount hidden">
-      <div class="title">update account name</div>
+      <div class="groupTitle">update account name</div>
       <div class="text">
         Change the name of your account. You can only do this once every 30
         days.
@@ -2463,7 +2463,7 @@
       </div>
     </div>
     <div class="section passwordAuthSettings needsAccount hidden">
-      <div class="title">password authentication settings</div>
+      <div class="groupTitle">password authentication settings</div>
       <div class="text">
         Add password authentication, update your password or email.
       </div>
@@ -2495,7 +2495,7 @@
       </div>
     </div>
     <div class="section googleAuthSettings needsAccount hidden">
-      <div class="title">google authentication settings</div>
+      <div class="groupTitle">google authentication settings</div>
       <div class="text">Add or remove Google authentication.</div>
       <div class="buttons vertical">
         <div
@@ -2517,7 +2517,7 @@
       </div>
     </div>
     <div class="section resetSettings">
-      <div class="title">reset settings</div>
+      <div class="groupTitle">reset settings</div>
       <div class="text">
         Resets settings to the default (but doesn't touch your tags). Warning:
         you can't undo this action!
@@ -2534,7 +2534,7 @@
       </div>
     </div>
     <div class="section resetPersonalBests needsAccount hidden">
-      <div class="title">reset personal bests</div>
+      <div class="groupTitle">reset personal bests</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!
@@ -2551,7 +2551,7 @@
       </div>
     </div>
     <div class="section resetAccount needsAccount hidden">
-      <div class="title">reset account</div>
+      <div class="groupTitle">reset account</div>
       <div class="text">Completely resets your account to a blank state.</div>
       <div class="buttons">
         <div
@@ -2565,7 +2565,7 @@
       </div>
     </div>
     <div class="section deleteAccount needsAccount hidden">
-      <div class="title">delete account</div>
+      <div class="groupTitle">delete account</div>
       <div class="text">Deletes your account and all data connected to it.</div>
       <div class="buttons">
         <div