🔐 style: update auth and loading screen (#3875)

* style: improve auth UI

* style(SocialButton): fix hover style

* remove testing files

* fix: package-lock

* feat: loading screen color based on theme

* fix: handle `system` style on loading screen

* fix(ThemeSelector): Correct icon and text color handling for `system` theme

* remove test file

client/src/components/ui/ThemeSelector.tsx

@@ -1,25 +1,37 @@
-import React, { useContext, useCallback } from 'react';
-import { Sun, Moon } from 'lucide-react';
+import React, { useContext, useCallback, useEffect } from 'react';
+import { Sun, Moon, Monitor } from 'lucide-react';
 import { ThemeContext } from '~/hooks';
 
 const Theme = ({ theme, onChange }: { theme: string; onChange: (value: string) => void }) => {
   const themeIcons = {
-    system: <Sun />,
+    system: <Monitor />,
     dark: <Moon color="white" />,
     light: <Sun />,
   };
 
   return (
     <div className="flex items-center justify-between">
-      <div className="cursor-pointer" onClick={() => onChange(theme === 'dark' ? 'light' : 'dark')}>
+      <button
+        className="cursor-pointer"
+        onClick={() => onChange(theme === 'dark' ? 'light' : 'dark')}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            onChange(theme === 'dark' ? 'light' : 'dark');
+          }
+        }}
+        role="switch"
+        aria-checked={theme === 'dark'}
+        tabIndex={0}
+      >
         {themeIcons[theme]}
-      </div>
+      </button>
     </div>
   );
 };
 
 const ThemeSelector = ({ returnThemeOnly }: { returnThemeOnly?: boolean }) => {
   const { theme, setTheme } = useContext(ThemeContext);
+
   const changeTheme = useCallback(
     (value: string) => {
       setTheme(value);
@@ -27,7 +39,14 @@ const ThemeSelector = ({ returnThemeOnly }: { returnThemeOnly?: boolean }) => {
     [setTheme],
   );
 
-  if (returnThemeOnly) {
+  useEffect(() => {
+    if (theme === 'system') {
+      const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      setTheme(prefersDarkScheme ? 'dark' : 'light');
+    }
+  }, [theme, setTheme]);
+
+  if (returnThemeOnly === true) {
     return <Theme theme={theme} onChange={changeTheme} />;
   }