Merge pull request #500 from elizaOS/card-styling-change

Made font responsive on card

Author: JoeyKhd

packages/client/src/components/grid-view.tsx

@@ -28,22 +28,22 @@ export const GridItem = ({ token }: { token: IToken }) => {
         <div className="absolute left-0 bottom-0 p-2 px-3 w-full z-10">
           <div className="flex items-center gap-4 justify-between">
             <div className="flex items-center gap-2 w-full min-w-0">
-              <div className="bg-autofun-background-muted/65 px-1 text-autofun-text-primary text-lg font-bold font-dm-mono uppercase leading-normal tracking-widest truncate min-w-0 drop-shadow-[0_0px_2px_rgba(0,0,0,0.4)] z-[2]">
+              <div className="bg-autofun-background-muted/65 px-1 text-autofun-text-primary text-base md:text-md xl:text-xl font-bold font-dm-mono uppercase leading-normal tracking-widest truncate min-w-0 drop-shadow-[0_0px_2px_rgba(0,0,0,0.4)] z-[2]">
                 ${token.ticker}
               </div>
               <Verified isVerified={token?.verified ? true : false} />
             </div>
-            <div className="bg-autofun-background-muted/65 px-1 text-autofun-text-primary text-lg shrink-0 font-medium font-dm-mono drop-shadow-[0_0px_2px_rgba(0,0,0,0.4)] z-[2]">
+            <div className="bg-autofun-background-muted/65 px-1 text-autofun-text-primary text-base md:text-lg xl:text-xl font-medium shrink-0 font-dm-mono drop-shadow-[0_0px_2px_rgba(0,0,0,0.4)] z-[2]">
               {fromNow(token.createdAt, true)}
             </div>
           </div>
         </div>
         <div className="flex flex-col w-full min-w-0 z-10">
           <div className="absolute flex flex-col top-0 right-0 p-2 px-3 items-end min-w-0 gap-2">
-            <div className="bg-autofun-background-muted/65 px-1 text-autofun-text-highlight text-xl font-medium font-dm-mono leading-7 truncate drop-shadow-[0_0px_2px_rgba(0,0,0,0.4)] z-[2]">
+            <div className="bg-autofun-background-muted/65 px-1 text-autofun-text-highlight text-base md:text-lg xl:text-xl font-medium font-dm-mono leading-7 truncate drop-shadow-[0_0px_2px_rgba(0,0,0,0.4)] z-[2]">
               MC {abbreviateNumber(token.marketCapUSD)}
             </div>
-            <div className="bg-autofun-background-muted/65 px-1 text-autofun-text-primary text-xl font-medium font-dm-mono leading-7 truncate drop-shadow-[0_0px_2px_rgba(0,0,0,0.4)] z-[2]">
+            <div className="bg-autofun-background-muted/65 px-1 text-autofun-text-primary text-base md:text-lg xl:text-xl font-medium font-dm-mono leading-7 truncate drop-shadow-[0_0px_2px_rgba(0,0,0,0.4)] z-[2]">
               Vol {abbreviateNumber(token.volume24h)}
             </div>
           </div>

packages/client/src/components/verified.tsx

@@ -9,7 +9,11 @@ export default function Verified({ isVerified }: { isVerified?: boolean }) {
         <span>Verified</span>
       </Tooltip>
 
-      <img src="/verified.svg" id="verified" className="size-5 select-none" />
+      <img
+        src="/verified.svg"
+        id="verified"
+        className="size-4 lg:size-5 select-none"
+      />
     </Fragment>
   );
 }