From d7dcaf05339ede48dddcf975b5802660d76399c5 Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Tue, 23 Aug 2022 13:14:28 +0200
Subject: [PATCH] enabling and disabling punctuation and numbers buttons as
 needed

---
 frontend/src/styles/test.scss        |  4 ++++
 frontend/src/ts/test/test-config.ts  | 16 ++++++++--------
 frontend/static/html/pages/test.html |  6 ++----
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 7c4671ac9..e37db4fa4 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -990,6 +990,7 @@
   height: max-content;
   width: 100%;
   justify-content: space-around;
+  transition: 0.125s;
   .row {
     display: flex;
     padding: 0.25rem 1rem;
@@ -1004,6 +1005,9 @@
     background: var(--bg-color);
     margin: auto 1rem;
   }
+  .textButton {
+    transition: 0.125s;
+  }
 }
 
 .pageTest {
diff --git a/frontend/src/ts/test/test-config.ts b/frontend/src/ts/test/test-config.ts
index 3265fd343..f0677b3a9 100644
--- a/frontend/src/ts/test/test-config.ts
+++ b/frontend/src/ts/test/test-config.ts
@@ -51,17 +51,17 @@ export function update(
   $("#testConfig .mode.textButton[mode='" + current + "']").addClass("active");
 
   if (current == "time") {
-    $("#top .config .punctuationMode").removeClass("disabled");
-    $("#top .config .numbersMode").removeClass("disabled");
+    $("#testConfig .punctuationMode").removeClass("disabled");
+    $("#testConfig .numbersMode").removeClass("disabled");
   } else if (current == "words") {
-    $("#top .config .punctuationMode").removeClass("disabled");
-    $("#top .config .numbersMode").removeClass("disabled");
+    $("#testConfig .punctuationMode").removeClass("disabled");
+    $("#testConfig .numbersMode").removeClass("disabled");
   } else if (current == "custom") {
-    $("#top .config .punctuationMode").removeClass("disabled");
-    $("#top .config .numbersMode").removeClass("disabled");
+    $("#testConfig .punctuationMode").removeClass("disabled");
+    $("#testConfig .numbersMode").removeClass("disabled");
   } else if (current == "quote") {
-    $("#top .config .punctuationMode").addClass("disabled");
-    $("#top .config .numbersMode").addClass("disabled");
+    $("#testConfig .punctuationMode").addClass("disabled");
+    $("#testConfig .numbersMode").addClass("disabled");
   } else if (current == "zen") {
     //
   }
diff --git a/frontend/static/html/pages/test.html b/frontend/static/html/pages/test.html
index 145baa241..3b088f51e 100644
--- a/frontend/static/html/pages/test.html
+++ b/frontend/static/html/pages/test.html
@@ -1,9 +1,8 @@
 <div class="page pageTest hidden">
   <div id="testConfig">
     <div class="row">
-      <div class="textButton">
+      <div class="textButton punctuationMode">
         <span
-          class="punc"
           style="
             font-weight: 900;
             width: 1.25rem;
@@ -16,9 +15,8 @@
         </span>
         punctuation
       </div>
-      <div class="textButton">
+      <div class="textButton numbersMode">
         <span
-          class="punc"
           style="
             font-weight: 900;
             width: 1.25rem;