feat(auth): enhance sign-in page layout and theme toggle functionality

- Updated the SignIn component to improve layout and styling, ensuring better visual alignment.
- Added responsive visibility for the ThemeToggleSwitch in the SigninWithPassword component.
- Refactored the Signin component to include the ThemeToggleSwitch for better user experience.
- Improved code organization by separating theme toggle logic and ensuring consistent styling across components.

src/components/Layouts/header/theme-toggle/index.tsx

@@ -14,7 +14,11 @@ const THEMES = [
   },
 ];
 
-export function ThemeToggleSwitch() {
+type ThemeToggleSwitchProps = {
+  className?: string;
+};
+
+export function ThemeToggleSwitch({ className }: ThemeToggleSwitchProps) {
   const { setTheme, theme } = useTheme();
   const [mounted, setMounted] = useState(false);
   const [isTransitioning, setIsTransitioning] = useState(false);
@@ -84,7 +88,10 @@ export function ThemeToggleSwitch() {
         setIsTransitioning(true);
         setTheme(isDarkTheme ? "light" : "dark");
       }}
-      className="group relative overflow-hidden rounded-full border border-stroke/70 bg-white/75 p-[5px] text-[#111928] shadow-theme-xs backdrop-blur-md outline-1 outline-primary transition-[color,border-color,background-color,box-shadow] duration-500 ease-out focus-visible:outline dark:border-dark-3 dark:bg-[#020D1A]/75 dark:text-current"
+      className={cn(
+        "group relative shrink-0 overflow-hidden rounded-full border border-stroke/70 bg-white/75 p-[5px] text-[#111928] shadow-theme-xs backdrop-blur-md outline-1 outline-primary transition-[color,border-color,background-color,box-shadow] duration-500 ease-out focus-visible:outline dark:border-dark-3 dark:bg-[#020D1A]/75 dark:text-current",
+        className,
+      )}
       type="button"
     >
       <span className="sr-only">