polishing work for UI (#101)

* polishing work for UI * fixed lint errors * updated lock
greenpill-dev-guild · Sep 15, 2024 · 0ff13ba · 0ff13ba · vercel · Sep 15, 2024
1 parent a4aba98
commit 0ff13ba
Show file tree

Hide file tree

Showing 33 changed files with 636 additions and 330 deletions.
diff --git a/packages/app/src/constants.ts b/packages/app/src/constants.ts
diff --git a/packages/app/src/types/greengoods.d.ts b/packages/app/src/types/greengoods.d.ts
diff --git a/packages/app/src/views/Profile/index.tsx b/packages/app/src/views/Profile/index.tsx
diff --git a/packages/client/dev-dist/sw.js b/packages/client/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-c982e567'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.iuutgq7l69o"
+    "revision": "0.nfin5vsrpm8"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

diff --git a/packages/client/index.html b/packages/client/index.html
@@ -60,7 +60,7 @@
       name="msapplication-TileImage"
       content="/images/ms-icon-144x144.png"
     />
-    <meta name="theme-color" content="#367d42" />
+    <meta name="theme-color" content="#fff" />
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -71,10 +71,10 @@
 
     <title>Green Goods</title>
   </head>
-  <body class="m-0 w-screen h-screen overflow-x-hidden bg-white">
+  <body class="m-0 w-screen h-screen bg-white dark:bg-white text-stone-900">
     <div
       id="root"
-      class="w-full h-full max-w-screen-xl mx-auto flex flex-col px-6 sm:px-12"
+      class="w-full h-full max-w-screen-xl mx-auto flex flex-col px-4 sm:px-6 md:px-12"
     ></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/packages/client/package.json b/packages/client/package.json
@@ -29,6 +29,7 @@
     "react-intl": "6.6.8",
     "react-router-dom": "^6.26.1",
     "react-select": "5.8.0",
+    "react-spring-bottom-sheet": "3.4.1",
     "react-tailwindcss-datepicker": "^1.7.2",
     "zod": "^3.23.8"
   },

diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -14,11 +14,12 @@ import Views from "@/views";
 import Login from "@/views/Login";
 import Landing from "@/views/Landing";
 import { Appbar } from "@/components/Layout/AppBar";
