From 1ad7bfb82fdb0f467dad659cc74a84153a46f8df Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Thu, 25 Apr 2024 14:43:21 +0500
Subject: [PATCH] web: fix settings dialog side bar transparent from bottom

---
 apps/web/src/dialogs/settings/index.tsx | 183 ++++++++++++------------
 1 file changed, 90 insertions(+), 93 deletions(-)

diff --git a/apps/web/src/dialogs/settings/index.tsx b/apps/web/src/dialogs/settings/index.tsx
index 59cda33f4..4e6d94796 100644
--- a/apps/web/src/dialogs/settings/index.tsx
+++ b/apps/web/src/dialogs/settings/index.tsx
@@ -236,109 +236,106 @@ function SettingsSideBar(props: SettingsSideBarProps) {
   return (
     <FlexScrollContainer
       id="settings-side-menu"
+      className="theme-scope-navigationMenu"
       style={{
         width: 240,
-        overflow: "auto"
+        overflow: "auto",
+        backgroundColor: "var(--background)"
       }}
       data-test-id="settings-navigation-menu"
     >
-      <ScopedThemeProvider scope="navigationMenu">
-        <Flex
+      <Flex
+        sx={{
+          flexDirection: "column",
+          display: "flex",
+          overflow: "hidden"
+        }}
+      >
+        <Input
+          id="search"
+          name="search"
+          placeholder="Search"
+          data-test-id="settings-search"
           sx={{
-            flexDirection: "column",
-            display: "flex",
-            overflow: "hidden",
-            backgroundColor: "background"
+            m: 2,
+            mb: 2,
+            width: "auto",
+            bg: "background",
+            py: "7px"
           }}
-        >
-          <Input
-            id="search"
-            name="search"
-            placeholder="Search"
-            data-test-id="settings-search"
-            sx={{
-              m: 2,
-              mb: 2,
-              width: "auto",
-              bg: "background",
-              py: "7px"
-            }}
-            onChange={(e) => {
-              const query = e.target.value.toLowerCase().trim();
-              if (!query)
-                return onNavigate(
-                  SettingsGroups.filter((g) => g.section === route)
-                );
+          onChange={(e) => {
+            const query = e.target.value.toLowerCase().trim();
+            if (!query)
+              return onNavigate(
+                SettingsGroups.filter((g) => g.section === route)
+              );
 
-              const groups: SettingsGroup[] = [];
-              for (const group of SettingsGroups) {
-                const isTitleMatch =
-                  typeof group.header === "string" &&
-                  group.header.toLowerCase().includes(query);
-                const isSectionMatch = group.section.includes(query);
+            const groups: SettingsGroup[] = [];
+            for (const group of SettingsGroups) {
+              const isTitleMatch =
+                typeof group.header === "string" &&
+                group.header.toLowerCase().includes(query);
+              const isSectionMatch = group.section.includes(query);
 
-                if (isTitleMatch || isSectionMatch) {
-                  groups.push(group);
-                  continue;
-                }
-
-                const settings = group.settings.filter((setting) => {
-                  const description =
-                    typeof setting.description === "function"
-                      ? setting.description()
-                      : setting.description;
-
-                  return [
-                    description || "",
-                    setting.keywords?.join(" ") || "",
-                    setting.title
-                  ]
-                    .join(" ")
-                    ?.toLowerCase()
-                    .includes(query);
-                });
-                if (!settings.length) continue;
-                groups.push({ ...group, settings });
+              if (isTitleMatch || isSectionMatch) {
+                groups.push(group);
+                continue;
               }
-              onNavigate(groups);
-            }}
-          />
-          {sectionGroups.map((group) => (
-            <Flex key={group.key} sx={{ flexDirection: "column", mb: 2 }}>
-              <Text
-                variant={"subBody"}
-                sx={{
-                  fontWeight: "bold",
-                  color: "paragraph",
-                  mx: 3,
-                  mb: 1
-                }}
-              >
-                {group.title}
-              </Text>
-              {group.sections.map(
-                (section) =>
-                  (!section.isHidden || !section.isHidden()) && (
-                    <NavigationItem
-                      key={section.key}
-                      icon={section.icon}
-                      title={section.title}
-                      selected={section.key === route}
-                      onClick={() => {
-                        onNavigate(
-                          SettingsGroups.filter(
-                            (g) => g.section === section.key
-                          )
-                        );
-                        setRoute(section.key);
-                      }}
-                    />
-                  )
-              )}
-            </Flex>
-          ))}
-        </Flex>
-      </ScopedThemeProvider>
+
+              const settings = group.settings.filter((setting) => {
+                const description =
+                  typeof setting.description === "function"
+                    ? setting.description()
+                    : setting.description;
+
+                return [
+                  description || "",
+                  setting.keywords?.join(" ") || "",
+                  setting.title
+                ]
+                  .join(" ")
+                  ?.toLowerCase()
+                  .includes(query);
+              });
+              if (!settings.length) continue;
+              groups.push({ ...group, settings });
+            }
+            onNavigate(groups);
+          }}
+        />
+        {sectionGroups.map((group) => (
+          <Flex key={group.key} sx={{ flexDirection: "column", mb: 2 }}>
+            <Text
+              variant={"subBody"}
+              sx={{
+                fontWeight: "bold",
+                color: "paragraph",
+                mx: 3,
+                mb: 1
+              }}
+            >
+              {group.title}
+            </Text>
+            {group.sections.map(
+              (section) =>
+                (!section.isHidden || !section.isHidden()) && (
+                  <NavigationItem
+                    key={section.key}
+                    icon={section.icon}
+                    title={section.title}
+                    selected={section.key === route}
+                    onClick={() => {
+                      onNavigate(
+                        SettingsGroups.filter((g) => g.section === section.key)
+                      );
+                      setRoute(section.key);
+                    }}
+                  />
+                )
+            )}
+          </Flex>
+        ))}
+      </Flex>
     </FlexScrollContainer>
   );
 }