web: fix navigation bar in settings dialog not themed

streetwriters · May 21, 2024 · 1d58cfe · 1d58cfe
1 parent c1fa4d3
commit 1d58cfe
Showing 1 changed file with 93 additions and 89 deletions.
diff --git a/apps/web/src/dialogs/settings/index.tsx b/apps/web/src/dialogs/settings/index.tsx
@@ -244,98 +244,102 @@ function SettingsSideBar(props: SettingsSideBarProps) {
       }}
       data-test-id="settings-navigation-menu"
     >
-      <Flex
-        sx={{
-          flexDirection: "column",
-          display: "flex",
-          overflow: "hidden"
-        }}
-      >
-        <Input
-          id="search"
-          name="search"
-          placeholder="Search"
-          data-test-id="settings-search"
+      <ScopedThemeProvider scope="navigationMenu" injectCssVars={false}>
+        <Flex
           sx={{
-            m: 2,
-            mb: 2,
-            width: "auto",
-            bg: "background",
-            py: "7px"
+            flexDirection: "column",
+            display: "flex",
+            overflow: "hidden"
           }}
-          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);
-
-              if (isTitleMatch || isSectionMatch) {
-                groups.push(group);
-                continue;
-              }
+        >
+          <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)
+                );
 
-              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>
+              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 });
+              }
+              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>
     </FlexScrollContainer>
   );
 }