Fix colors and swap fee alert position

balancer · Aug 13, 2024 · cef428d · cef428d
1 parent 34311c6
commit cef428d
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/packages/nextjs/app/cow/_components/PoolCreation.tsx b/packages/nextjs/app/cow/_components/PoolCreation.tsx
@@ -204,7 +204,6 @@ export const PoolCreation = ({ state, clearState }: ManagePoolCreationProps) =>
                 case 6:
                   return (
                     <>
-                      <Alert type="info">All CoW AMMs must set the swap fee to the maximum</Alert>
                       <TransactionButton
                         title="Set Swap Fee"
                         isPending={isSetSwapFeePending}
@@ -259,6 +258,7 @@ export const PoolCreation = ({ state, clearState }: ManagePoolCreationProps) =>
         </div>
       </div>
 
+      {state.step === 6 && <Alert type="info">All CoW AMMs must set the swap fee to the maximum</Alert>}
       {/* <StepInfoAlerts state={state} /> */}
 
       {state.step === 8 && (

diff --git a/packages/nextjs/app/cow/_components/StepsDisplay.tsx b/packages/nextjs/app/cow/_components/StepsDisplay.tsx
@@ -17,7 +17,7 @@ export const StepsDisplay = ({ state }: { state: any }) => {
           <li
             key={step.number}
             data-content={state.step > step.number ? "✓" : step.number}
-            className={`step ${state.step > step.number && "step-success"}`}
+            className={`step ${state.step > step.number && "step-accent"}`}
           >
             {step.label}
           </li>

diff --git a/packages/nextjs/components/common/TokenSelectModal.tsx b/packages/nextjs/components/common/TokenSelectModal.tsx
@@ -24,7 +24,7 @@ export const TokenSelectModal: React.FC<ModalProps> = ({ tokenOptions, setIsModa
     <div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50">
       <div className="absolute w-full h-full" onClick={() => setIsModalOpen(false)} />
       <div className="relative w-[500px]">
-        <div className="relative bg-base-300 border border-base-200 rounded-lg">
+        <div className="relative bg-base-200 border border-base-200 rounded-lg">
           <div className="p-4 mb-2">
             <div className="flex items-center justify-between mb-5">
               <h5 className="ml-3 font-bold text-xl mb-0">Select a Token: {targetNetwork.name}</h5>
@@ -37,7 +37,7 @@ export const TokenSelectModal: React.FC<ModalProps> = ({ tokenOptions, setIsModa
               placeholder="Search by name, symbol, or address..."
               value={searchText}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchText(e.target.value)}
-              className="w-full shadow-md input rounded-xl bg-base-200 disabled:bg-base-200 px-5 h-[52px] text-lg"
+              className="w-full shadow-inner input rounded-xl bg-base-300 disabled:bg-base-300 px-5 h-[52px] text-lg"
             />
           </div>
 

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -13,7 +13,7 @@ module.exports = {
           "primary-content": "#ffffff",
           secondary: "rgb(251, 250, 249)",
           "secondary-content": "rgb(45, 55, 72)",
-          accent: "#a78bfa",
+          accent: "#10b981",
           "accent-content": "#ffffff",
           neutral: "#d4d4d4",
           "neutral-content": "rgb(45, 55, 72)",
@@ -22,7 +22,7 @@ module.exports = {
           "base-300": "#EBE8E0", // bg color
           "base-content": "rgb(45, 55, 72)",
           info: "#0e7490",
-          success: "#15803d",
+          success: "#047857",
           warning: "#b45309",
           error: "#b91c1c",
 
@@ -45,16 +45,16 @@ module.exports = {
           "primary-content": "#0f172a",
           secondary: "rgb(70, 77, 88)",
           "secondary-content": "rgb(229, 211, 190)",
-          accent: "#a78bfa",
-          "accent-content": "#ffffff",
+          accent: "#34d399",
+          "accent-content": "rgb(45, 55, 72)",
           neutral: "rgb(229, 211, 190)",
           "neutral-content": "rgb(70, 77, 88)",
           "base-100": "rgb(70, 77, 88)",
           "base-200": "rgb(63, 70, 80)",
           "base-300": "rgb(56, 62, 71)", // bg color
           "base-content": "rgb(229, 211, 190)",
           info: "#67e8f9",
-          success: "#4ade80",
+          success: "#34d399",
           warning: "#fcd34d",
           error: "#fca5a5",
 
@@ -91,7 +91,7 @@ module.exports = {
         "custom-beige-end": "#e6c6a0",
         "error-tint": "#ef444433",
         "warning-tint": "#f59e0b33",
-        "success-tint": "#22c55e33",
+        "success-tint": "#10b98133",
         "info-tint": "#06b6d433",
       },
     },