From 2f120d2572b5ab8cb8173a12eafe1cdbb9f7d509 Mon Sep 17 00:00:00 2001
From: Shubham Padia <shubham@zulip.com>
Date: Mon, 2 Sep 2024 09:22:01 +0000
Subject: [PATCH] settings: Make show more tab look similar to other tabs.

Fixes https://chat.zulip.org/#narrow/stream/101-design/topic/org.20settings.20-.20show.20more.20-.20icon.20alignment/near/1935512
Also renames `.collapse-settings-btn` to `.collapse-settings-button`.
---
 web/src/click_handlers.js          |  2 +-
 web/styles/dark_theme.css          |  2 +-
 web/styles/settings.css            | 25 ++++++++++---------------
 web/templates/settings_overlay.hbs |  8 ++++----
 4 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/web/src/click_handlers.js b/web/src/click_handlers.js
index 2f76901ea5..50dc5277cd 100644
--- a/web/src/click_handlers.js
+++ b/web/src/click_handlers.js
@@ -639,7 +639,7 @@ export function initialize() {
         server_events.restart_get_events({dont_block: true});
     });
 
-    $("#settings_page").on("click", ".collapse-settings-btn", () => {
+    $("#settings_page").on("click", ".collapse-settings-button", () => {
         settings_toggle.toggle_org_setting_collapse();
     });
 
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index d2ebbd6ed5..eaf5930999 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -911,7 +911,7 @@
         box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 33%);
     }
 
-    .collapse-settings-btn:hover {
+    .collapse-settings-button:hover {
         color: hsl(200deg 79% 66%);
     }
 
diff --git a/web/styles/settings.css b/web/styles/settings.css
index feadadcd42..6bd9b13ebb 100644
--- a/web/styles/settings.css
+++ b/web/styles/settings.css
@@ -1390,6 +1390,16 @@ $option_title_width: 180px;
             }
         }
 
+        .collapse-settings-button,
+        .collapse-settings-button > #toggle_collapse_chevron {
+            color: var(--color-text-url);
+
+            &:hover {
+                cursor: pointer;
+                color: var(--color-text-url-hover);
+            }
+        }
+
         .org-settings-list {
             display: none;
         }
@@ -1682,21 +1692,6 @@ $option_title_width: 180px;
     display: inline-block;
 }
 
-.collapse-settings-btn {
-    margin: 10px 0 0 10px;
-    color: hsl(200deg 100% 40%);
-
-    &:hover {
-        cursor: pointer;
-        color: hsl(208deg 56% 38%);
-    }
-}
-
-#toggle_collapse {
-    margin-left: 2px;
-    display: inline-block;
-}
-
 .admin_exports_table {
     margin-bottom: 20px;
 }
diff --git a/web/templates/settings_overlay.hbs b/web/templates/settings_overlay.hbs
index 99c9c95267..cf3cbd5fcf 100644
--- a/web/templates/settings_overlay.hbs
+++ b/web/templates/settings_overlay.hbs
@@ -131,10 +131,10 @@
                     </li>
                     {{/if}}
                     {{#unless is_admin}}
-                    <div class="sidebar-item collapse-settings-btn">
-                        <i id='toggle_collapse_chevron' class='fa fa-angle-double-down'></i>
-                        <p id='toggle_collapse'>{{t "Show more" }}</p>
-                    </div>
+                    <li class="sidebar-item collapse-settings-button">
+                        <i id='toggle_collapse_chevron' class='icon fa fa-angle-double-down'></i>
+                        <div class="text" id='toggle_collapse'>{{t "Show more" }}</div>
+                    </li>
                     {{/unless}}
                 </ul>
             </div>