settings-ui: Change <select> style using custom chevron-down icon.

Align the `dropdown-widget` and `<select>` UIs. Removed default `<select>` tag styles with `appearance: none` css. Added custom chevron-down icon with `background-image` attribute to the `<select>` tag. The svg icon is used in a CSS variable with a data URI. The CSS variable is used to set different colors for dark and light theme. Tweaked by tabbott to scope selectors appropriately and also delete a 10px font-size in one settings dropdown widget. Fixes zulip#26859.
prakhar1144 · Nov 8, 2023 · f2deb8d · f2deb8d
1 parent 0c1f340
commit f2deb8d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/web/styles/settings.css b/web/styles/settings.css
@@ -377,6 +377,17 @@ td .button {
     }
 }
 
+/* For consistent custom select dropdowns that match with dropdown-widget */
+select.modal_select,
+select.list_select,
+select.settings_select {
+    appearance: none;
+    background-image: var(--icon-chevron-down);
+    background-repeat: no-repeat;
+    background-position: 98%;
+    background-size: 14px;
+}
+
 #admin-user-list,
 #admin-bot-list {
     .table tr:first-of-type td {
@@ -815,11 +826,6 @@ input[type="checkbox"] {
         width: 325px;
         color: hsl(0deg 0% 33%);
 
-        & i {
-            font-size: 10px;
-            margin-right: -3px;
-        }
-
         &:disabled {
             cursor: not-allowed;
             background-color: hsl(0deg 0% 93%);

diff --git a/web/styles/zulip.css b/web/styles/zulip.css
@@ -363,6 +363,7 @@ body {
     );
     --color-fill-hover-copy-icon: hsl(200deg 100% 40%);
     --color-fill-user-invite-copy-icon: hsl(0deg 0% 46.7%);
+    --icon-chevron-down: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z' fill='%23333333'/%3E%3C/svg%3E%0A");
 }
 
 %dark-theme {
@@ -544,6 +545,7 @@ body {
         hsl(0deg 0% 13%)
     );
     --color-fill-user-invite-copy-icon: hsl(236deg 33% 90%);
+    --icon-chevron-down: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z' fill='%23FFFFFFBF'/%3E%3C/svg%3E%0A");
 }
 
 @media screen {