fix(bex): switch to a non-custom colours

berachain · Dec 23, 2024 · 46700b2 · 46700b2
1 parent 87ec584
commit 46700b2
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 17 deletions.
diff --git a/apps/hub/src/app/pools/components/pool-creation-summary.tsx b/apps/hub/src/app/pools/components/pool-creation-summary.tsx
@@ -95,20 +95,18 @@ const PoolCreationSummary = memo(
             showStep(0) && poolType ? (
               <div
                 className={cn(
-                  "flex items-center gap-2 rounded-full border-2 px-2 text-base xl:text-sm 2xl:text-base",
+                  "flex items-center gap-2 rounded-full border-2 px-2 text-center text-base xl:text-sm 2xl:text-base",
                   poolType === PoolType.ComposableStable &&
-                    "border-semanticSuccessForeground bg-semanticSuccessBackground text-semanticSuccessForeground",
+                    "border-green-500 bg-muted text-green-500",
                   poolType === PoolType.Weighted &&
-                    "border-semanticBlueSuccessForeground bg-semanticBlueSuccessBackground text-semanticBlueSuccessForeground",
+                    "border-highlight bg-muted text-highlight",
                 )}
               >
                 <div
                   className={cn(
                     "h-1 w-1 rounded-full",
-                    poolType === PoolType.ComposableStable &&
-                      "bg-semanticSuccessForeground",
-                    poolType === PoolType.Weighted &&
-                      "bg-semanticBlueSuccessForeground",
+                    poolType === PoolType.ComposableStable && "bg-green-500",
+                    poolType === PoolType.Weighted && "bg-highlight",
                   )}
                 />
                 <span>

diff --git a/apps/hub/src/app/pools/components/process-steps.tsx b/apps/hub/src/app/pools/components/process-steps.tsx
@@ -49,7 +49,7 @@ const ProcessSteps = ({
   return (
     <div
       className={cn(
-        "flex flex-wrap text-sm items-start gap-4 overflow-visible py-2 xl:flex-col xl:gap-6",
+        "flex flex-wrap items-start gap-4 overflow-visible py-2 text-sm xl:flex-col xl:gap-6",
         className,
       )}
     >
@@ -70,26 +70,26 @@ const ProcessSteps = ({
           )}
           <div
             className={cn(
-              "relative flex w-fit md:w-full overflow-hidden rounded-sm border shadow-md ",
+              "relative flex w-fit overflow-hidden rounded-sm border shadow-md md:w-full ",
               selectedStep === index &&
                 "bg-processStepBackground bg-opacity-55",
             )}
           >
             {selectedStep === index && (
-              <div className="w-1 absolute top-0 left-0 bottom-0 flex-shrink-0 bg-info-foreground" />
+              <div className="absolute bottom-0 left-0 top-0 w-1 flex-shrink-0 bg-info-foreground" />
             )}
-            <div className="flex w-full justify-between p-4 items-center">
+            <div className="flex w-full items-center justify-between p-4">
               <h3 className="text-nowrap pr-2 font-normal">{title}</h3>
               {completedSteps.includes(index) &&
                 (verifiedSteps.steps[index] ? (
                   <Icons.checkCircle
                     size={16}
-                    className="text-semanticSuccessForeground -mr-2"
+                    className="-mr-2 text-green-500"
                   />
                 ) : (
                   <Icons.xCircle
                     size={16}
-                    className="text-destructive-foreground -mr-2"
+                    className="-mr-2 text-destructive-foreground"
                   />
                 ))}
             </div>

diff --git a/packages/config/tailwind/index.ts b/packages/config/tailwind/index.ts
@@ -155,10 +155,6 @@ export default {
         createButton: "#e6b434",
         processStepBackground: "#373332",
         highlight: "#0284C7",
-        semanticSuccessForeground: "#4ADE80",
-        semanticSuccessBackground: "#141D10",
-        semanticBlueSuccessForeground: "#38BCF8",
-        semanticBlueSuccessBackground: "#121A1C",
       },
       borderRadius: {
         "2xs": "0.125rem",