From aed8ac96727362db57ffa904eb01b6f04d94c246 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Thu, 31 Oct 2024 09:26:53 +0530
Subject: [PATCH] settings: Fix disabled look for group settings pills UI.

We now have a grey-ish background color for the pill container
with opacity also reduced like we do for the disabled select
elements in settings.

Needed to adjust the selectors so that the CSS for disabled
state correctly overrides the CSS for enabled state.
---
 web/styles/subscriptions.css | 42 ++++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css
index b2a887c050..44f83bcf90 100644
--- a/web/styles/subscriptions.css
+++ b/web/styles/subscriptions.css
@@ -696,28 +696,34 @@ h4.user_group_setting_subsection_title {
     }
 }
 
-.group_setting_disabled {
-    cursor: not-allowed;
-    /* This ensures that we do not see the not allowed cursor in the
-       extra space of a div */
-    width: fit-content;
-
-    /* This specific rules are needed to override the default settings
-       of these elements */
-    .pill-container,
-    .group-setting-label {
+.org-permissions-form,
+.group-permissions {
+    .group_setting_disabled {
         cursor: not-allowed;
-    }
+        /* This ensures that we do not see the not allowed cursor in the
+           extra space of a div */
+        width: fit-content;
 
-    .pill-container {
-        .pill {
-            .exit {
-                display: none;
-            }
+        /* This specific rules are needed to override the default settings
+           of these elements */
+        .pill-container,
+        .group-setting-label {
+            cursor: not-allowed;
         }
 
-        .input {
-            pointer-events: none;
+        .pill-container {
+            background-color: hsl(0deg 0% 93%);
+            opacity: 0.7;
+
+            .pill {
+                .exit {
+                    display: none;
+                }
+            }
+
+            .input {
+                pointer-events: none;
+            }
         }
     }
 }