From 746256c95d78cf71f0898d33b0ce8d14c0d8e116 Mon Sep 17 00:00:00 2001
From: dphuang2 <dylan@konfigthis.com>
Date: Sun, 8 Oct 2023 15:21:59 -0700
Subject: [PATCH] style section label better

---
 .../src/pages/[org]/[portal]/docs/[[...doc]].tsx       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/generator/konfig-next-app/src/pages/[org]/[portal]/docs/[[...doc]].tsx b/generator/konfig-next-app/src/pages/[org]/[portal]/docs/[[...doc]].tsx
index 5bf8ddfa7a..8b1d81e76c 100644
--- a/generator/konfig-next-app/src/pages/[org]/[portal]/docs/[[...doc]].tsx
+++ b/generator/konfig-next-app/src/pages/[org]/[portal]/docs/[[...doc]].tsx
@@ -37,6 +37,7 @@ import { proseContainerWidthStyles } from '@/utils/prose-container-width-styles'
 import { FlexCenter } from '@/components/FlexCenter'
 import { asideOffsetBreakpoint } from '@/utils/aside-offset-breakpoint'
 import { navbarOffsetBreakpoint } from '@/utils/navbar-offset-breakpoint'
+import { linkColor } from '@/utils/link-color'
 
 export const getStaticPaths: GetStaticPaths = async () => {
   return {
@@ -96,7 +97,7 @@ const DocumentationPage = observer(
     faviconLink,
     logo,
   }: InferGetServerSidePropsType<typeof getStaticProps>) => {
-    const { colors } = useMantineTheme()
+    const theme = useMantineTheme()
     const { colorScheme } = useMantineColorScheme()
 
     const [opened, setOpened] = useState(false)
@@ -148,7 +149,7 @@ const DocumentationPage = observer(
             colorScheme,
             ...generateMantineThemeColors({
               primaryColor: konfigYaml.portal?.primaryColor,
-              colors,
+              colors: theme.colors,
             }),
             primaryColor: 'brand',
           }}
@@ -156,7 +157,8 @@ const DocumentationPage = observer(
           <AppShell
             styles={{
               main: {
-                background: colorScheme === 'dark' ? colors.dark[8] : undefined,
+                background:
+                  colorScheme === 'dark' ? theme.colors.dark[8] : undefined,
               },
             }}
             navbarOffsetBreakpoint={navbarOffsetBreakpoint}
@@ -184,7 +186,7 @@ const DocumentationPage = observer(
                           weight="bold"
                           fz="0.7rem"
                           style={{ textTransform: 'uppercase' }}
-                          color="dimmed"
+                          color={linkColor({ theme })}
                         >
                           {section.label}
                         </Text>