From 6f367c2c48c9621e3070055bea42229f136093a6 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Tue, 3 Dec 2024 23:38:41 +0800 Subject: [PATCH] feat: add new login background --- .../components/DotPatternBackground.tsx | 60 +++++++++++++++++++ src/client/public/icon.svg | 9 ++- src/client/routes/login.tsx | 7 ++- src/client/store/settings.ts | 16 +++++ src/client/tailwind.config.ts | 3 + 5 files changed, 93 insertions(+), 2 deletions(-) create mode 100644 src/client/components/DotPatternBackground.tsx diff --git a/src/client/components/DotPatternBackground.tsx b/src/client/components/DotPatternBackground.tsx new file mode 100644 index 00000000..1cafd638 --- /dev/null +++ b/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(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 ( +
+
+
+
+ + + + + + + + + + + + +
+
+ ); +}); +DotPatternBackground.displayName = 'DotPatternBackground'; diff --git a/src/client/public/icon.svg b/src/client/public/icon.svg index e4528873..52b2f31b 100644 --- a/src/client/public/icon.svg +++ b/src/client/public/icon.svg @@ -1,9 +1,16 @@ - + + + + + + + + diff --git a/src/client/routes/login.tsx b/src/client/routes/login.tsx index 3f16541b..5524d12e 100644 --- a/src/client/routes/login.tsx +++ b/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 ( -
+
+ {theme === 'dark' && } +
diff --git a/src/client/store/settings.ts b/src/client/store/settings.ts index 7594799a..18ad2f4e 100644 --- a/src/client/store/settings.ts +++ b/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; +} diff --git a/src/client/tailwind.config.ts b/src/client/tailwind.config.ts index 64c177a2..665b2394 100644 --- a/src/client/tailwind.config.ts +++ b/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))',