Merge pull request #167 from VasylievYurii/Fix/sign-up-height

add height and some fix
VasylievYurii · Nov 21, 2023 · 8802022 · 8802022
2 parents ff2d8e4 + c99e341
commit 8802022
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 19 deletions.
diff --git a/src/components/SectionTemplateNoAuth/SectionTemplateNoAuth.styled.js b/src/components/SectionTemplateNoAuth/SectionTemplateNoAuth.styled.js
@@ -27,7 +27,7 @@ export const SectionNoAuth = styled.section`
   background-repeat: no-repeat;
   background-position: right bottom;
   background-size: contain;
-  height: 100vh;
+  height: 812px;
   /* padding-top: 24px;
   padding-left: 20px;
   padding-right: 20px;
@@ -52,6 +52,7 @@ export const SectionNoAuth = styled.section`
     padding-bottom: 0;
     padding-top: 0;
     background-image: url(${welcomeTablet});
+    height: 1024px;
 
     @media only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {

diff --git a/src/components/SignInForm/SignInForm.jsx b/src/components/SignInForm/SignInForm.jsx
@@ -25,7 +25,7 @@ const initialValues = {
 const SignInForm = () => {
   const [toggleIcon, setToggleIcon] = useState(`${sprite}#icon-eye-off`);
   const [type, setType] = useState('password');
-  const [validColor, setValidColor] = useState('');
+  // const [validColor, setValidColor] = useState('');
   const dispatch = useDispatch();
 
   const handleSubmit = (values, actions) => {

diff --git a/src/components/SignUpForm/SignUpForm.jsx b/src/components/SignUpForm/SignUpForm.jsx
@@ -41,7 +41,7 @@ const initialValues = {
 const SignUpForm = () => {
   const [toggleIcon, setToggleIcon] = useState(`${sprite}#icon-eye-off`);
   const [type, setType] = useState('password');
-  const [validColor, setValidColor] = useState('red');
+  // const [validColor, setValidColor] = useState('red');
 
   const dispatch = useDispatch();
 
@@ -74,52 +74,71 @@ const SignUpForm = () => {
           <WrapFormStyled>
             <div>
               <InputStyled
-                border={errors.name && touched.name && "1px solid #D80027" || !errors.name && touched.name && "1px solid #3CBF61"}
+                border={
+                  (errors.name && touched.name && '1px solid #D80027') ||
+                  (!errors.name && touched.name && '1px solid #3CBF61')
+                }
                 type="text"
                 name="name"
                 placeholder="Name"
                 validate={validateName}
               />
-              {errors.name && touched.name || !errors.name && touched.name ? (
+              {(errors.name && touched.name) ||
+              (!errors.name && touched.name) ? (
                 <WrapperErrorStyled>
                   <SvgIconCheckBoxStyled
-                    fill={!errors.name && touched.name ? "#3CBF61" : null}
+                    fill={!errors.name && touched.name ? '#3CBF61' : null}
                   >
                     <use href={`${sprite}#icon-checkbox`} />
                   </SvgIconCheckBoxStyled>
                   <ErrorDivStyled
-                    color={!errors.name && touched.name ? "#3CBF61" : null}
-                  >{errors.name ? errors.name : "Success name"}</ErrorDivStyled>
+                    color={!errors.name && touched.name ? '#3CBF61' : null}
+                  >
+                    {errors.name ? errors.name : 'Success name'}
+                  </ErrorDivStyled>
                 </WrapperErrorStyled>
               ) : null}
             </div>
 
             <div>
               <InputStyled
-                border={errors.email && touched.email && "1px solid #D80027" || !errors.email && touched.email && "1px solid #3CBF61"}
+                border={
+                  (errors.email && touched.email && '1px solid #D80027') ||
+                  (!errors.email && touched.email && '1px solid #3CBF61')
+                }
                 type="text"
                 name="email"
                 validate={validateEmail}
                 placeholder="Email"
               />
-              {errors.email && touched.email || !errors.email && touched.email ? (
+              {(errors.email && touched.email) ||
+              (!errors.email && touched.email) ? (
                 <WrapperErrorStyled>
                   <SvgIconCheckBoxStyled
-                    fill={!errors.email && touched.email ? "#3CBF61" : null}
+                    fill={!errors.email && touched.email ? '#3CBF61' : null}
                   >
                     <use href={`${sprite}#icon-checkbox`} />
                   </SvgIconCheckBoxStyled>
                   <ErrorDivStyled
-                    color={!errors.email && touched.email ? "#3CBF61" : null}
-                  >{errors.email ? errors.email : "Success email"}</ErrorDivStyled>
+                    color={!errors.email && touched.email ? '#3CBF61' : null}
+                  >
+                    {errors.email ? errors.email : 'Success email'}
+                  </ErrorDivStyled>
                 </WrapperErrorStyled>
               ) : null}
             </div>
 
             <div>
               <LabelWrapStyled>
                 <InputStyled
-                  border={errors.password && touched.password && "1px solid #D80027" || !errors.password && touched.password && "1px solid #3CBF61"}
+                  border={
+                    (errors.password &&
+                      touched.password &&
+                      '1px solid #D80027') ||
+                    (!errors.password &&
+                      touched.password &&
+                      '1px solid #3CBF61')
+                  }
                   type={type}
                   name="password"
                   placeholder="Password"
@@ -130,16 +149,23 @@ const SignUpForm = () => {
                   </SvgIconEyeStyled>
                 </IconWrappedStyled>
               </LabelWrapStyled>
-              {errors.password && touched.password || !errors.password && touched.password ? (
+              {(errors.password && touched.password) ||
+              (!errors.password && touched.password) ? (
                 <WrapperErrorStyled>
                   <SvgIconCheckBoxStyled
-                    fill={!errors.password && touched.password ? "#3CBF61" : null}
+                    fill={
+                      !errors.password && touched.password ? '#3CBF61' : null
+                    }
                   >
                     <use href={`${sprite}#icon-checkbox`} />
                   </SvgIconCheckBoxStyled>
                   <ErrorDivStyled
-                    color={!errors.password && touched.password ? "#3CBF61" : null}
-                  >{errors.password ? errors.password : "Success password"}</ErrorDivStyled>
+                    color={
+                      !errors.password && touched.password ? '#3CBF61' : null
+                    }
+                  >
+                    {errors.password ? errors.password : 'Success password'}
+                  </ErrorDivStyled>
                 </WrapperErrorStyled>
               ) : null}
             </div>

diff --git a/src/pages/SignUp.jsx b/src/pages/SignUp.jsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { ToastContainer } from 'react-toastify';
+
 import 'react-toastify/dist/ReactToastify.css';
 import SectionTemplateNoAuth from '../components/SectionTemplateNoAuth';
 import SectionTemplateLeft from '../components/SectionTemplateLeft';