From 7053083ef8c6e56d6945b080fdb429be74bae4b2 Mon Sep 17 00:00:00 2001
From: Aminejvm <elouartinra@hotmail.com>
Date: Mon, 14 Jun 2021 19:34:50 +0100
Subject: [PATCH] fix(Field): adjust fill opacity

---
 components/core/Auth/Initial.js |  5 ++---
 components/core/Field.js        | 36 ++++++++++++---------------------
 2 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/components/core/Auth/Initial.js b/components/core/Auth/Initial.js
index 75082892..941ef27c 100644
--- a/components/core/Auth/Initial.js
+++ b/components/core/Auth/Initial.js
@@ -188,7 +188,7 @@ export default function Initial({
                 autoFocus
                 label="Sign up with email"
                 placeholder="Email"
-                type="email"
+                type="text"
                 name="email"
                 full
                 style={{ backgroundColor: "rgba(242,242,247,0.5)" }}
@@ -196,8 +196,7 @@ export default function Initial({
                 containerStyle={{ marginTop: "4px" }}
                 {...getFieldProps("email")}
               />
-
-              <motion.div layout>
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} layout>
                 <System.ButtonPrimary
                   full
                   type="submit"
diff --git a/components/core/Field.js b/components/core/Field.js
index 9691b736..3c7e6252 100644
--- a/components/core/Field.js
+++ b/components/core/Field.js
@@ -22,14 +22,13 @@ const STYLES_PASSWORD_VALIDATIONS = (theme) => css`
   border-radius: 8px;
 `;
 
-const STYLES_PASSWORD_VALIDATION = (theme) =>
-  css`
-    display: flex;
-    align-items: center;
-    & > * + * {
-      margin-left: 8px;
-    }
-  `;
+const STYLES_PASSWORD_VALIDATION = css`
+  display: flex;
+  align-items: center;
+  & > * + * {
+    margin-left: 8px;
+  }
+`;
 
 const STYLES_CIRCLE = (theme) => css`
   height: 8px;
@@ -43,25 +42,18 @@ const STYLES_CIRCLE_SUCCESS = (theme) => css`
 `;
 
 const STYLES_INPUT = (theme) => css`
-  background-color: rgba(242, 242, 247, 0.5);
+  background-color: rgba(242, 242, 247, 0.7);
+  box-shadow: ${theme.shadow.large};
   border-radius: 8px;
   &::placeholder {
     color: ${theme.system.textGrayDark};
   }
 `;
 const STYLES_INPUT_ERROR = (theme) => css`
-  background-color: rgba(242, 242, 247, 0.5);
   border: 1px solid ${theme.system.red};
-  &::placeholder {
-    color: ${theme.system.textGrayDark};
-  }
 `;
 const STYLES_INPUT_SUCCESS = (theme) => css`
-  background-color: rgba(242, 242, 247, 0.5);
   border: 1px solid ${theme.system.green};
-  &::placeholder {
-    color: ${theme.system.textGrayDark};
-  }
 `;
 
 const PasswordValidations = ({ validations }) => {
@@ -105,10 +97,9 @@ export default function Field({
   const showError = touched && error;
   const showSuccess = touched && !error;
 
-  const STYLES = React.useMemo(() => {
+  const STYLES_STATUS = React.useMemo(() => {
     if (showError) return STYLES_INPUT_ERROR;
     if (showSuccess) return STYLES_INPUT_SUCCESS;
-    return STYLES_INPUT;
   }, [touched, error]);
 
   const ContainerComponent = containerAs || "div";
@@ -116,11 +107,10 @@ export default function Field({
   return (
     <div>
       <ContainerComponent>
-        <Input inputCss={STYLES} {...props} />
+        <Input inputCss={[STYLES_INPUT, STYLES_STATUS]} {...props} />
       </ContainerComponent>
-      {props.name === "password" && validations ? (
-        <PasswordValidations validations={validations} />
-      ) : (
+      {props.name === "password" && validations(<PasswordValidations validations={validations} />)}
+      {props.name !== "password" && (showError || showSuccess) && (
         <ErrorWrapper>
           <P css={STYLES_SMALL_TEXT} style={{ marginTop: "8px" }}>
             {(showError && error) || (showSuccess && success)}