Style fixes

src/components/Forms/PasswordInput/FormInput.tsx

@@ -12,16 +12,20 @@ const FormInput = ({
   isDisabled?: boolean
 }) => {
   return (
-    <>
+    <div className="form-input--container">
       <Field
         name={name}
         type={type}
         placeholder={placeholder}
         className="content-box shadow form--input"
         disabled={isDisabled}
       />
-      <ErrorMessage name={name} className="margin-top-sm" />
-    </>
+      <ErrorMessage name={name} className="margin-top-sm">
+        {msg => (
+          <p className="input-message__error">{msg.toUpperCase()}</p>
+        )}
+      </ErrorMessage>
+    </div>
   )
 }
 

src/components/Forms/PasswordInput/PasswordInput/PasswordInput.css

@@ -1,8 +1,3 @@
-.password-input-container {
-  position: relative;
-  width: 100%;
-}
-
 .password-toggle-btn {
   position: absolute;
   right: 12px;

src/components/Forms/PasswordInput/PasswordInput/PasswordInput.tsx

@@ -16,7 +16,7 @@ const PasswordInput = ({
   const [showPassword, setShowPassword] = useState(false)
 
   return (
-    <div className="password-input-container">
+    <div className="form-input--container">
       <Field
         name={name}
         type={showPassword ? "text" : "password"}
@@ -36,7 +36,7 @@ const PasswordInput = ({
         )}
       </button>
       <ErrorMessage name={name}>
-        {msg => <div>{msg}</div>}
+        {msg => <p className="input-message__error">{msg.toUpperCase()}</p>}
       </ErrorMessage>
     </div>
   )

src/components/globals.css

@@ -130,9 +130,9 @@ button:disabled {
   background: repeating-linear-gradient(
     45deg,
     var(--base),
-    var(--base) 6px,
-    var(--highlight) 6.5px,
-    var(--highlight) 6px
+    var(--base) 8px,
+    #e8e9f1 8px,
+    #e8e9f1 9px
   );
 }
 
@@ -145,14 +145,27 @@ button:disabled {
   flex-direction: column;
   justify-content: space-between;
   align-items: start;
-  margin: 30px 0;
+}
+
+.form--container legend {
+  margin-bottom: 0.625rem;
+}
+
+.form--container > *:not(:nth-child(2)) {
+  margin-top: 2.25rem;
+}
+
+.form-input--container {
+  position: relative;
+  width: 100%;
 }
 
 .form--input {
   padding: 8px;
   color: black;
   width: 100%;
   height: 2.3rem;
+  position: relative;
 }
 
 .form--input:disabled {
@@ -161,13 +174,22 @@ button:disabled {
   cursor: not-allowed;
 }
 
+.input-message__error {
+  color: var(--accent__disabled);
+  margin-top: 0.65rem;
+  position: absolute;
+}
+
 .message {
   color: #373636;
 }
 
 .message__error {
   font-style: italic;
   color: var(--accent);
+  font-size: 0.75rem;
+  text-align: center;
+  padding: 0.625rem;
 }
 
 /*------------------------------------*\

src/components/page-components/LoginPage/LoginPage.css

@@ -63,6 +63,7 @@
 .login--buttons {
   width: 100%;
   justify-content: space-between;
+  margin-top: 2rem;
 }
 
 @keyframes loginSlideLeft {

src/components/page-components/LoginPage/LoginPage.tsx

@@ -68,7 +68,7 @@ export default function LoginPage() {
             return actions.setSubmitting(false)
           }}
         >
-          <Form className="form--container stack">
+          <Form className="form--container">
             <legend className="bold">LOGIN</legend>
             <FormInput
               name="identifier"
@@ -97,7 +97,7 @@ export default function LoginPage() {
           <span className="message text-lg">Loading ...</span>
         )}
         {errorMessage && (
-          <p className="message message__error text-lg">
+          <p className="message message__error text-lg margin-top-lg">
             {errorMessage}
           </p>
         )}

src/components/page-components/SignUpPage/SignUpPage.tsx

@@ -102,7 +102,7 @@ const SignUpPage = () => {
             navigateTo("home")
           }}
         >
-          <Form className="form--container stack">
+          <Form className="form--container">
             <legend className="bold">SIGN UP</legend>
             <FormInput
               name="username"