Skip to content

Commit

Permalink
Merge pull request #96 from Elizabethhub/feature/setting-modal
Browse files Browse the repository at this point in the history
Feature/setting modal
  • Loading branch information
Elizabethhub authored Mar 24, 2024
2 parents 1196677 + d4a8bee commit 6fa0521
Show file tree
Hide file tree
Showing 6 changed files with 109 additions and 56 deletions.
34 changes: 21 additions & 13 deletions src/components/SettingModal/SettingModal.styled.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export const Form = styled.form`
border: 1px solid
var(
${(props) =>
props.$errors.name ? '--primary-red' : '--primary-mediumblue'}
props.$errors.name ? '--primary-red' : props.theme.settingInputborder}
);
color: var(${(props) => (props.$errors.name ? '--primary-red' : '--blue')});
margin-bottom: ${(props) => (props.$errors?.name ? '4px' : '0')};
Expand All @@ -81,7 +81,9 @@ export const Form = styled.form`
border: 1px solid
var(
${(props) =>
props.$errors.email ? '--primary-red' : '--primary-mediumblue'}
props.$errors.email
? '--primary-red'
: props.theme.settingInputborder}
);
color: var(
${(props) => (props.$errors.email ? '--primary-red' : '--blue')}
Expand All @@ -92,7 +94,9 @@ export const Form = styled.form`
border: 1px solid
var(
${(props) =>
props.$errors.oldPassword ? '--primary-red' : '--primary-mediumblue'}
props.$errors.oldPassword
? '--primary-red'
: props.theme.settingInputborder}
);
color: var(
${(props) => (props.$errors.oldPassword ? '--primary-red' : '--blue')}
Expand All @@ -103,7 +107,9 @@ export const Form = styled.form`
border: 1px solid
var(
${(props) =>
props.$errors.newPassword ? '--primary-red' : '--primary-mediumblue'}
props.$errors.newPassword
? '--primary-red'
: props.theme.settingInputborder}
);
color: var(
${(props) => (props.$errors.newPassword ? '--primary-red' : '--blue')}
Expand All @@ -116,7 +122,7 @@ export const Form = styled.form`
${(props) =>
props.$errors.confirmPassword
? '--primary-red'
: '--primary-mediumblue'}
: props.theme.settingInputborder}
);
color: var(
${(props) => (props.$errors.confirmPassword ? '--primary-red' : '--blue')}
Expand Down Expand Up @@ -182,6 +188,7 @@ export const GenderLabel = styled.label`
font-weight: 400;
line-height: 1.25;
font-family: 'Roboto', sans-serif;
cursor: pointer;
`;

export const SmallLabel = styled.label`
Expand All @@ -200,7 +207,7 @@ export const RadioWrap = styled.div`
`;

export const InputFild = styled.input`
border: 1px solid var(--primary-mediumblue);
border: ${(props) => props.theme.settingInputborder};
border-radius: 6px;
padding: 12px 10px;
width: 100%;
Expand All @@ -210,8 +217,8 @@ export const InputFild = styled.input`
font-weight: 400;
line-height: 1.25;
font-family: 'Roboto', sans-serif;
color: var(--blue);
caret-color: var(--black);
/* color: var(--blue); */
caret-color: ${(props) => props.theme.formInputCaretColor};
background-color: ${(props) => props.theme.formInputBackground};
color: ${(props) => props.theme.formInputColor};
outline: none;
Expand All @@ -220,7 +227,7 @@ export const InputFild = styled.input`
font-weight: 400;
line-height: 1.25;
font-family: 'Roboto', sans-serif;
color: var(--modal-light-blue);
color: ${(props) => props.theme.settingInputPlaceholder};
}
@media only screen and (min-width: 1440px) {
Expand All @@ -235,7 +242,7 @@ export const PasswordWrap = styled.div`

export const InputPassword = styled.input`
position: relative;
border: 1px solid #d7e3ff;
border: ${(props) => props.theme.settingInputborder};
border-radius: 6px;
padding: 12px 10px;
width: 100%;
Expand All @@ -245,15 +252,16 @@ export const InputPassword = styled.input`
font-weight: 400;
line-height: 1.25;
font-family: 'Roboto', sans-serif;
color: var(--blue);
caret-color: var(--black);
caret-color: ${(props) => props.theme.formInputCaretColor};
background-color: ${(props) => props.theme.formInputBackground};
color: ${(props) => props.theme.formInputColor};
outline: none;
&::placeholder {
font-size: 16px;
font-weight: 400;
line-height: 1.25;
font-family: 'Roboto', sans-serif;
color: var(--modal-light-blue);
color: ${(props) => props.theme.settingInputPlaceholder};
}
@media only screen and (min-width: 1440px) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/SettingModal/UploadingPhoto.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const PInput = styled.p`
font-weight: 500;
font-size: 14px;
line-height: 129%;
color: #407bff;
color: ${(props) => props.theme.formInputColor};
`;

const UploadingPhoto = () => {
Expand Down
23 changes: 20 additions & 3 deletions src/components/SwitchTheme/Theme.styled.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@ export const ThemeStyledButton = styled.button`
background: ${(props) => props.theme.buttonBackground};
color: ${(props) => props.theme.buttonColor};
/* Контейнер */
background: ${(props) => props.theme.modalCantainerBackground};
background: ${(props) => props.theme.dayStylesDayBackground};
box-shadow: ${(props) => props.theme.settingInputborder};
background: ${(props) => props.theme.backgroundWelcomeImageTablet};
background: ${(props) => props.theme.backgroundWelcomeImageMobale};
`;
Expand Down Expand Up @@ -66,14 +69,21 @@ export const darkTheme = {
formInputBackground: '#1c1d26;',
formInputColor: '#5082f2;',
formInputColorPlaceholder: '#2f3875;',
formInputCaretColor: '#d5dff5',
formInputErrorColor: '#f1616',

dailyWrapperBorder: '1px solid #1f2438;',
dailyWrapperBackground: '#1c1d26;',
dailyWrapperBoxShadow: '0 4px 14px 0 rgba(0, 0, 0, 0.2);',

divCantainerBackground: '#1f2438;',
settingUploadSvg: '#5082F2',
settingRadioButtonFill: '#1C1D26',
settingRadioButtonStroke: '#5082F2',
settingInputborder: '1px solid #2A3052',
settingInputPlaceholder: '#2f3875',

modalCantainerBackground: '#1f2438;',
modalCantainerBackground: '#1c1d26;',
modalCantainerBoxShadow: '0 4px 14px 0 rgba(0, 0, 0, 0.2);',

dayStylesDayBackground: '#1c1d26;',
Expand Down Expand Up @@ -114,14 +124,21 @@ export const lightTheme = {
BottleSVG: '#F5F5F5;',

formInputBackground: '#fff;',
formInputColor: '#407bff;',
formInputColorPlaceholder: '#9ebbff;',
formInputColor: 'var(--blue)',
formInputColorPlaceholder: 'var(--modal-light-blue)',
formInputCaretColor: 'var(--black)',
formInputErrorColor: 'var(--primary-red)',

dailyWrapperBorder: '1px solid #ecf2ff',
dailyWrapperBackground: '#fff;',
dailyWrapperBoxShadow: '0 4px 8px 0 rgba(158, 187, 255, 0.12);',

divCantainerBackground: '#ECF2FF;',
settingUploadSvg: 'var(--blue)',
settingRadioButtonFill: '#fff',
settingRadioButtonStroke: 'var(--blue)',
settingInputborder: '1px solid var(--primary-mediumblue)',
settingInputPlaceholder: 'var(--modal-light-blue)',

modalCantainerBackground: '#fff;',
modalCantainerBoxShadow: '0px 4px 4px 0px rgba(64, 123, 255, 0.3);',
Expand Down
35 changes: 23 additions & 12 deletions src/images/SettingModal/RadioChecked.jsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,24 @@
const RadioChecked = (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={14}
height={14}
fill="none"
{...props}
>
<circle cx={7} cy={7} r={6.5} fill="#fff" stroke="#407BFF" />
<circle cx={7} cy={7} r={3} fill="#407BFF" />
</svg>
);
import { useTheme } from 'styled-components';

const RadioChecked = (props) => {
const theme = useTheme();
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={14}
height={14}
fill="none"
{...props}
>
<circle
cx={7}
cy={7}
r={6.5}
fill={theme.settingRadioButtonFill}
stroke={theme.settingRadioButtonStroke}
/>
<circle cx={7} cy={7} r={3} fill={theme.settingRadioButtonStroke} />
</svg>
);
};
export default RadioChecked;
34 changes: 23 additions & 11 deletions src/images/SettingModal/RadioUnChecked.jsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
const RadioUnChecked = (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={14}
height={14}
fill="none"
{...props}
>
<circle cx={7} cy={7} r={6.5} fill="#fff" stroke="#407BFF" />
</svg>
);
import { useTheme } from 'styled-components';

const RadioUnChecked = (props) => {
const theme = useTheme();
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={14}
height={14}
fill="none"
{...props}
>
<circle
cx={7}
cy={7}
r={6.5}
fill={theme.settingRadioButtonFill}
stroke={theme.settingRadioButtonStroke}
/>
</svg>
);
};

export default RadioUnChecked;
37 changes: 21 additions & 16 deletions src/images/SettingModal/Upload.jsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
import { useTheme } from 'styled-components';

// import * as React from "react"
const Upload = (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={14}
height={14}
fill="none"
{...props}
>
<path
stroke="#407BFF"
strokeLinecap="round"
strokeLinejoin="round"
d="M1 10v1.5A1.5 1.5 0 0 0 2.5 13h9a1.5 1.5 0 0 0 1.5-1.5V10M4 4l3-3m0 0 3 3M7 1v9"
/>
</svg>
);
const Upload = (props) => {
const theme = useTheme();
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={14}
height={14}
fill="none"
{...props}
>
<path
stroke={theme.settingUploadSvg}
strokeLinecap="round"
strokeLinejoin="round"
d="M1 10v1.5A1.5 1.5 0 0 0 2.5 13h9a1.5 1.5 0 0 0 1.5-1.5V10M4 4l3-3m0 0 3 3M7 1v9"
/>
</svg>
);
};
export default Upload;

0 comments on commit 6fa0521

Please sign in to comment.