fix: update light theme input

bleu · Sep 23, 2024 · d3f11cd · d3f11cd
1 parent 8f58a24
commit d3f11cd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/apps/claim-vesting/src/app/ClaimVestingApp.tsx b/apps/claim-vesting/src/app/ClaimVestingApp.tsx
@@ -21,7 +21,7 @@ export function ClaimVestingApp() {
       <ContentWrapper>
         <Row>
           <LabelContainer label="Place vesting contract address" />
-          <Input placeholder="0xabc..." />
+          <Input theme={theme} placeholder="0xabc..." />
         </Row>
         <Row>
           <ClaimableAmountContainer>

diff --git a/apps/claim-vesting/src/components.tsx b/apps/claim-vesting/src/components.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import type { ReactNode } from "react";
+import clsx from "clsx";
 
 // import ICON_CHECKMARK from "@cowprotocol/assets/cow-swap/checkmark.svg";
 // import ICON_ARROW_DOWN from "@cowprotocol/assets/images/carret-down.svg";
@@ -36,9 +37,13 @@ export const ContentWrapper = ({
   </div>
 );
 
-export const Input = ({ ...props }) => (
+export const Input = ({ theme, ...props }: { theme: string }) => (
   <input
-    className="w-full mt-0 p-2.5 rounded-xl outline-none text-color-text-paper border border-color-border bg-color-paper-darker focus:border-primary"
+    className={clsx(
+      "w-full mt-0 p-2.5 rounded-xl outline-none text-color-text-paper border-2 border-color-border focus:border-primary",
+      { "bg-color-paper-darker": theme === "dark" },
+      { "bg-color-paper": theme === "light" }
+    )}
     {...props}
   />
 );