fix user email style

Signed-off-by: Akintola Rahmat <akintolarahmah@gmail.com>
Cubeseed · May 9, 2024 · bfbf35b · bfbf35b
1 parent c7fb7e7
commit bfbf35b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 18 deletions.
diff --git a/cubeseed_login/src/component/forms/UserEmail.tsx b/cubeseed_login/src/component/forms/UserEmail.tsx
@@ -59,10 +59,10 @@ const UserEmail: React.FC = () => {
         <FaMeta />
         <button className="">Sign up with Meta</button>
       </div>
-      <p className="mb-10 mt-4">
-        By signing up with Cubeseed you agree to the{" "}
-        <span>Terms and Conditions</span> , and
-        <span>Privacy Policy</span>.
+      <p className="terms mb-10 mt-4">
+        By signing up with Cubeseed you agree to the
+        <span className="policy px-1">Terms and Conditions,</span>and
+        <span className="policy px-1">Privacy Policy</span>.
       </p>
     </div>
   )

diff --git a/cubeseed_login/src/pages/index.tsx b/cubeseed_login/src/pages/index.tsx
@@ -36,17 +36,21 @@ export default function Home() {
           <form onSubmit={handleSubmit}>
             <ProgressBar index={currentIndex} length={steps} />
             {step}
-            {/* <p className={homeStyles.steps}>
-            {currentIndex + 1} / {steps.length}
-          </p> */}
             <div className={homeStyles.actionbutton}>
-              <button
-                type="button"
-                onClick={back}
-                className={homeStyles.stepbutton}
-              >
-                back
-              </button>
+              {isFirstStep ? (
+                <div className="terms ml-auto px-6">
+                  Already a member? <span className="login px-2">Log in</span>
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  onClick={back}
+                  className={homeStyles.stepbutton}
+                >
+                  back
+                </button>
+              )}
+
               {!isLastStep ? (
                 <button
                   type="button"

diff --git a/cubeseed_login/src/styles/globals.scss b/cubeseed_login/src/styles/globals.scss
@@ -6,7 +6,11 @@
 
 $primary-color: #45dfa9;
 $secondary-color: #02575d;
-$basic-color: #03656b;
+$secondary-color-60: #3a868a;
+$tertiary-color: #03656b;
+$tertiary-color-60: #98c0c3;
+$tertiary-color-80: #bed6cd;
+$neutral-color: #edf0f0;
 $primary-font: "Inter Tight", sans-serif;
 
 body {
@@ -187,12 +191,22 @@ form {
 }
 
 .social-signin {
-  border-color: $basic-color;
-  color: $basic-color;
+  border-color: $tertiary-color;
+  color: $tertiary-color;
   cursor: pointer;
 }
 
 .line {
-  color: gray 0.5px solid;
+  color: $tertiary-color-80 0.5px solid;
   width: 100%;
 }
+
+.terms {
+  font-size: 14px;
+  word-spacing: 0.5px;
+}
+
+.login,
+.policy {
+  color: $secondary-color-60;
+}