From d286ec7c294df410561102ba7159f45124a463b6 Mon Sep 17 00:00:00 2001 From: Alex Filimonov Date: Wed, 27 Dec 2023 22:31:54 +0200 Subject: [PATCH 1/2] updates on styles in signUpPage --- .../SignUpForm/FormActivity/FormActivity.jsx | 23 +++++++++++++------ .../FormActivity/FormActivity.styled.js | 13 +++++++++++ .../FormGenderAndAge.styled.js | 6 ++++- .../SignUpForm/FormGoal/FormGoal.styled.js | 7 +++++- src/components/SignUpText/SignUpText.jsx | 6 ++--- .../ForgotPasswordPage/ForgotPasswordPage.jsx | 5 ++-- src/pages/SignInPage/SignInPage.jsx | 7 +++--- src/pages/SignUpPage/SignUpPage.jsx | 6 ++--- src/pages/SignUpPage/SignUpPage.styled.js | 12 ++-------- src/schemas/formikRegister.js | 2 +- 10 files changed, 54 insertions(+), 33 deletions(-) diff --git a/src/components/SignUpForm/FormActivity/FormActivity.jsx b/src/components/SignUpForm/FormActivity/FormActivity.jsx index 51d15e4..6a0b0e7 100644 --- a/src/components/SignUpForm/FormActivity/FormActivity.jsx +++ b/src/components/SignUpForm/FormActivity/FormActivity.jsx @@ -1,4 +1,4 @@ -import { Field, Formik } from 'formik'; +import { Formik, Field } from 'formik'; import { useState } from 'react'; import { ActivityForm, @@ -6,6 +6,7 @@ import { ActivityButton, BackButtonLast, Error, + Text, } from './FormActivity.styled'; export default function FormActivity({ @@ -38,7 +39,9 @@ export default function FormActivity({ value="1.2" checked={userData.activityRatio === 1.2} /> - 1.2 - if you do not have physical activity and sedentary work + + 1.2 - if you do not have physical activity and sedentary work + {error && userData.activityRatio === '' && ( Required, choose one of five diff --git a/src/components/SignUpForm/FormActivity/FormActivity.styled.js b/src/components/SignUpForm/FormActivity/FormActivity.styled.js index a7cde61..2814210 100644 --- a/src/components/SignUpForm/FormActivity/FormActivity.styled.js +++ b/src/components/SignUpForm/FormActivity/FormActivity.styled.js @@ -60,3 +60,16 @@ export const Error = styled.p` font-size: 12px; color: #e74a3b; `; + +export const Text = styled.p` + display: block; + width: 280px; + + @media screen and (min-width: 834px) { + width: 438px; + } + + @media screen and (min-width: 1440px) { + width: 308px; + } +`; diff --git a/src/components/SignUpForm/FormGenderAndAge/FormGenderAndAge.styled.js b/src/components/SignUpForm/FormGenderAndAge/FormGenderAndAge.styled.js index 50d90df..93c0cf3 100644 --- a/src/components/SignUpForm/FormGenderAndAge/FormGenderAndAge.styled.js +++ b/src/components/SignUpForm/FormGenderAndAge/FormGenderAndAge.styled.js @@ -26,8 +26,12 @@ export const BackButton = styled(Button)` font-weight: 400; background-color: transparent; color: var(--Color-Primary-Grey, #b6b6b6); - &:hover { + transition: color var(--transition-dur-and-fun); + + &:hover, + &:focus { box-shadow: none; + color: var(--green-light); } `; diff --git a/src/components/SignUpForm/FormGoal/FormGoal.styled.js b/src/components/SignUpForm/FormGoal/FormGoal.styled.js index 3784a86..e37ffef 100644 --- a/src/components/SignUpForm/FormGoal/FormGoal.styled.js +++ b/src/components/SignUpForm/FormGoal/FormGoal.styled.js @@ -66,8 +66,13 @@ export const BackButton = styled(Button)` font-weight: 400; background-color: transparent; color: var(--Color-Primary-Grey, #b6b6b6); - &:hover { + + transition: color var(--transition-dur-and-fun); + + &:hover, + &:focus { box-shadow: none; + color: var(--green-light); } `; diff --git a/src/components/SignUpText/SignUpText.jsx b/src/components/SignUpText/SignUpText.jsx index b78dff3..b9c6e1c 100644 --- a/src/components/SignUpText/SignUpText.jsx +++ b/src/components/SignUpText/SignUpText.jsx @@ -18,10 +18,10 @@ export default function SignUpText({ currentStep }) { )} {currentStep === 3 && ( <> - Select gender, Age + Select gender and age - Choose a goal so that we can
- help you effectively + Enter your gender and age for correct
+ performance tracking )} diff --git a/src/pages/ForgotPasswordPage/ForgotPasswordPage.jsx b/src/pages/ForgotPasswordPage/ForgotPasswordPage.jsx index 86dcc7e..129daee 100644 --- a/src/pages/ForgotPasswordPage/ForgotPasswordPage.jsx +++ b/src/pages/ForgotPasswordPage/ForgotPasswordPage.jsx @@ -6,7 +6,6 @@ import { FlexBox, ImageWrapper, TextWrapper, - MainAuth, } from '../SignUpPage/SignUpPage.styled'; import { BackgroundImage } from '../../components/SignUpImage/SignUpImage.styled'; import { Text, SignIpWrapper } from './ForgotPasswordPage.styled'; @@ -20,7 +19,7 @@ import watchMob2x from '../../assets/images/watch/watch-mob@2x.png'; export default function ForgotPasswordPage() { return ( - +
@@ -49,6 +48,6 @@ export default function ForgotPasswordPage() { - +
); } diff --git a/src/pages/SignInPage/SignInPage.jsx b/src/pages/SignInPage/SignInPage.jsx index f68cf74..b4459ef 100644 --- a/src/pages/SignInPage/SignInPage.jsx +++ b/src/pages/SignInPage/SignInPage.jsx @@ -6,7 +6,6 @@ import { FlexBox, ImageWrapper, TextWrapper, - MainAuth, } from '../SignUpPage/SignUpPage.styled'; import { BackgroundImage } from '../../components/SignUpImage/SignUpImage.styled'; @@ -19,7 +18,7 @@ import watchMob2x from '../../assets/images/watch/watch-mob@2x.png'; export default function SignInPage() { return ( - +
@@ -39,11 +38,11 @@ export default function SignInPage() { Sign in You need to login to use the service - If you don't have an account yet + If you don't have an account yet`` Sign up - +
); } diff --git a/src/pages/SignUpPage/SignUpPage.jsx b/src/pages/SignUpPage/SignUpPage.jsx index c691377..aaec9a5 100644 --- a/src/pages/SignUpPage/SignUpPage.jsx +++ b/src/pages/SignUpPage/SignUpPage.jsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { - MainAuth, + // MainAuth, ImageWrapper, TextWrapper, SignInWrapper, @@ -25,7 +25,7 @@ export default function SignUpPage() { }; return ( - +
@@ -47,6 +47,6 @@ export default function SignUpPage() { - +
); } diff --git a/src/pages/SignUpPage/SignUpPage.styled.js b/src/pages/SignUpPage/SignUpPage.styled.js index aaeb87d..9bd2fad 100644 --- a/src/pages/SignUpPage/SignUpPage.styled.js +++ b/src/pages/SignUpPage/SignUpPage.styled.js @@ -2,10 +2,10 @@ import styled from 'styled-components'; import { SubLink, SubText } from '../SignInPage/SignInPage.styled'; export const FlexBox = styled.div` - padding: 0px 0px 40px 0px; + padding: 24px 0px 40px 0px; @media screen and (min-width: 834px) { - padding: 0px 168px 60px 168px; + padding: 40px 168px 60px 168px; } @media screen and (min-width: 1440px) { @@ -16,14 +16,6 @@ export const FlexBox = styled.div` } `; -export const MainAuth = styled.main` - margin-top: 24px; - - @media screen and (min-width: 834px) { - margin-top: 40px; - } -`; - export const ImageWrapper = styled.div` @media screen and (min-width: 834px) { display: flex; diff --git a/src/schemas/formikRegister.js b/src/schemas/formikRegister.js index a09f399..11df780 100644 --- a/src/schemas/formikRegister.js +++ b/src/schemas/formikRegister.js @@ -31,7 +31,7 @@ export const genderAndAgeSchema = Yup.object().shape({ age: Yup.number() .required('Required') .min(1, 'Age can not be less than 1') - .max(120, 'Age can not be more than 120') + .max(90, 'Age can not be more than 90') .typeError('Age must be a number'), }); From 46cca9c66f368d6e6dc7ca61c8f539f0debbf86d Mon Sep 17 00:00:00 2001 From: Alex Filimonov Date: Thu, 28 Dec 2023 10:46:51 +0200 Subject: [PATCH 2/2] updates on validation form --- src/components/ForgotPasswordForm/ForgotPasswordForm.jsx | 6 ++---- src/components/SignInForm/SignInForm.jsx | 6 ++---- .../SignUpForm/FormGenderAndAge/FormGenderAndAge.jsx | 6 ++---- src/components/SignUpForm/FormGoal/FormGoal.jsx | 6 ++---- src/components/SignUpForm/FormParameters/FormParameters.jsx | 6 ++---- src/components/SignUpForm/FormUserData/FormUserData.jsx | 6 ++---- src/components/SignUpForm/SignUpForm.jsx | 6 ++++-- src/pages/SignInPage/SignInPage.jsx | 2 +- 8 files changed, 17 insertions(+), 27 deletions(-) diff --git a/src/components/ForgotPasswordForm/ForgotPasswordForm.jsx b/src/components/ForgotPasswordForm/ForgotPasswordForm.jsx index e4c13ba..e373527 100644 --- a/src/components/ForgotPasswordForm/ForgotPasswordForm.jsx +++ b/src/components/ForgotPasswordForm/ForgotPasswordForm.jsx @@ -32,7 +32,7 @@ export default function ForgotPasswordForm() { validationSchema={forgotPasswordSchema} onSubmit={onSubmit} > - {({ errors, touched, isSubmitting, isValid }) => ( + {({ errors, touched }) => (
- + )} diff --git a/src/components/SignInForm/SignInForm.jsx b/src/components/SignInForm/SignInForm.jsx index e4de2a0..460ec53 100644 --- a/src/components/SignInForm/SignInForm.jsx +++ b/src/components/SignInForm/SignInForm.jsx @@ -46,7 +46,7 @@ export default function SignInForm() { validationSchema={loginSchema} onSubmit={onSubmit} > - {({ errors, touched, isSubmitting, isValid }) => ( + {({ errors, touched }) => ( @@ -108,9 +108,7 @@ export default function SignInForm() { - + Forgot your password? )} diff --git a/src/components/SignUpForm/FormGenderAndAge/FormGenderAndAge.jsx b/src/components/SignUpForm/FormGenderAndAge/FormGenderAndAge.jsx index b35f1ad..211afe6 100644 --- a/src/components/SignUpForm/FormGenderAndAge/FormGenderAndAge.jsx +++ b/src/components/SignUpForm/FormGenderAndAge/FormGenderAndAge.jsx @@ -30,7 +30,7 @@ export default function FormGenderAndAge({ validationSchema={genderAndAgeSchema} onSubmit={onSubmit} > - {({ errors, touched, isSubmitting, isValid }) => ( + {({ errors, touched }) => ( Gender @@ -61,9 +61,7 @@ export default function FormGenderAndAge({ - - Next - + Next Back )} diff --git a/src/components/SignUpForm/FormGoal/FormGoal.jsx b/src/components/SignUpForm/FormGoal/FormGoal.jsx index 3a431e6..77f595d 100644 --- a/src/components/SignUpForm/FormGoal/FormGoal.jsx +++ b/src/components/SignUpForm/FormGoal/FormGoal.jsx @@ -26,7 +26,7 @@ export default function FormGoal({ validationSchema={goalSchema} onSubmit={onSubmit} > - {({ isValid, isSubmitting }) => ( + {() => ( - - Next - + Next Back )} diff --git a/src/components/SignUpForm/FormParameters/FormParameters.jsx b/src/components/SignUpForm/FormParameters/FormParameters.jsx index e1aeb59..67a3856 100644 --- a/src/components/SignUpForm/FormParameters/FormParameters.jsx +++ b/src/components/SignUpForm/FormParameters/FormParameters.jsx @@ -29,7 +29,7 @@ export default function FormParameters({ validationSchema={parametersSchema} onSubmit={onSubmit} > - {({ errors, touched, isSubmitting, isValid }) => ( + {({ errors, touched }) => ( - - Next - + Next Back )} diff --git a/src/components/SignUpForm/FormUserData/FormUserData.jsx b/src/components/SignUpForm/FormUserData/FormUserData.jsx index 70b26c0..1a2180f 100644 --- a/src/components/SignUpForm/FormUserData/FormUserData.jsx +++ b/src/components/SignUpForm/FormUserData/FormUserData.jsx @@ -31,7 +31,7 @@ export default function FormUserData({ validationSchema={registerSchema} onSubmit={onSubmit} > - {({ errors, touched, isValid, isSubmitting }) => ( + {({ errors, touched }) => ( - - Next - + Next )} diff --git a/src/components/SignUpForm/SignUpForm.jsx b/src/components/SignUpForm/SignUpForm.jsx index a171474..7b55970 100644 --- a/src/components/SignUpForm/SignUpForm.jsx +++ b/src/components/SignUpForm/SignUpForm.jsx @@ -40,10 +40,12 @@ export default function SignUpForm({ try { await dispatch(registration(userData)).unwrap(); - toast.success('You have successfully signed up!'); + toast.success( + 'You have successfully signed up! \n A confirmation letter has been sent to your email, please check it!' + ); navigate('/signin'); } catch (error) { - toast.error(`Something went wrong! ${error.message}`); + toast.error(`Something went wrong! \n ${error.message}`); } }; diff --git a/src/pages/SignInPage/SignInPage.jsx b/src/pages/SignInPage/SignInPage.jsx index ef3f014..ae1bbeb 100644 --- a/src/pages/SignInPage/SignInPage.jsx +++ b/src/pages/SignInPage/SignInPage.jsx @@ -52,7 +52,7 @@ export default function SignInPage() { Sign in You need to login to use the service - If you don't have an account yet`` + If you don't have an account yet Sign up