reza added light mode

src/components/Textarea/index.scss

@@ -1,55 +1,63 @@
-.custom-textarea{
+.custom-textarea {
   width: 100%;
   padding: 10px 12px;
-  color: white;
   border-radius: 10px;
-  border: 1px solid $gray2;
-  background-color: black;
+
   margin-top: 10px;
-  &::placeholder{
+  &-light {
+    border: 1px solid $green;
+    background-color: white;
+    color: $gray5;
+  }
+  &-dark {
+    border: 1px solid $gray2;
+    background-color: black;
+    color: white;
+  }
+  &::placeholder {
     color: #a2a2a2;
   }
-  &:focus{
+  &:focus {
     border: 1px solid $green1;
     outline: none;
-    &::placeholder{
+    &::placeholder {
       color: $green1;
     }
   }
 }
 
-@media screen and (min-width: 1441px){
-  .custom-textarea{
+@media screen and (min-width: 1441px) {
+  .custom-textarea {
     font-size: 16px;
-    &::placeholder{
+    &::placeholder {
       font-size: 16px;
     }
   }
 }
 
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
-  .custom-textarea{
+  .custom-textarea {
     font-size: calc(100vw / 110);
-    &::placeholder{
+    &::placeholder {
       font-size: calc(100vw / 110);
     }
   }
 }
 
 @media screen and (min-width: 641px) and (max-width: 1007px) {
-  .custom-textarea{
+  .custom-textarea {
     font-size: calc(100vw / 40);
-    &::placeholder{
+    &::placeholder {
       font-size: calc(100vw / 40);
     }
   }
 }
 
 @media screen and (max-width: 640px) {
-  .custom-textarea{
+  .custom-textarea {
     font-size: calc(100vw / 30);
-    &::placeholder{
+    &::placeholder {
       font-size: calc(100vw / 30);
     }
   }
-}
+}

src/components/Textarea/index.tsx

@@ -1,9 +1,21 @@
-import React from 'react';
+import React from "react";
+import _ from "lodash";
 
-export default function Textarea({placeholder} : any) {
+export default function Textarea({ placeholder, theme }: any) {
+  const light = theme === "light";
   return (
     <>
-      <textarea className="custom-textarea" rows={6} placeholder={placeholder} />
+      <textarea
+        className={_.join(
+          [
+            "custom-textarea",
+            light ? "custom-textarea-light" : "custom-textarea-dark",
+          ],
+          " "
+        )}
+        rows={6}
+        placeholder={placeholder}
+      />
     </>
-  )
+  );
 }

src/custom.scss

@@ -33,10 +33,72 @@
 
 .bg-black{
   background-color: black !important;
+  .MuiFormControl-root {
+    color: $gray7 !important;
+    label {
+      background: black !important;
+      color: #b5b5b5;
+    }
+  }
+  .MuiOutlinedInput-notchedOutline {
+    border-color: $gray4 !important;
+    color: green !important;
+  }
+  
+  .MuiOutlinedInput-input {
+    color: $green4 !important;
+    &:focus {
+      border: 1px solid $green4 !important;
+    }
+  }
+  
+  
+  .MuiInputLabel-shrink {
+    background-color: black !important;
+    color: $green4 !important;
+  }
+  
+  .Mui-focused {
+    color: rgba(0, 0, 0, 1) !important;
+    border-color: $green4 !important;
+    color: $green4 !important;
+  }
+
 }
 
 .bg-white{
   background-color: white !important;
+  .MuiFormControl-root {
+    color: $gray7 !important;
+    label {
+      background: white !important;
+      color: #b5b5b5;
+    }
+  }
+  .MuiOutlinedInput-notchedOutline {
+    border-color: $green1 !important;
+    color: green !important;
+    background-color: white;
+  }
+  
+  .MuiOutlinedInput-input {
+    color: $gray5 !important;
+    &:focus {
+      border: 1px solid $green4 !important;
+    }
+  }
+  
+  
+  .MuiInputLabel-shrink {
+    background-color: black !important;
+    color: $green4 !important;
+  }
+  
+  .Mui-focused {
+    color: rgba(0, 0, 0, 1) !important;
+    border-color: $green4 !important;
+    color: $green4 !important;
+  }
 }
 
 p {
@@ -175,10 +237,8 @@ p {
   }
   color: $gray7 !important;
   label {
-    background: black !important;
     width: fit-content;
     text-align: center;
-    color: #b5b5b5;
   }
 }
 .MuiOutlinedInput-notchedOutline {
@@ -187,16 +247,13 @@ p {
 .MuiOutlinedInput-notchedOutline {
   border-color: $gray4 !important;
   border-width: 1px !important;
-  color: green !important;
   border-radius: 10px !important;
 }
 
 .MuiOutlinedInput-input {
   padding: 15px 14px !important;
   font-family: numeralLight;
-  color: $green4 !important;
   &:focus {
-    border: 1px solid $green4 !important;
     border-radius: 10px;
     transform: translateY(0px);
     border-radius: 10px !important;
@@ -222,14 +279,6 @@ p {
   transform: translate(0px, 0px) scale(0.85) !important;
   padding: 0px 10px !important;
   z-index: 130 !important;
-  background-color: black !important;
-  color: $green4 !important;
-}
-
-.Mui-focused {
-  color: rgba(0, 0, 0, 1) !important;
-  border-color: $green4 !important;
-  color: $green4 !important;
 }
 
 .MuiInputBase-input {

src/views/Auth/Login/index.scss

@@ -3,12 +3,12 @@
   height: 100vh;
   position: relative;
   font-family: numeralLight;
-  &__light {
+  &-light {
     .MuiFormControl-root label{
       background-color: white !important;
     }
     b{
-      color: black !important;
+      color: $gray5 !important;
     }
     .login {
       &__back {
@@ -17,16 +17,13 @@
         }
       }
       &__options {
-        color: black;
+        color: $gray9;
         a {
           color: $green4;
         }
       }
     }
   }
-  &__dark {
-    background-color: black;
-  }
   &__options {
     color: #b5b5b5;
     a {
@@ -252,6 +249,7 @@
         font-size: calc(100vw / 110);
       }
       img {
+        width: 40px;
         // transform: scale()
       }
     }

src/views/Auth/Login/index.tsx

@@ -6,6 +6,7 @@ import CustomCheckbox from "../../../components/CustomCheckbox/index";
 import CheckBoxOutlineBlankTwoToneIcon from "@mui/icons-material/CheckBoxOutlineBlankTwoTone";
 import CheckBoxRoundedIcon from "@mui/icons-material/CheckBoxRounded";
 import arrowLeft from "../../../assets/icons/arrow-left.png";
+import arrowLeftGreen from "../../../assets/icons/arrow-left-green.png";
 
 import { Link } from "react-router-dom";
 import arrow from "../../../assets/icons/dropdown.png";
@@ -35,7 +36,7 @@ function Login({ login, theme, ...props }: any) {
       className={_.join(
         [
           "login d-flex flex-column align-items-center justify-content-center",
-          theme === "light" ? "login__light" : "login__dark",
+          theme === "light" ? "login-light bg-white" : "login-dark bg-black",
         ],
         " "
       )}
@@ -48,7 +49,11 @@ function Login({ login, theme, ...props }: any) {
               بازگشت به صفحه قبل
               <img src={arrow} alt="" />
             </div>
-            <img className="mobile" src={arrowLeft} alt="" />
+            {theme === "dark" ? (
+              <img className="mobile" src={arrowLeft} alt="" />
+            ) : (
+              <img className="mobile" src={arrowLeftGreen} alt="" />
+            )}
           </Link>
         </div>
         <b>
@@ -77,12 +82,20 @@ function Login({ login, theme, ...props }: any) {
             <CustomCheckbox
               icon={
                 <CheckBoxOutlineBlankTwoToneIcon
-                  style={{ color: "$gray4", fontSize: 30, padding: 0 }}
+                  style={{
+                    color: theme === "dark" ? "#666" : "#81c342",
+                    fontSize: 27,
+                    padding: 0,
+                  }}
                 />
               }
               checkedIcon={
                 <CheckBoxRoundedIcon
-                  style={{ color: "$green4", fontSize: 30, padding: 0 }}
+                  style={{
+                    color: theme === "dark" ? "#84de56" : "#81c342",
+                    fontSize: 27,
+                    padding: 0,
+                  }}
                 />
               }
             />

src/views/Auth/SignUp/index.scss

@@ -3,13 +3,68 @@
   height: 100vh;
   position: relative;
   font-family: numeralLight;
-  &__light{
-    background-color: white;
-    b{
-      color: black !important;
+  &__back{
+    img{
+      width: 40px;
     }
-    input{
-      background-color: white !important;
+  }
+  &-light {
+    b {
+      color: $gray5 !important;
+    }
+    input {
+      background-color: white;
+      border: 1px solid $green1;
+      color: $gray5;
+      &::placeholder {
+        color: $gray9;
+      }
+      &:focus {
+        border: 1px solid $green4;
+        &::placeholder {
+          color: $green4;
+        }
+      }
+    }
+    .signup {
+      &__info {
+        color: $gray5;
+        a {
+          color: $green4;
+        }
+      }
+      &__back {
+        a {
+          color: $gray5;
+          font-size: 13px;
+        }
+      }
+    }
+  }
+  &-dark {
+    input {
+      background-color: $gray8;
+      border: 1px solid $gray;
+      color: white;
+      &:focus {
+        border: 1px solid $green4;
+        &::placeholder {
+          color: $green4;
+        }
+      }
+    }
+    .signup {
+      &__info {
+        color: white;
+        a {
+          color: $green4;
+        }
+      }
+      &__back {
+        a {
+          color: white;
+        }
+      }
     }
   }
   img {
@@ -40,22 +95,17 @@
         margin-bottom: 30px;
         font-weight: 500;
         line-height: 1.7;
-        p{
+        p {
         }
       }
       input {
         text-align: center;
-        background-color: $gray8;
-        border: 1px solid $gray;
         border-radius: 8px;
         font-size: 20px;
         padding: 8px 0px;
-        color: white;
         direction: ltr;
         &:focus {
-          border: 1px solid $green4;
           &::placeholder {
-            color: $green4;
             opacity: 0.3;
           }
         }
@@ -69,25 +119,20 @@
       width: 350px;
       margin: 30px auto 0px;
       text-align: center;
-      color: white;
       font-size: 13px;
-      a {
-        color: $green4;
-      }
     }
     &__back {
       margin-bottom: 60px;
       a {
-        color: white;
         font-size: 13px;
       }
-      .desktop{
-        img{
+      .desktop {
+        img {
           transform: rotate(-90deg);
         }
       }
     }
-    &__error{
+    &__error {
       margin-top: 10px;
       color: $red1;
       font-size: 14px;
@@ -104,23 +149,18 @@
         font-size: calc(100vw / 90);
         margin-bottom: 30px;
         font-weight: 500;
-        p{
+        p {
           // font-size: calc(100vw / 140) !important;
         }
       }
       input {
         text-align: center;
-        background-color: #2a2a2a;
-        border: 1px solid #a2a2a2;
         border-radius: 8px;
         font-size: calc(100vw / 75);
         padding: 8px 0px;
-        color: white;
         direction: ltr;
         &:focus {
-          border: 1px solid $green4;
           &::placeholder {
-            color: $green4;
             opacity: 0.3;
           }
         }
@@ -134,25 +174,20 @@
       width: 300px;
       margin: 20px auto 0px;
       text-align: center;
-      color: white;
       font-size: calc(100vw / 110);
-      a {
-        color: $green4;
-      }
     }
     &__back {
       margin-bottom: 50px;
       a {
-        color: white;
         font-size: calc(100vw / 110);
       }
-      .desktop{
-        img{
+      .desktop {
+        img {
           transform: rotate(-90deg);
         }
       }
     }
-    &__error{
+    &__error {
       margin-top: 10px;
       color: $red1;
       font-size: calc(100vw / 110);
@@ -162,8 +197,7 @@
 
 @media screen and (min-width: 641px) and (max-width: 1007px) {
   .signup {
-    background: black;
-    .footer{
+    .footer {
       display: none !important;
     }
     section {
@@ -176,23 +210,18 @@
         font-size: calc(100vw / 35);
         margin-bottom: 70px;
         font-weight: 500;
-        p{
+        p {
           // font-size: calc(100vw / 30) !important;
         }
       }
       input {
         text-align: center;
-        background-color: #2a2a2a;
-        border: 1px solid #a2a2a2;
         border-radius: 8px;
         font-size: calc(100vw / 30);
         padding: 10px 14px;
-        color: $green4;
         direction: ltr;
         &:focus {
-          border: 1px solid $green4;
           &::placeholder {
-            color: $green4;
             opacity: 0.3;
           }
         }
@@ -208,11 +237,7 @@
       width: 400px;
       margin: 20px auto 0px;
       text-align: center;
-      color: white;
       font-size: calc(100vw / 40);
-      a {
-        color: $green4;
-      }
     }
     &__back {
       position: fixed;
@@ -220,14 +245,13 @@
       left: 30px;
       margin-bottom: 50px;
       a {
-        color: white;
         font-size: calc(100vw / 110);
       }
-      img{
+      img {
         width: 50px;
       }
     }
-    &__error{
+    &__error {
       margin-top: 10px;
       color: $red1;
       font-size: calc(100vw / 110);
@@ -237,7 +261,6 @@
 
 @media screen and (max-width: 640px) {
   .signup {
-    background: black;
     section {
       width: 90%;
       max-width: 400px;
@@ -248,23 +271,18 @@
         font-size: calc(100vw / 25);
         margin-bottom: 30px;
         font-weight: 500;
-        p{
+        p {
           // font-size: calc(100vw / 30) !important;
         }
       }
       input {
         text-align: center;
-        background-color: #2a2a2a;
-        border: 1px solid #a2a2a2;
         border-radius: 8px;
         font-size: calc(100vw / 22);
         padding: 10px 14px;
-        color: white;
         direction: ltr;
         &:focus {
-          border: 1px solid $green4;
           &::placeholder {
-            color: $green4;
             opacity: 0.3;
           }
         }
@@ -281,12 +299,8 @@
       width: 300px;
       margin: 30px auto 0px;
       text-align: center;
-      color: white;
       font-size: calc(100vw / 30);
       line-height: 1.5;
-      a {
-        color: $green4;
-      }
     }
     &__back {
       position: fixed;
@@ -294,14 +308,13 @@
       left: 20px;
       margin-bottom: 50px;
       a {
-        color: white;
         font-size: calc(100vw / 110);
       }
     }
-    &__error{
+    &__error {
       margin-top: 10px;
       color: $red1;
       font-size: calc(100vw / 30);
     }
   }
-}
+}

src/views/Auth/SignUp/index.tsx

@@ -7,6 +7,7 @@ import onInput from "../../../util/onInput";
 import { Link } from "react-router-dom";
 import arrow from "../../../assets/icons/dropdown.png";
 import arrowLeft from "../../../assets/icons/arrow-left.png";
+import arrowLeftGreen from "../../../assets/icons/arrow-left-green.png";
 
 import { connect } from "react-redux";
 import { user } from "../../../redux/actions";
@@ -95,7 +96,7 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme }: any) {
       className={_.join(
         [
           "signup d-flex flex-column align-items-center justify-content-center",
-          light ? "signup__light" : "signup__dark",
+          light ? "signup-light bg-white" : "signup-dark bg-black",
         ],
         " "
       )}
@@ -145,7 +146,11 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme }: any) {
                 بازگشت به صفحه قبل
                 <img src={arrow} />
               </div>
-              <img className="mobile" src={arrowLeft} alt="" />
+              {light ? (
+                <img className="mobile" src={arrowLeftGreen} alt="" />
+              ) : (
+                <img className="mobile" src={arrowLeft} alt="" />
+              )}
             </Link>
           </div>
           <b>

src/views/Contact/index.scss

@@ -1,8 +1,48 @@
 .contact{
-  header{
-    color: white;
-    border-bottom: 1px solid $gray7;
+  &-dark{
+    header{
+      color: white;
+      border-bottom: 1px solid $gray7;
+    }
+    .contact{
+      &__info{
+        &--data{
+          h2{
+            color: $green;
+          }
+          p{
+            color: $gray6;
+          }
+        }
+        &--map{
+          border-top: 1px solid $gray7;
+        }
+      }
+    }
+    
+  }
+  &-light{
+    header{
+      color: $gray5;
+      border-bottom: none;
+    }
+    .contact{
+      &__info{
+        &--data{
+          h2{
+            color: $green5;
+          }
+          p{
+            color: $gray5;
+          }
+        }
+        &--map{
+          border-top: 1px solid $gray12;
+        }
+      }
+    }
   }
+  
   &__form{
     &--name{
       width: 70%;
@@ -12,19 +52,12 @@
     &--data{
       margin-bottom: 30px;
       width: 48%;
-      h2{
-        color: $green;
-      }
-      p{
-        color: $gray6;
-      }
     }
     &--map{
       width: 100%;
       height: 300px;
       position: relative;
       padding-top: 20px;
-      border-top: 1px solid $gray7;
       img {
         transform: scale(0.4);
       }

src/views/Contact/index.tsx

@@ -9,6 +9,7 @@ import Location from "../../components/Location";
 import { connect } from "react-redux";
 import scroll from "../../util/scroll";
 import { publicApi } from "../../redux/actions";
+import _ from "lodash";
 
 interface FormData {
   name?: string;
@@ -17,7 +18,13 @@ interface FormData {
   text?: string;
 }
 
-function Contact({ departmans, selectedDepartman, contactData, getContactData }: any) {
+function Contact({
+  departmans,
+  selectedDepartman,
+  contactData,
+  getContactData,
+  theme,
+}: any) {
   const [formData, setFormData] = useState<FormData | undefined>(undefined);
   const [unit, setUnit] = useState("info");
   const onChange = (e: any) => {
@@ -28,9 +35,17 @@ function Contact({ departmans, selectedDepartman, contactData, getContactData }:
     scroll.goToTop();
     getContactData();
   }, []);
-
+  const light = theme === "light";
   return (
-    <div className="contact main d-flex flex-column">
+    <div
+      className={_.join(
+        [
+          "contact main d-flex flex-column",
+          light ? "contact-light bg-white" : "contact-dark bg-black",
+        ],
+        " "
+      )}
+    >
       <Navbar />
       <main className="d-flex flex-column">
         <header>
@@ -38,7 +53,9 @@ function Contact({ departmans, selectedDepartman, contactData, getContactData }:
         </header>
         <div className="mobile flex-column">
           <div className="d-flex contact__tab">
-            <figure className={unit !== "info" ? "contact__tab--figureactive" : ""}></figure>
+            <figure
+              className={unit !== "info" ? "contact__tab--figureactive" : ""}
+            ></figure>
             <button
               className={unit === "info" ? "contact__tab--active" : ""}
               onClick={() => setUnit("info")}
@@ -101,7 +118,10 @@ function Contact({ departmans, selectedDepartman, contactData, getContactData }:
                   label={"انتخاب دپارتمان"}
                   selectedOptions={selectedDepartman}
                 />
-                <Textarea placeholder="متن پیام را اینجا تایپ کنید" />
+                <Textarea
+                  theme={theme}
+                  placeholder="متن پیام را اینجا تایپ کنید"
+                />
                 <div className="d-flex justify-content-end py-4">
                   <button className="submit submit-large">ارسال پیام</button>
                 </div>
@@ -137,7 +157,7 @@ function Contact({ departmans, selectedDepartman, contactData, getContactData }:
                 label={"انتخاب دپارتمان"}
                 selectedOptions={selectedDepartman}
               />
-              <Textarea placeholder="متن پیام را اینجا تایپ کنید" />
+              <Textarea theme={theme} placeholder="متن پیام را اینجا تایپ کنید" />
               <div className="d-flex justify-content-end py-4">
                 <button className="submit submit-large">ارسال پیام</button>
               </div>
@@ -169,8 +189,12 @@ function Contact({ departmans, selectedDepartman, contactData, getContactData }:
   );
 }
 
-export default connect((state: any) => ({
-  departmans: state.publicApi.departmans,
-  selectedDepartman: state.publicApi.selectedDepartman,
-  contactData: state.publicApi.contactData,
-}), {getContactData : publicApi.getContactData})(Contact);
+export default connect(
+  (state: any) => ({
+    departmans: state.publicApi.departmans,
+    selectedDepartman: state.publicApi.selectedDepartman,
+    contactData: state.publicApi.contactData,
+    theme: state.publicApi.theme,
+  }),
+  { getContactData: publicApi.getContactData }
+)(Contact);