fix: match icon skeletons to squared icons

liftedinit · Dec 29, 2024 · a955415 · a955415
1 parent 1fdeb60
commit a955415
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 22 deletions.
diff --git a/components/bank/components/historyBox.tsx b/components/bank/components/historyBox.tsx
@@ -165,14 +165,14 @@ export function HistoryBox({
                       className="flex items-center justify-between p-4 bg-[#FFFFFFCC] dark:bg-[#FFFFFF0F] rounded-[16px]"
                     >
                       <div className="flex items-center space-x-3">
-                        <div className="skeleton w-8 h-8 rounded-full"></div>
-                        <div className="skeleton w-10 h-12 rounded-full"></div>
+                        <div className="skeleton w-9 h-9 rounded-full"></div>
+                        <div className="skeleton w-11 h-11 rounded-md"></div>
                         <div>
                           <div className="flex flex-row items-center gap-2">
-                            <div className="skeleton h-4 w-16"></div>
-                            <div className="skeleton h-4 w-12"></div>
+                            <div className="skeleton h-6 w-16"></div>
+                            <div className="skeleton h-6 w-12"></div>
                           </div>
-                          <div className="skeleton h-3 w-32 mt-1"></div>
+                          <div className="skeleton h-5 w-32 mt-1"></div>
                         </div>
                       </div>
                       <div className="skeleton h-4 w-24 sm:block hidden"></div>
@@ -214,12 +214,12 @@ export function HistoryBox({
                     <div className="w-8 h-8 rounded-full overflow-hidden flex items-center justify-center">
                       {getTransactionIcon(tx, address)}
                     </div>
-                    <div className="w-10 h-10  overflow-hidden  flex items-center justify-center">
-                      {tx.data.amount.map((amt, index) => {
-                        const metadata = metadatas?.metadatas.find(m => m.base === amt.denom);
-                        return <DenomImage key={index} denom={metadata} />;
-                      })}
-                    </div>
+
+                    {tx.data.amount.map((amt, index) => {
+                      const metadata = metadatas?.metadatas.find(m => m.base === amt.denom);
+                      return <DenomImage key={index} denom={metadata} />;
+                    })}
+
                     <div>
                       <div className="flex flex-row items-center gap-2">
                         <p className="font-semibold text-[#161616] dark:text-white">

diff --git a/components/bank/components/tokenList.tsx b/components/bank/components/tokenList.tsx
@@ -65,7 +65,7 @@ export function TokenList(props: Readonly<TokenListProps>) {
                 className="flex flex-row justify-between gap-4 items-center p-4 bg-[#FFFFFFCC] dark:bg-[#FFFFFF0F] rounded-[16px]"
               >
                 <div className="flex flex-row gap-4 items-center justify-start">
-                  <div className="skeleton w-10 h-10 rounded-full" />
+                  <div className="skeleton w-11 h-11 rounded-md" />
                   <div className="space-y-1">
                     <div className="skeleton h-4 w-20" />
                     <div className="skeleton h-3 w-14" />

diff --git a/components/factory/components/DenomImage.tsx b/components/factory/components/DenomImage.tsx
@@ -85,7 +85,7 @@ export const DenomImage = ({ denom }: { denom: any }) => {
   if (isLoading) {
     return (
       <div
-        className="skeleton w-8 h-8 rounded-md animate-pulse bg-gray-300"
+        className="skeleton w-11 h-11 rounded-md animate-pulse bg-gray-300"
         aria-label="denom image skeleton"
       ></div>
     );
@@ -94,13 +94,13 @@ export const DenomImage = ({ denom }: { denom: any }) => {
   // Check for MFX token first
   if (denom?.base?.includes('umfx')) {
     return (
-      <div className="w-full h-full p-2 rounded-md dark:bg-[#ffffff0f] bg-[#0000000A]">
+      <div className="w-11 h-11 p-2 rounded-md dark:bg-[#ffffff0f] bg-[#0000000A]">
         <Image
-          width={0}
-          height={0}
+          width={44}
+          height={44}
           src="/logo.svg"
           alt="MFX Token Icon"
-          className="w-[28px] h-[28px] -mt-[2px]"
+          className="w-full h-full -mt-[1px]"
         />
       </div>
     );
@@ -113,14 +113,14 @@ export const DenomImage = ({ denom }: { denom: any }) => {
 
   // For all other cases, use the denom.uri
   return (
-    <div className="w-auto h-auto p-2 rounded-md dark:bg-[#ffffff0f] bg-[#0000000A]">
+    <div className="w-11 h-11 p-2 rounded-md dark:bg-[#ffffff0f] bg-[#0000000A]">
       <Image
-        width={32}
-        height={32}
+        width={44}
+        height={44}
         src={denom?.uri}
         alt="Token Icon"
         onError={() => setImageError(true)}
-        className="rounded-md w-[32px] h-[32px]"
+        className="rounded-md w-full h-full"
       />
     </div>
   );

diff --git a/components/groups/components/myGroups.tsx b/components/groups/components/myGroups.tsx
@@ -345,7 +345,7 @@ export function YourGroups({
                           <tr key={index} data-testid="skeleton-row">
                             <td className="bg-secondary rounded-l-[12px] ">
                               <div className="flex items-center space-x-3">
-                                <div className="skeleton w-10 h-8 rounded-full shrink-0"></div>
+                                <div className="skeleton w-11 h-11 rounded-md shrink-0"></div>
                                 <div className="skeleton h-3 w-24"></div>
                               </div>
                             </td>