fix(mantine): minor adjustments to the theme (#3532)

gdostie · web-flow · commit eab8605de2ea · 2023-09-05T13:21:28.000-04:00
* Hover color of NavLink is now gray[1] instead of gray[0]
* ScrollArea display block instead of display table
* Divider default color is now gray[3]  instead of gray[4]
* Navbar border color is now gray[3] instead of gray[2]
diff --git a/packages/mantine/src/theme/Theme.tsx b/packages/mantine/src/theme/Theme.tsx
@@ -379,6 +379,9 @@ export const plasmaTheme: MantineThemeOverride = {
                 root: {
                     color: theme.colors.gray[6],
                     borderRadius: `${theme.defaultRadius}px 0px 0px ${theme.defaultRadius}px`,
+                    ...theme.fn.hover({
+                        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
+                    }),
                 },
                 label: {
                     ref: getStylesRef('label'),
@@ -391,5 +394,29 @@ export const plasmaTheme: MantineThemeOverride = {
                 },
             }),
         },
+        Navbar: {
+            styles: (theme) => ({
+                root: {
+                    borderColor: theme.colors.gray[3],
+                },
+            }),
+        },
+        ScrollArea: {
+            styles: {
+                viewport: {
+                    // https://github.com/radix-ui/primitives/issues/926
+                    '&[data-radix-scroll-area-viewport]': {
+                        '& > :first-of-type': {
+                            display: 'block !important',
+                        },
+                    },
+                },
+            },
+        },
+        Divider: {
+            defaultProps: {
+                color: 'gray.3',
+            },
+        },
     },
 };
diff --git a/packages/website/src/pages/_app.tsx b/packages/website/src/pages/_app.tsx
@@ -27,7 +27,7 @@ import {EngineProvider} from '../search/engine/EngineProvider';
 import LegacyWarningBanner from '../building-blocs/LegacyWarningBanner';
 
 const Header = () => (
-    <MantineHeader height={100}>
+    <MantineHeader height={100} withBorder={false}>
         <Group
             position="apart"
             px="lg"
