add styles to multiform

Cubeseed · May 22, 2024 · 47171fc · 47171fc
1 parent bfbf35b
commit 47171fc
Show file tree

Hide file tree

Showing 12 changed files with 117 additions and 103 deletions.
diff --git a/cubeseed_login/app/(farmer)/dashboard/layout.tsx b/cubeseed_login/app/(farmer)/dashboard/layout.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import DashboardSidePannel from "@/component/dashboard/DashboardSidePannel"
 import Navbar from "@/component/navbar/Navbar"
 import { Inter as FontSans } from "next/font/google"

diff --git a/cubeseed_login/src/component/forms/ServiceForm.tsx b/cubeseed_login/src/component/forms/ServiceForm.tsx
@@ -1,22 +1,29 @@
-import { useState } from "react";
-import Service from "../service-instance/Service";
 import serviceStyles from "@/styles/serviceform.module.scss"
+import Service from "../service-instance/Service"
 
-export default function ServiceForm({ setService }:any) {
+export default function ServiceForm({ setService }: any) {
   // const [service, setService] = useState<string>('');
   // console.log("service", service);
   const handleSubmit = (event: React.FormEvent) => {
-    event.preventDefault();
+    event.preventDefault()
   }
 
   return (
-    <div className={serviceStyles.form} onSubmit={handleSubmit} >
-        <Service value={'Farmer'} setService={setService} />
-        <Service value={'Service Provider'} setService={setService} />
-        <Service value={'Input Seller'} setService={setService} />
-        <Service value={'Investor'} setService={setService} />
-        <Service value={'Direct-to-Farm Buyer'} setService={setService} />
-        <Service value={'Processing Storage'} setService={setService} />
+    <div className=" m-auto flex w-3/6 flex-col justify-center align-middle ">
+      <div className=" mb-4 mt-8">
+        <h1 className="signup-text mb-4 mt-8 text-3xl">
+          Firstly, who are you?
+        </h1>
+      </div>
+
+      <div className={serviceStyles.form} onSubmit={handleSubmit}>
+        <Service value={"Farmer"} setService={setService} />
+        <Service value={"Service Provider"} setService={setService} />
+        <Service value={"Input Seller"} setService={setService} />
+        <Service value={"Investor"} setService={setService} />
+        <Service value={"Direct-to-Farm Buyer"} setService={setService} />
+        <Service value={"Processing Storage"} setService={setService} />
+      </div>
     </div>
   )
 }
diff --git a/cubeseed_login/src/component/navbar/Navbar.tsx b/cubeseed_login/src/component/navbar/Navbar.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import navStyles from "@/styles/navbar.module.scss"
 import cubeseed from "@assets/cubeseedlogo.svg"
 import loginIcon from "@assets/icons/loginIcon.svg"

diff --git a/cubeseed_login/src/component/service-instance/Service.tsx b/cubeseed_login/src/component/service-instance/Service.tsx
@@ -1,15 +1,9 @@
 "use client" //use client side rendering when using state
+import { useSignUpContext } from "@/context/signup"
+import serviceStyles from "@/styles/service.module.scss"
 import Image from "next/image"
+import { useRef } from "react"
 import icon from "../../../public/assets/agriculture.svg"
-import serviceStyles from "@/styles/service.module.scss"
-import {
-  FormEvent,
-  InputHTMLAttributes,
-  useEffect,
-  useRef,
-  useState,
-} from "react"
-import { useSignUpContext } from "@/context/signup"
 
 type value = {
   value: string
@@ -20,7 +14,6 @@ export default function Service({ value, setService }: value) {
   // const [isChecked, setIsChecked] = useState<boolean>(false); // unused state
   const { choice, setChoice } = useSignUpContext()
 
-  //const radioRef = useRef<InputHTMLAttributes<HTMLInputElement>>(null)
   const radioRef = useRef<HTMLInputElement>(null)
 
   const selectOption = () => {

diff --git a/cubeseed_login/src/pages/index.tsx b/cubeseed_login/src/pages/index.tsx
@@ -12,8 +12,8 @@ import Confirmation from "./confirmation_page/Confirmation"
 export default function Home() {
   const stepDivs = [
     <UserEmail key={"useremail"} />,
-    <UserDetailsForm key={"userdetail"} />,
     <ServiceForm key={"service"} />,
+    <UserDetailsForm key={"userdetail"} />,
     <Confirmation key={"confirmation"} />,
   ]
 
@@ -39,7 +39,7 @@ export default function Home() {
             <div className={homeStyles.actionbutton}>
               {isFirstStep ? (
                 <div className="terms ml-auto px-6">
-                  Already a member? <span className="login px-2">Log in</span>
+                  Already a member? <span className="login pl-1">Log in</span>
                 </div>
               ) : (
                 <button

diff --git a/cubeseed_login/src/styles/globals.scss b/cubeseed_login/src/styles/globals.scss
@@ -4,14 +4,7 @@
 
 @import url("https://fonts.googleapis.com/css2?family=Inter+Tight&display=swap");
 
-$primary-color: #45dfa9;
-$secondary-color: #02575d;
-$secondary-color-60: #3a868a;
-$tertiary-color: #03656b;
-$tertiary-color-60: #98c0c3;
-$tertiary-color-80: #bed6cd;
-$neutral-color: #edf0f0;
-$primary-font: "Inter Tight", sans-serif;
+@import "../styles/variables.module.scss";
 
 body {
   font-family: $primary-font;

diff --git a/cubeseed_login/src/styles/home.module.scss b/cubeseed_login/src/styles/home.module.scss
@@ -1,3 +1,5 @@
+@import "../styles/variables.module.scss";
+
 .home {
   height: 100vh;
   width: 100%;
@@ -16,13 +18,14 @@
   display: flex;
   justify-content: space-around;
   align-items: center;
+  margin-top: 8em;
 }
 
 .stepbutton {
-  padding: 12px 26px;
+  padding: 6px 28px;
   color: #ffffff;
-  background: #03656b;
-  border-radius: 20px;
+  background: $tertiary-color;
+  border-radius: 25px;
 }
 
 .action:hover {

diff --git a/cubeseed_login/src/styles/navbar.module.scss b/cubeseed_login/src/styles/navbar.module.scss
@@ -1,15 +1,15 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter+Tight&display=swap");
+@import "../styles/variables.module.scss";
 
 .nav {
   background: linear-gradient(0deg, #f0f7f7, #f0f7f7);
-  border-bottom: 1px solid #bed6cd;
+  border-bottom: 1px solid $tertiary-color-80;
 
   .navlinks {
     align-items: center;
   }
 
   .navlink {
-    color: #03656b;
+    color: $tertiary-color;
     text-decoration: none;
     border-radius: 5px;
     font-style: normal;

diff --git a/cubeseed_login/src/styles/progress.module.scss b/cubeseed_login/src/styles/progress.module.scss
@@ -1,11 +1,13 @@
+@import "../styles/variables.module.scss";
+
 .progressContainer {
   width: 50%;
-	padding: 30px 0px;
-	margin: auto;
+  padding: 30px 0px;
+  margin: auto;
 
   .progress {
     width: 100%;
-    height: 10px;
+    height: 5px;
     appearance: none;
     border-radius: 10px;
     background-color: #eee;
@@ -17,7 +19,13 @@
 
     &::-webkit-progress-value {
       border-radius: 10px;
-      background-color: #FFB84C;
+      background-color: $progress-color;
+    }
+
+    /* Firefox */
+    &::-moz-progress-bar {
+      border-radius: 10px;
+      background-color: $progress-color;
     }
   }
 }
diff --git a/cubeseed_login/src/styles/service.module.scss b/cubeseed_login/src/styles/service.module.scss
@@ -1,57 +1,60 @@
 .service {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 360px;
+  height: 104px;
+  // margin: 40px;
+  position: relative;
+  background: #ffffff;
+  box-shadow: 0px 1px 7px rgba(100, 111, 112, 0.17);
+  border-radius: 10px;
+  transition: transform 0.2s ease-in-out;
+
+  &:hover {
+    border: 1px solid #45dfa9;
+    transform: translateY(-3px);
+    cursor: pointer;
+  }
+
+  .description {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
+    flex-direction: row;
     align-items: center;
-    width: 360px;
-    height: 88px;
-    margin: 40px;
-    position: relative;
-    background: #FFFFFF;
-    box-shadow: 0px 1px 7px rgba(100, 111, 112, 0.17);
-    border-radius: 10px;
-    transition: transform 0.2s ease-in-out;
-
-    &:hover {
-        border: 1px solid #45DFA9;
-        transform: translateY(-3px);
-        cursor: pointer;
-    }
-
-    .description {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: 12px 24px 12px 16px;
-        gap: 16px;
-    }
-
-    input[type="radio"] {
-        position: absolute;
-        right: 10px;
-        top: 10px;
-        width: 20px;
-        height: 20px;
-        accent-color: #03656B;
-        mix-blend-mode: multiply;
-    }
-
-
-
-
-    .icon {
-        background: linear-gradient(180deg, rgba(69, 223, 169, 0.23) 20.14%, rgba(255, 255, 255, 0) 100%);
-        border: 1px solid linear-gradient(180deg, rgba(69, 223, 169, 0.23) 20.14%, rgba(255, 255, 255, 0) 100%);
-        border-radius: 50%;
-        width: 30px;
-        height: 30px;
-        padding: 7px;
-    }
-
+    padding: 12px 24px 12px 16px;
+    gap: 16px;
+  }
+
+  input[type="radio"] {
+    position: absolute;
+    right: 10px;
+    top: 50px;
+    width: 20px;
+    height: 20px;
+    accent-color: #03656b;
+    mix-blend-mode: multiply;
+  }
+
+  .icon {
+    background: linear-gradient(
+      180deg,
+      rgba(69, 223, 169, 0.23) 20.14%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    border: 1px solid
+      linear-gradient(
+        180deg,
+        rgba(69, 223, 169, 0.23) 20.14%,
+        rgba(255, 255, 255, 0) 100%
+      );
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    padding: 7px;
+  }
 }
 
-
-
 :export {
-    myClass: string;
-}
+  myClass: string;
+}
diff --git a/cubeseed_login/src/styles/serviceform.module.scss b/cubeseed_login/src/styles/serviceform.module.scss
@@ -1,10 +1,8 @@
-
-
-.form{
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    place-items: center;
-    gap: 10px;
-    justify-content: center;
+.form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  place-items: center;
+  gap: 10px;
+  justify-content: center;
   align-items: center;
-}
+}
diff --git a/cubeseed_login/src/styles/variables.module.scss b/cubeseed_login/src/styles/variables.module.scss
@@ -0,0 +1,9 @@
+$primary-color: #45dfa9;
+$secondary-color: #02575d;
+$secondary-color-60: #3a868a;
+$tertiary-color: #03656b;
+$tertiary-color-60: #98c0c3;
+$tertiary-color-80: #bed6cd;
+$progress-color: #ffb84c;
+$neutral-color: #edf0f0;
+$primary-font: "Inter Tight", sans-serif;