From 3db5777b9fcc2d72556a02fd0042bed89f634e9b Mon Sep 17 00:00:00 2001
From: Ameer jafar <ameerjafar123@gmail.com>
Date: Tue, 21 May 2024 17:46:30 +0530
Subject: [PATCH 1/2] feat: Added darktheme for the signup and signin page

---
 frontend/src/pages/signin-page.tsx | 51 ++++++++++++++++--------------
 frontend/src/pages/signup-page.tsx | 43 +++++++++++++------------
 2 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/frontend/src/pages/signin-page.tsx b/frontend/src/pages/signin-page.tsx
index 2b9996f4..91019883 100644
--- a/frontend/src/pages/signin-page.tsx
+++ b/frontend/src/pages/signin-page.tsx
@@ -10,7 +10,7 @@ import { toast } from 'react-toastify';
 import { AxiosError, isAxiosError } from 'axios';
 import axiosInstance from '@/helpers/axios-instance';
 import userState from '@/utils/user-state';
-
+import ThemeToggle from '@/components/theme-toggle-button';
 function signin() {
   const navigate = useNavigate();
   const {
@@ -18,14 +18,12 @@ function signin() {
     handleSubmit,
     formState: { errors, isSubmitting },
     reset,
-    setError
+    setError,
   } = useForm<TSignInSchema>({ resolver: zodResolver(signInSchema) });
 
   const onSubmit = async (data: FieldValues) => {
     try {
-      const response = axiosInstance.post('/api/auth/email-password/signin',
-        data
-      );
+      const response = axiosInstance.post('/api/auth/email-password/signin', data);
 
       toast.promise(response, {
         pending: 'Checking credentials ...',
@@ -33,28 +31,30 @@ function signin() {
           render({ data }) {
             const userId = data?.data?.data?.user?._id;
             const userRole = data?.data?.data?.user?.role;
-            userState.setUser({ _id: userId, role: userRole })
-            reset()
-            navigate('/')
-            return data?.data?.message
+            userState.setUser({ _id: userId, role: userRole });
+            reset();
+            navigate('/');
+            return data?.data?.message;
           },
         },
         error: {
           render({ data }) {
             if (data instanceof AxiosError) {
               if (data?.response?.data?.message.includes('User')) {
-                setError('userNameOrEmail',{ type: 'manual', message: data?.response?.data?.message});
+                setError('userNameOrEmail', {
+                  type: 'manual',
+                  message: data?.response?.data?.message,
+                });
               } else {
-                setError("password",{ type: 'manual', message: data?.response?.data?.message});
+                setError('password', { type: 'manual', message: data?.response?.data?.message });
               }
             }
-            return "Signin failed"
+            return 'Signin failed';
           },
         },
-      }
-      )
+      });
 
-      return (await response).data
+      return (await response).data;
     } catch (error) {
       if (isAxiosError(error)) {
         console.error(error.response?.data?.message);
@@ -65,12 +65,15 @@ function signin() {
   };
 
   return (
-    <div className="m-4 flex-grow cursor-default bg-white py-4">
-      <div className="mb-4 flex justify-center">
+    <div className="flex-grow cursor-default bg-white py-4 dark:bg-dark-card">
+      <div className="m-4 mb-4 flex justify-center">
         <div className="flex w-full items-center justify-center">
-          <h2 className="w-3/4 text-center text-lg font-bold text-black sm:text-xl">
+          <h2 className="w-3/4 pl-48 text-center text-lg font-bold text-black dark:text-dark-primary sm:text-xl">
             Sign in to WanderLust
           </h2>
+          <div className="flex items-center justify-end px-4 sm:px-20">
+            <ThemeToggle />
+          </div>
         </div>
       </div>
       <div className="m-2 mt-8 flex flex-col items-center justify-center gap-2">
@@ -102,12 +105,12 @@ function signin() {
           <button
             disabled={isSubmitting}
             type="submit"
-            className="flex w-full items-center justify-center rounded-lg bg-neutral-800 p-3 text-base font-medium text-light disabled:bg-neutral-600 sm:text-lg sm:font-semibold"
+            className="flex w-full items-center justify-center rounded-lg bg-neutral-800 p-3 text-base font-medium text-light disabled:bg-neutral-600 dark:bg-dark sm:text-lg sm:font-semibold"
           >
             Log In
           </button>
         </form>
-        <div className="mt-2 flex w-5/6 flex-col items-center justify-center gap-4 text-center text-sm font-normal sm:text-base">
+        <div className="mt-2 flex w-5/6 flex-col items-center justify-center gap-4 text-center text-sm font-normal dark:text-dark-primary sm:text-base">
           <p>
             Don't have an account?
             <Link to={'/signup'} className="text-blue-600 hover:text-blue-500">
@@ -121,18 +124,18 @@ function signin() {
 
         <Link
           to={'/google-auth'}
-          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4  border-gray-300 p-3 text-center hover:bg-gray-50 md:w-3/4 lg:w-2/5"
+          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4  border-gray-300 p-3 text-center hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 md:w-3/4 lg:w-2/5"
         >
           <img className="h-4 w-6 pl-1 sm:h-5 sm:w-10" src={AddGoogleIcon} />
-          <span className="text-sm sm:text-base">Continue with Google</span>
+          <span className="text-sm dark:text-dark-primary sm:text-base">Continue with Google</span>
         </Link>
 
         <Link
           to={'/github-auth'}
-          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4 border-gray-300 p-3 text-center hover:bg-gray-50 md:w-3/4 lg:w-2/5"
+          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4 border-gray-300 p-3 text-center hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 md:w-3/4 lg:w-2/5"
         >
           <img className="h-4 w-6 sm:h-5 sm:w-10" src={AddGithubIcon} />
-          <span className="text-sm sm:text-base">Continue with Github</span>
+          <span className="text-sm dark:text-dark-primary sm:text-base">Continue with Github</span>
         </Link>
       </div>
     </div>
diff --git a/frontend/src/pages/signup-page.tsx b/frontend/src/pages/signup-page.tsx
index b3386dcf..c63c9a15 100644
--- a/frontend/src/pages/signup-page.tsx
+++ b/frontend/src/pages/signup-page.tsx
@@ -10,6 +10,7 @@ import { toast } from 'react-toastify';
 import { AxiosError, isAxiosError } from 'axios';
 import axiosInstance from '@/helpers/axios-instance';
 import userState from '@/utils/user-state';
+import ThemeToggle from '@/components/theme-toggle-button';
 
 function signup() {
   const navigate = useNavigate();
@@ -18,40 +19,38 @@ function signup() {
     handleSubmit,
     formState: { errors, isSubmitting },
     reset,
-    setError
+    setError,
   } = useForm<TSignUpSchema>({ resolver: zodResolver(signUpSchema) });
 
   const onSubmit = async (data: FieldValues) => {
     try {
-      const res = axiosInstance.post('/api/auth/email-password/signup', data)
+      const res = axiosInstance.post('/api/auth/email-password/signup', data);
       toast.promise(res, {
         pending: 'Creating account ...',
         success: {
           render({ data }) {
             const userId = data?.data?.data?.user?._id;
             const userRole = data?.data?.data?.user?.role;
-            userState.setUser({ _id: userId, role: userRole })
-            reset()
-            navigate('/')
-            return data?.data?.message
+            userState.setUser({ _id: userId, role: userRole });
+            reset();
+            navigate('/');
+            return data?.data?.message;
           },
         },
         error: {
           render({ data }) {
             if (data instanceof AxiosError) {
               if (data?.response?.data?.message.includes('Username')) {
-                setError('userName',{ type: 'manual', message: data?.response?.data?.message }); 
+                setError('userName', { type: 'manual', message: data?.response?.data?.message });
               } else {
-                setError('email',{ type: 'manual', message: data?.response?.data?.message });
+                setError('email', { type: 'manual', message: data?.response?.data?.message });
               }
             }
-            return "Signup failed"
+            return 'Signup failed';
           },
         },
-      }
-      )
-      return (await res).data
-
+      });
+      return (await res).data;
     } catch (error) {
       if (isAxiosError(error)) {
         console.error(error.response?.data?.message);
@@ -61,14 +60,16 @@ function signup() {
     }
   };
 
-
   return (
-    <div className="m-4 flex-grow cursor-default bg-white py-4">
-      <div className="mb-4 flex justify-center">
+    <div className="flex-grow cursor-default bg-white py-4 dark:bg-dark-card">
+      <div className="m-4 mb-4 flex justify-center">
         <div className="flex w-full items-center justify-center">
-          <h2 className="w-3/4 text-center text-lg font-bold text-black sm:text-xl">
+          <h2 className="w-3/4 pl-48 text-center text-lg font-bold text-black dark:text-dark-primary sm:text-xl">
             Sign up to WanderLust
           </h2>
+          <div className="flex items-center justify-end px-4 sm:px-20">
+            <ThemeToggle />
+          </div>
         </div>
       </div>
       <div className="m-2 mt-8 flex flex-col items-center justify-center gap-2">
@@ -131,12 +132,12 @@ function signup() {
           <button
             disabled={isSubmitting}
             type="submit"
-            className="flex w-full items-center justify-center rounded-lg bg-neutral-800 p-3 text-base font-medium text-light disabled:bg-neutral-600 sm:text-lg sm:font-semibold"
+            className="flex w-full items-center justify-center rounded-lg bg-neutral-800 p-3 text-base font-medium text-light disabled:bg-neutral-600 dark:bg-dark sm:text-lg sm:font-semibold"
           >
             Sign Up
           </button>
         </form>
-        <div className="mt-2 flex w-5/6 flex-col items-center justify-center gap-4 text-center text-sm font-normal sm:text-base">
+        <div className="mt-2 flex w-5/6 flex-col items-center justify-center gap-4 text-center text-sm font-normal dark:text-dark-primary sm:text-base">
           <p>
             Already have an account?
             <Link to={'/signin'} className="text-blue-600 hover:text-blue-500">
@@ -150,7 +151,7 @@ function signup() {
 
         <Link
           to={'/google-auth'}
-          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4  border-gray-300 p-3 text-center hover:bg-gray-50 md:w-3/4 lg:w-2/5"
+          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4 border-gray-300 p-3 text-center hover:bg-gray-50 dark:border-gray-700 dark:text-dark-primary dark:hover:bg-gray-700 md:w-3/4 lg:w-2/5"
         >
           <img className="h-4 w-6 pl-1 sm:h-5 sm:w-10" src={AddGoogleIcon} />
           <span className="text-sm sm:text-base">Continue with Google</span>
@@ -158,7 +159,7 @@ function signup() {
 
         <Link
           to={'/github-auth'}
-          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4 border-gray-300 p-3 text-center hover:bg-gray-50 md:w-3/4 lg:w-2/5"
+          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4 border-gray-300 p-3 text-center hover:bg-gray-50 dark:border-gray-700 dark:text-dark-primary dark:hover:bg-gray-700 md:w-3/4 lg:w-2/5"
         >
           <img className="h-4 w-6 sm:h-5 sm:w-10" src={AddGithubIcon} />
           <span className="text-sm sm:text-base">Continue with Github</span>

From aaa02fe819e34055b217520ee75a202496032f3b Mon Sep 17 00:00:00 2001
From: Ameer jafar <ameerjafar123@gmail.com>
Date: Sat, 25 May 2024 10:14:41 +0530
Subject: [PATCH 2/2] feat: Added the dark them for the input fields

---
 frontend/src/pages/signin-page.tsx |  6 +++---
 frontend/src/pages/signup-page.tsx | 13 ++++++-------
 frontend/tailwind.config.js        |  3 +++
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/signin-page.tsx b/frontend/src/pages/signin-page.tsx
index 91019883..3c206463 100644
--- a/frontend/src/pages/signin-page.tsx
+++ b/frontend/src/pages/signin-page.tsx
@@ -83,7 +83,7 @@ function signin() {
               {...register('userNameOrEmail')}
               type="text"
               placeholder="Username or Email"
-              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
             />
             {errors.userNameOrEmail && (
               <p className="p-3 text-xs text-red-500">{`${errors.userNameOrEmail.message}`}</p>
@@ -95,7 +95,7 @@ function signin() {
               {...register('password')}
               type="password"
               placeholder="Password"
-              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
             />
             {errors.password && (
               <p className="p-3 text-xs text-red-500">{`${errors.password.message}`}</p>
@@ -105,7 +105,7 @@ function signin() {
           <button
             disabled={isSubmitting}
             type="submit"
-            className="flex w-full items-center justify-center rounded-lg bg-neutral-800 p-3 text-base font-medium text-light disabled:bg-neutral-600 dark:bg-dark sm:text-lg sm:font-semibold"
+            className="flex w-full items-center justify-center rounded-lg bg-neutral-800 p-3 text-base font-medium text-light disabled:bg-neutral-600  dark:bg-dark-button sm:text-lg sm:font-semibold"
           >
             Log In
           </button>
diff --git a/frontend/src/pages/signup-page.tsx b/frontend/src/pages/signup-page.tsx
index c63c9a15..ac431347 100644
--- a/frontend/src/pages/signup-page.tsx
+++ b/frontend/src/pages/signup-page.tsx
@@ -11,7 +11,6 @@ import { AxiosError, isAxiosError } from 'axios';
 import axiosInstance from '@/helpers/axios-instance';
 import userState from '@/utils/user-state';
 import ThemeToggle from '@/components/theme-toggle-button';
-
 function signup() {
   const navigate = useNavigate();
   const {
@@ -79,7 +78,7 @@ function signup() {
               {...register('userName')}
               type="text"
               placeholder="Username"
-              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+              className="dark:placholder w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
             />
             {errors.userName && (
               <p className="p-3 text-xs text-red-500">{`${errors.userName.message}`}</p>
@@ -90,7 +89,7 @@ function signup() {
               {...register('fullName')}
               type="text"
               placeholder="Name"
-              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
             />
             {errors.fullName && (
               <p className="p-3 text-xs text-red-500">{`${errors.fullName.message}`}</p>
@@ -101,7 +100,7 @@ function signup() {
               {...register('email')}
               type="email"
               placeholder="Email"
-              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
             />
             {errors.email && (
               <p className="p-3 text-xs text-red-500">{`${errors.email.message}`}</p>
@@ -112,7 +111,7 @@ function signup() {
               {...register('password')}
               type="password"
               placeholder="Password"
-              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
             />
             {errors.password && (
               <p className="p-3 text-xs text-red-500">{`${errors.password.message}`}</p>
@@ -123,7 +122,7 @@ function signup() {
               {...register('confirmPassword')}
               type="password"
               placeholder="Confirm Password"
-              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
             />
             {errors.confirmPassword && (
               <p className="p-3 text-xs text-red-500">{`${errors.confirmPassword.message}`}</p>
@@ -132,7 +131,7 @@ function signup() {
           <button
             disabled={isSubmitting}
             type="submit"
-            className="flex w-full items-center justify-center rounded-lg bg-neutral-800 p-3 text-base font-medium text-light disabled:bg-neutral-600 dark:bg-dark sm:text-lg sm:font-semibold"
+            className="flex w-full items-center justify-center rounded-lg bg-neutral-800 p-3 text-base font-medium text-light disabled:bg-neutral-600 dark:bg-dark-button sm:text-lg sm:font-semibold"
           >
             Sign Up
           </button>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 43c6a97b..bde4a8fb 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -17,6 +17,9 @@ export default {
           title: colors.slate[50],
           description: colors.slate[400],
           info: colors.slate[500],
+          field: colors.slate[900],
+          button: colors.slate[700],
+          textInField: colors.slate[50]
         },
         light: {
           DEFAULT: colors.slate[50],