From 141c3207c4a28d00c5c1fbafd35577005e9d6f3d Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Thu, 2 Jul 2020 18:39:24 +0100
Subject: [PATCH] refactored css to use one button class instead of copy and
 pasting the same style

---
 public/css/style.scss        | 190 ++++++++++++-----------------------
 public/index.html            |  44 ++++----
 public/js/account.js         |   4 +-
 public/js/script.js          |  28 +++---
 public/js/settings.js        |  14 +--
 public/js/userconfig.js      |  16 +--
 public/themes/9009.css       |   6 +-
 public/themes/bingsu.css     |   2 +-
 public/themes/dots.css       |  16 +--
 public/themes/dracula.css    |  12 +--
 public/themes/mr_sleeves.css |  12 +--
 public/themes/oblivion.css   |  12 +--
 public/themes/rgb.css        |   6 +-
 public/themes/shadow.css     |   6 +-
 public/themes/taro.css       |   4 +-
 15 files changed, 158 insertions(+), 214 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index 20e22a4c0..3dc762644 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -159,30 +159,6 @@ a:hover {
     display: grid;
     gap: 1rem;
     overflow-y: scroll;
-    .button{
-      color: var(--text-color);
-      cursor: pointer;
-      transition: .25s;
-      padding: .2rem .5rem;
-      border-radius: var(--roundness);
-
-      background: rgba(0,0,0,.1);
-      text-align: center;
-      -webkit-user-select: none;
-      display: grid;
-      align-content: center;
-      height: min-content;
-      height: -moz-min-content;
-      &.active{
-        background: var(--main-color);
-        color: var(--bg-color);
-      }
-      &:hover,&:focus{
-        color: var(--bg-color);
-        background: var(--main-color);
-        outline: none;
-      }
-    }
   }
 }
 
@@ -212,31 +188,6 @@ a:hover {
       gap: 1rem;
       grid-template-columns: 1fr 1fr 1fr;
     }
-    .button{
-      display: block;
-      color: var(--text-color);
-      cursor: pointer;
-      transition: .25s;
-      padding: .2rem .5rem;
-      border-radius: var(--roundness);
-
-      background: rgba(0,0,0,.1);
-      text-align: center;
-      -webkit-user-select: none;
-      display: grid;
-      align-content: center;
-      height: min-content;
-      height: -moz-min-content;
-      &.active{
-        background: var(--main-color);
-        color: var(--bg-color);
-      }
-      &:hover,&:focus{
-        color: var(--bg-color);
-        background: var(--main-color);
-        outline: none;
-      }
-    }
   }
 }
 
@@ -569,13 +520,7 @@ a:hover {
   width: fit-content;
   width: -moz-fit-content;
   /*   transition: 0.25s; */
-  .button{
-    display: grid;
-    grid-auto-flow: column;
-    align-content: center;
-    transition: 0.25s;
-    padding: 0.5rem;
-    border-radius: var(--roundness);
+  .button.discord{
     &.discord{
       position: relative;
       &::after{ 
@@ -595,20 +540,14 @@ a:hover {
         border-color: transparent;
       }
     }
-    &:focus{
-      background: var(--sub-color);
-      color: var(--main-color);
-      border: none;
-      outline: none;
-    }
   }
 }
 
-#top.focus #menu .button.discord::after{
+#top.focus #menu .icon-button.discord::after{
   background: transparent;
 }
 
-#menu .button .icon {
+#menu .icon-button .icon {
   display: grid;
   align-items: center;
   justify-items: center;
@@ -617,19 +556,19 @@ a:hover {
   height: 1.25rem;
 }
 
-#menu .button:hover {
+#menu .icon-button:hover {
   cursor: pointer;
   color: var(--main-color);
 }
 
-#menu .button .text {
+#menu .icon-button .text {
   font-size: .65rem;
   line-height: .65rem;
   align-self: center;
   margin-left: .25rem;
 }
 
-/* #menu .button:hover .text{
+/* #menu .icon-button:hover .text{
   width: auto;
 } */
 
