Merge pull request #176 from VasylievYurii/fix/signin+signup-borders-…

…color-selector changed inputs color selector
VasylievYurii · Nov 22, 2023 · 6ceca14 · 6ceca14
2 parents d5238eb + ed99ff1
commit 6ceca14
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 16 deletions.
diff --git a/src/components/SignInForm/SignInForm.jsx b/src/components/SignInForm/SignInForm.jsx
@@ -50,12 +50,20 @@ const SignInForm = () => {
       onSubmit={handleSubmit}
     >
       {({ errors, touched }) => {
-        const borderEmailColor =
-          (errors.email && touched.email && '1px solid #D80027') ||
-          (!errors.email && touched.email && '1px solid #3CBF61');
-        const borderPasswordColor =
-          (errors.password && touched.password && '1px solid #D80027') ||
-          (!errors.password && touched.password && '1px solid #3CBF61');
+        const borderEmailColor = touched.email
+          ? errors.email
+            ? '1px solid #D80027'
+            : '1px solid #3CBF61'
+          : '1px solid #efede8';
+          // (errors.email && touched.email && '1px solid #D80027') ||
+          // (!errors.email && touched.email && '1px solid #3CBF61');
+        const borderPasswordColor = touched.password
+          ? errors.password
+            ? '1px solid #D80027'
+            : '1px solid #3CBF61'
+          : '1px solid #efede8';
+          // (errors.password && touched.password && '1px solid #D80027') ||
+          // (!errors.password && touched.password && '1px solid #3CBF61');
 
         return (
           <Form autoComplete="off">

diff --git a/src/components/SignUpForm/SignUpForm.jsx b/src/components/SignUpForm/SignUpForm.jsx
@@ -75,8 +75,11 @@ const SignUpForm = () => {
             <div>
               <InputStyled
                 border={
-                  (errors.name && touched.name && '1px solid #D80027') ||
-                  (!errors.name && touched.name && '1px solid #3CBF61')
+                  touched.name
+                    ? errors.name
+                      ? '1px solid #D80027'
+                      : '1px solid #3CBF61'
+                    : '1px solid #efede8'
                 }
                 type="text"
                 name="name"
@@ -103,8 +106,11 @@ const SignUpForm = () => {
             <div>
               <InputStyled
                 border={
-                  (errors.email && touched.email && '1px solid #D80027') ||
-                  (!errors.email && touched.email && '1px solid #3CBF61')
+                  touched.email
+                    ? errors.email
+                      ? '1px solid #D80027'
+                      : '1px solid #3CBF61'
+                    : '1px solid #efede8'
                 }
                 type="text"
                 name="email"
@@ -132,12 +138,11 @@ const SignUpForm = () => {
               <LabelWrapStyled>
                 <InputStyled
                   border={
-                    (errors.password &&
-                      touched.password &&
-                      '1px solid #D80027') ||
-                    (!errors.password &&
-                      touched.password &&
-                      '1px solid #3CBF61')
+                    touched.password
+                      ? errors.password
+                        ? '1px solid #D80027'
+                        : '1px solid #3CBF61'
+                      : '1px solid #efede8'
                   }
                   type={type}
                   name="password"