From 7a1f2ce5ed669497d98680366484e0d6608c55d1 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 19 Sep 2023 17:38:41 +0100
Subject: [PATCH] style: rework button styling

---
 frontend/src/styles/buttons.scss         | 79 +++++++++++++++++-------
 frontend/src/styles/settings.scss        | 15 +----
 frontend/static/html/pages/settings.html |  8 ++-
 3 files changed, 66 insertions(+), 36 deletions(-)

diff --git a/frontend/src/styles/buttons.scss b/frontend/src/styles/buttons.scss
index e36b045ef..7d78eaf88 100644
--- a/frontend/src/styles/buttons.scss
+++ b/frontend/src/styles/buttons.scss
@@ -1,8 +1,30 @@
-a.button {
+a.button,
+a.textButton {
   text-decoration: none;
 }
 
-.button {
+button,
+.button,
+.textButton {
+  .fas,
+  .far,
+  .fab {
+    line-height: 1.25;
+  }
+  &.fullWidth {
+    width: 100%;
+  }
+  &.circle {
+    border-radius: 100%;
+  }
+}
+
+button,
+.button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  text-align: center;
   color: var(--text-color);
   cursor: pointer;
   transition: background 0.125s, color 0.125s;
@@ -15,11 +37,20 @@ a.button {
   align-content: center;
   height: -moz-min-content;
   height: min-content;
-  line-height: 1.25em;
+  line-height: 1.25;
   appearance: none;
   border: none;
   font-family: inherit;
   font-size: 1em;
+  display: inline-flex;
+  gap: 0.5em;
+  align-items: baseline;
+  justify-content: center;
+
+  &.danger {
+    background: var(--error-color);
+    color: var(--bg-color);
+  }
 
   &.active {
     background: var(--main-color);
@@ -33,9 +64,9 @@ a.button {
     }
   }
 
+  &[disabled],
   &.disabled {
     opacity: 0.33;
-    cursor: default;
     pointer-events: none;
     &:hover {
       background: var(--text-color);
@@ -53,7 +84,7 @@ a.button {
     outline: none;
   }
   &:focus-visible {
-    box-shadow: 0 0 0 0.15em var(--text-color);
+    box-shadow: 0 0 0 0.1em var(--bg-color), 0 0 0 0.2em var(--text-color);
     outline: none;
   }
   &:active {
@@ -62,52 +93,53 @@ a.button {
   }
 }
 
+button.text,
+.button.text,
 .textButton {
   color: var(--sub-color);
   cursor: pointer;
   transition: background 0.125s, color 0.125s;
   padding: 0.5em;
   border-radius: var(--roundness);
+  background: none;
   text-align: center;
   -webkit-user-select: none;
   user-select: none;
   align-content: center;
   height: -moz-min-content;
   height: min-content;
-  line-height: 1.25em;
+  line-height: 1.25;
   appearance: none;
   border: none;
   font-family: inherit;
   font-size: 1em;
-  width: -moz-max-content;
-  width: max-content;
-  display: grid;
-  grid-auto-flow: column;
-  gap: 0.25em;
-  text-decoration: none;
+  display: inline-flex;
+  gap: 0.5em;
+  align-items: baseline;
+  justify-content: center;
 
-  .fas,
-  .far {
-    display: grid;
-    place-content: center center;
+  &.danger {
+    color: var(--error-color);
+    background: none;
   }
 
   &.active {
     color: var(--main-color);
+    background: none;
     &:hover {
       color: var(--text-color);
+      background: none;
     }
     &:active {
       color: var(--sub-color);
+      background: none;
     }
   }
 
+  &[disabled],
   &.disabled {
-    opacity: 0.33;
-    cursor: default;
-    pointer-events: none;
     &:hover {
-      background: var(--text-color);
+      color: var(--text-color);
       outline: none;
     }
     &:active {
@@ -118,12 +150,15 @@ a.button {
 
   &:hover {
     color: var(--text-color);
+    background: none;
+    outline: none;
   }
-  &:focus {
-    color: var(--text-color);
+  &:focus-visible {
+    box-shadow: 0 0 0 0.1em var(--text-color);
     outline: none;
   }
   &:active {
     color: var(--sub-color);
+    background: none;
   }
 }
diff --git a/frontend/src/styles/settings.scss b/frontend/src/styles/settings.scss
index 93ed0adb0..f858b2861 100644
--- a/frontend/src/styles/settings.scss
+++ b/frontend/src/styles/settings.scss
@@ -54,18 +54,9 @@
     row-gap: 0.5rem;
     align-items: center;
 
-    .button.danger {
-      box-shadow: 0 0 0 0.15em var(--error-color);
-      color: var(--text-color);
-      &:hover {
-        background: var(--text-color);
-        color: var(--bg-color);
-      }
-    }
-
     .inputAndButton {
       display: grid;
-      grid-template-columns: 8fr 1fr;
+      grid-template-columns: auto min-content;
       gap: 0.5rem;
       margin-bottom: 0.5rem;
 
@@ -263,7 +254,7 @@
       }
 
       .tag {
-        grid-template-columns: 6fr 1fr 1fr 1fr;
+        grid-template-columns: auto min-content min-content min-content;
         margin-bottom: 0.5rem;
       }
     }
@@ -274,7 +265,7 @@
       }
 
       .preset {
-        grid-template-columns: 7fr 1fr 1fr;
+        grid-template-columns: auto min-content min-content;
         margin-bottom: 0.5rem;
       }
     }
diff --git a/frontend/static/html/pages/settings.html b/frontend/static/html/pages/settings.html
index 9d46a5180..7d1eec965 100644
--- a/frontend/static/html/pages/settings.html
+++ b/frontend/static/html/pages/settings.html
@@ -101,7 +101,9 @@
             </div>
           </div>
         </div>
-        <div class="button addTagButton"><i class="fas fa-plus"></i></div>
+        <div class="button addTagButton fullWidth">
+          <i class="fas fa-plus"></i>
+        </div>
       </div>
     </div>
     <div class="section presets">
@@ -127,7 +129,9 @@
             </div>
           </div>
         </div>
-        <div class="button addPresetButton"><i class="fas fa-plus"></i></div>
+        <div class="button addPresetButton fullWidth">
+          <i class="fas fa-plus"></i>
+        </div>
       </div>
     </div>
     <div class="section">