feat: fix theming issues

src/components/pages/login/ExternalAuthButton.module.css

@@ -0,0 +1,10 @@
+.button {
+  transition:
+    background-color 100ms ease,
+    color 300ms ease;
+}
+
+.button:hover {
+  background-color: var(--ai-hover);
+  color: var(--ai-hover-color);
+}

src/components/pages/login/ExternalAuthButton.tsx

@@ -1,56 +1,26 @@
-import {
+import { ActionIcon, Tooltip } from '@mantine/core';
-  ActionIcon,
-  lighten,
-  MantineProvider,
-  parseThemeColor,
-  rgba,
-  Tooltip,
-  VariantColorsResolver,
-} from '@mantine/core';
 import Link from 'next/link';
-
+import styles from './ExternalAuthButton.module.css';
-const variantColorResolver =
-  (alpha: number): VariantColorsResolver =>
-  (input) => {
-    const parsedColor = parseThemeColor({
-      color: input.color || input.theme.primaryColor,
-      theme: input.theme,
-    });
-
-    return {
-      background: rgba(parsedColor.value, 1),
-      hover: rgba(parsedColor.value, alpha),
-      border: `1px solid ${parsedColor.value}`,
-      color: lighten(parsedColor.value, 1),
-      hoverColor: rgba(parsedColor.value, 1),
-    };
-  };
 
 export default function ExternalAuthButton({
   provider,
-  alpha,
   leftSection,
 }: {
   provider: string;
-  alpha: number;
   leftSection: React.ReactNode;
 }) {
   return (
     <Tooltip label={`Sign in with ${provider}`}>
-      <MantineProvider theme={{ variantColorResolver: variantColorResolver(alpha) }}>
       <ActionIcon
         component={Link}
         href={`/api/auth/oauth/${provider.toLowerCase()}`}
         color={`${provider.toLowerCase()}.0`}
-          style={{
+        className={styles.button}
-            transition: 'background-color 100ms ease, color 300ms ease',
-          }}
         p='lg'
         variant='oauth'
       >
         {leftSection}
       </ActionIcon>
-      </MantineProvider>
     </Tooltip>
   );
 }

src/lib/hooks/useAvatar.ts

@@ -9,6 +9,8 @@ const f = async () => {
 };
 
 export default function useAvatar() {
-  const { data, mutate } = useSWR('/api/user/avatar', f);
+  const { data, mutate } = useSWR('/api/user/avatar', f, {
+    refreshInterval: 300000,
+  });
   return { avatar: data, mutate };
 }

src/lib/theme/index.ts

@@ -1,4 +1,15 @@
-import { AppShell, LoadingOverlay, MantineTheme, MantineThemeOverride, Modal } from '@mantine/core';
+import {
+  AppShell,
+  defaultVariantColorsResolver,
+  lighten,
+  LoadingOverlay,
+  MantineTheme,
+  MantineThemeOverride,
+  Modal,
+  parseThemeColor,
+  rgba,
+  VariantColorsResolver,
+} from '@mantine/core';
 
 export type ZiplineTheme = MantineTheme & {
   id: string;
@@ -11,9 +22,30 @@ export function findTheme(id: string, themes: ZiplineTheme[] = []): ZiplineTheme
   return themes.find((theme) => theme.id === id);
 }
 
+const variantColorResolver: VariantColorsResolver = (input) => {
+  const defaultResolvedColors = defaultVariantColorsResolver(input);
+  if (input.variant !== 'oauth') return defaultResolvedColors;
+
+  const parsedColor = parseThemeColor({
+    color: input.color || input.theme.primaryColor,
+    theme: input.theme,
+  });
+
+  console.log(parsedColor);
+
+  return {
+    background: rgba(parsedColor.value, 1),
+    hover: rgba(parsedColor.value, input.color === 'oidc.0' ? 0.2 : 0.1),
+    border: `1px solid ${parsedColor.value}`,
+    color: lighten(parsedColor.value, 1),
+    hoverColor: rgba(parsedColor.value, 1),
+  };
+};
+
 export function themeComponents(theme: ZiplineTheme): MantineThemeOverride {
   return {
     ...theme,
+    variantColorResolver: variantColorResolver,
     components: {
       AppShell: AppShell.extend({
         styles: {

src/pages/auth/login.tsx

@@ -43,7 +43,7 @@ import useSWR from 'swr';
 export default function Login({ config }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const router = useRouter();
   const { data, isLoading, mutate } = useSWR<Response['/api/user']>('/api/user', {
-    refreshInterval: 30000,
+    refreshInterval: 120000,
   });
 
   const showLocalLogin =
@@ -324,30 +324,20 @@ export default function Login({ config }: InferGetServerSidePropsType<typeof get
               {config.oauthEnabled.discord && (
                 <ExternalAuthButton
                   provider='Discord'
-                  alpha={0.1}
                   leftSection={<IconBrandDiscordFilled stroke={4} size='1.1rem' />}
                 />
               )}
               {config.oauthEnabled.github && (
-                <ExternalAuthButton
+                <ExternalAuthButton provider='GitHub' leftSection={<IconBrandGithubFilled size='1.1rem' />} />
-                  provider='GitHub'
-                  alpha={0.1}
-                  leftSection={<IconBrandGithubFilled size='1.1rem' />}
-                />
               )}
               {config.oauthEnabled.google && (
                 <ExternalAuthButton
                   provider='Google'
-                  alpha={0.1}
                   leftSection={<IconBrandGoogleFilled stroke={4} size='1.1rem' />}
                 />
               )}
               {config.oauthEnabled.oidc && (
-                <ExternalAuthButton
+                <ExternalAuthButton provider='OIDC' leftSection={<IconCircleKeyFilled size='1.1rem' />} />
-                  provider='OIDC'
-                  alpha={0.2}
-                  leftSection={<IconCircleKeyFilled size='1.1rem' />}
-                />
               )}
             </Group>
           </Stack>