Merge pull request #11 from zenbitETH/UI-styles

UI styles
zenbitETH · Aug 10, 2024 · 202b75f · 202b75f
2 parents 1ef42c6 + 93efd1e
commit 202b75f
Show file tree

Hide file tree

Showing 17 changed files with 200 additions and 174 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,5 @@
-# AttestDeFi
+# AttestDeFi
+
+AttestDeFi is a dapp designed to simplify how EAS users distribute ERC 20 tokens or ether within the Superchain ecosystem based on the attestations granted in a Schema by a specific attestor.
+
+## How it's made
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -10,6 +10,7 @@ import Step4 from "~~/components/Step4";
 import Step5 from "~~/components/Step5";
 import Step6 from "~~/components/Step6";
 import Navbar from "~~/components/StepperPanel";
+import { SwitchTheme } from "~~/components/SwitchTheme";
 
 const Home: NextPage = () => {
   const [currentStep, setCurrentStep] = useState(1);
@@ -39,38 +40,37 @@ const Home: NextPage = () => {
 
   return (
     <main
-      className="bg-Light-gray grid place-items-center w-screen md:min-h-full box-border overflow-x-hidden"
+      className="grid place-items-center md:min-h-full box-border overflow-x-hidden "
       style={{ fontFamily: "Ubuntu" }}
     >
-      <main className=" flex flex-col items-center min-h-full md:min-h-full w-screen md:max-w-[1280px] md:flex-row md:bg-white md:rounded-xl md:p-5 relative md:h-fit md:overflow-x-hidden md:overflow-hidden">
-        <Navbar step={currentStep} />
-        <section className="w-full flex flex-1 gap-4 flex-col items-center md:h-full md:justify-between md:mb-0">
-          <AnimatePresence mode="wait">
-            {steps.map(step => (
-              <div
-                key={step.index}
-                data-hs-stepper-content-item={`{ "index": ${step.index} }`}
-                className={`${currentStep === step.index ? "active w-full p-4" : ""}`}
-                style={{ display: currentStep === step.index ? "block" : "none" }}
-              >
-                <div className="w-full p-4 bg-gray-50 flex justify-center items-center border border-dashed text-gray-500 dark:text-neutral-500 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
-                  {step.index === 1 && <Step1 handleNext={handleNext} />}
+      <Navbar step={currentStep} />
+      <main className=" absolute top-1/2 -translate-y-1/2 flex flex-col w-5/12 items-center h-full md:min-h-full md:flex-row md:rounded-xl  md:h-fit md:overflow-x-hidden md:overflow-hidden">
+        <AnimatePresence mode="wait">
+          {steps.map(step => (
+            <div
+              key={step.index}
+              data-hs-stepper-content-item={`{ "index": ${step.index} }`}
+              className={`${currentStep === step.index ? "active h-full w-full " : ""}`}
+              style={{ display: currentStep === step.index ? "block" : "none" }}
+            >
+              <div className=" flex justify-center items-center text-gray-600 dark:text-neutral-600 rounded-md">
+                {step.index === 1 && <Step1 handleNext={handleNext} />}
 
-                  {step.index === 2 && <Step2 handleNext={handleNext} handleBack={handleBack} />}
+                {step.index === 2 && <Step2 handleNext={handleNext} handleBack={handleBack} />}
 
-                  {step.index === 3 && <Step3 handleNext={handleNext} handleBack={handleBack} />}
+                {step.index === 3 && <Step3 handleNext={handleNext} handleBack={handleBack} />}
 
-                  {step.index === 4 && <Step4 handleNext={handleNext} handleBack={handleBack} />}
+                {step.index === 4 && <Step4 handleNext={handleNext} handleBack={handleBack} />}
 
-                  {step.index === 5 && <Step5 handleNext={handleNext} handleBack={handleBack} />}
+                {step.index === 5 && <Step5 handleNext={handleNext} handleBack={handleBack} />}
 
-                  {step.index === 6 && <Step6 />}
-                </div>
+                {step.index === 6 && <Step6 />}
               </div>
-            ))}
-          </AnimatePresence>
-        </section>
+            </div>
+          ))}
+        </AnimatePresence>
       </main>
+      <SwitchTheme />
     </main>
   );
 };

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -59,15 +59,11 @@ export const HeaderMenuLinks = () => {
  */
 export const Header = () => {
   return (
-    <div className="sticky lg:static top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2">
+    <div className="fixed top-0 navbar bg-none min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
       <div className="navbar-start w-auto lg:w-1/2">
         <Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
-          <div className="flex relative w-10 h-10">
-            <Image alt="SE2 logo" className="cursor-pointer" fill src="/zenbit-logo.png" />
-          </div>
-          <div className="flex flex-col">
-            <span className="font-bold leading-tight">AttestDeFi</span>
-            <span className="text-xs">Distribute rewards with ease</span>
+          <div className="flex relative h-20 w-80">
+            <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
           </div>
         </Link>
       </div>

diff --git a/packages/nextjs/components/Next.tsx b/packages/nextjs/components/Next.tsx
@@ -7,30 +7,18 @@ export default function Next({ goBack, next }: backType) {
   return (
     <div className="box-border w-full flex justify-between md:mt-0 absolute bottom-0 bg-white p-[5%] md:py-0 md:self-end md:bg-[transparent] md:relative md:px-[15%] md:mb-5 ">
       {goBack && (
-        <button
-          type="submit"
-          name="back"
-          className="text-[16px] text-Cool-gray transform duration-300 hover:text-Marine-blue font-[500]"
-        >
+        <button type="submit" name="back" className="">
           Go Back
         </button>
       )}
       <div />
       {next && (
-        <button
-          type="submit"
-          name="next"
-          className="bg-Marine-blue hover:brightness-150 transform ease-in-out duration-300 font-[500] text-[16px] rounded-lg text-black py-3 px-4 md:py-4 md:px-8"
-        >
+        <button type="submit" name="next" className="">
           Next Step
         </button>
       )}
       {!next && (
-        <button
-          type="submit"
-          name="next"
-          className="bg-Purplish-blue hover:brightness-150 transform ease-in-out duration-300 font-[500] text-[16px] rounded-lg text-black py-3 px-6 md:py-4 md:px-10"
-        >
+        <button type="submit" name="next" className="">
           Confirm
         </button>
       )}

diff --git a/packages/nextjs/components/Step1.tsx b/packages/nextjs/components/Step1.tsx
@@ -45,34 +45,29 @@ function Step1({ handleNext }: { handleNext: any }) {
   return (
     <form
       onSubmit={handleSubmit}
-      className="w-full flex flex-col flex-1 md:min-h-fit items-center md:h-[580px] md:justify-between"
+      className=" flex flex-col flex-1 md:min-h-fit items-center md:h-[580px] md:justify-between md"
     >
       <motion.section
         variants={pageVariant}
         // initial={location.hasOwnProperty("state.name") ? "initial" : "initial2"}
         animate="animate"
         exit="exit"
-        className="flex flex-col  mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%]"
+        className=" "
       >
-        <Title title="Select attest network">
-          Please, select the network you want to validate the attestations from.
-        </Title>
-
-        <div className="space-y-4 md:space-y-7 overflow-x-hidden">
-          <select
-            name="baseNetwork"
-            value={disperseFormData.baseNetwork}
-            onChange={event => setDisperseFormData("baseNetwork", event.target.value)}
-            className="mt-4 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-          >
-            <option value="">Select a network</option>
-            <option value="Ethereum">Ethereum</option>
-            <option value="Optimism">Optimism</option>
-            <option value="Base">Base</option>
-            {/* <option value="Celo">Celo</option> */}
-            {/* <option value="Mode">Mode</option> */}
-          </select>
-        </div>
+        <Title title="Select the Attest Network 🎖️">In which network the attestations were granted?</Title>
+        <select
+          name="baseNetwork"
+          value={disperseFormData.baseNetwork}
+          onChange={event => setDisperseFormData("baseNetwork", event.target.value)}
+          className="mb-3 bg-zen/50 text-gray-600 dark:text-white"
+        >
+          <option value="">Select a network</option>
+          <option value="Ethereum">⬜ Ethereum</option>
+          <option value="Optimism">🟥 Optimism</option>
+          <option value="Base">🟦 Base</option>
+          {/* <option value="Celo">Celo</option> */}
+          {/* <option value="Mode">Mode</option> */}
+        </select>
       </motion.section>
       <Next goBack={false} next={true} />
     </form>

diff --git a/packages/nextjs/components/Step2.tsx b/packages/nextjs/components/Step2.tsx
@@ -69,17 +69,17 @@ function Step2({ handleNext, handleBack }: { handleNext: any; handleBack: any })
         // initial={location.state.name === "step1" ? "initial" : "initial2"}
         animate="animate"
         exit={goback ? "exit2" : "exit"}
-        className="flex flex-col mb-8 md:mb-0 bg-white w-[90%] rounded-2xl p-10  relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
+        className="flex flex-col mb-8 md:mb-0 rounded-2xl p-10 z-30 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
       >
-        <Title title="Enter Schema ID">Enter the Schema ID that granted the attestations.</Title>
+        <Title title="Enter the Schema ID 📜">Enter the Schema ID from which the attestations were granted.</Title>
         <div className="space-y-4 md:space-y-0 flex flex-col md:flex-row md:space-x-6">
           <input
             type="text"
             name="schemaID"
             value={disperseFormData.schemaID}
             onChange={event => setDisperseFormData("schemaID", event.target.value)}
             placeholder="Enter schema ID"
-            className="mt-4 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            className="bg-zen/50 text-gray-600 dark:text-white text-base"
           />
         </div>
       </motion.section>

diff --git a/packages/nextjs/components/Step3.tsx b/packages/nextjs/components/Step3.tsx
@@ -97,19 +97,17 @@ export default function Step3({ handleNext, handleBack }: { handleNext: any; han
         // initial={location.state.name === "step2" ? "initial" : "initial2"}
         animate="animate"
         exit={goback ? "exit2" : "exit"}
-        className="flex flex-col  mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7  relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
+        className="flex flex-col  mb-8 md:mb-0  rounded-2xl py-10 px-7 z-30 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
       >
-        <Title title="Enter attester address or ENS">
-          Enter the attester address or ENS you want to validate the attestations from.
-        </Title>
+        <Title title="Enter attester address or ENS 👌🏼">Which address granted the attestations?</Title>
         <div className="w-full flex flex-col space-y-4 md:space-y-5">
           <input
             type="text"
             name="attesterAddress"
             value={!showAttesterENS ? disperseFormData.attesterAddress : disperseFormData.attesterENS}
             onChange={handleInputChange}
             placeholder="Enter attester address"
-            className="mt-4 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            className="bg-zen/50 text-gray-600 dark:text-white"
           />
         </div>
       </motion.section>

diff --git a/packages/nextjs/components/Step4.tsx b/packages/nextjs/components/Step4.tsx
@@ -63,23 +63,21 @@ export default function Step4({ handleNext, handleBack }: { handleNext: any; han
         initial="initial"
         animate="animate"
         exit={goback ? "exit2" : "exit"}
-        className="flex flex-col  mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7  relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
+        className="flex flex-col  mb-8 md:mb-0 rounded-2xl py-10 px-7 z-30 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
       >
-        <Title title="Select distribution network">
-          Select the network where you want to disperse your rewards on.
-        </Title>
-        <div className="w-full flex flex-col space-y-4 md:space-y-5 bg-Alabaster p-6 rounded-xl md:p-8">
+        <Title title="Select distribution network 💸">In which network do you want to distribute funds?</Title>
+        <div className="w-full flex flex-col space-y-4 md:space-y-5 bg-Alabaster rounded-xl">
           <select
             name="selectRedDestin"
             value={disperseFormData.destinationNetwork}
             onChange={event => setDisperseFormData("destinationNetwork", event.target.value)}
-            className="mt-4 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            className=""
           >
             <option value="">Select the destination network</option>
-            <option value="Optimism">Optimism</option>
-            <option value="Base">Base</option>
-            <option value="Celo">Celo</option>
-            <option value="Mode">Mode</option>
+            <option value="Optimism">🔴 Optimism</option>
+            <option value="Base">🔵 Base</option>
+            <option value="Celo">🟡 Celo</option>
+            <option value="Mode">🟢 Mode</option>
             <option value="Hardhat">Hardhat</option>
           </select>
         </div>

diff --git a/packages/nextjs/components/Step5.tsx b/packages/nextjs/components/Step5.tsx
@@ -73,21 +73,19 @@ export default function Step5({ handleNext, handleBack }: { handleNext: any; han
         initial="initial"
         animate="animate"
         exit={goback ? "exit2" : "exit"}
-        className="flex flex-col  mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
+        className="flex flex-col  mb-8 md:mb-0  rounded-2xl py-10 px-7 z-30 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
       >
-        <Title title="Type of rewards">
-          Select the type of rewards you want to disperse, it can be any ERC20 token.
-        </Title>
-        <div className="w-full flex flex-col space-y-4 md:space-y-5 bg-Alabaster p-6 rounded-xl md:p-8">
+        <Title title="Type of rewards 🪙">Select the type of rewards you want to disperse.</Title>
+        <div className="w-full flex flex-col space-y-4 md:space-y-5 bg-Alabaster rounded-xl ">
           <select
             name="typeOfReward"
             value={disperseFormData.typeOfReward}
             onChange={event => setDisperseFormData("typeOfReward", event.target.value)}
-            className="mt-4 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            className=""
           >
             <option value="">Select type of reward</option>
-            <option value="ETH">ETH</option>
-            <option value="custom">Custom ERC20 token</option>
+            <option value="ETH">ETH 💠</option>
+            <option value="custom">Custom ERC20 token 🪙</option>
           </select>
           {disperseFormData.typeOfReward === "custom" ? (
             <input
@@ -96,7 +94,7 @@ export default function Step5({ handleNext, handleBack }: { handleNext: any; han
               placeholder="Enter ERC20 contract address. 0x...."
               value={disperseFormData.erc20address}
               onChange={event => setDisperseFormData("erc20address", event.target.value)}
-              className="mt-4 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              className="placeholder:text-white/60"
             />
           ) : null}
         </div>