Merge pull request #60 from Tasitaforme/feature/sign-up-page

updates on styles in signUpPage
Tasitaforme · Dec 28, 2023 · f390c37 · f390c37
2 parents a3802bc + 46cca9c
commit f390c37
Show file tree

Hide file tree

Showing 17 changed files with 69 additions and 58 deletions.
diff --git 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 }) => (
         <Form>
           <FormikStyledField
             type="email"
@@ -49,9 +49,7 @@ export default function ForgotPasswordForm() {
           />
           <Error component="p" name="email" />
 
-          <Button type="submit" disabled={!isValid || isSubmitting}>
-            Send
-          </Button>
+          <Button type="submit">Send</Button>
         </Form>
       )}
     </Formik>

diff --git 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 }) => (
           <SignInFormikForm>
             <FlexWrapper>
               <FieldWrapper>
@@ -108,9 +108,7 @@ export default function SignInForm() {
               </FieldWrapper>
             </FlexWrapper>
 
-            <Button type="submit" disabled={!isValid || isSubmitting}>
-              Sign in
-            </Button>
+            <Button type="submit">Sign in</Button>
             <ForgotLink to="/forgot-password">Forgot your password?</ForgotLink>
           </SignInFormikForm>
         )}

diff --git a/src/components/SignUpForm/FormActivity/FormActivity.jsx b/src/components/SignUpForm/FormActivity/FormActivity.jsx
@@ -1,11 +1,12 @@
-import { Field, Formik } from 'formik';
+import { Formik, Field } from 'formik';
 import { useState } from 'react';
 import {
   ActivityForm,
   Label,
   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
+            <Text>
+              1.2 - if you do not have physical activity and sedentary work
+            </Text>
           </Label>
           <Label>
             <Field
@@ -48,7 +51,9 @@ export default function FormActivity({
               value="1.375"
               checked={userData.activityRatio === 1.375}
             />
-            1.375 - if you do short runs or light gymnastics 1-3 times a week
+            <Text>
+              1.375 - if you do short runs or light gymnastics 1-3 times a week
+            </Text>
           </Label>
           <Label>
             <Field
@@ -58,7 +63,9 @@ export default function FormActivity({
               value="1.55"
               checked={userData.activityRatio === 1.55}
             />
-            1.55 - if you play sports with average loads 3-5 times a week
+            <Text>
+              1.55 - if you play sports with average loads 3-5 times a week
+            </Text>
           </Label>
           <Label>
             <Field
@@ -68,7 +75,7 @@ export default function FormActivity({
               value="1.725"
               checked={userData.activityRatio === 1.725}
             />
-            1.725 - if you train fully 6-7 times a week
+            <Text>1.725 - if you train fully 6-7 times a week</Text>
           </Label>
           <Label>
             <Field
@@ -78,8 +85,10 @@ export default function FormActivity({
               value="1.9"
               checked={userData.activityRatio === 1.9}
             />
-            1.9 - if your work is related to physical labor, you train 2 times a
-            day and include strength exercises in your training program
+            <Text>
+              1.9 - if your work is related to physical labor, you train 2 times
+              a day and include strength exercises in your training program
+            </Text>
           </Label>
           {error && userData.activityRatio === '' && (
             <Error>Required, choose one of five</Error>

diff --git 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.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 }) => (
         <GenderAndAgeForm>
           <Text>Gender</Text>
           <GenderWrapper>
@@ -61,9 +61,7 @@ export default function FormGenderAndAge({
             <Error component="p" name="age" />
           </AgeWrapper>
 
-          <GenderAndAgeButton type="submit" disabled={!isValid || isSubmitting}>
-            Next
-          </GenderAndAgeButton>
+          <GenderAndAgeButton type="submit">Next</GenderAndAgeButton>
           <BackButton onClick={handlePrevStep}>Back</BackButton>
         </GenderAndAgeForm>
       )}

diff --git 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.jsx b/src/components/SignUpForm/FormGoal/FormGoal.jsx
@@ -26,7 +26,7 @@ export default function FormGoal({
       validationSchema={goalSchema}
       onSubmit={onSubmit}
     >
-      {({ isValid, isSubmitting }) => (
+      {() => (
         <GoalForm>
           <FlexWrapper>
             <Label>
@@ -44,9 +44,7 @@ export default function FormGoal({
             <Error component="p" name="goal" />
           </FlexWrapper>
 
-          <GoalButton type="submit" disabled={!isValid || isSubmitting}>
-            Next
-          </GoalButton>
+          <GoalButton type="submit">Next</GoalButton>
           <BackButton onClick={handlePrevStep}>Back</BackButton>
         </GoalForm>
       )}

diff --git 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/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 }) => (
         <ParametersForm>
           <Label>
             Height
@@ -64,9 +64,7 @@ export default function FormParameters({
             <Error component="p" name="weight" />
           </Label>
 
-          <ParametersButton type="submit" disabled={!isValid || isSubmitting}>
-            Next
-          </ParametersButton>
+          <ParametersButton type="submit">Next</ParametersButton>
           <BackButton onClick={handlePrevStep}>Back</BackButton>
         </ParametersForm>
       )}

diff --git 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 }) => (
         <SignUpFormikForm>
           <FieldWrapper>
             <SignUpField
@@ -110,9 +110,7 @@ export default function FormUserData({
             </IconsWrapper>
           </FieldWrapper>
 
-          <SignUpButton type="submit" disabled={!isValid || isSubmitting}>
-            Next
-          </SignUpButton>
+          <SignUpButton type="submit">Next</SignUpButton>
         </SignUpFormikForm>
       )}
     </Formik>

diff --git 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/components/SignUpText/SignUpText.jsx b/src/components/SignUpText/SignUpText.jsx
@@ -18,10 +18,10 @@ export default function SignUpText({ currentStep }) {
       )}
       {currentStep === 3 && (
         <>
-          <HeadlineFirst>Select gender, Age</HeadlineFirst>
+          <HeadlineFirst>Select gender and age</HeadlineFirst>
           <Subtitle>
-            Choose a goal so that we can <br />
-            help you effectively
+            Enter your gender and age for correct <br />
+            performance tracking
           </Subtitle>
         </>
       )}

diff --git 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 (
-    <MainAuth>
+    <main>
       <Container>
         <FlexBox>
           <ImageWrapper>
@@ -49,6 +48,6 @@ export default function ForgotPasswordPage() {
           </TextWrapper>
         </FlexBox>
       </Container>
-    </MainAuth>
+    </main>
   );
 }
diff --git 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';
 
@@ -33,7 +32,7 @@ export default function SignInPage() {
   }, []);
 
   return (
-    <MainAuth>
+    <main>
       <Container>
         <FlexBox>
           <ImageWrapper>
@@ -58,6 +57,6 @@ export default function SignInPage() {
           </TextWrapper>
         </FlexBox>
       </Container>
-    </MainAuth>
+    </main>
   );
 }
diff --git 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 (
-    <MainAuth>
+    <main>
       <Container>
         <FlexBox>
           <ImageWrapper>
@@ -47,6 +47,6 @@ export default function SignUpPage() {
           </TextWrapper>
         </FlexBox>
       </Container>
-    </MainAuth>
+    </main>
   );
 }
diff --git 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
@@ -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'),
 });