fix: styles

bgd-labs · Jul 23, 2024 · 4a8f56f · 4a8f56f
1 parent a42bce9
commit 4a8f56f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/apps/docs/src/components/AssetIconCard.tsx b/apps/docs/src/components/AssetIconCard.tsx
@@ -54,8 +54,14 @@ export const AssetIconCard = ({
     <IconCard
       svgPath={`${githubIconsPath}${iconPath}`}
       name={`${name}${chainName ? `(${chainName})` : ""}`}
-      subName={`${assetTag ? assetTag : ""}${symbol}${chainId ? `(${chainId})` : ""}`}
-      fileName={`${assetTag ? assetTag : ""}${symbol}${variant === IconVariant.Full ? "" : variant}`}
+      subComponent={
+        <div className="font-mono text-xs text-gray-400">
+          <span className="lowercase">{assetTag ? assetTag : ""}</span>
+          <span className="uppercase">{symbol}</span>
+          <span>{chainId && !assetTag ? `(${chainId})` : ""}</span>
+        </div>
+      }
+      fileName={`${(assetTag ? assetTag : "").toLowerCase()}${symbol.toUpperCase()}${variant === IconVariant.Full ? "" : variant}`}
       setActiveType={setVariant}
       activeType={variant}
     >

diff --git a/apps/docs/src/components/IconCard.tsx b/apps/docs/src/components/IconCard.tsx
@@ -12,14 +12,16 @@ export const IconCard = ({
   children,
   name,
   subName,
+  subComponent,
   svgPath,
   fileName,
   setActiveType,
   activeType,
 }: {
   children: ReactNode;
   name: string;
-  subName: string;
+  subName?: string;
+  subComponent?: ReactNode;
   svgPath: string;
   fileName: string;
   setActiveType: (type: IconVariant) => void;
@@ -38,9 +40,12 @@ export const IconCard = ({
       <div className="relative flex min-h-[285px] w-[200px] flex-col justify-center overflow-hidden rounded-lg pb-4">
         <div className="relative flex-1 p-2">
           <div className="text-sm font-semibold text-gray-800">{name}</div>
-          <div className="font-mono text-xs uppercase text-gray-400">
-            {subName}
-          </div>
+          {subName && (
+            <div className="font-mono text-xs uppercase text-gray-400">
+              {subName}
+            </div>
+          )}
+          {subComponent && subComponent}
         </div>
 
         <div