From af066842b12004ca7813a684e14949dadcd401be Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Tue, 3 Sep 2024 11:44:35 -0500
Subject: [PATCH] components: Decouple .button from .new-style tangle.

---
 web/styles/app_components.css | 229 +++++++++++++++++-----------------
 web/styles/settings.css       |   8 --
 2 files changed, 114 insertions(+), 123 deletions(-)

diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 489bf16cdc..33939de832 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -109,52 +109,52 @@ input::placeholder {
     @extend .placeholder;
 }
 
-.new-style {
-    /* -- base button styling -- */
-    .button {
-        padding: 7px 14px;
-        margin: 0;
-        min-width: 130px;
+/* -- base button styling -- */
 
-        font-weight: 400;
-        line-height: normal;
-        text-align: center;
+.button {
+    padding: 7px 14px;
+    margin: 0;
+    min-width: 130px;
 
-        background-color: hsl(0deg 0% 100%);
-        color: inherit;
+    font-weight: 400;
+    line-height: normal;
+    text-align: center;
+
+    background-color: hsl(0deg 0% 100%);
+    color: inherit;
+    outline: none;
+    border: 1px solid hsl(0deg 0% 80%);
+    border-radius: 2px;
+
+    box-shadow: none;
+
+    cursor: pointer;
+
+    /* -- button style variations -- */
+    &.no-style {
+        padding: 0;
+        background-color: transparent;
+        border: none;
+        min-width: 0;
+        width: auto;
         outline: none;
-        border: 1px solid hsl(0deg 0% 80%);
-        border-radius: 2px;
+        box-shadow: none !important;
+    }
 
-        box-shadow: none;
+    &.rounded {
+        border-radius: 4px;
+    }
 
-        cursor: pointer;
+    &.green {
+        background-color: hsl(150deg 31% 53%);
+    }
 
-        /* -- button style variations -- */
-        &.no-style {
-            padding: 0;
-            background-color: transparent;
-            border: none;
-            min-width: 0;
-            width: auto;
-            outline: none;
-            box-shadow: none !important;
-        }
+    &.grey {
+        background-color: hsl(0deg 0% 67%);
+    }
 
-        &.rounded {
-            border-radius: 4px;
-        }
-
-        &.green {
-            background-color: hsl(150deg 31% 53%);
-        }
-
-        &.grey {
-            background-color: hsl(0deg 0% 67%);
-        }
-
-        &.small {
-            /* This value was 0.8rem in the past. When using rem,
+    &.small {
+        /* This value was 0.8rem in the past. When using rem,
                the root font size was 16px when the base font-size was
                14px. Now, we have two modes, one with 14px base
                font-size and one with 16px base font-size. We multiply
@@ -165,100 +165,99 @@ input::placeholder {
                TODO: Refactor this part to either use `em` or `rem`
                and not this temporary hack of using calc() and
                variables. */
-            font-size: calc(0.9143 * var(--base-font-size-px));
-            min-width: inherit;
-            padding: 6px 10px;
+        font-size: calc(0.9143 * var(--base-font-size-px));
+        min-width: inherit;
+        padding: 6px 10px;
+    }
+
+    &:hover,
+    &:focus {
+        border-color: hsl(0deg 0% 60%);
+    }
+
+    &:active {
+        border-color: hsl(0deg 0% 60%);
+        color: inherit;
+        background-color: hsl(0deg 0% 95%);
+    }
+
+    &.add-subscription-button {
+        &:focus-visible {
+            border: 1px solid;
+            border-color: var(
+                --color-border-add-subscription-button-focus
+            ) !important;
         }
+    }
+
+    &.sea-green {
+        color: hsl(156deg 41% 40%);
+        border-color: hsl(156deg 28% 70%);
 
         &:hover,
         &:focus {
-            border-color: hsl(0deg 0% 60%);
+            border-color: hsl(156deg 30% 50%);
         }
 
         &:active {
-            border-color: hsl(0deg 0% 60%);
-            color: inherit;
-            background-color: hsl(0deg 0% 95%);
+            border-color: hsl(156deg 30% 40%);
+            color: hsl(156deg 44% 43%);
+            background-color: hsl(154deg 33% 96%);
+        }
+    }
+
+    &.btn-warning {
+        color: hsl(35deg 70% 56%);
+        border-color: hsl(35deg 98% 84%);
+
+        &:hover,
+        &:focus {
+            border-color: hsl(35deg 55% 70%);
         }
 
-        &.add-subscription-button {
-            &:focus-visible {
-                border: 1px solid;
-                border-color: var(
-                    --color-border-add-subscription-button-focus
-                ) !important;
-            }
+        &:active {
+            color: hsl(35deg 82% 40%);
+            border-color: hsl(35deg 55% 70%);
+            background-color: hsl(33deg 48% 96%);
+        }
+    }
+
+    &.btn-danger {
+        color: hsl(357deg 64% 72%);
+        border-color: hsl(4deg 56% 82%);
+
+        &:hover,
+        &:focus {
+            border-color: hsl(2deg 46% 68%);
         }
 
-        &.sea-green {
-            color: hsl(156deg 41% 40%);
-            border-color: hsl(156deg 28% 70%);
-
-            &:hover,
-            &:focus {
-                border-color: hsl(156deg 30% 50%);
-            }
-
-            &:active {
-                border-color: hsl(156deg 30% 40%);
-                color: hsl(156deg 44% 43%);
-                background-color: hsl(154deg 33% 96%);
-            }
+        &:active {
+            color: hsl(357deg 55% 63%);
+            border-color: hsl(2deg 46% 68%);
+            background-color: hsl(7deg 82% 98%);
         }
+    }
 
-        &.btn-warning {
-            color: hsl(35deg 70% 56%);
-            border-color: hsl(35deg 98% 84%);
+    &.btn-link {
+        color: hsl(208deg 56% 53%);
+        text-decoration: none;
 
-            &:hover,
-            &:focus {
-                border-color: hsl(35deg 55% 70%);
-            }
-
-            &:active {
-                color: hsl(35deg 82% 40%);
-                border-color: hsl(35deg 55% 70%);
-                background-color: hsl(33deg 48% 96%);
-            }
+        &:hover,
+        &:focus {
+            color: hsl(208deg 56% 38%);
         }
+    }
 
-        &.btn-danger {
-            color: hsl(357deg 64% 72%);
-            border-color: hsl(4deg 56% 82%);
+    &:disabled {
+        cursor: not-allowed;
+        filter: saturate(0);
+        background-color: hsl(0deg 0% 93%);
+        color: hsl(0deg 3% 52%);
 
-            &:hover,
-            &:focus {
-                border-color: hsl(2deg 46% 68%);
-            }
-
-            &:active {
-                color: hsl(357deg 55% 63%);
-                border-color: hsl(2deg 46% 68%);
-                background-color: hsl(7deg 82% 98%);
-            }
-        }
-
-        &.btn-link {
-            color: hsl(208deg 56% 53%);
-            text-decoration: none;
-
-            &:hover,
-            &:focus {
-                color: hsl(208deg 56% 38%);
-            }
-        }
-
-        &:disabled {
-            cursor: not-allowed;
-            filter: saturate(0);
+        &:hover {
             background-color: hsl(0deg 0% 93%);
-            color: hsl(0deg 3% 52%);
-
-            &:hover {
-                background-color: hsl(0deg 0% 93%);
-                color: hsl(156deg 39% 54%);
-                border-color: hsl(156deg 39% 77%);
-            }
+            color: hsl(156deg 39% 54%);
+            border-color: hsl(156deg 39% 77%);
         }
     }
 }
diff --git a/web/styles/settings.css b/web/styles/settings.css
index d8792e1271..49448535d7 100644
--- a/web/styles/settings.css
+++ b/web/styles/settings.css
@@ -193,11 +193,6 @@ h3,
     }
 }
 
-td .button {
-    margin: 2px 0;
-    box-shadow: none;
-}
-
 #language_selection_modal {
     & table {
         width: 90%;
@@ -347,12 +342,9 @@ select.settings_select {
     word-break: normal;
 }
 
-.button,
 .input-group {
     margin: 0 0 20px;
-}
 
-.input-group {
     /* Class to use when the following input-group is related and should
        appear just after this element. Normally the margin is 20px, but
        for related settings, we set it to 10px. */