From 07ca5cf436d237058f930c0c88160196ed1fbbfc Mon Sep 17 00:00:00 2001
From: Reza <reza@Rezas-MacBook-Pro.local>
Date: Sun, 7 Nov 2021 11:28:28 +0330
Subject: [PATCH] reza added light mode

---
 src/assets/icons/arrow-left-green.png | Bin 0 -> 1243 bytes
 src/components/Textarea/index.scss    |  42 ++++----
 src/components/Textarea/index.tsx     |  20 +++-
 src/custom.scss                       |  75 +++++++++++---
 src/views/Auth/Login/index.scss       |  10 +-
 src/views/Auth/Login/index.tsx        |  21 +++-
 src/views/Auth/SignUp/index.scss      | 139 ++++++++++++++------------
 src/views/Auth/SignUp/index.tsx       |   9 +-
 src/views/Contact/index.scss          |  53 ++++++++--
 src/views/Contact/index.tsx           |  46 +++++++--
 10 files changed, 285 insertions(+), 130 deletions(-)
 create mode 100644 src/assets/icons/arrow-left-green.png

diff --git a/src/assets/icons/arrow-left-green.png b/src/assets/icons/arrow-left-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..4d07993ab433b27e7357ceb8d6f28396efa16ec5
GIT binary patch
literal 1243
zcmV<11SI>3P)<h;3K|Lk000e1NJLTq002S&002J-1^@s6ROlY}00004b3#c}2nYxW
zd<bNS000D%Nkl<ZcwX(CO>9#~5P)}f*LLCrN}8kwTGWIFA&5}aONEG3K`*FkNl1I^
z0Zu3aRY>H(v5h!#2oe%MA-&K8H(FXGP)_ZkwC7TVDr!g^wSq?ZEyQvByg%%k*m4~w
zu@%4Fb?kSt<bCsIznR&cdEPOgb*}!Oj?(6qa1*70W;HA<r3?{4=z90K@*T&V0fz(<
zXo=zE^mKG-rvKQ_Y%TpD-xvKO2ZKAe?|m1ez;57(xH7rT=phN>!b?8;cX@oWzx|1q
zD{B>q+yC@5#y#FnaCun1SU6lLPpOeldUxNS$-ei0AcmqRS_Og@j7VNjDfXeRju(ha
zA@Ri7)_c*kj+qG$O?5?3oV2^DydQcgqyO34^4)VSI|btU<R=XQ9OytCupbX}R;HBV
z<x>1{U;FS}3dG>w-G?y8dS|G(OAs;LyXS{LK<^N{>e@QD`ns@|h4p&T5DPtm8>64T
zO+$hG73T_B6K09zD0~y`dS4>aP{|+w@p-s8-u2;D%^3<cZYsC9F>&%Jg$mm(atJZC
zd%#e%=c7W&ZRK%Q5G&TLf^ZpxCvn6>GExunv8ix$&Ld)g-+RgM007ieB))CL{I&@g
zPJzgVpeIj}9B#zyaz%m2g@B}t)l+eyPKu`$1HuDQH_wB&R583WHEF{TQf0X9JVHZQ
z;K2cjpv@Kp>mXJ^P#T3H*|!bQ?<T?_`x(|eA|Her5SQNoK5QC-Rgah!bU?i->qt-9
zCIo9BW(B>-5FB>}f)x<C5CW22f0M|&Hp0Q$8j%aZWWux&Xk&||%Mgr(#)2T734|}D
zt>Tg=q;>M$BlI>o$AWis5oNl5*eD!~t`XVZ07y=~h1nOyC}?V|?;bHL$Z3Y~sn_0M
zuB<K=pzk2&IDDQ2dQK~bk$lvQ*;mCXX=1$ZAar@X$cd^fUthLriH%_T4nixS(&<Yo
zo$l11)v24sZB+D`de5*C0Ass`e$YyRHKa=Ih^sJ+c!ZvODnuB*f&l7VgkcPX>oAOh
z$Ol8^7Gpbz*B6vHR%kr?G0r#$S7BHIp<(3KAGSTi8VC*JKS_=+OMEf2g;@*}t02~Z
z@r$ZQzV>4sSWl*P5cyzW!H1ivF!BqR(S)iH>t+{cdc0{EPIyEb)atib=BibvKxiP@
zFicjf&VkS{W&}Ma5o!w)am`e5<|K$h)|66@se)J`S_P2?Q9WmgRBMkqaC&R3`v_26
zQ|g#2Cwc0GehezPMImi0-KqfB#=7?eDc)C37A&={snhv`&rXD~M-P`;csa?Va{kv;
z2hYv%o(_UhV>u~bDqS-jJX)ak3XvcmRN5(heJVf662G0__b`#^@*9kPwoB#q2TDb{
zEacSkku#AWr?jrC`aab!l&xhkiA^e*5Q(Q>?tL(sc^{E0PlZX7T!w>NwW~)bPqjfZ
za{8U`XS3&?x8wKfUmu5RiE4Pmq-m4j-MU@ynK)05>NO!(v2|OYuS}fWQ4hR<3%VTw
zqJ~HkQoY1w@oxcufk~e9xTJA{*^5O<<}b9~TUg67uK-8SQq7mv8}k4F002ovPDHLk
FV1n3?LplHe

literal 0
HcmV?d00001

diff --git a/src/components/Textarea/index.scss b/src/components/Textarea/index.scss
index cfe6820..5d4858b 100644
--- a/src/components/Textarea/index.scss
+++ b/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);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Textarea/index.tsx b/src/components/Textarea/index.tsx
index d6a1212..d208b4d 100644
--- a/src/components/Textarea/index.tsx
+++ b/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}
+      />
     </>
-  )
+  );
 }
diff --git a/src/custom.scss b/src/custom.scss
index dc1e318..1aab4f5 100644
--- a/src/custom.scss
+++ b/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 {
diff --git a/src/views/Auth/Login/index.scss b/src/views/Auth/Login/index.scss
index 7bb985e..4c53109 100644
--- a/src/views/Auth/Login/index.scss
+++ b/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()
       }
     }
diff --git a/src/views/Auth/Login/index.tsx b/src/views/Auth/Login/index.tsx
index 80f193d..061a1f0 100644
--- a/src/views/Auth/Login/index.tsx
+++ b/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,
+                  }}
                 />
               }
             />
diff --git a/src/views/Auth/SignUp/index.scss b/src/views/Auth/SignUp/index.scss
index 86d2984..9821338 100644
--- a/src/views/Auth/SignUp/index.scss
+++ b/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);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/views/Auth/SignUp/index.tsx b/src/views/Auth/SignUp/index.tsx
index 48d5f77..457b0f6 100644
--- a/src/views/Auth/SignUp/index.tsx
+++ b/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>
diff --git a/src/views/Contact/index.scss b/src/views/Contact/index.scss
index a60cdf8..c154e5c 100644
--- a/src/views/Contact/index.scss
+++ 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);
       }
diff --git a/src/views/Contact/index.tsx b/src/views/Contact/index.tsx
index d6cfbec..d99e76a 100644
--- a/src/views/Contact/index.tsx
+++ b/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);