@@ -637,7 +576,7 @@ a:hover {
   color: transparent !important;
 }
 
-#top.focus #menu .button {
+#top.focus #menu .icon-button {
   color: transparent !important;
 }
 
@@ -713,33 +652,6 @@ a:hover {
   display: flex;
 }
 
-#top .config .group .buttons .button {
-  transition: 0.25s;
-  color: var(--sub-color);
-  cursor: pointer;
-  margin-right: 0.25rem;
-}
-
-#top .config .group .buttons .button:last-child {
-  margin-right: 0;
-}
-
-#top .config .group .buttons .button:hover {
-  color: var(--main-color);
-}
-
-#top .config .group .buttons .button.active:hover {
-  cursor: default;
-}
-
-#top .config .group .buttons .toggleButton.active:hover {
-  cursor: pointer;
-}
-
-#top .config .group .buttons .button.active {
-  color: var(--main-color);
-}
-
 #top .config .group .title {
   color: var(--sub-color);
   font-size: 0.5rem;
@@ -1160,12 +1072,12 @@ key {
                 -1px 1px 0px var(--bg-color);
 }
 
-.word letter {
+// .word letter {
   // transition: .1s;
   // height: 1rem;
   // line-height: 1rem;
   /* margin: 0 1px; */
-}
+// }
 
 .word letter.correct {
   color: var(--text-color);
@@ -1256,33 +1168,6 @@ key {
     display: grid;
     gap: .5rem;
     width: 100%;
-    .button{
-      color: var(--text-color);
-      cursor: pointer;
-      transition: .25s;
-      padding: .2rem .5rem;
-      border-radius: var(--roundness);
-
-      background: rgba(0,0,0,.1);
-      text-align: center;
-      -webkit-user-select: none;
-      // display: grid;
-      align-content: center;
-      height: min-content;
-      height: -moz-min-content;
-      i{
-        margin-right: .5rem;
-      }
-      &.active{
-        background: var(--main-color);
-        color: var(--bg-color);
-      }
-      &:hover,&:focus{
-        color: var(--bg-color);
-        background: var(--main-color);
-        outline: none;
-      }
-    }
   }
   .preloader{
     position: fixed;
@@ -1735,3 +1620,60 @@ key {
 .hidden {
   display: none !important;
 }
+
+.button{
+  color: var(--text-color);
+  cursor: pointer;
+  transition: .25s;
+  padding: .2rem .5rem;
+  border-radius: var(--roundness);
+
+  background: rgba(0,0,0,.1);
+  text-align: center;
+  -webkit-user-select: none;
+  // display: grid;
+  align-content: center;
+  height: min-content;
+  height: -moz-min-content;
+  .fas,.far{
+    margin-right: .5rem;
+  }
+  &.active{
+    background: var(--main-color);
+    color: var(--bg-color);
+  }
+  &:hover,&:focus{
+    color: var(--bg-color);
+    background: var(--main-color);
+    outline: none;
+  }
+}
+
+.text-button{
+  transition: 0.25s;
+  color: var(--sub-color);
+  cursor: pointer;
+  margin-right: 0.25rem;
+  cursor: pointer;
+  &:hover,&:focus{
+    color: var(--main-color);
+  }
+  &.active{
+    color: var(--main-color);
+  }
+}
+
+.icon-button{
+  display: grid;
+  grid-auto-flow: column;
+  align-content: center;
+  transition: 0.25s;
+  padding: 0.5rem;
+  border-radius: var(--roundness);
+  &:focus{
+    background: var(--sub-color);
+    color: var(--main-color);
+    border: none;
+    outline: none;
+  }
+}
diff --git a/public/index.html b/public/index.html
index 37a2d25d3..015513044 100644
--- a/public/index.html
+++ b/public/index.html
@@ -89,33 +89,33 @@
         <div class="bottom">monkey-type</sup></div>
       </div>
       <div id="menu">
-        <div class="button" tabindex="2" href="/" onclick="this.blur();">
+        <div class="icon-button" tabindex="2" href="/" onclick="this.blur();">
           <div class="icon">
             <i class="fas fa-fw fa-keyboard"></i>
           </div>
         </div>
-        <div class="button" tabindex="2" href="/about" onclick="this.blur();">
+        <div class="icon-button" tabindex="2" href="/about" onclick="this.blur();">
           <div class="icon">
             <i class="fas fa-fw fa-info"></i>
           </div>
         </div>
-          <a class="button discord" tabindex="2" href="https://discord.gg/yENzqcB" onclick="this.blur();" target="_blank" style="text-decoration: none;">
+          <a class="icon-button discord" tabindex="2" href="https://discord.gg/yENzqcB" onclick="this.blur();" target="_blank" style="text-decoration: none;">
             <div class="icon">
               <i class="fab fa-discord"></i>
             </div>
           </a>
-        <div class="button" tabindex="2" href="/settings" onclick="this.blur();">
+        <div class="icon-button" tabindex="2" href="/settings" onclick="this.blur();">
           <div class="icon">
             <i class="fas fa-fw fa-cog"></i>
           </div>
         </div>
-        <div class="button hidden account" tabindex="2" href="/account" onclick="this.blur();">
+        <div class="icon-button hidden account" tabindex="2" href="/account" onclick="this.blur();">
           <div class="icon">
             <i class="fas fa-fw fa-user"></i>
           </div>
           <div class="text"></div>
         </div>
-        <div class="button login" tabindex="2" href="/login" onclick="this.blur();">
+        <div class="icon-button login" tabindex="2" href="/login" onclick="this.blur();">
           <div class="icon">
             <i class="fas fa-fw fa-sign-in-alt"></i>
           </div>
@@ -127,42 +127,42 @@
         <div class="group punctuationMode">
           <!--           <div class="title">time</div> -->
           <div class="buttons">
-            <div class="button toggleButton" tabindex="2">punctuation</div>
+            <div class="text-button toggleButton" tabindex="2">punctuation</div>
           </div>
         </div>
         <div class="group mode">
           <!--           <div class="title">mode</div> -->
           <div class="buttons">
-            <div class="button active" mode="time" tabindex="2">time</div>
-            <div class="button" mode="words" tabindex="2">words</div>
-            <div class="button" mode="custom" tabindex="2">custom</div>
+            <div class="text-button active" mode="time" tabindex="2">time</div>
+            <div class="text-button" mode="words" tabindex="2">words</div>
+            <div class="text-button" mode="custom" tabindex="2">custom</div>
           </div>
         </div>
         <div class="group wordCount hidden">
           <!--           <div class="title">words</div> -->
           <div class="buttons">
-            <div class="button" wordCount="10" tabindex="2">10</div>
-            <div class="button" wordCount="25" tabindex="2">25</div>
-            <div class="button active" wordCount="50" tabindex="2">50</div>
-            <div class="button" wordCount="100" tabindex="2">100</div>
-            <div class="button" wordCount="200" tabindex="2">200</div>
-            <div class="button" wordCount="custom" tabindex="2"><i class="fas fa-tools"></i></div>
+            <div class="text-button" wordCount="10" tabindex="2">10</div>
+            <div class="text-button" wordCount="25" tabindex="2">25</div>
+            <div class="text-button active" wordCount="50" tabindex="2">50</div>
+            <div class="text-button" wordCount="100" tabindex="2">100</div>
+            <div class="text-button" wordCount="200" tabindex="2">200</div>
+            <div class="text-button" wordCount="custom" tabindex="2"><i class="fas fa-tools"></i></div>
           </div>
         </div>
         <div class="group time">
           <!--           <div class="title">time</div> -->
           <div class="buttons">
-            <div class="button" timeConfig="15" tabindex="2">15</div>
-            <div class="button" timeConfig="30" tabindex="2">30</div>
-            <div class="button active" timeConfig="60" tabindex="2">60</div>
-            <div class="button" timeConfig="120" tabindex="2">120</div>
-            <div class="button" timeConfig="custom" tabindex="2"><i class="fas fa-tools"></i></div>
+            <div class="text-button" timeConfig="15" tabindex="2">15</div>
+            <div class="text-button" timeConfig="30" tabindex="2">30</div>
+            <div class="text-button active" timeConfig="60" tabindex="2">60</div>
+            <div class="text-button" timeConfig="120" tabindex="2">120</div>
+            <div class="text-button" timeConfig="custom" tabindex="2"><i class="fas fa-tools"></i></div>
           </div>
         </div>
         <div class="group customText hidden">
           <!--           <div class="title">time</div> -->
           <div class="buttons">
-            <div class="button">change</div>
+            <div class="text-button">change</div>
           </div>
         </div>
 
diff --git a/public/js/account.js b/public/js/account.js
index 293b44bcf..ff279cb0a 100644
--- a/public/js/account.js
+++ b/public/js/account.js
@@ -113,7 +113,7 @@ function signUp() {
         }).then(function() {
           // Update successful.
           showNotification("Account created", 2000);
-          $("#menu .button.account .text").text(nname);
+          $("#menu .icon-button.account .text").text(nname);
           try{
             firebase.analytics().logEvent("accountCreated", usr.uid);
           }catch(e){
@@ -212,7 +212,7 @@ firebase.auth().onAuthStateChanged(function(user) {
     // showNotification('Signed in', 1000);
     $(".pageLogin .preloader").addClass('hidden');
     if(!dontCheckUserName) verifyUsername();
-    $("#menu .button.account .text").text(displayName);
+    $("#menu .icon-button.account .text").text(displayName);
   }
 });
 
diff --git a/public/js/script.js b/public/js/script.js
index 3cdfc4d24..6e1a3a6ae 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -1217,8 +1217,8 @@ function changePage(page) {
 
 function changeMode(mode,nosave) {
   config.mode = mode;
-  $("#top .config .mode .button").removeClass("active");
-  $("#top .config .mode .button[mode='" + mode + "']").addClass("active");
+  $("#top .config .mode .text-button").removeClass("active");
+  $("#top .config .mode .text-button[mode='" + mode + "']").addClass("active");
   if (config.mode == "time") {
     $("#top .config .wordCount").addClass("hidden");
     $("#top .config .time").removeClass("hidden");
@@ -1323,13 +1323,13 @@ function clearIntervals() {
 
 function updateAccountLoginButton() {
   if (firebase.auth().currentUser != null) {
-    swapElements($("#menu .button.login"), $("#menu .button.account"), 250);
-    // $("#menu .button.account").removeClass('hidden');
-    // $("#menu .button.login").addClass('hidden');
+    swapElements($("#menu .icon-button.login"), $("#menu .icon-button.account"), 250);
+    // $("#menu .icon-button.account").removeClass('hidden');
+    // $("#menu .icon-button.login").addClass('hidden');
   } else {
-    swapElements($("#menu .button.account"), $("#menu .button.login"), 250);
-    // $("#menu .button.login").removeClass('hidden');
-    // $("#menu .button.account").addClass('hidden');
+    swapElements($("#menu .icon-button.account"), $("#menu .icon-button.login"), 250);
+    // $("#menu .icon-button.login").removeClass('hidden');
+    // $("#menu .icon-button.account").addClass('hidden');
   }
 }
 
@@ -1590,7 +1590,7 @@ $(document).on("click", "#top .logo", (e) => {
   changePage('test');
 });
 
-$(document).on("click", "#top .config .wordCount .button", (e) => {
+$(document).on("click", "#top .config .wordCount .text-button", (e) => {
   wrd = $(e.currentTarget).attr('wordCount');
   if(wrd == "custom"){
     let newWrd = prompt('Custom word amount');
@@ -1603,7 +1603,7 @@ $(document).on("click", "#top .config .wordCount .button", (e) => {
   restartTest();
 });
 
-$(document).on("click", "#top .config .time .button", (e) => {
+$(document).on("click", "#top .config .time .text-button", (e) => {
   time = $(e.currentTarget).attr('timeConfig');
   if(time == "custom"){
     let newTime = prompt('Custom time in seconds');
@@ -1616,13 +1616,13 @@ $(document).on("click", "#top .config .time .button", (e) => {
   restartTest();
 });
 
-$(document).on("click", "#top .config .customText .button", (e) => {
+$(document).on("click", "#top .config .customText .text-button", (e) => {
   changeCustomText();
   restartTest();
 
 });
 
-$(document).on("click", "#top .config .punctuationMode .button", (e) => {
+$(document).on("click", "#top .config .punctuationMode .text-button", (e) => {
   togglePunctuation();
   restartTest();
 });
@@ -1631,14 +1631,14 @@ $("#words").click((e) => {
   focusWords();
 });
 
-$(document).on("click", "#top .config .mode .button", (e) => {
+$(document).on("click", "#top .config .mode .text-button", (e) => {
   if ($(e.currentTarget).hasClass("active")) return;
   mode = e.currentTarget.innerHTML;
   changeMode(mode);
   restartTest();
 });
 
-$(document).on("click", "#top #menu .button", (e) => {
+$(document).on("click", "#top #menu .icon-button", (e) => {
   if($(e.currentTarget).hasClass('discord')) return;
   href = $(e.currentTarget).attr('href');
   changePage(href.replace('/', ''));
diff --git a/public/js/settings.js b/public/js/settings.js
index 7e8d051cf..856f65bc2 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -475,15 +475,17 @@ $(".tab").click(e => {
         if($target.attr("tab") == "preset") {
             setCustomTheme(false)
             $('[tabContent="custom"]').removeClass("reveal")
-            setTimeout(() => {
-                $('[tabContent="preset"]').addClass("reveal")
-            }, 150);
+            $('[tabContent="preset"]').addClass("reveal")
+
+            // setTimeout(() => {
+            // }, 0);
         } else {
             setCustomTheme(true)
             $('[tabContent="preset"]').removeClass("reveal")
-            setTimeout(() => {
-                $('[tabContent="custom"]').addClass("reveal")
-            }, 150);
+            $('[tabContent="custom"]').addClass("reveal")
+
+            // setTimeout(() => {
+            // }, 0);
         }
 })
 
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
index ac8094d79..4aca731d8 100644
--- a/public/js/userconfig.js
+++ b/public/js/userconfig.js
@@ -314,11 +314,11 @@ function changeTimeConfig(time, nosave) {
     time = parseInt(time);
     changeMode("time",nosave);
     config.time = time;
-    $("#top .config .time .button").removeClass("active");
+    $("#top .config .time .text-button").removeClass("active");
     if(![15,30,60,120].includes(time)){
         time = "custom";
     }
-    $("#top .config .time .button[timeConfig='" + time + "']").addClass("active");
+    $("#top .config .time .text-button[timeConfig='" + time + "']").addClass("active");
     if(!nosave) saveConfigToCookie();
 }
 
@@ -326,11 +326,11 @@ function changeWordCount(wordCount, nosave) {
     wordCount = parseInt(wordCount);
     changeMode("words", nosave);
     config.words = wordCount;
-    $("#top .config .wordCount .button").removeClass("active");
+    $("#top .config .wordCount .text-button").removeClass("active");
     if(![10,25,50,100,200].includes(wordCount)){
         wordCount = "custom";
     }
-    $("#top .config .wordCount .button[wordCount='" + wordCount + "']").addClass(
+    $("#top .config .wordCount .text-button[wordCount='" + wordCount + "']").addClass(
         "active"
     );
     if(!nosave) saveConfigToCookie();
@@ -388,18 +388,18 @@ function toggleQuickTabMode() {
 function setPunctuation(punc, nosave) {
     config.punctuation = punc;
     if (!config.punctuation) {
-        $("#top .config .punctuationMode .button").removeClass("active");
+        $("#top .config .punctuationMode .text-button").removeClass("active");
     } else {
-        $("#top .config .punctuationMode .button").addClass("active");
+        $("#top .config .punctuationMode .text-button").addClass("active");
     }
     if(!nosave) saveConfigToCookie();
 }
 
 function togglePunctuation() {
     if (config.punctuation) {
-        $("#top .config .punctuationMode .button").removeClass("active");
+        $("#top .config .punctuationMode .text-button").removeClass("active");
     } else {
-        $("#top .config .punctuationMode .button").addClass("active");
+        $("#top .config .punctuationMode .text-button").addClass("active");
     }
     config.punctuation = !config.punctuation;
     saveConfigToCookie();
diff --git a/public/themes/9009.css b/public/themes/9009.css
index db9437362..4d98de95b 100644
--- a/public/themes/9009.css
+++ b/public/themes/9009.css
@@ -27,14 +27,14 @@ key{
   background-color: var(--main-color);
 }
 
-#menu .button{
+#menu .icon-button{
   color: var(--main-color);
 }
 
-#menu .button:nth-child(1){
+#menu .icon-button:nth-child(1){
   color: var(--error-color);
 }
 
-#menu .button:nth-child(4){
+#menu .icon-button:nth-child(4){
   color: var(--caret-color);
 }
diff --git a/public/themes/bingsu.css b/public/themes/bingsu.css
index 9a2c7f5ef..97848f6e2 100644
--- a/public/themes/bingsu.css
+++ b/public/themes/bingsu.css
@@ -15,6 +15,6 @@
   border-bottom: double 4px var(--error-color);
 } */
 
-#menu .button:nth-child(1){
+#menu .icon-button:nth-child(1){
   color: var(--caret-color);
 }
diff --git a/public/themes/dots.css b/public/themes/dots.css
index f05cc7ab7..62be34f42 100644
--- a/public/themes/dots.css
+++ b/public/themes/dots.css
@@ -14,14 +14,14 @@
     gap: .5rem;
 }
 
-#top.focus #menu .button,
+#top.focus #menu .icon-button,
 #top.focus #menu:before,
 #top.focus #menu:after
 {
     background: var(--sub-color);
 }
 
-#menu .button{
+#menu .icon-button{
     border-radius: 10rem !important;
     color: #121520;
 }
@@ -35,23 +35,23 @@
     border-radius: 10rem;
 } */
 
-#menu .button:nth-child(1){
+#menu .icon-button:nth-child(1){
     background: #f94348;
 }
 
-#menu .button:nth-child(2){
+#menu .icon-button:nth-child(2){
     background: #9261ff;
 }
 
-#menu .button:nth-child(3){
+#menu .icon-button:nth-child(3){
     background: #3cc5f8;
 }
 
-#menu .button:nth-child(4){
+#menu .icon-button:nth-child(4){
     background: #4acb8a;
 }
 
-#menu .button:nth-child(5), #menu .button:nth-child(6){
+#menu .icon-button:nth-child(5), #menu .icon-button:nth-child(6){
     background: #ffd543;
 }
 
@@ -64,6 +64,6 @@
     border-radius: 10rem;
 }
 
-#top.focus #menu .button.discord::after{
+#top.focus #menu .icon-button.discord::after{
     border-color: transparent;
   }
\ No newline at end of file
diff --git a/public/themes/dracula.css b/public/themes/dracula.css
index 1d39799c5..6751ddbc4 100644
--- a/public/themes/dracula.css
+++ b/public/themes/dracula.css
@@ -11,26 +11,26 @@
 }
 
 
-#menu .button:nth-child(1){
+#menu .icon-button:nth-child(1){
   color: #ec75c4;
 }
 
-#menu .button:nth-child(2){
+#menu .icon-button:nth-child(2){
   color: #8be9fd;
 }
 
-#menu .button:nth-child(3){
+#menu .icon-button:nth-child(3){
   color: #50fa7b;
 }
 
-#menu .button:nth-child(4){
+#menu .icon-button:nth-child(4){
   color: #f1fa8c;
 }
 
-#menu .button:nth-child(5){
+#menu .icon-button:nth-child(5){
   color: #ffb86c;
 }
 
-#menu .button:nth-child(6){
+#menu .icon-button:nth-child(6){
   color: #ffb86c;
 }
\ No newline at end of file
diff --git a/public/themes/mr_sleeves.css b/public/themes/mr_sleeves.css
index 099650b20..b4fb201f0 100644
--- a/public/themes/mr_sleeves.css
+++ b/public/themes/mr_sleeves.css
@@ -14,24 +14,24 @@
     color: #8fadc9;
 }
 
-#top .config .group .buttons .button.active{
+#top .config .group .buttons .text-button.active{
     color: #daa99b;
 } 
 
 
-/* #menu .button:nth-child(1){
+/* #menu .icon-button:nth-child(1){
     color: #daa99b;
 }
 
-#menu .button:nth-child(2){
+#menu .icon-button:nth-child(2){
     color: #daa99b;
 }
 
-#menu .button:nth-child(3){
+#menu .icon-button:nth-child(3){
     color: #8fadc9;
 }
 
-#menu .button:nth-child(4),
-#menu .button:nth-child(5){
+#menu .icon-button:nth-child(4),
+#menu .icon-button:nth-child(5){
     color: #8fadc9;
 } */
\ No newline at end of file
diff --git a/public/themes/oblivion.css b/public/themes/oblivion.css
index a4541fba9..2c06a7556 100644
--- a/public/themes/oblivion.css
+++ b/public/themes/oblivion.css
@@ -10,23 +10,23 @@
     --colorful-error-extra-color: #9e3423;
 }
 
-#menu .button:nth-child(1){
+#menu .icon-button:nth-child(1){
     color: #9a90b4;
 }
 
-#menu .button:nth-child(2){
+#menu .icon-button:nth-child(2){
     color: #8db14b;
 }
 
-#menu .button:nth-child(3){
+#menu .icon-button:nth-child(3){
     color: #fca321;
 }
 
-#menu .button:nth-child(4){
+#menu .icon-button:nth-child(4){
     color: #2984a5;
 }
 
-#menu .button:nth-child(5),
-#menu .button:nth-child(6){
+#menu .icon-button:nth-child(5),
+#menu .icon-button:nth-child(6){
     color: #dd452e;
 }
\ No newline at end of file
diff --git a/public/themes/rgb.css b/public/themes/rgb.css
index 6a5430058..4e2ffd4af 100644
--- a/public/themes/rgb.css
+++ b/public/themes/rgb.css
@@ -65,10 +65,10 @@
 }
 
 .logo .bottom,
-#top .config .group .buttons .button.active,
+#top .config .group .buttons .text-button.active,
 #result .stats .group .bottom,
-#menu .button:hover,
-#top .config .group .buttons .button:hover,
+#menu .icon-button:hover,
+#top .config .group .buttons .text-button:hover,
 a:hover,
 #words.flipped .word{
     animation-name: rgb;
diff --git a/public/themes/shadow.css b/public/themes/shadow.css
index e50b49c0e..280bc57c2 100644
--- a/public/themes/shadow.css
+++ b/public/themes/shadow.css
@@ -29,10 +29,10 @@
     color: white;
 }
 
-#top .config .group .buttons .button.active,
+#top .config .group .buttons .text-button.active,
 #result .stats .group,
-#menu .button:hover,
-#top .config .group .buttons .button:hover,
+#menu .icon-button:hover,
+#top .config .group .buttons .text-button:hover,
 a:hover {
     animation-name: shadow-repeat;
     animation-duration: 3s;
diff --git a/public/themes/taro.css b/public/themes/taro.css
index 99083b5fb..6aa3a20c4 100644
--- a/public/themes/taro.css
+++ b/public/themes/taro.css
@@ -15,12 +15,12 @@
   border-bottom: dotted 2px var(--text-color);
 }
 
-#menu .button:nth-child(1){
+#menu .icon-button:nth-child(1){
   background: var(--caret-color);
   border-radius: 50%;
 }
 
-#menu .button:nth-child(2){
+#menu .icon-button:nth-child(2){
   background: var(--error-color);
   border-radius: 50%;
 }