Mobile responsiveness for sign up page

cubeseed_login/.eslintrc.json

@@ -5,7 +5,7 @@
     "plugin:tailwindcss/recommended",
     "plugin:storybook/recommended"
   ],
-  "plugins": ["tailwindcss"],
+  "plugins": ["tailwindcss", "prettier"],
   "rules": {
     "tailwindcss/no-custom-classname": "off",
     "tailwindcss/classnames-order": "warn"

cubeseed_login/app/(farmer)/dashboard/layout.tsx

@@ -1,7 +1,7 @@
-import Navbar from "@/component/navbar/Navbar"
-import DashboardNavbar from "@/component/dashboard/DashboardNavbar/DashboardNavbar"
 import DashboardSidePannel from "@/component/dashboard/DashboardSidePannel"
+import Navbar from "@/component/navbar/Navbar"
 import { Inter as FontSans } from "next/font/google"
+// import "./globals.css"
 
 export const metadata = {
   title: "Next.js",

cubeseed_login/next.config.js

@@ -2,8 +2,8 @@
 const nextConfig = {
   reactStrictMode: true,
   experimental: {
-    appDir: true
-  }
+    appDir: true,
+  },
 }
 
 module.exports = nextConfig

cubeseed_login/package.json

@@ -16,14 +16,17 @@
     "@material-tailwind/html": "^2.0.0",
     "@radix-ui/react-dialog": "^1.0.4",
     "base-64": "^1.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "next": "13.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^5.0.1",
     "react-responsive-modal": "^6.4.2",
     "react-select": "^5.7.3",
     "sass": "^1.62.1"
   },
   "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^5.0.0",
     "@storybook/addon-essentials": "^7.5.1",
     "@storybook/addon-interactions": "^7.5.1",
     "@storybook/addon-links": "^7.5.1",
@@ -35,23 +38,24 @@
     "@storybook/react": "^7.5.1",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^7.5.1",
-    "@types/node": "20.1.4",
+    "find-cache-dir": "^5.0.0",
+    "@types/node": "^20.1.4",
     "@types/react": "18.0.37",
     "@types/react-dom": "18.0.11",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.16",
     "chromatic": "^7.4.0",
-    "eslint": "8.48.0",
+    "eslint": "^8.56.0",
     "eslint-config-next": "13.4.19",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-tailwindcss": "^3.13.0",
     "husky": "^8.0.0",
-    "postcss": "^8.4.25",
+    "postcss": "^8.4.33",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "pretty-quick": "^3.1.3",
     "storybook": "^7.5.1",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.4.1",
     "typescript": "5.0.4"
   },
   "readme": "ERROR: No README data found!",

cubeseed_login/src/component/Invoice/view-invoice.tsx

@@ -1,12 +1,11 @@
-import React from "react"
-import { DashboardHeading } from "../header"
-import Table from "../../comps/Table/table"
+import cal from "@assets/cal.svg"
+import dload from "@assets/download.svg"
+import face from "@assets/face.svg"
 import { BillType, OrderType, SummaryType } from "@cs/types"
 import Image from "next/image"
 import Link from "next/link"
-import face from "@assets/face.svg"
-import cal from "@assets/cal.svg"
-import dload from "@assets/download.svg"
+import Table from "../../comps/Table/table"
+import { DashboardHeading } from "../header"
 
 export default function ViewInvoice() {
   const senderData = [

cubeseed_login/src/component/Profile/profile.tsx

@@ -1,13 +1,13 @@
 "use client"
 
-import Image, { StaticImageData } from "next/image"
-import star from "@cs/public/star.svg"
-import farmer from "@cs/public/farmer1.png"
 import { UserProfileType } from "@cs/types"
-import ReviewCard from "../../comps/userCardInfo/review-card"
+import farmer from "@cs/public/farmer1.png"
+import star from "@cs/public/star.svg"
+import Image, { StaticImageData } from "next/image"
+import Link from "next/link"
 import { useState } from "react"
 import ImageBox from "../../comps/ImageBox/image-box"
-import Link from "next/link"
+import ReviewCard from "../../comps/userCardInfo/review-card"
 // import place from "@cs/assets/svg/place_24px.svg";
 
 interface UserProfile {

cubeseed_login/src/component/carousel/Carousel.tsx

@@ -1,24 +1,22 @@
 import carouselStyle from "@/styles/carousel.module.scss"
-import Image from "next/image"
-import elipse from "../../../public/assets/Ellipse 103.svg"
 
 export default function Carousel() {
   return (
     <section className={carouselStyle.carousel}>
-      <section className={carouselStyle.card}>
+      {/* <section className={carouselStyle.card}>
         <p>
-          “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.”
+          “Using Cubeseed has been a blessing for me as a farmer - there are so
+          many opportunities that have been made available with the virtual
+          marketplace.”
         </p>
         <section className={carouselStyle.profile}>
           <Image alt="" src={elipse} />
           <section>
-            <p>FirstName LastName</p>
-            <p>Occupation</p>
-            <p>Company/Farm Name</p>
+            <p>Olakira Musa</p>
+            <p>Farmer at (Company name)</p>
           </section>
         </section>
-      </section>
+      </section> */}
     </section>
   )
 }

cubeseed_login/src/component/dashboard/DashboardSidePannel.tsx

@@ -1,8 +1,7 @@
 import DashboardSidePannelStyle from "@/styles/DashboardSidePannel.module.scss"
 import DashboardSidePannelButtonContainerStyle from "@/styles/DashboardSidePannelButtonContainer.module.scss"
-import cubeseed from "../../../public/cubeseed.png"
-import Home from "../../../public/assets/icons/home.jpg"
-
+import cubeseed from "@assets/cubeseedlogo.svg"
+import Home from "@assets/icons/home.jpg"
 import Image from "next/image"
 
 const DashboardSidePannel = () => {

cubeseed_login/src/component/forms/ServiceForm.tsx

@@ -1,22 +1,28 @@
-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={serviceStyles.container}>
+      <div className={`${serviceStyles.heading} mb-4 mt-8`}>
+        <h1 className="signup-text">Firstly, who are you?</h1>
+        <p>Select the option that best describes you.</p>
+      </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>
   )
 }