added themes section to the settings page

public/css/style.scss

@@ -1845,23 +1845,40 @@ key {
       grid-template-columns: 1fr 1fr 1fr 1fr;
     }
 
+    &.themes {
+      .tabContainer {
+        position: relative;
+        grid-area: buttons;
+
+        .tabContent {
+          overflow: revert;
+          height: auto;
+
+          .text {
+            align-self: center;
+          }
+        }
+      }
+    }
+
     &.themes,
     &.language,
     &.layout,
     &.keymapLayout,
     &.fontFamily,
     &.funbox {
-      grid-template-columns: 1fr;
+      grid-template-columns: 2fr 1fr;
       grid-template-areas:
-        "title"
-        "tabs"
-        "buttons";
-      gap: 0.5rem;
+        "title tabs"
+        "buttons buttons";
+      column-gap: 2rem;
+      row-gap: .5rem;
 
       .tabs {
-        grid-area: tabs;
-        display: flex;
-        grid-template-columns: 1fr 1fr 9fr;
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: 1fr;
+        gap: 0.5rem;
         grid-area: tabs;
 
         .tab {
@@ -1899,26 +1916,6 @@ key {
   }
 }
 
-.tabContainer {
-  position: relative;
-
-  .tabContent {
-    overflow: revert;
-    height: auto;
-    // max-height: 0px;
-    // max-height: 100vh;
-
-    // transition: max-height .5s ease-in-out;
-    // &.reveal {
-    //   max-height: 100vh;
-    // }
-
-    .text {
-      align-self: center;
-    }
-  }
-}
-
 .buttons div.theme:hover {
   transform: scale(1.1);
 }

public/index.html

@@ -1254,6 +1254,15 @@
 
             </div>
           </div>
+          <div class="sectionSpacer"></div>
+        </div>
+
+
+        <div class="sectionGroupTitle" group="theme">
+          theme
+          <i class="fas fa-chevron-down"></i>
+        </div>
+        <div class="settingsGroup theme">
           <div class="section flipTestColors">
             <h1>flip test colors</h1>
             <div class="text">By default, typed text is brighter than the future text. When enabled, the colors will be
@@ -1289,10 +1298,14 @@
           </div>
           <div class="section themes">
             <h1>theme</h1>
-            <div class='tabs'>
+            <div class="tabs">
+              <div class="button" tab="preset" tabindex="0" onclick="this.blur();">preset</div>
+              <div class="button" tab="custom" tabindex="0" onclick="this.blur();">custom</div>
+            </div>
+            <!-- <div class='tabs'>
               <button tab="preset" class="tab">preset</button>
               <button tab="custom" class="tab">custom</button>
-            </div>
+            </div> -->
             <div class="tabContainer">
               <div tabContent="custom" class="tabContent section customTheme hidden">
                 <label class="text">background</label>
@@ -1360,11 +1373,10 @@
           <div class="sectionSpacer"></div>
         </div>
 
-
-
         <div class="sectionGroupTitle" group="hideElements">
           hide elements
-          <i class="fas fa-chevron-down"></i></div>
+          <i class="fas fa-chevron-down"></i>
+        </div>
         <div class="settingsGroup hideElements">
           <div class="section showLiveWpm">
             <h1>live wpm</h1>

public/js/settings.js

@@ -389,12 +389,14 @@ function setActiveThemeButton() {
 
 function setActiveThemeTab() {
   config.customTheme === true
-    ? $("[tab='custom']").click()
-    : $("[tab='preset']").click();
+    ? $(".pageSettings .section.themes .tabs .button[tab='custom']").click()
+    : $(".pageSettings .section.themes .tabs .button[tab='preset']").click();
 }
 
 function setCustomThemeInputs() {
-  $("[type=color]").each((n, index) => {
+  $(
+    ".pageSettings .section.themes .tabContainer .customTheme input[type=color]"
+  ).each((n, index) => {
     let currentColor =
       config.customThemeColors[colorVars.indexOf($(index).attr("id"))];
     $(index).val(currentColor);
@@ -570,8 +572,8 @@ const colorVars = [
   "--colorful-error-extra-color",
 ];
 
-$(".tab").click((e) => {
-  $(".tab").removeClass("active");
+$(".pageSettings .section.themes .tabs .button").click((e) => {
+  $(".pageSettings .section.themes .tabs .button").removeClass("active");
   var $target = $(e.currentTarget);
   $target.addClass("active");
   setCustomThemeInputs();
@@ -579,22 +581,24 @@ $(".tab").click((e) => {
     setCustomTheme(false);
     applyCustomThemeColors();
     swapElements(
-      $('.pageSettings [tabContent="custom"]'),
-      $('.pageSettings [tabContent="preset"]'),
+      $('.pageSettings .section.themes .tabContainer [tabContent="custom"]'),
+      $('.pageSettings .section.themes .tabContainer [tabContent="preset"]'),
       250
     );
   } else {
     setCustomTheme(true);
     applyCustomThemeColors();
     swapElements(
-      $('.pageSettings [tabContent="preset"]'),
-      $('.pageSettings [tabContent="custom"]'),
+      $('.pageSettings .section.themes .tabContainer [tabContent="preset"]'),
+      $('.pageSettings .section.themes .tabContainer [tabContent="custom"]'),
       250
     );
   }
 });
 
-$("[type='color']").on("input", (e) => {
+$(
+  ".pageSettings .section.themes .tabContainer .customTheme input[type=color]"
+).on("input", (e) => {
   setCustomTheme(true, true);
   let $colorVar = $(e.currentTarget).attr("id");
   let $pickedColor = $(e.currentTarget).val();