refactor(stepper): rework design and border (#739)

* refactor(stepper): rework design and border * refactor(stepper): avoid cn where it has no use
raspiblitz · Jul 9, 2024 · 74956fc · 74956fc
1 parent 2e32b90
commit 74956fc
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/src/layouts/SetupContainer.tsx b/src/layouts/SetupContainer.tsx
@@ -19,11 +19,13 @@ export default function SetupContainer({
         className="fixed right-4 top-4 h-8 text-white"
         onClick={toggleDarkMode}
       />
+
       <div className="fixed right-16 top-4 flex h-8 w-48 items-center justify-around">
         <I18nSelect />
       </div>
+
       {currentStep !== null && (
-        <div className="fixed top-12 flex items-center justify-around">
+        <div className="fixed top-12 flex items-center justify-around w-1/3">
           <Stepper currentStep={currentStep} />
         </div>
       )}

diff --git a/src/pages/Setup/Stepper.tsx b/src/pages/Setup/Stepper.tsx
@@ -1,3 +1,4 @@
+import { cn } from "@nextui-org/react";
 import { useTranslation } from "react-i18next";
 
 const NUMBER_OF_STEPS = 4;
@@ -10,25 +11,29 @@ export default function Stepper({ currentStep }: Props) {
   const { t } = useTranslation();
 
   return (
-    <div className="w-full">
-      <ul className="lg:flex hidden justify-center items-center gap-4">
+    <div
+      className={cn(
+        "w-full",
+        "after:block after:relative after:bottom-5 after:border after:border-gray-700 after:content-['']",
+      )}
+    >
+      <ul className="lg:flex hidden justify-between items-center relative z-10">
         {Array.from({ length: NUMBER_OF_STEPS }).map((_, index: number) => (
-          <>
-            <li
-              className={`list-none text-center flex flex-col ${index < currentStep ? "opacity-100" : "opacity-30"}`}
-              key={index}
+          <li className="list-none px-4 bg-primary-900" key={index}>
+            <span
+              className={cn(
+                "text-center flex flex-col",
+                index >= currentStep && "opacity-30",
+              )}
             >
-              <span className="font-bold">
+              <span className="font-bold whitespace-nowrap">
                 {t(`setup.step.step`)} {index + 1}
               </span>
-              <span className="text-sm">
+              <span className="text-sm text-secondary">
                 {t(`setup.step.step_${index + 1}_description`)}
               </span>
-            </li>
-            {index < NUMBER_OF_STEPS - 1 && (
-              <div className="border-b w-16"></div>
-            )}
-          </>
+            </span>
+          </li>
         ))}
       </ul>
     </div>