Fix tabs styling in settings dialog

Custom styling should only apply to server tabs and details tabs Issue #188
openscopeproject · Apr 20, 2024 · 674a005 · 674a005
1 parent 5ed72be
commit 674a005
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/src/components/details.tsx b/src/components/details.tsx
@@ -446,7 +446,19 @@ function Details(props: DetailsProps) {
 
     return (
         <Tabs variant="outline" defaultValue={defaultTab} keepMounted={false}
-            h="100%" w="100%" sx={{ display: "flex", flexDirection: "column" }}>
+            h="100%" w="100%"
+            styles={((theme) => ({
+                root: {
+                    display: "flex",
+                    flexDirection: "column",
+                },
+                tab: {
+                    borderColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2],
+                    "&[data-active]": {
+                        borderColor: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5],
+                    },
+                },
+            }))}>
             <Tabs.List px="sm" pt="xs" onContextMenu={handler}>
                 <MemoSectionsContextMenu
                     sections={tabs} setSections={setTabs}

diff --git a/src/components/mantinetheme.tsx b/src/components/mantinetheme.tsx
@@ -39,16 +39,6 @@ const Theme: (colorScheme: ColorScheme, font?: string) => MantineThemeOverride =
                 },
             },
         },
-        Tabs: {
-            styles: (theme) => ({
-                tab: {
-                    borderColor: colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2],
-                    "&[data-active]": {
-                        borderColor: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5],
-                    },
-                },
-            }),
-        },
         Checkbox: {
             styles: {
                 input: {

diff --git a/src/components/servertabs.tsx b/src/components/servertabs.tsx
@@ -157,6 +157,10 @@ export const ServerTabs = React.forwardRef<ServerTabsRef, ServerTabsProps>(funct
                 tab: {
                     flexBasis: "12rem",
                     flexShrink: 1,
+                    borderColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2],
+                    "&[data-active]": {
+                        borderColor: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5],
+                    },
                 },
                 tabLabel: {
                     marginInline: "auto",