dark mode

zenbitETH · Aug 10, 2024 · 93efd1e · 93efd1e
1 parent dc193e9
commit 93efd1e
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 14 deletions.
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);
@@ -52,7 +53,7 @@ const Home: NextPage = () => {
               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 dark:bg-neutral-800 dark:border-neutral-700">
+              <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} />}
@@ -69,6 +70,7 @@ const Home: NextPage = () => {
           ))}
         </AnimatePresence>
       </main>
+      <SwitchTheme />
     </main>
   );
 };

diff --git a/packages/nextjs/components/Step1.tsx b/packages/nextjs/components/Step1.tsx
@@ -59,7 +59,7 @@ function Step1({ handleNext }: { handleNext: any }) {
           name="baseNetwork"
           value={disperseFormData.baseNetwork}
           onChange={event => setDisperseFormData("baseNetwork", event.target.value)}
-          className="mb-3 bg-zen/50 text-gray-600"
+          className="mb-3 bg-zen/50 text-gray-600 dark:text-white"
         >
           <option value="">Select a network</option>
           <option value="Ethereum">⬜ Ethereum</option>

diff --git a/packages/nextjs/components/Step2.tsx b/packages/nextjs/components/Step2.tsx
@@ -79,7 +79,7 @@ function Step2({ handleNext, handleBack }: { handleNext: any; handleBack: any })
             value={disperseFormData.schemaID}
             onChange={event => setDisperseFormData("schemaID", event.target.value)}
             placeholder="Enter schema ID"
-            className="bg-zen/50 text-gray-600 text-base"
+            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
@@ -107,7 +107,7 @@ export default function Step3({ handleNext, handleBack }: { handleNext: any; han
             value={!showAttesterENS ? disperseFormData.attesterAddress : disperseFormData.attesterENS}
             onChange={handleInputChange}
             placeholder="Enter attester address"
-            className="bg-zen/50 text-gray-600"
+            className="bg-zen/50 text-gray-600 dark:text-white"
           />
         </div>
       </motion.section>

diff --git a/packages/nextjs/components/Step6.tsx b/packages/nextjs/components/Step6.tsx
@@ -167,7 +167,7 @@ export default function Step6() {
         <div className="w-full flex flex-col space-y-4 md:space-y-3 bg-Alabaster rounded-xl overflow-y-auto">
           <table className="table">
             <thead>
-              <tr className="font-ral">
+              <tr className="font-ral dark:text-white">
                 <th></th>
                 <th>Recipient Address</th>
                 <th>Reward Amount</th>
@@ -176,7 +176,7 @@ export default function Step6() {
             </thead>
             <tbody>
               {attestations.map((attestation: any, idx: number) => (
-                <tr className="font-oxy" key={idx}>
+                <tr className="font-oxy dark:text-white" key={idx}>
                   <th>{idx + 1}</th>
                   <td>
                     <Address address={attestation.recipient} />
@@ -195,7 +195,7 @@ export default function Step6() {
                     <button
                       type="button"
                       onClick={() => handleDelete(idx)} // button eliminar fila
-                      className="text-gray-500 text-lg font-bold hover:text-gray-700"
+                      className="text-gray-600 dark:text-white text-lg font-bold hover:text-gray-700"
                       aria-label="Eliminar fila"
                       title="Eliminar fila"
                     >
@@ -206,9 +206,9 @@ export default function Step6() {
               ))}
             </tbody>
           </table>
-          <div className="sum font-ral text-lg text-center">Total tokens: {sum}</div>
+          <div className="sum font-ral text-lg text-center dark:text-white">Total tokens: {sum}</div>
           <button type="submit" className="">
-            Disperse
+            Send funds 🚀
           </button>
         </div>
       </motion.section>

diff --git a/packages/nextjs/components/SwitchTheme.tsx b/packages/nextjs/components/SwitchTheme.tsx
@@ -25,7 +25,7 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
   if (!mounted) return null;
 
   return (
-    <div className={`flex space-x-2 h-8 items-center justify-center text-sm ${className}`}>
+    <div className={`fixed bottom-5 right-5 flex space-x-2 h-8 items-center justify-center text-sm ${className}`}>
       <input
         id="theme-toggle"
         type="checkbox"

diff --git a/packages/nextjs/components/Title.tsx b/packages/nextjs/components/Title.tsx
@@ -6,8 +6,8 @@ type TitleProp = {
 export const Title = ({ children, title }: TitleProp) => {
   return (
     <div className="mb-7 md:my-12 space-y-2">
-      <h1 className="font-ral text-[24px] md:text-[30px] font-bold text-Marine-blue">{title}</h1>
-      <p className="font-oxy font-[400] text-Cool-gray  text-[16px]">{children}</p>
+      <h1 className="font-ral text-[24px] md:text-[30px] font-bold dark:text-white">{title}</h1>
+      <p className="font-oxy font-[400] text-Cool-gray  text-[16px] dark:text-white">{children}</p>
     </div>
   );
 };
diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
@@ -19,7 +19,7 @@ Title {
 
 button {
   @apply
-  border-bit border text-black hover:text-white hover:bg-bit px-6 py-1 rounded-md font-ral xl:text-lg 
+  border-bit border-2 dark:text-white text-black hover:text-white hover:bg-bit px-6 py-1 rounded-md font-ral xl:text-lg 
 }
 
 body {

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -55,7 +55,7 @@ module.exports = {
           neutral: "#F9FBFF",
           "neutral-content": "#385183",
           "base-100": "#385183",
-          "base-200": "#2A3655",
+          "base-200": "#263238",
           "base-300": "#212638",
           "base-content": "#F9FBFF",
           info: "#385183",