chore: rebase from main and modify to support dark theme

nuonco · Jul 8, 2024 · 11c53b6 · 11c53b6
1 parent 6ff4605
commit 11c53b6
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 31 deletions.
diff --git a/components/InstallStepper/CloudAccountContent.tsx b/components/InstallStepper/CloudAccountContent.tsx
@@ -20,7 +20,12 @@ export const CloudAccountContent = ({
         <AccordionHeader
           className={
             open
-              ? "px-4 bg-accordion-header-active-background text-accordion-header-active-color"
+              ? `px-4
+                  text-accordion-header-active-color
+                  dark:text-accordion-header-active-color-dark
+                  hover:!text-gray-500
+                  bg-accordion-header-active-background
+                  dark:bg-accordion-header-active-background-dark`
               : "px-4"
           }
           onClick={onClick}

diff --git a/components/InstallStepper/CompanyContent.tsx b/components/InstallStepper/CompanyContent.tsx
@@ -11,7 +11,12 @@ export const CompanyContent = ({
       onClick={onClick}
       className={
         open
-          ? "px-4 bg-accordion-header-active-background text-accordion-header-active-color"
+          ? `px-4
+          text-accordion-header-active-color
+          dark:text-accordion-header-active-color-dark
+          hover:!text-gray-500
+          bg-accordion-header-active-background
+          dark:bg-accordion-header-active-background-dark`
           : "px-4"
       }
     >

diff --git a/components/InstallStepper/GroupContent.tsx b/components/InstallStepper/GroupContent.tsx
@@ -13,7 +13,13 @@ export const GroupContent = ({
       onClick={() => setActiveStep(idx + 2)}
       className={
         activeStep === idx + 2
-          ? "px-4 text-black dark:text-white hover:!text-gray-500 bg-accordion-header-active-background text-accordion-header-active-color"
+          ? `px-4
+              text-accordion-header-active-color
+              dark:text-accordion-header-active-color-dark
+              hover:!text-gray-500
+              bg-accordion-header-active-background
+              dark:bg-accordion-header-active-background-dark
+          `
           : "px-4"
       }
     >

diff --git a/components/InstallStepper/InstallStatusContent/index.tsx b/components/InstallStepper/InstallStatusContent/index.tsx
@@ -17,7 +17,12 @@ export const InstallStatusContent = ({
     <AccordionHeader
       className={
         open
-          ? "px-4 bg-accordion-header-active-background text-accordion-header-active-color"
+          ? `px-4
+              text-accordion-header-active-color
+              dark:text-accordion-header-active-color-dark
+              hover:!text-gray-500
+              bg-accordion-header-active-background
+              dark:bg-accordion-header-active-background-dark`
           : "px-4"
       }
       onClick={onClick}

diff --git a/components/InstallStepper/index.tsx b/components/InstallStepper/index.tsx
@@ -130,15 +130,15 @@ const InstallStepper = ({
 
   const steps = input_groups.map((group, idx) => (
     <Step
-      className="border-4 border-step-active-border-color bg-black text-white dark:bg-white dark:text-black"
-      activeClassName="!bg-primary-500 border-4 border-step-active-border-color"
-      completedClassName="!bg-primary-500 border-4 border-gray-900"
+      className="border-4 border-black bg-black text-white dark:border-white dark:bg-white dark:text-black"
+      activeClassName="border-4 border-step-active-border-color dark:border-step-active-border-color"
+      completedClassName="border-4 border-step-complete-border-color dark:border-step-complete-border-color"
       key={idx}
       onClick={() => setActiveStep(idx + 2)}
     >
       {idx + 3}
       <div className="absolute -bottom-[2rem] w-max text-center">
-        <Typography variant="h6" className="text-black">
+        <Typography variant="h6" className="text-black dark:text-gray-100">
           {group.display_name}
         </Typography>
       </div>
@@ -162,28 +162,28 @@ const InstallStepper = ({
         activeLineClassName="!bg-primary-500"
       >
         <Step
-          className="border-4 border-step-active-border-color bg-black text-white dark:bg-white dark:text-black"
-          completedClassName="border-4 border-gray-900 !bg-primary-500"
-          activeClassName="border-4 border-step-active-border-color !bg-primary-500"
+          className="border-4 border-black bg-black text-white dark:border-white dark:bg-white dark:text-black"
+          activeClassName="border-4 border-step-active-border-color dark:border-step-active-border-color"
+          completedClassName="border-4 border-step-complete-border-color dark:border-step-complete-border-color"
           onClick={() => setActiveStep(0)}
         >
           1
           <div className="absolute -bottom-[2rem] w-max text-center">
-            <Typography variant="h6" className="text-black">
+            <Typography variant="h6" className="text-black dark:text-gray-100">
               Company Info
             </Typography>
           </div>
         </Step>
 
         <Step
-          className="border-4 border-step-active-border-color bg-black text-white dark:bg-white dark:text-black"
-          completedClassName="border-4 border-gray-900 !bg-primary-500"
-          activeClassName="border-4 border-step-active-border-color !bg-primary-500"
+          className="border-4 border-black bg-black text-white dark:border-white dark:bg-white dark:text-black"
+          activeClassName="border-4 border-step-active-border-color dark:border-step-active-border-color"
+          completedClassName="border-4 border-step-complete-border-color dark:border-step-complete-border-color"
           onClick={() => setActiveStep(1)}
         >
           2
           <div className="absolute -bottom-[2rem] w-max text-center">
-            <Typography variant="h6" className="text-black">
+            <Typography variant="h6" className="text-black dark:text-gray-100">
               AWS IAM Role
             </Typography>
           </div>
@@ -192,22 +192,22 @@ const InstallStepper = ({
         {...steps}
 
         <Step
-          className="border-4 border-step-active-border-color bg-black text-white dark:bg-white dark:text-black"
-          completedClassName="border-4 border-gray-900 !bg-primary-500"
-          activeClassName="border-4 border-step-active-border-color !bg-primary-500"
+          className="border-4 border-black bg-black text-white dark:border-white dark:bg-white dark:text-black"
+          activeClassName="border-4 border-step-active-border-color dark:border-step-active-border-color"
+          completedClassName="border-4 border-step-complete-border-color dark:border-step-complete-border-color"
           onClick={() => setActiveStep(steps.length + 2)}
         >
           {steps.length + 3}
 
           <div className="absolute -bottom-[2rem] w-max text-center">
-            <Typography variant="h6" className="text-black">
+            <Typography variant="h6" className="text-black dark:text-gray-100">
               Install Status
             </Typography>
           </div>
         </Step>
       </Stepper>
 
-      <form className="mt-4" onSubmit={formAction}>
+      <form className="mt-10" onSubmit={formAction}>
         <CompanyContent
           open={activeStep === 0}
           onClick={() => setActiveStep(0)}

diff --git a/components/Stepper.tsx b/components/Stepper.tsx
@@ -14,14 +14,6 @@ export const Stepper = ({ children, ...props }) => {
 };
 
 export const Step = ({ children, ...props }) => {
-  return (
-    <MTStep
-      className="bg-black text-white dark:bg-white dark:text-black"
-      activeClassName="!bg-primary-500"
-      completedClassName="!bg-primary-500"
-      {...props}
-    >
-      {children}
-    </MTStep>
-  );
+  // NOTE: the classNames are not abstracted in here
+  return <MTStep {...props}>{children}</MTStep>;
 };