Merge pull request #94 from Elizabethhub/bug-fix/darktheme(auth)

fix color auth (dark input)
Elizabethhub · Mar 24, 2024 · 85ee031 · 85ee031
2 parents c7c1e88 + 7555988
commit 85ee031
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 9 deletions.
diff --git a/src/components/Header/ThemeStyled/Theme.styled.jsx b/src/components/Header/ThemeStyled/Theme.styled.jsx
@@ -64,7 +64,11 @@ export const darkTheme = {
   modalCantainerBoxShadow: '0 4px 14px 0 rgba(0, 0, 0, 0.2);',
 
   dayStylesDayBackground: '#1c1d26;',
-  dayStylesDayPercentage: '#2f3875;;',
+  dayStylesDayPercentage: '#2f3875;',
+
+  inputOnlyColor: '--input-dark',
+  inputColorText: '--input-color-dark',
+  inputTheme: '1px solid #2f3875',
 };
 
 export const lightTheme = {
@@ -102,4 +106,8 @@ export const lightTheme = {
 
   dayStylesDayBackground: '#fff;',
   dayStylesDayPercentage: '#9ebbff;',
+
+  inputOnlyColor: '--primary-mediumblue',
+  inputColorText: '--primary-blue',
+  inputTheme: '1px solid var(--primary-mediumblue)',
 };
diff --git a/src/components/LoginForm/LoginForm.styled.js b/src/components/LoginForm/LoginForm.styled.js
@@ -21,7 +21,7 @@ export const StyledLoginForm = styled.form`
     border: 1px solid
       var(
         ${(props) =>
-          props.$errorEmail ? '--primary-red' : '--primary-mediumblue'}
+          props.$errorEmail ? '--primary-red' : props.theme.inputOnlyColor}
       );
 
     color: var(${(props) => (props.$errorEmail ? '--primary-red' : '--blue')});
@@ -30,7 +30,7 @@ export const StyledLoginForm = styled.form`
     border: 1px solid
       var(
         ${(props) =>
-          props.$errorPassword ? '--primary-red' : '--primary-mediumblue'}
+          props.$errorPassword ? '--primary-red' : props.theme.inputOnlyColor}
       );
 
     color: var(
@@ -41,7 +41,7 @@ export const StyledLoginForm = styled.form`
     border: 1px solid
       var(
         ${(props) =>
-          props.$errorPassword ? '--primary-red' : '--primary-mediumblue'}
+          props.$errorPassword ? '--primary-red' : props.theme.inputOnlyColor}
       );
 
     color: var(
@@ -59,13 +59,13 @@ export const LoginInput = styled.input`
   margin-top: 8px;
   padding: 12px 10px;
   border-radius: 6px;
-  border: 1px solid var(--primary-mediumblue);
+  border: ${(props) => props.theme.input};
   outline: none;
   background-color: ${(props) => props.theme.formInputBackground};
   color: ${(props) => props.theme.formInputColor};
 
   &::placeholder {
-    color: var(--primary-blue);
+    color: var(${(props) => props.theme.inputColorText});
     font-size: 16px;
     line-height: 20px;
   }

diff --git a/src/pages/ForgotPassword/ForgotPassword.styled.js b/src/pages/ForgotPassword/ForgotPassword.styled.js
@@ -33,7 +33,8 @@ export const ForgotInput = styled.input`
   margin-top: 8px;
   padding: 12px 10px;
   border-radius: 6px;
-  border: 1px solid var(--primary-mediumblue);
+  background-color: ${(props) => props.theme.formInputBackground};
+  border: 1px solid var(${(props) => props.theme.inputOnlyColor});
   outline: none;
   color: var(--blue);
   margin-bottom: 20px;
@@ -43,7 +44,7 @@ export const ForgotInput = styled.input`
   }
 
   &::placeholder {
-    color: var(--primary-blue);
+    color: var(${(props) => props.theme.inputColorText});
     font-size: 16px;
     line-height: 20px;
   }
@@ -52,7 +53,7 @@ export const ForgotBtn = styled.button`
   margin-bottom: 16px;
   background-color: var(--blue);
   border: 1px solid var(--blue);
-  color: var(--white);
+  color: ${(props) => props.theme.buttonColor};
   padding: 8px 30px;
   border-radius: 10px;
   max-width: 150px;

diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -13,4 +13,6 @@
   --modal-light-blue: #9ebbff;
   --modal-calc-shadow: 0px 2px 4px 0px rgba(64, 123, 255, 0.2);
   --modal-add-shadow: 0px 4px 8px 0px rgba(64, 123, 255, 0.34);
+  --input-dark: #2a3052;
+  --input-color-dark: #2f3875;
 }