From 41d39d98e1b46cd3fc9a8d028bb2626e2f1d1631 Mon Sep 17 00:00:00 2001
From: No-Cash-7970 <no-cash-7970@outlook.com>
Date: Mon, 4 Dec 2023 12:51:11 -0800
Subject: [PATCH] refactor(app): make the sizes of images based on font size

This allows the images to scale better if the text is enlarged. All the images are SVG so they can
scale to larger sizes with becoming pixelated.
---
 src/app/[lang]/[...notFound]/page.tsx         |  2 +-
 .../NavBar/Settings/ConnectWallet.tsx         | 30 +++++++++--------
 .../[lang]/txn/sign/components/SignTxn.tsx    | 33 +++++++++++--------
 3 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/app/[lang]/[...notFound]/page.tsx b/src/app/[lang]/[...notFound]/page.tsx
index 24020b2..9932b6e 100644
--- a/src/app/[lang]/[...notFound]/page.tsx
+++ b/src/app/[lang]/[...notFound]/page.tsx
@@ -35,7 +35,7 @@ export default function NotFound({ params: { lang } }: {
           {t('page_not_found.quack')}
         </div>
         <div className='h-40 w-40 sm:h-72 sm:w-72 relative not-prose mx-auto mt-10 sm:mt-12'>
-          <Image src='/duck.svg' alt={t('page_not_found.duck_img_alt')} fill={true} />
+          <Image src='/duck.svg' alt={t('page_not_found.duck_img_alt')} fill />
         </div>
       </div>
       <div className='text-4xl sm:text-5xl text-center font-mono mt-[1em]'>
diff --git a/src/app/[lang]/components/NavBar/Settings/ConnectWallet.tsx b/src/app/[lang]/components/NavBar/Settings/ConnectWallet.tsx
index c5a2889..8661774 100644
--- a/src/app/[lang]/components/NavBar/Settings/ConnectWallet.tsx
+++ b/src/app/[lang]/components/NavBar/Settings/ConnectWallet.tsx
@@ -41,12 +41,14 @@ export default function ConnectWallet({ t }: { t: TFunction }) {
                 providers?.map(provider => (
                   <DropdownMenu.Item asChild key={provider.metadata.id}>
                     <li onClick={provider.connect}>
-                      <span className=' auto-cols-max'>
-                        <Image src={provider.metadata.icon}
-                          alt={t('wallet.provider_icon_alt', {provider: provider.metadata.name})}
-                          width={32}
-                          height={32}
-                        />
+                      <span className='auto-cols-max'>
+                        <span className='relative h-8 w-8'>
+                          <Image src={provider.metadata.icon}
+                            alt={t('wallet.provider_icon_alt', {provider: provider.metadata.name})}
+                            fill
+                            aria-hidden
+                          />
+                        </span>
                         <div className='leading-tight'>
                           <div>{t('wallet.providers.' + provider.metadata.id)}</div>
                           <small className='italic opacity-70'>
@@ -67,13 +69,15 @@ export default function ConnectWallet({ t }: { t: TFunction }) {
     {!!activeAccount && walletClient &&
       <div className='bg-base-200 rounded-btn p-4'>
         <div className='not-prose truncate align-middle mb-3 px-1'>
-          <Image src={walletClient.metadata.icon}
-            alt={t('wallet.provider_icon_alt', {provider: walletClient.metadata.name})}
-            width={20}
-            height={20}
-            className='inline-block me-2'
-          />
-          <span>{t('wallet.is_connected', {address: activeAccount.address})}</span>
+          <span className='inline-block me-2 relative h-6 w-6 align-middle'>
+            <Image src={walletClient.metadata.icon}
+              alt={t('wallet.provider_icon_alt', {provider: walletClient.metadata.name})}
+              fill
+            />
+          </span>
+          <span className='align-middle'>
+            {t('wallet.is_connected', {address: activeAccount.address})}
+          </span>
         </div>
         <button type='button'
           className='btn btn-sm btn-secondary btn-block'
diff --git a/src/app/[lang]/txn/sign/components/SignTxn.tsx b/src/app/[lang]/txn/sign/components/SignTxn.tsx
index 99f8996..6b0070f 100644
--- a/src/app/[lang]/txn/sign/components/SignTxn.tsx
+++ b/src/app/[lang]/txn/sign/components/SignTxn.tsx
@@ -132,12 +132,13 @@ export default function SignTxn({ lng }: Props) {
                   <div key={provider.metadata.id} className={
                     'alert gap-1 sm:gap-4 content-evenly shadow-md border-base-300 bg-base-100'
                   }>
-                    <Image src={provider.metadata.icon}
-                      alt={t('wallet.provider_icon_alt', {provider: provider.metadata.name})}
-                      width={80}
-                      height={80}
-                      className={'not-prose h-16 w-auto sm:h-24'}
-                    />
+                    <span className={'not-prose relative h-16 w-16 sm:h-24 sm:w-24'}>
+                      <Image src={provider.metadata.icon}
+                        alt={t('wallet.provider_icon_alt', {provider: provider.metadata.name})}
+                        fill
+                        aria-hidden
+                      />
+                    </span>
                     {/* Wallet provider info + button */}
                     <div className='w-full'>
                       <div>
@@ -187,14 +188,18 @@ export default function SignTxn({ lng }: Props) {
         </button>
         <div className='not-prose text-center mt-3'>
           <div className='truncate align-middle px-2'>
-            {walletClient && <Image
-              src={walletClient.metadata.icon}
-              alt={t('wallet.provider_icon_alt', {provider: walletClient.metadata.name})}
-              width={24}
-              height={24}
-              className='inline-block me-2'
-            />}
-            <span>{t('wallet.is_connected', {address: activeAccount.address})}</span>
+            {walletClient &&
+              <span className='relative h-6 w-6 inline-block me-2 align-middle'>
+                <Image
+                  src={walletClient.metadata.icon}
+                  alt={t('wallet.provider_icon_alt', {provider: walletClient.metadata.name})}
+                  fill
+                />
+              </span>
+            }
+            <span className='align-middle'>
+              {t('wallet.is_connected', {address: activeAccount.address})}
+            </span>
           </div>
           <button className='btn btn-sm btn-link text-secondary'
             onClick={() => getActiveProvider(providers)?.disconnect()}