From de92137ec4d72fcab52e7c64f93f670542a292e1 Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Sun, 17 May 2026 09:42:59 +0330
Subject: [PATCH] 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/app/auth/sign-in/page.tsx                 |  2 +-
 src/components/Auth/Signin/index.tsx          | 28 +++++++++++--------
 src/components/Auth/SigninWithPassword.tsx    |  2 +-
 .../Layouts/header/theme-toggle/index.tsx     | 11 ++++++--
 4 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/app/auth/sign-in/page.tsx b/src/app/auth/sign-in/page.tsx
index 21f9006..a07ddb8 100644
--- a/src/app/auth/sign-in/page.tsx
+++ b/src/app/auth/sign-in/page.tsx
@@ -10,7 +10,7 @@ export default function SignIn() {
     <div className="relative flex min-h-svh w-full flex-col items-center justify-center overflow-hidden bg-gray-1/40 px-4 py-8 dark:bg-dark sm:px-6 sm:py-10">
       <div className="pointer-events-none absolute -top-24 left-1/2 h-64 w-64 -translate-x-1/2 rounded-full bg-primary/10 blur-3xl dark:bg-primary/20" />
       <div className="pointer-events-none absolute -bottom-24 right-10 h-64 w-64 rounded-full bg-purple-500/10 blur-3xl dark:bg-purple-500/20" />
-      <div className="m-auto flex w-full max-w-[26rem] flex-col items-center justify-center rounded-2xl border border-stroke/70 bg-white/95 px-4 shadow-theme-xs backdrop-blur-sm dark:border-dark-3 dark:bg-gray-dark/95 sm:max-w-md sm:px-8 md:max-w-lg lg:max-w-xl xl:w-4/12 xl:max-w-none">
+      <div className="shadow-theme-xs m-auto flex w-full max-w-[26rem] flex-col items-center justify-center rounded-2xl border border-stroke/70 bg-white/95 px-4 backdrop-blur-sm dark:border-dark-3 dark:bg-gray-dark/95 sm:max-w-md sm:px-8 md:max-w-lg lg:max-w-xl xl:w-4/12 xl:max-w-none">
         <div className="relative flex w-full flex-wrap items-center justify-center">
           <div className="w-full">
             <div className="w-full p-4 sm:p-12.5 xl:p-15">
diff --git a/src/components/Auth/Signin/index.tsx b/src/components/Auth/Signin/index.tsx
index 53280cc..a0f251e 100644
--- a/src/components/Auth/Signin/index.tsx
+++ b/src/components/Auth/Signin/index.tsx
@@ -1,24 +1,30 @@
 "use client";
 import { Logo } from "@/components/logo";
+import { ThemeToggleSwitch } from "@/components/Layouts/header/theme-toggle";
 import SigninWithPassword from "../SigninWithPassword";
 
 export default function Signin() {
   return (
-      <div>
-        <div className="mb-8 mt-4 flex flex-col items-center justify-center gap-3 text-center">
+    <div>
+      <div className="mb-8 mt-4 flex flex-col items-center justify-center gap-3 text-center">
+        <div className="flex w-full flex-col items-center gap-4 max-sm:gap-3 sm:w-auto">
+          <div className="flex w-full justify-end sm:hidden">
+            <ThemeToggleSwitch />
+          </div>
           <div className="rounded-2xl border border-stroke/70 bg-white/80 p-3 dark:border-dark-3 dark:bg-dark-2/70">
             <Logo />
           </div>
-          <div>
-            <h1 className="text-2xl font-semibold text-dark dark:text-white">
-              Welcome back
-            </h1>
-            <p className="mt-1 text-sm text-dark-5">
-              Sign in to continue to your dashboard
-            </p>
-          </div>
         </div>
-        <SigninWithPassword />
+        <div>
+          <h1 className="text-2xl font-semibold text-dark dark:text-white">
+            Welcome back
+          </h1>
+          <p className="mt-1 text-sm text-dark-5">
+            Sign in to continue to your dashboard
+          </p>
+        </div>
       </div>
+      <SigninWithPassword />
+    </div>
   );
 }
diff --git a/src/components/Auth/SigninWithPassword.tsx b/src/components/Auth/SigninWithPassword.tsx
index ae35b2c..5369c1a 100644
--- a/src/components/Auth/SigninWithPassword.tsx
+++ b/src/components/Auth/SigninWithPassword.tsx
@@ -35,7 +35,7 @@ export default function SigninWithPassword() {
   };
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="mt-5">
-      <div className="absolute right-0 top-7">
+      <div className="absolute right-0 top-7 hidden sm:block">
         <ThemeToggleSwitch />
       </div>
       <InputGroup
diff --git a/src/components/Layouts/header/theme-toggle/index.tsx b/src/components/Layouts/header/theme-toggle/index.tsx
index 9386ed0..7597189 100644
--- a/src/components/Layouts/header/theme-toggle/index.tsx
+++ b/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">