diff --git a/src/components/Header/ThemeStyled/Theme.styled.jsx b/src/components/Header/ThemeStyled/Theme.styled.jsx index 88c6799..86ed28e 100644 --- a/src/components/Header/ThemeStyled/Theme.styled.jsx +++ b/src/components/Header/ThemeStyled/Theme.styled.jsx @@ -69,6 +69,9 @@ export const darkTheme = { borderBottomForToday: '1px solid #2A3052', backgroundColorScroll: '#2F3875', backgroundTrackScroll: '#2A3052', + inputOnlyColor: '--input-dark', + inputColorText: '--input-color-dark', + inputTheme: '1px solid #2f3875', }; export const lightTheme = { @@ -106,7 +109,12 @@ export const lightTheme = { dayStylesDayBackground: '#fff;', dayStylesDayPercentage: '#9ebbff;', + borderBottomForToday: '1px solid #d7e3ff', backgroundColorScroll: '#9ebbff', backgroundTrackScroll: '#d7e3ff', + + 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 index 9788071..6d57063 100644 --- 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 index c010074..c9c6548 100644 --- 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 index b3a892c..7133ae3 100644 --- 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; }