+import { CircleLoader } from "./components/Loader";
 
 function App() {
   const { authenticated } = usePrivy();
   const { isMobile, isInstalled } = usePWA();
-  const { smartAccountReady } = useUser();
+  const { authenticating, smartAccountReady } = useUser();
 
   const isDownloaded = isMobile && isInstalled;
   const isAuthenticated = authenticated && smartAccountReady;
@@ -37,7 +38,11 @@ function App() {
             path="/login"
             element={
               isDownloaded ?
-                !isAuthenticated ?
+                !isAuthenticated && authenticating ?
+                  <main className="w-full h-full grid place-items-center">
+                    <CircleLoader />
+                  </main>
+                : !isAuthenticated ?
                   <Login />
                 : <Navigate to="/" replace />
               : <Navigate to="/landing" replace />

diff --git a/packages/client/src/components/Button.tsx b/packages/client/src/components/Button.tsx
@@ -60,9 +60,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         disabled={disabled}
         className={`
-        ${className} ${sizeClasses} ${styleClasses} ${fullWidth ? "w-full" : ""}
+         ${sizeClasses} ${styleClasses} ${fullWidth ? "w-full" : ""}
         inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg
-        border disabled:pointer-events-none disabled:opacity-50
+        border disabled:pointer-events-none disabled:opacity-50 ${className}
       `}
         {...props}
       >

diff --git a/packages/client/src/components/Form/Progress.tsx b/packages/client/src/components/Form/Progress.tsx
@@ -44,3 +44,12 @@ export const FormProgress = ({ currentStep, steps }: FormProgressProps) => {
     </ul>
   );
 };
+
+{
+  /* <ul className="steps">
+  <li className="step step-primary">Register</li>
+  <li className="step step-primary">Choose plan</li>
+  <li className="step">Purchase</li>
+  <li className="step">Receive Product</li>
+</ul> */
+}
diff --git a/packages/client/src/components/Garden/Actions.tsx b/packages/client/src/components/Garden/Actions.tsx
@@ -14,16 +14,24 @@ export const GardenActions: React.FC<GardenActionsProps> = ({
   const [work, setWork] = useState<Work | null>(null);
 
   return (
-    <div>
-      <ul className="flex flex-col gap-2">
+    <>
+      <ul className="grid grid-cols-2 grid-flow-row gap-2 flex-wrap mt-4">
         {actions.map((action) => (
-          <li key={action.id}>
-            <h3>{action.title}</h3>
-            <p>{action.instructions}</p>
+          <li
+            key={action.id}
+            className="flex flex-col gap-1 shadow-sm border border-stone-50 bg-stone-100 rounded-xl pb-2"
+          >
+            <img
+              src={action.media[0] ?? "https://picsum.photos/300/200"}
+              alt="action"
+              className="rounded-xl aspect[4/3]"
+            />
+            <label className="px-2">{action.title}</label>
+            <p className="px-2 text-xs line-clamp-3">{action.description}</p>
           </li>
         ))}
       </ul>
-      <h3>Work</h3>
+      <h5>Work</h5>
       <ul className="flex flex-col gap-2">
         {works.map((work) => (
           <li key={work.id} onClick={() => setWork(work)}>
@@ -45,6 +53,6 @@ export const GardenActions: React.FC<GardenActionsProps> = ({
           <button>close</button>
         </form>
       </dialog>
-    </div>
+    </>
   );
 };
diff --git a/packages/client/src/components/Layout/AppBar.tsx b/packages/client/src/components/Layout/AppBar.tsx
@@ -33,21 +33,14 @@ export const Appbar = () => {
   const { pathname } = useLocation();
 
   return (
-    <nav
-      className={
-        "btm-nav z-20 bg-base-100 py-9 fixed bottom-0 rounded-t-2xl w-full"
-      }
-      // className="fixed bottom-0 left-0 right-0 h-[4.5rem] shadow-sm bg-slate-50 font-medium border-t border-slate-100 rounded-t-md py-3 px-4 flex justify-around items-center w-full">
-      // style={spring}
-    >
+    <nav className={"btm-nav z-10 w-full rounded-t-2xl py-9 bg-[#F4E0CC]"}>
       {tabs.map(({ path, Icon, title }) => (
         <Link to={path} key={title}>
           <button
-            // const linkClasses =
-            //   "flex-1 flex flex-col items-center text-slate-800 hover:text-teal-700 py-2 focus:outline-none focus:text-teal-700";
-
             className={`flex flex-col items-center ${
-              pathname === path ? "active tab-active" : ""
+              pathname === path ?
+                "active tab-active text-[#367D42] focus:outline-none hover:text-[#367D42]"
+              : "text-stone-700"
             }`}
           >
             <Icon className="w-6 h-6" />

diff --git a/packages/client/src/components/Layout/Footer.tsx b/packages/client/src/components/Layout/Footer.tsx
@@ -25,7 +25,7 @@ interface FooterProps {}
 
 export const Footer: React.FC<FooterProps> = () => {
   return (
-    <footer className="h-[5rem] flex flex-col gap-2 py-2 lg:flex-row items-center justify-between  lg:gap-4">
+    <footer className="h-[5rem] flex flex-col gap-2 py-2 lg:flex-row items-center justify-between lg:gap-4">
       <div className="">
         <p>
           Built by <b className="text-[#367D42]">Greenpill Dev Guild</b>

diff --git a/packages/client/src/components/Layout/Hero.tsx b/packages/client/src/components/Layout/Hero.tsx
@@ -1,56 +1,15 @@
-import toast from "react-hot-toast";
-import React, { useState } from "react";
+import React from "react";
 import { DeviceFrameset } from "react-device-frameset";
 import "react-device-frameset/styles/marvel-devices.min.css";
 
 import { usePWA } from "@/providers/PWAProvider";
 
-type SubscribeState = "idle" | "subscribing" | "subscribed" | "error";
+interface HeroProps {
+  handleSubscribe: (e: React.FormEvent<HTMLFormElement>) => void;
+}
 
-export const Hero: React.FC = () => {
+export const Hero: React.FC<HeroProps> = ({ handleSubscribe }) => {
   const { isMobile, platform } = usePWA();
-  const [_state, setSubscribeState] = useState<SubscribeState>("idle");
-
-  function handleSubscribe(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-
-    setSubscribeState("subscribing");
-
-    console.log(e.currentTarget);
-    const formData = new FormData(e.currentTarget);
-    const email = formData.get("email") as string;
-
-    fetch(
-      import.meta.env.DEV ?
-        "http://localhost:3000/api/subscribe"
-      : "/api/subscribe",
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ email }),
-      }
-    )
-      .then((response) => {
-        if (!response.ok) {
-          // ERROR
-          console.log(response.status);
-
-          throw new Error("Network response was not ok.");
-        } else {
-          toast.success("Successfilly subscribed!");
-
-          setSubscribeState("subscribed");
-        }
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-
-        setSubscribeState("error");
-        toast.error("Something went wrong. Please try again.");
-      });
-  }
 
   return (
     <main className="w-full min-h-[calc(100lvh-9rem)] lg:min-h-[calc(100lvh-6rem)] flex flex-col lg:flex-row lg:justify-center gap-16">

diff --git a/packages/client/src/components/Layout/Splash.tsx b/packages/client/src/components/Layout/Splash.tsx
@@ -18,9 +18,7 @@ export const Splash: React.FC<SplashProps> = ({
   return (
     <div className="flex flex-col items-center gap-4 w-full h-full pb-12 pt-[20vh]">
       <img src="/icon.png" alt={APP_NAME} width={240} />
-      <h2 className=" font-bold text-center text-[#367D42] mb-12">
-        {APP_NAME}
-      </h2>
+      <h3 className="font-bold text-center text-[#367D42] mb-12">{APP_NAME}</h3>
       <Button
         label={buttonLabel}
         onClick={login}

diff --git a/packages/client/src/constants.ts b/packages/client/src/constants.ts
@@ -31,4 +31,6 @@ export const GREEN_GOODS_GARDEN_OPERATOR_WHITELIST = [
   "[email protected]",
   "[email protected]",
   "[email protected]",
+  "[email protected]",
+  "[email protected]",
 ];