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.
No-Cash-7970 · Dec 4, 2023 · 41d39d9 · 41d39d9
1 parent 7b39207
commit 41d39d9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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()}