From 3f2ea28b414f5710f492117242673548f89ce57d Mon Sep 17 00:00:00 2001 From: Lyst67 Date: Mon, 8 Apr 2024 22:14:57 +0300 Subject: [PATCH] module_to_emotion --- src/components/CalBox/CalBox.jsx | 35 +++-- .../{CalBox.module.css => CalBox.styled.jsx} | 82 +++++----- src/components/SignBtns/SignBtns.jsx | 22 +-- src/components/SignBtns/SignBtns.module.css | 40 ----- src/components/SignBtns/SignBtns.styled.jsx | 39 +++++ src/components/SignInForm/SignInForm.jsx | 100 ++++++------ ...nForm.module.css => SignInForm.styled.jsx} | 142 ++++++++++-------- src/components/SignUpForm/SignUpForm.jsx | 126 ++++++++-------- ...pForm.module.css => SignUpForm.styled.jsx} | 142 ++++++++++-------- src/components/VideoBox/VideoBox.jsx | 24 +-- ...ideoBox.module.css => VideoBox.styled.jsx} | 84 ++++++----- .../WelcomeLayout/WelcomeLayout.jsx | 33 ++-- .../WelcomeLayout/WelcomeLayout.module.css | 83 ---------- .../WelcomeLayout/WelcomeLayout.styled.jsx | 73 +++++++++ src/components/WelcomePart/WelcomePart.jsx | 16 +- ...Part.module.css => WelcomePart.styled.jsx} | 40 ++--- src/pages/SignInPage/SignInPage.jsx | 32 ++-- .../SignInPage.styled.jsx} | 52 +++---- src/pages/SignUpPage/SignUpPage.jsx | 32 ++-- .../SignUpPage.styled.jsx} | 75 ++++----- 20 files changed, 655 insertions(+), 617 deletions(-) rename src/components/CalBox/{CalBox.module.css => CalBox.styled.jsx} (68%) delete mode 100644 src/components/SignBtns/SignBtns.module.css create mode 100644 src/components/SignBtns/SignBtns.styled.jsx rename src/components/SignInForm/{SignInForm.module.css => SignInForm.styled.jsx} (58%) rename src/components/SignUpForm/{SignUpForm.module.css => SignUpForm.styled.jsx} (58%) rename src/components/VideoBox/{VideoBox.module.css => VideoBox.styled.jsx} (69%) delete mode 100644 src/components/WelcomeLayout/WelcomeLayout.module.css create mode 100644 src/components/WelcomeLayout/WelcomeLayout.styled.jsx rename src/components/WelcomePart/{WelcomePart.module.css => WelcomePart.styled.jsx} (70%) rename src/pages/{SignUpPage/SignUpPage.module.css => SignInPage/SignInPage.styled.jsx} (54%) rename src/pages/{SignInPage/SignInPage.module.css => SignUpPage/SignUpPage.styled.jsx} (61%) diff --git a/src/components/CalBox/CalBox.jsx b/src/components/CalBox/CalBox.jsx index a6d60ba..6856ab2 100644 --- a/src/components/CalBox/CalBox.jsx +++ b/src/components/CalBox/CalBox.jsx @@ -1,26 +1,29 @@ import sprite from '../../assets/sprite.svg'; -import css from './CalBox.module.css'; +import { + CalBoxDiv, + CalEllips, + IconRun, + CaloriesSum, + K, + CalText, +} from './CalBox.styled'; const CalBox = ({ caloriesSum }) => { const burnCalSum = Math.round(caloriesSum / 1000); return ( -
-
- - - -
- + + + + + + + {!caloriesSum ? 500 : caloriesSum > 1000 ? burnCalSum : caloriesSum} - - {caloriesSum > 1000 && 'K '} - {/* {!caloriesSum ? `500` : caloriesSum} */} - cal -
+ + {caloriesSum > 1000 && 'K '} + cal + ); }; export default CalBox; diff --git a/src/components/CalBox/CalBox.module.css b/src/components/CalBox/CalBox.styled.jsx similarity index 68% rename from src/components/CalBox/CalBox.module.css rename to src/components/CalBox/CalBox.styled.jsx index 4f7f613..90e45ec 100644 --- a/src/components/CalBox/CalBox.module.css +++ b/src/components/CalBox/CalBox.styled.jsx @@ -1,6 +1,7 @@ -@import '../../index.css'; +import styled from '@emotion/styled'; +import '../../index.css'; -.cal_box { +export const CalBoxDiv = styled.div` width: fit-content; min-width: 119px; height: 76px; @@ -8,8 +9,16 @@ margin-left: auto; border-radius: 12px; background-color: var(--orange-1, #ef8964); -} -.cal_ellips { + + @media (min-width: 768px) { + width: fit-content; + min-width: 180px; + height: 110px; + padding: 14px 38px 14px 28px; + } +`; + +export const CalEllips = styled.div` display: flex; justify-content: center; align-items: center; @@ -18,14 +27,26 @@ border-radius: 50%; background-color: var(--beige, #efa082); margin-bottom: 4px; -} -.icon_run { + + @media (min-width: 768px) { + width: 24px; + height: 24px; + margin-bottom: 8px; + } +`; + +export const IconRun = styled.svg` width: 12px; height: 12px; fill: var(--white, #efede8); -} -.cal { + @media (min-width: 768px) { + width: 16px; + height: 16px; + } +`; + +export const CaloriesSum = styled.span` color: var(--white, #efede8); font-size: 24px; font-weight: 700; @@ -33,40 +54,29 @@ letter-spacing: -1px; text-transform: uppercase; margin-right: 4px; -} -.cal_text { - color: var(--vievs-text, #efede8a6); - font-size: 12px; - font-weight: 700; - line-height: 1.33; - margin-left: 4px; -} -@media (min-width: 768px) { - .cal_box { - width: fit-content; - min-width: 180px; - height: 110px; - padding: 14px 38px 14px 28px; - } - .cal_ellips { - width: 24px; - height: 24px; - margin-bottom: 8px; - } - .icon_run { - width: 16px; - height: 16px; - } - .cal { + + @media (min-width: 768px) { font-size: 48px; line-height: 1.04; margin-right: 6px; } - .k { +`; + +export const K = styled.span` + @media (min-width: 768px) { font-size: 24px; } - .cal_text { +`; + +export const CalText = styled.span` + color: var(--vievs-text, #efede8a6); + font-size: 12px; + font-weight: 700; + line-height: 1.33; + margin-left: 4px; + + @media (min-width: 768px) { font-size: 16px; line-height: 1.5; } -} +`; diff --git a/src/components/SignBtns/SignBtns.jsx b/src/components/SignBtns/SignBtns.jsx index 93a63bc..b73e9de 100644 --- a/src/components/SignBtns/SignBtns.jsx +++ b/src/components/SignBtns/SignBtns.jsx @@ -1,25 +1,17 @@ -import css from './SignBtns.module.css'; import { useNavigate } from 'react-router-dom'; +import { Buttons, SignButton } from './SignBtns.styled'; export const SignBtns = () => { const navigate = useNavigate(); return ( -
- - -
+ + ); }; diff --git a/src/components/SignBtns/SignBtns.module.css b/src/components/SignBtns/SignBtns.module.css deleted file mode 100644 index 125abc6..0000000 --- a/src/components/SignBtns/SignBtns.module.css +++ /dev/null @@ -1,40 +0,0 @@ -@import '../../index.css'; - -.btns { - display: flex; - gap: 14px; -} -.sing_btn { - display: flex; - padding: 12px 40px; - justify-content: center; - align-items: center; - border-radius: 12px; - font-weight: 500; - line-height: 1.12; - color: var(--white, #efede8); - background-color: transparent; - border: 1px solid var(--border, #efede84d); - transition: - border-color 250ms linear, - background-color 250ms linear; -} -.up { - background-color: var(--orange, #e6533c); -} -.up:is(:hover, :focus) { - background-color: var(--orange-1, #ef8964); -} -.in:is(:hover, :focus) { - border-color: var(--orange, #e6533c); -} -@media (min-width: 768px) { - .btns { - gap: 20px; - } - .sing_btn { - padding: 16px 60px; - font-size: 20px; - line-height: 1.2; - } -} diff --git a/src/components/SignBtns/SignBtns.styled.jsx b/src/components/SignBtns/SignBtns.styled.jsx new file mode 100644 index 0000000..3b17393 --- /dev/null +++ b/src/components/SignBtns/SignBtns.styled.jsx @@ -0,0 +1,39 @@ +import styled from '@emotion/styled'; + +export const Buttons = styled.div` + display: flex; + gap: 14px; + + @media (min-width: 768px) { + gap: 20px; + } +`; +export const SignButton = styled.button` + display: flex; + padding: 12px 40px; + justify-content: center; + align-items: center; + border-radius: 12px; + font-weight: 500; + line-height: 1.12; + color: var(--white, #efede8); + border: 1px solid var(--border, #efede84d); + transition: + border-color 250ms linear, + background-color 250ms linear; + background-color: ${(props) => + props.orange ? 'var(--orange, #e6533c);' : 'transparent'}; + &:hover, + &:focus { + ${(props) => + props.orange + ? 'background-color: var(--orange-1, #ef8964)' + : 'border-color: var(--orange, #e6533c)'} + } + + @media (min-width: 768px) { + padding: 16px 60px; + font-size: 20px; + line-height: 1.2; + } +`; diff --git a/src/components/SignInForm/SignInForm.jsx b/src/components/SignInForm/SignInForm.jsx index caa7118..ac25015 100644 --- a/src/components/SignInForm/SignInForm.jsx +++ b/src/components/SignInForm/SignInForm.jsx @@ -1,8 +1,19 @@ -import css from './SignInForm.module.css'; import sprite from '../../assets/sprite.svg'; -import { Formik, Form, Field, ErrorMessage } from 'formik'; +import { Formik, ErrorMessage } from 'formik'; import * as Yup from 'yup'; import { useState } from 'react'; +import { + FormikForm, + InputsBox, + FormikInputField, + PassInputDiv, + IconEye, + ErrorRowDiv, + SuccessRowDiv, + IconError, + IconSuccess, + FormSubmitButton, +} from './SignInForm.styled'; const initialValues = { email: '', @@ -21,6 +32,15 @@ const SignInSchema = Yup.object().shape({ export const SignInForm = ({ onSubmit }) => { const [visible, setVisible] = useState(false); + function borderProp(lib, field) { + if (lib.errors[field] && lib.touched[field]) { + return { red: 'true' }; + } + if (!lib.errors[field] && lib.values[field]) { + return { green: 'true' }; + } + } + return ( { > {(formik) => { const { errors, touched, values } = formik; + return ( <> -
-
+ +
- {errors.email && touched.email ? ( -
- + + - + -
+ ) : null} {!errors.email && values.email ? ( -
- + + - +

Success email

-
+ ) : null}
-
- + - setVisible(!visible)} - > + setVisible(!visible)}> {visible ? ( ) : ( )} - -
+ + {errors.password && touched.password ? ( -
- + + - + -
+ ) : null} {!errors.password && values.password ? ( -
- + + - +

Success password

-
+ ) : null}
-
+ - -
+ Sign In + ); }} diff --git a/src/components/SignInForm/SignInForm.module.css b/src/components/SignInForm/SignInForm.styled.jsx similarity index 58% rename from src/components/SignInForm/SignInForm.module.css rename to src/components/SignInForm/SignInForm.styled.jsx index 0d5e7f6..340f346 100644 --- a/src/components/SignInForm/SignInForm.module.css +++ b/src/components/SignInForm/SignInForm.styled.jsx @@ -1,15 +1,26 @@ -@import '../../index.css'; +import styled from '@emotion/styled'; +import { Field, Form } from 'formik'; -.form { +export const FormikForm = styled(Form)` width: 335px; height: fit-content; -} -.inputs { + + @media (min-width: 768px) { + width: 364px; + } +`; + +export const InputsBox = styled.div` display: flex; flex-direction: column; gap: 18px; -} -.form_input { + + @media (min-width: 768px) { + gap: 20px; + } +`; + +export const FormikInputField = styled(Field)` width: 100%; padding: 14px; margin-bottom: 4px; @@ -18,56 +29,38 @@ line-height: 1.28; background-color: transparent; border-radius: 12px; - border: 1px solid var(--border, #efede84d); outline: none; + border: ${(props) => + props.red + ? '1px solid var(--error-color, #d80027);' + : props.green + ? '1px solid var(--success-color, #3cbf61);' + : '1px solid var(--border, #efede84d);'}; transition: border 250ms linear; -} -.form_input:is(:hover, :focus) { - border: 1px solid var(--orange, #e6533c); -} -.error_input { - border: 1px solid var(--error-color, #d80027); -} -.success_input { - border: 1px solid var(--success-color, #3cbf61); -} -.input_pass_field { + &:hover, + &:focus { + border: 1px solid var(--orange, #e6533c); + } + + @media (min-width: 768px) { + padding: 16px; + font-size: 16px; + line-height: 1.5; + } +`; + +export const PassInputDiv = styled.div` display: flex; align-items: center; -} -.icon_eye { +`; + +export const IconEye = styled.svg` width: 20px; height: 20px; margin-left: -34px; -} -.form_btn { - display: flex; - width: 136px; - margin-top: 28px; - padding: 12px 40px; - justify-content: center; - align-items: center; - border-radius: 12px; - font-weight: 500; - line-height: 1.12; - color: var(--white, #efede8); - background-color: var(--orange, #e6533c); - transition: background-color 250ms linear; -} -.form_btn:is(:hover, :focus) { - background-color: var(--orange-1, #ef8964); -} -.icon_checkbox_error { - fill: var(--error-color, #d80027); - width: 16px; - height: 16px; -} -.icon_checkbox_succsess { - fill: var(--success-color, #3cbf61); - width: 16px; - height: 16px; -} -.error_row { +`; + +export const ErrorRowDiv = styled.div` display: flex; gap: 4px; align-items: center; @@ -75,8 +68,9 @@ font-size: 12px; line-height: 1.5; letter-spacing: 0.12px; -} -.success_row { +`; + +export const SuccessRowDiv = styled.div` display: flex; gap: 4px; align-items: center; @@ -84,25 +78,43 @@ font-size: 12px; line-height: 1.5; letter-spacing: 0.12px; -} +`; -@media (min-width: 768px) { - .form { - width: 364px; - } - .inputs { - gap: 20px; - } - .form_input { - padding: 16px; - font-size: 16px; - line-height: 1.5; +export const IconError = styled.svg` + fill: var(--error-color, #d80027); + width: 16px; + height: 16px; +`; + +export const IconSuccess = styled.svg` + fill: var(--success-color, #3cbf61); + width: 16px; + height: 16px; +`; + +export const FormSubmitButton = styled.button` + display: flex; + width: 136px; + margin-top: 28px; + padding: 12px 40px; + justify-content: center; + align-items: center; + border-radius: 12px; + font-weight: 500; + line-height: 1.12; + color: var(--white, #efede8); + background-color: var(--orange, #e6533c); + transition: background-color 250ms linear; + &:hover, + &:focus { + background-color: var(--orange-1, #ef8964); } - .form_btn { + + @media (min-width: 768px) { min-width: 190px; margin-top: 64px; padding: 16px 60px; font-size: 20px; line-height: 1.2; } -} +`; diff --git a/src/components/SignUpForm/SignUpForm.jsx b/src/components/SignUpForm/SignUpForm.jsx index 0d30911..513afb4 100644 --- a/src/components/SignUpForm/SignUpForm.jsx +++ b/src/components/SignUpForm/SignUpForm.jsx @@ -1,8 +1,19 @@ -import css from './SignUpForm.module.css'; import sprite from '../../assets/sprite.svg'; -import { Formik, Form, Field, ErrorMessage } from 'formik'; +import { Formik, ErrorMessage } from 'formik'; import * as Yup from 'yup'; import { useState } from 'react'; +import { + FormikForm, + InputsBox, + FormikInputField, + PassInputDiv, + IconEye, + ErrorRowDiv, + SuccessRowDiv, + IconError, + IconSuccess, + FormSubmitButton, +} from './SignUpForm.styled'; const initialValues = { name: '', @@ -26,6 +37,15 @@ const SignUpSchema = Yup.object().shape({ export const SignUpForm = ({ onSubmit }) => { const [visible, setVisible] = useState(false); + function borderProp(lib, field) { + if (lib.errors[field] && lib.touched[field]) { + return { red: 'true' }; + } + if (!lib.errors[field] && lib.values[field]) { + return { green: 'true' }; + } + } + return ( { > {(formik) => { const { errors, touched, values } = formik; + return ( <> -
-
+ +
- {errors.name && touched.name ? ( -
- + + - + -
+ ) : null} {!errors.name && values.name ? ( -
- + + - +

Success name

-
+ ) : null}
- {errors.email && touched.email ? ( -
- + + - + -
+ ) : null} {!errors.email && values.email ? ( -
- + + - +

Success email

-
+ ) : null}
-
- + - setVisible(!visible)} - > + setVisible(!visible)}> {visible ? ( ) : ( )} - -
+ + {errors.password && touched.password ? ( -
- + + - + -
+ ) : null} {!errors.password && values.password ? ( -
- + + - +

Success password

-
+ ) : null}
-
+ - -
+ Sign Up + ); }} diff --git a/src/components/SignUpForm/SignUpForm.module.css b/src/components/SignUpForm/SignUpForm.styled.jsx similarity index 58% rename from src/components/SignUpForm/SignUpForm.module.css rename to src/components/SignUpForm/SignUpForm.styled.jsx index 0d5e7f6..340f346 100644 --- a/src/components/SignUpForm/SignUpForm.module.css +++ b/src/components/SignUpForm/SignUpForm.styled.jsx @@ -1,15 +1,26 @@ -@import '../../index.css'; +import styled from '@emotion/styled'; +import { Field, Form } from 'formik'; -.form { +export const FormikForm = styled(Form)` width: 335px; height: fit-content; -} -.inputs { + + @media (min-width: 768px) { + width: 364px; + } +`; + +export const InputsBox = styled.div` display: flex; flex-direction: column; gap: 18px; -} -.form_input { + + @media (min-width: 768px) { + gap: 20px; + } +`; + +export const FormikInputField = styled(Field)` width: 100%; padding: 14px; margin-bottom: 4px; @@ -18,56 +29,38 @@ line-height: 1.28; background-color: transparent; border-radius: 12px; - border: 1px solid var(--border, #efede84d); outline: none; + border: ${(props) => + props.red + ? '1px solid var(--error-color, #d80027);' + : props.green + ? '1px solid var(--success-color, #3cbf61);' + : '1px solid var(--border, #efede84d);'}; transition: border 250ms linear; -} -.form_input:is(:hover, :focus) { - border: 1px solid var(--orange, #e6533c); -} -.error_input { - border: 1px solid var(--error-color, #d80027); -} -.success_input { - border: 1px solid var(--success-color, #3cbf61); -} -.input_pass_field { + &:hover, + &:focus { + border: 1px solid var(--orange, #e6533c); + } + + @media (min-width: 768px) { + padding: 16px; + font-size: 16px; + line-height: 1.5; + } +`; + +export const PassInputDiv = styled.div` display: flex; align-items: center; -} -.icon_eye { +`; + +export const IconEye = styled.svg` width: 20px; height: 20px; margin-left: -34px; -} -.form_btn { - display: flex; - width: 136px; - margin-top: 28px; - padding: 12px 40px; - justify-content: center; - align-items: center; - border-radius: 12px; - font-weight: 500; - line-height: 1.12; - color: var(--white, #efede8); - background-color: var(--orange, #e6533c); - transition: background-color 250ms linear; -} -.form_btn:is(:hover, :focus) { - background-color: var(--orange-1, #ef8964); -} -.icon_checkbox_error { - fill: var(--error-color, #d80027); - width: 16px; - height: 16px; -} -.icon_checkbox_succsess { - fill: var(--success-color, #3cbf61); - width: 16px; - height: 16px; -} -.error_row { +`; + +export const ErrorRowDiv = styled.div` display: flex; gap: 4px; align-items: center; @@ -75,8 +68,9 @@ font-size: 12px; line-height: 1.5; letter-spacing: 0.12px; -} -.success_row { +`; + +export const SuccessRowDiv = styled.div` display: flex; gap: 4px; align-items: center; @@ -84,25 +78,43 @@ font-size: 12px; line-height: 1.5; letter-spacing: 0.12px; -} +`; -@media (min-width: 768px) { - .form { - width: 364px; - } - .inputs { - gap: 20px; - } - .form_input { - padding: 16px; - font-size: 16px; - line-height: 1.5; +export const IconError = styled.svg` + fill: var(--error-color, #d80027); + width: 16px; + height: 16px; +`; + +export const IconSuccess = styled.svg` + fill: var(--success-color, #3cbf61); + width: 16px; + height: 16px; +`; + +export const FormSubmitButton = styled.button` + display: flex; + width: 136px; + margin-top: 28px; + padding: 12px 40px; + justify-content: center; + align-items: center; + border-radius: 12px; + font-weight: 500; + line-height: 1.12; + color: var(--white, #efede8); + background-color: var(--orange, #e6533c); + transition: background-color 250ms linear; + &:hover, + &:focus { + background-color: var(--orange-1, #ef8964); } - .form_btn { + + @media (min-width: 768px) { min-width: 190px; margin-top: 64px; padding: 16px 60px; font-size: 20px; line-height: 1.2; } -} +`; diff --git a/src/components/VideoBox/VideoBox.jsx b/src/components/VideoBox/VideoBox.jsx index 4fe7348..249c8ec 100644 --- a/src/components/VideoBox/VideoBox.jsx +++ b/src/components/VideoBox/VideoBox.jsx @@ -1,19 +1,25 @@ -import css from './VideoBox.module.css'; import sprite from '../../assets/sprite.svg'; +import { + VideoBoxDiv, + Ellips, + IconPlay, + ViewsSum, + ViewsText, +} from './VideoBox.styled'; const VideoBox = ({ videoCount }) => { return ( -
-
- + + + - -
+ +
-

{!videoCount ? `350 +` : videoCount}

-

Video tutorial

+ {!videoCount ? `350 +` : videoCount} + Video tutorial
-
+ ); }; export default VideoBox; diff --git a/src/components/VideoBox/VideoBox.module.css b/src/components/VideoBox/VideoBox.styled.jsx similarity index 69% rename from src/components/VideoBox/VideoBox.module.css rename to src/components/VideoBox/VideoBox.styled.jsx index 50708bb..e8240dd 100644 --- a/src/components/VideoBox/VideoBox.module.css +++ b/src/components/VideoBox/VideoBox.styled.jsx @@ -1,6 +1,6 @@ -@import '../../index.css'; +import styled from '@emotion/styled'; -.video_box { +export const VideoBoxDiv = styled.div` display: flex; gap: 8px; padding: 14px 18px; @@ -10,8 +10,22 @@ margin-bottom: 70px; border-radius: 12px; background-color: var(--grey, #303030); -} -.ellips { + + @media (min-width: 768px) { + width: 206px; + height: 96px; + gap: 12px; + padding: 20px 36px 20px 23px; + margin-bottom: 56px; + align-items: end; + } + + @media (min-width: 1440px) { + margin-bottom: 40px; + } +`; + +export const Ellips = styled.div` display: flex; justify-content: center; align-items: center; @@ -19,52 +33,44 @@ height: 30px; border-radius: 50%; background-color: var(--orange-1, #ef8964); -} -.icon_play { + + @media (min-width: 768px) { + width: 40px; + height: 40px; + } +`; + +export const IconPlay = styled.svg` width: 12px; height: 12px; -} -.views { + + @media (min-width: 768px) { + width: 20px; + height: 20px; + } +`; + +export const ViewsSum = styled.p` color: var(--white, #efede8); font-size: 16px; font-weight: 700; line-height: 1.12; margin-bottom: 4px; -} -.views_text { - color: var(--vievs-text, #efede8a6); - font-size: 12px; - line-height: 1.33; -} -@media (min-width: 768px) { - .video_box { - width: 206px; - height: 96px; - gap: 12px; - padding: 20px 36px 20px 23px; - margin-bottom: 56px; - align-items: end; - } - .ellips { - width: 40px; - height: 40px; - } - .icon_play { - width: 20px; - height: 20px; - } - .views { + + @media (min-width: 768px) { font-size: 24px; line-height: 1; margin-bottom: 8px; } - .views_text { +`; + +export const ViewsText = styled.p` + color: var(--vievs-text, #efede8a6); + font-size: 12px; + line-height: 1.33; + + @media (min-width: 768px) { font-size: 16px; line-height: 1.5; } -} -@media (min-width: 1440px) { - .video_box { - margin-bottom: 40px; - } -} +`; diff --git a/src/components/WelcomeLayout/WelcomeLayout.jsx b/src/components/WelcomeLayout/WelcomeLayout.jsx index 3f7ea72..a269450 100644 --- a/src/components/WelcomeLayout/WelcomeLayout.jsx +++ b/src/components/WelcomeLayout/WelcomeLayout.jsx @@ -1,21 +1,28 @@ import StatisticsInfo from '../StatisticsInfo/StatisticsInfo'; -import css from './WelcomeLayout.module.css'; - +import { + WelcomeContainer, + InsertPart, + WelcomeBgd, +} from './WelcomeLayout.styled.jsx'; +import bg_mod_1 from '../../assets/Welcome/images/people-training-gym-mob.webp'; +import bg_mod_2 from '../../assets/Welcome/images/people-training-gym-mob-2x.webp'; +import bg_tab_1 from '../../assets/Welcome/images/people-training-gym-tab.webp'; +import bg_tab_2 from '../../assets/Welcome/images/people-training-gym-tab-2x.webp'; +import bg_desk_1 from '../../assets/Welcome/images/people-training-gym-desk.webp'; +import bg_desk_2 from '../../assets/Welcome/images/people-training-gym-desk-2x.webp'; const WelcomeLayout = ({ children }) => { return ( <> -
-
-
-
{children}
-
- - - -
-
-
+
+ + {children} + + + +
); diff --git a/src/components/WelcomeLayout/WelcomeLayout.module.css b/src/components/WelcomeLayout/WelcomeLayout.module.css deleted file mode 100644 index e854904..0000000 --- a/src/components/WelcomeLayout/WelcomeLayout.module.css +++ /dev/null @@ -1,83 +0,0 @@ -@import '../../index.css'; - -.page_part { - position: relative; - padding-top: 180px; -} -.insert_part { - position: absolute; - top: 66px; -} - -.welcome_bgd { - max-width: 298px; - height: 100%; - margin-left: auto; - margin-right: -20px; - padding: 319px 20px 40px 44px; - background-image: url(../../assets/Welcome/images/people-training-gym-mob.webp), - var(--bg-gradient); - background-repeat: no-repeat; - background-size: cover; -} -@media (min-device-pixel-ratio: 2), - (min-resolution: 192dpi), - (min-resolution: 2dppx) { - .welcome_bgd { - background-image: url(../../assets/Welcome/images/people-training-gym-mob-2x.webp), - var(--bg-gradient); - } -} - -@media (min-width: 768px) { - .page_part { - padding-top: 48px; - } - .insert_part { - top: 105px; - } - - .welcome_bgd { - max-width: 437px; - padding: 583px 32px 48px 0; - margin-right: -32px; - background: url(../../assets/Welcome/images/people-training-gym-tab.webp), - var(--bg-gradient); - } - @media (min-device-pixel-ratio: 2), - (min-resolution: 192dpi), - (min-resolution: 2dppx) { - .welcome_bgd { - background-image: url(../../assets/Welcome/images/people-training-gym-tab-2x.webp), - var(--bg-gradient); - background-repeat: no-repeat; - background-size: cover; - } - } -} -@media (min-width: 1440px) { - .page_part { - padding-top: 0; - } - .insert_part { - top: 200px; - } - .welcome_bgd { - max-width: 670px; - margin-top: -84px; - margin-right: -96px; - padding: 384px 32px 172px 0; - background-image: url(../../assets/Welcome/images/people-training-gym-desk.webp), - var(--bg-desk-gradient); - } - @media (min-device-pixel-ratio: 2), - (min-resolution: 192dpi), - (min-resolution: 2dppx) { - .welcome_bgd { - background-image: url(../../assets/Welcome/images/people-training-gym-desk-2x.webp), - var(--bg-desk-gradient); - background-repeat: no-repeat; - background-size: cover; - } - } -} diff --git a/src/components/WelcomeLayout/WelcomeLayout.styled.jsx b/src/components/WelcomeLayout/WelcomeLayout.styled.jsx new file mode 100644 index 0000000..d6a0053 --- /dev/null +++ b/src/components/WelcomeLayout/WelcomeLayout.styled.jsx @@ -0,0 +1,73 @@ +import styled from '@emotion/styled'; + +export const WelcomeContainer = styled.div` + position: relative; + padding-top: 180px; + + @media (min-width: 768px) { + padding-top: 48px; + } + + @media (min-width: 1440px) { + padding-top: 0; + } +`; +export const InsertPart = styled.div` + position: absolute; + top: 66px; + + @media (min-width: 768px) { + top: 105px; + } + + @media (min-width: 1440px) { + top: 200px; + } +`; +export const WelcomeBgd = styled.div` + max-width: 298px; + height: 100%; + margin-left: auto; + margin-right: -20px; + padding: 319px 20px 40px 44px; + background-image: url(${(props) => props.bgi[0]}), var(--bg-gradient); + background-repeat: no-repeat; + background-size: cover; + + @media (min-device-pixel-ratio: 2), + (min-resolution: 192dpi), + (min-resolution: 2dppx) { + background-image: url(${(props) => props.bgi[1]}), var(--bg-gradient); + } + + @media (min-width: 768px) { + max-width: 437px; + padding: 583px 32px 48px 0; + margin-right: -32px; + background: url(${(props) => props.bgi[2]}), var(--bg-gradient); + + @media (min-device-pixel-ratio: 2), + (min-resolution: 192dpi), + (min-resolution: 2dppx) { + background-image: url(${(props) => props.bgi[3]}), var(--bg-gradient); + background-repeat: no-repeat; + background-size: cover; + } + } + + @media (min-width: 1440px) { + max-width: 670px; + margin-top: -84px; + margin-right: -96px; + padding: 384px 32px 172px 0; + background-image: url(${(props) => props.bgi[4]}), var(--bg-desk-gradient); + + @media (min-device-pixel-ratio: 2), + (min-resolution: 192dpi), + (min-resolution: 2dppx) { + background-image: url(${(props) => props.bgi[5]}), var(--bg-desk-gradient); + background-repeat: no-repeat; + background-size: cover; + } + } +`; diff --git a/src/components/WelcomePart/WelcomePart.jsx b/src/components/WelcomePart/WelcomePart.jsx index 0761ca5..f136e14 100644 --- a/src/components/WelcomePart/WelcomePart.jsx +++ b/src/components/WelcomePart/WelcomePart.jsx @@ -1,18 +1,18 @@ -import css from './WelcomePart.module.css'; import sprite from '../../assets/sprite.svg'; import { SignBtns } from '../SignBtns/SignBtns'; +import { TextBox, Title, IconLine } from './WelcomePart.styled'; export const WelcomePart = () => { return ( -
-
-

+
+ + Transforming your body shape with Power Pulse - <svg className={css.icon_line}> + <IconLine> <use href={`${sprite}#icon-Line`} /> - </svg> - </h1> - </div> + </IconLine> + +
); diff --git a/src/components/WelcomePart/WelcomePart.module.css b/src/components/WelcomePart/WelcomePart.styled.jsx similarity index 70% rename from src/components/WelcomePart/WelcomePart.module.css rename to src/components/WelcomePart/WelcomePart.styled.jsx index 7eb2d5c..202e5b8 100644 --- a/src/components/WelcomePart/WelcomePart.module.css +++ b/src/components/WelcomePart/WelcomePart.styled.jsx @@ -1,12 +1,18 @@ -@import '../../index.css'; +import styled from '@emotion/styled'; -.text_box { +export const TextBox = styled.div` max-width: 335px; height: 120px; margin-bottom: 40px; -} -.title { + @media (min-width: 768px) { + max-width: 598px; + height: 234px; + margin-bottom: 64px; + } +`; + +export const Title = styled.h1` position: relative; color: var(--white, #efede8); font-size: 38px; @@ -14,9 +20,15 @@ line-height: 1.05; letter-spacing: 0.38px; z-index: 10; -} -.icon_line { + @media (min-width: 768px) { + font-size: 70px; + line-height: 1.11; + letter-spacing: 0.7px; + } +`; + +export const IconLine = styled.svg` position: absolute; top: 43px; left: -9px; @@ -24,23 +36,11 @@ height: 35px; z-index: -1; stroke: var(--orange-1, #ef8964); -} -@media (min-width: 768px) { - .text_box { - max-width: 598px; - height: 234px; - margin-bottom: 64px; - } - .title { - font-size: 70px; - line-height: 1.11; - letter-spacing: 0.7px; - } - .icon_line { + @media (min-width: 768px) { top: 84px; left: -16px; width: 185px; height: 67px; } -} +`; diff --git a/src/pages/SignInPage/SignInPage.jsx b/src/pages/SignInPage/SignInPage.jsx index 8b90af9..886b293 100644 --- a/src/pages/SignInPage/SignInPage.jsx +++ b/src/pages/SignInPage/SignInPage.jsx @@ -1,9 +1,15 @@ import { useDispatch } from 'react-redux'; import WelcomeLayout from '../../components/WelcomeLayout/WelcomeLayout'; -import { Link } from 'react-router-dom'; -import css from './SignInPage.module.css'; import { SignInForm } from '../../components/SignInForm/SignInForm'; import { logInThunk } from '../../redux/auth/auth-operations'; +import { + SignInPart, + TextBox, + Title, + SignInText, + OptionText, + SignUpLink, +} from './SignInPage.styled'; const SignInPage = () => { const dispatch = useDispatch(); @@ -13,23 +19,21 @@ const SignInPage = () => { return ( -
-
-

Sign In

-

+ + + Sign In + Welcome! Please enter your credentials to login to the platform: -

-
+ + -

+ Don’t have an account? - - Sign Up - + {` Sign Up`} -

-
+ + ); }; diff --git a/src/pages/SignUpPage/SignUpPage.module.css b/src/pages/SignInPage/SignInPage.styled.jsx similarity index 54% rename from src/pages/SignUpPage/SignUpPage.module.css rename to src/pages/SignInPage/SignInPage.styled.jsx index e9f8ff4..c15b7f7 100644 --- a/src/pages/SignUpPage/SignUpPage.module.css +++ b/src/pages/SignInPage/SignInPage.styled.jsx @@ -1,54 +1,42 @@ -@import '../../index.css'; +import styled from '@emotion/styled'; +import { Link } from 'react-router-dom'; -.signup_part { +export const SignInPart = styled.div` + padding-bottom: 74px; background: linear-gradient( 330deg, rgba(4, 4, 4, 0) 8%, rgba(0, 0, 0, 0.8) 40% ); -} -.text_box { +`; + +export const TextBox = styled.div` max-width: 335px; margin-bottom: 28px; -} -.signup_title { +`; + +export const Title = styled.h2` color: var(--white, #efede8); font-size: 24px; font-weight: 700; line-height: 1.17; margin-bottom: 14px; -} -.signup_text { +`; + +export const SignInText = styled.p` color: var(--border, #efede84d); font-size: 14px; line-height: 1.28; -} -.signin_option { +`; + +export const OptionText = styled.p` margin-top: 12px; color: var(--secondary-text-color-1, #efede899); font-size: 12px; line-height: 1.5; -} -.signin_link { +`; + +export const SignUpLink = styled(Link)` color: var(--white, #efede8); text-decoration-line: underline; -} - -@media (min-width: 768px) { - .signup_part { - background: none; - } - .text_box { - min-width: 496px; - margin-bottom: 32px; - } - .signup_title { - font-size: 32px; - line-height: 1.37; - margin-bottom: 16px; - } - .signup_text { - font-size: 16px; - line-height: 1.5; - } -} +`; diff --git a/src/pages/SignUpPage/SignUpPage.jsx b/src/pages/SignUpPage/SignUpPage.jsx index 90f67ed..9b570b7 100644 --- a/src/pages/SignUpPage/SignUpPage.jsx +++ b/src/pages/SignUpPage/SignUpPage.jsx @@ -1,9 +1,15 @@ import WelcomeLayout from '../../components/WelcomeLayout/WelcomeLayout'; -import css from './SignUpPage.module.css'; import { SignUpForm } from '../../components/SignUpForm/SignUpForm'; -import { Link } from 'react-router-dom'; import { useDispatch } from 'react-redux'; import { registerThunk } from '../../redux/auth/auth-operations'; +import { + SignUpPart, + TextBox, + Title, + Text, + OptionText, + SignInLink, +} from './SignUpPage.styled'; const SignUpPage = () => { const dispatch = useDispatch(); @@ -13,25 +19,23 @@ const SignUpPage = () => { return ( -
-
-

Sign Up

-

+ + + Sign Up + Thank you for your interest in our platform. To complete the registration process, please provide us with the following information. -

-
+ + -

+ Already have an account? - - Sign In - + {` Sign In`} -

-
+ + ); }; diff --git a/src/pages/SignInPage/SignInPage.module.css b/src/pages/SignUpPage/SignUpPage.styled.jsx similarity index 61% rename from src/pages/SignInPage/SignInPage.module.css rename to src/pages/SignUpPage/SignUpPage.styled.jsx index 38ca028..452f835 100644 --- a/src/pages/SignInPage/SignInPage.module.css +++ b/src/pages/SignUpPage/SignUpPage.styled.jsx @@ -1,58 +1,61 @@ -@import '../../index.css'; +import styled from '@emotion/styled'; +import { Link } from 'react-router-dom'; -.signin_part { - padding-bottom: 74px; +export const SignUpPart = styled.div` background: linear-gradient( 330deg, rgba(4, 4, 4, 0) 8%, rgba(0, 0, 0, 0.8) 40% ); -} -.text_box { + + @media (min-width: 768px) { + background: none; + } +`; + +export const TextBox = styled.div` max-width: 335px; margin-bottom: 28px; -} -.signin_title { + + @media (min-width: 768px) { + min-width: 496px; + margin-bottom: 32px; + } +`; + +export const Title = styled.h2` color: var(--white, #efede8); font-size: 24px; font-weight: 700; line-height: 1.17; margin-bottom: 14px; -} -.signin_text { + + @media (min-width: 768px) { + font-size: 32px; + line-height: 1.37; + margin-bottom: 16px; + } +`; + +export const Text = styled.p` color: var(--border, #efede84d); font-size: 14px; line-height: 1.28; -} -.signin_form { - display: flex; -} -.signup_option { + + @media (min-width: 768px) { + font-size: 16px; + line-height: 1.5; + } +`; + +export const OptionText = styled.p` margin-top: 12px; color: var(--secondary-text-color-1, #efede899); font-size: 12px; line-height: 1.5; -} -.signup_link { +`; + +export const SignInLink = styled(Link)` color: var(--white, #efede8); text-decoration-line: underline; -} - -@media (min-width: 768px) { - .signin_part { - background: none; - } - .text_box { - min-width: 496px; - margin-bottom: 32px; - } - .signin_title { - font-size: 32px; - line-height: 1.37; - margin-bottom: 16px; - } - .signin_text { - font-size: 16px; - line-height: 1.5; - } -} +`;