Merge pull request #29 from bleu/review-claim-vesting

Create vesting: fix font sizes in mobile
bleu · Oct 9, 2024 · ca9c48e · ca9c48e
2 parents 490e2c0 + f37b071
commit ca9c48e
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/apps/claim-vesting/tailwind.config.js b/apps/claim-vesting/tailwind.config.js
@@ -103,6 +103,9 @@ module.exports = {
       fontFamily: {
         "inter-sans": '"Inter var", sans-serif',
       },
+      screens: {
+        xsm: "420px",
+      },
     },
   },
   plugins: [],

diff --git a/packages/cow-hooks-ui/src/AddressInput.tsx b/packages/cow-hooks-ui/src/AddressInput.tsx
@@ -19,18 +19,21 @@ export const AddressInput: React.FC<AddressInputProps> = ({
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }) => (
   <div className="flex flex-col w-full">
-    <label htmlFor="addressInput" className="text-start text-sm ml-2 my-2.5">
+    <label
+      htmlFor="addressInput"
+      className="text-start text-xs xsm:text-sm ml-2 my-2.5"
+    >
       {label}
     </label>
     <input
       id="addressInput"
       type="text"
       placeholder="0xabc..."
       onChange={onChange}
-      className="w-full mt-0 p-2.5 rounded-xl outline-none text-color-text-paper border-none bg-color-paper-darker focus:border-primary"
+      className="w-full mt-0 p-2.5 rounded-xl outline-none text-xs xsm:text-base text-color-text-paper border-none bg-color-paper-darker focus:border-primary"
       {...props}
     />
-    <span className="text-red-700 text-sm text-start ml-2.5 mt-1">
+    <span className="text-red-700 text-xs xsm:text-sm text-start ml-2.5 mt-1">
       {errorMessage}
     </span>
   </div>

diff --git a/packages/cow-hooks-ui/src/ButtonPrimary.tsx b/packages/cow-hooks-ui/src/ButtonPrimary.tsx
@@ -6,7 +6,7 @@ export const ButtonPrimary: React.FC<
 > = ({ children, disabled = false, ...props }) => (
   <button
     className={cn(
-      "flex flex-row flex-wrap items-center justify-center text-lg font-semibold font-inter-sans border-none shadow-none rounded-2xl relative min-h-[58px] mt-2 mb-2",
+      "flex flex-row flex-wrap items-center justify-center text-sm font-semibold font-inter-sans border-none shadow-none rounded-2xl relative min-h-[58px] mt-2 mb-2 xsm:text-lg",
       {
         "bg-color-primary text-color-button-text transition-colors duration-200 ease-in-out focus:shadow-none focus:transform-none focus:bg-color-primary-lighter hover:shadow-none hover:transform-none hover:bg-color-primary-lighter active:shadow-none active:transform-none active:bg-color-primary-lighter":
           !disabled,

diff --git a/packages/cow-hooks-ui/src/ClaimableAmountContainer.tsx b/packages/cow-hooks-ui/src/ClaimableAmountContainer.tsx
@@ -7,7 +7,7 @@ export const ClaimableAmountContainer = ({
   children?: ReactNode;
 }) => (
   <div
-    className="flex justify-between items-center bg-color-paper-darker p-3 my-4 rounded-xl"
+    className="flex justify-between items-center bg-color-paper-darker p-3 my-4 rounded-xl text-xs xsm:text-base"
     {...props}
   >
     {children}