Dark mode

Author: Dheerajjha451

components/dashboard/DashboardHeader.jsx

@@ -17,7 +17,7 @@ const DashboardHeader = () => {
     <>
       <div className="flex justify-between items-center p-4  shadow-sm">
         <button
-          className="inline-flex items-center p-2 text-gray-500 rounded-lg sm:hidden hover:bg-gray-200 dark:bg-slate-800 hover:dark:bg-slate-900 focus:outline-none focus:ring-2 "
+          className="inline-flex items-center p-2 text-gray-500 rounded-lg sm:hidden hover:bg-gray-200 dark:bg-slate-800 hover:dark:bg-slate-600 focus:outline-none focus:ring-2 "
           onClick={() => setIsSidebarOpen(!isSidebarOpen)}
         >
           <span className="sr-only">Open sidebar</span>
@@ -65,10 +65,10 @@ const DashboardHeader = () => {
                   <img src={session?.user?.image} alt={session?.user?.name} className='w-24 h-24 mb-3 rounded-full shadow-lg' />
                   <h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">{session?.user?.name}</h5>
                   <span className="text-sm text-gray-600 dark:text-white">{session?.user?.email}</span>
-                  <Button variant='outline' className='w-full mt-2' onClick={() => { window.location.href = '/dashboard' }}>
+                  <Button variant='outline' className='w-full mt-2  dark:hover:bg-slate-900' onClick={() => { window.location.href = '/dashboard' }}>
                     Dashboard
                   </Button>
-                  <Button variant='outline' onClick={logout} className='w-full mt-2'>
+                  <Button variant='outline' onClick={logout} className='w-full mt-2 dark:hover:bg-slate-900'>
                     Logout
                   </Button>
                 </div>

pages/login/index.js

@@ -13,27 +13,30 @@ const Login = () => {
     }
   }, [session, router]);
 
-  return <>
-  <section>
-    <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-10 relative z-10">
-      <h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl">
-        We invest in the future of development.
-      </h1>
-      <p className="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-200">Here at Design2Code we focus on helping you find the best full stack templates and Designs built by developers for developers.</p>
-      {session ? (
-        <Button variant='default' onClick={ () => {window.location.href = '/dashboard'}}>
-        Share your templates
-      </Button>
-      ) : (
-        <Button variant='default' onClick={() => signIn('google')}>
-        Continue with google
-      </Button>
-      )}
-    </div>
-    <img src="/login.png" alt="hero image" className="object-cover w-full max-w-xl mx-auto h-auto" />
-
-  </section>
-  </>
+  return (
+    <>
+      <section>
+        <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-10 relative z-10">
+          <h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 dark:text-gray-200 md:text-5xl lg:text-6xl">
+            We invest in the future of development.
+          </h1>
+          <p className="mb-8 text-lg font-normal text-gray-500 dark:text-gray-300 lg:text-xl sm:px-16 lg:px-48">
+            Here at Design2Code we focus on helping you find the best full stack templates and designs built by developers for developers.
+          </p>
+          {session ? (
+            <Button variant='default' onClick={() => { window.location.href = '/dashboard' }}>
+              Share your templates
+            </Button>
+          ) : (
+            <Button variant='default' onClick={() => signIn('google')}>
+              Continue with Google
+            </Button>
+          )}
+        </div>
+        <img src="/login.png" alt="hero image" className="object-cover w-full max-w-xl mx-auto h-auto" />
+      </section>
+    </>
+  )
 }
 
-export default Login
+export default Login