feat: add new login background

src/client/components/DotPatternBackground.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useRef } from 'react';
+
+export const DotPatternBackground: React.FC = React.memo(() => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const mouseMoveEvent = (e: MouseEvent) => {
+      if (!containerRef.current) {
+        return;
+      }
+
+      const scale = window.visualViewport?.scale;
+      // disable mouse movement on viewport zoom - causes page to slow down
+      if (scale === 1) {
+        const targetX = e.clientX;
+        const targetY = e.clientY;
+
+        containerRef.current.style.setProperty('--mouseX', `${targetX}px`);
+        containerRef.current.style.setProperty('--mouseY', `${targetY}px`);
+      }
+    };
+
+    document.addEventListener('mousemove', mouseMoveEvent);
+
+    return () => {
+      document.removeEventListener('mousemove', mouseMoveEvent);
+    };
+  });
+
+  return (
+    <div ref={containerRef} className="fixed left-0 top-0 -z-50">
+      <div className="sticky left-0 top-0 h-screen w-screen overflow-hidden">
+        <div className="bg-muted-foreground/15 absolute inset-0 -z-10" />
+        <div className="bg-gradient-radial from-muted-foreground/40 absolute left-[--mouseX] top-[--mouseY] -z-10 h-56 w-56 -translate-x-1/2 -translate-y-1/2 rounded-full from-0% to-transparent to-90% blur-md" />
+        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+          <defs>
+            <pattern
+              id="dotted-pattern"
+              width="16"
+              height="16"
+              patternUnits="userSpaceOnUse"
+            >
+              <circle cx="2" cy="2" r="1" fill="black" />
+            </pattern>
+            <mask id="dots-mask">
+              <rect width="100%" height="100%" fill="white" />
+              <rect width="100%" height="100%" fill="url(#dotted-pattern)" />
+            </mask>
+          </defs>
+          <rect
+            width="100%"
+            height="100%"
+            fill="hsl(var(--background))"
+            mask="url(#dots-mask)"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+});
+DotPatternBackground.displayName = 'DotPatternBackground';

src/client/routes/login.tsx

@@ -11,6 +11,8 @@ import { useEventWithLoading } from '@/hooks/useEvent';
 import { LuGithub, LuLayers } from 'react-icons/lu';
 import { compact } from 'lodash-es';
 import { toast } from 'sonner';
+import { DotPatternBackground } from '@/components/DotPatternBackground';
+import { useTheme } from '@/store/settings';
 
 export const Route = createFileRoute('/login')({
   validateSearch: z.object({
@@ -31,6 +33,7 @@ function LoginComponent() {
   const navigate = useNavigate();
   const { t } = useTranslation();
   const search = Route.useSearch();
+  const theme = useTheme();
 
   const { loginWithPassword, loginWithEmail, loginWithOAuth } = useAuth();
 
@@ -155,7 +158,9 @@ function LoginComponent() {
   ]);
 
   return (
-    <div className="flex h-full w-full items-center justify-center dark:bg-gray-900">
+    <div className="flex h-full w-full items-center justify-center">
+      {theme === 'dark' && <DotPatternBackground />}
+
       <div className="w-80 -translate-y-1/4">
         <div className="text-center">
           <img className="m-auto h-24 w-24" src="/icon.svg" />

src/client/store/settings.ts

@@ -41,3 +41,19 @@ export function useColorSchema() {
 
   return colorScheme;
 }
+
+export function useTheme(): 'light' | 'dark' {
+  const theme = useSettingsStore((state) => {
+    if (state.colorScheme === 'system') {
+      return typeof window !== 'undefined'
+        ? window?.matchMedia('(prefers-color-scheme: dark)')?.matches
+          ? 'dark'
+          : 'light'
+        : 'light';
+    } else {
+      return state.colorScheme;
+    }
+  });
+
+  return theme;
+}

src/client/tailwind.config.ts

@@ -25,6 +25,9 @@ module.exports = {
       },
     },
     extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+      },
       colors: {
         gray: colors.neutral,
         border: 'hsl(var(--border))',