From e64c1948ed28c77c5b46e2f41935a0f6c998ecd0 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Thu, 1 Dec 2022 19:46:22 +0530
Subject: [PATCH] app_components: Refactor css for save-discard widget.

We change the CSS for save-discard widget to not be inside
"#settings_page" selector such that it can be used as a
common component for stream settings also.

This commit also updates the selectors to be more specific
such that the ".new-style.button" css cannot override
these rules.
---
 static/styles/app_components.css | 56 +++++++++++++++-----------------
 1 file changed, 27 insertions(+), 29 deletions(-)

diff --git a/static/styles/app_components.css b/static/styles/app_components.css
index 244b8ffdf3..aa7c0b2e8a 100644
--- a/static/styles/app_components.css
+++ b/static/styles/app_components.css
@@ -740,7 +740,14 @@ div.overlay {
     }
 }
 
-#settings_page {
+.save-button-controls {
+    display: inline;
+    margin-left: 15px;
+
+    &.hide {
+        display: none;
+    }
+
     .save-discard-widget-button {
         border-radius: 5px;
         border: 1px solid hsl(0, 0%, 80%);
@@ -785,6 +792,25 @@ div.overlay {
             }
         }
 
+        &.save-button {
+            margin-right: 5px;
+
+            .save-discard-widget-button-loading {
+                display: none;
+            }
+
+            &.saving {
+                .save-discard-widget-button-icon {
+                    display: none;
+                }
+
+                .save-discard-widget-button-loading {
+                    display: inline-block;
+                    margin-right: 2px;
+                }
+            }
+        }
+
         .save-discard-widget-button-icon {
             vertical-align: middle;
             margin-right: 3px;
@@ -797,32 +823,4 @@ div.overlay {
             line-height: 1;
         }
     }
-
-    .save-button-controls {
-        display: inline;
-        margin-left: 15px;
-
-        &.hide {
-            display: none;
-        }
-    }
-
-    .save-button {
-        margin-right: 5px;
-
-        .save-discard-widget-button-loading {
-            display: none;
-        }
-
-        &.saving {
-            .save-discard-widget-button-icon {
-                display: none;
-            }
-
-            .save-discard-widget-button-loading {
-                display: inline-block;
-                margin-right: 2px;
-            }
-        }
-    }
 }