🖌️ style: auth dark theme (#1862)

* Remove minLength validation and update login link style

* Add theme selector component and update login form styles

* Update styling in Login and LoginForm components

* Update ResetPassword component styles and text color

* Refactor login component and add theme selector

* Add ThemeSelector component to Registration, RequestPasswordReset, and ResetPassword pages

* chore(Login.tsx): remove unused `useCallback`

* chore(Login.tsx) import order

* Update ResetPassword.tsx import order

* Update RequestPasswordReset.tsx import order

* Update Registration.tsx import order

---------

Co-authored-by: Danny Avila <messagedaniel@protonmail.com>

client/src/components/ui/ThemeSelector.tsx

@@ -0,0 +1,39 @@
+import React, { useContext, useCallback } from 'react';
+import { Sun, Moon } from 'lucide-react';
+import { ThemeContext } from '~/hooks';
+
+const Theme = ({ theme, onChange }: { theme: string; onChange: (value: string) => void }) => {
+  const themeIcons = {
+    system: <Sun />,
+    dark: <Moon color="white" />,
+    light: <Sun />,
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="cursor-pointer" onClick={() => onChange(theme === 'dark' ? 'light' : 'dark')}>
+        {themeIcons[theme]}
+      </div>
+    </div>
+  );
+};
+
+const ThemeSelector = () => {
+  const { theme, setTheme } = useContext(ThemeContext);
+  const changeTheme = useCallback(
+    (value: string) => {
+      setTheme(value);
+    },
+    [setTheme],
+  );
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
+      <div className="absolute bottom-0 left-0 m-4">
+        <Theme theme={theme} onChange={changeTheme} />
+      </div>
+    </div>
+  );
+};
+
+export default ThemeSelector;