chore: upgrade Next.js links and image components

celo-org · Sep 18, 2023 · 271cecc · 271cecc
1 parent 542108e
commit 271cecc
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 12 deletions.
diff --git a/src/components/buttons/BackToListButton.tsx b/src/components/buttons/BackToListButton.tsx
@@ -22,7 +22,7 @@ export const BackToListButton = ({ mode }: Props) => {
   const chainId = useChainId();
   const href = appendChainIdToLink(`/${mode}`, chainId);
   return (
-    <Link href={href}>
+    <Link href={href} legacyBehavior>
       <div className="flex flex-row items-center rounded-[16px] gap-2 cursor-pointer">
         <ThemedIcon name="arrow" alt="open" classes="rotate-[90deg]" height={24} width={24} />
         <span className="font-medium text-[14px] text-color-secondary">

diff --git a/src/components/icons/IndicatorIcon.tsx b/src/components/icons/IndicatorIcon.tsx
@@ -6,6 +6,15 @@ interface IndicatorIconProps {
 }
 export const IndicatorIcon = ({ classes }: IndicatorIconProps) => (
   <span className={`${classes} inline-flex`}>
-    <Image className={classes} src={IndicatorSVG} alt="Connection indicator" width={8} height={8} />
+    <Image
+      src={IndicatorSVG}
+      alt="Connection indicator"
+      width={8}
+      height={8}
+      style={{
+        maxWidth: '100%',
+        height: 'auto',
+      }}
+    />
   </span>
 );
diff --git a/src/components/icons/ThemedIcon.tsx b/src/components/icons/ThemedIcon.tsx
@@ -114,7 +114,10 @@ export const ThemedIcon = ({
           width={width}
           height={height}
           onClick={onClick}
-          layout={fill ? 'fill' : 'intrinsic'}
+          style={{
+            maxWidth: '100%',
+            height: 'auto',
+          }}
         />
       </span>
     </OpacityTransition>

diff --git a/src/components/icons/TokenIcon.tsx b/src/components/icons/TokenIcon.tsx
@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from "next/image";
 import { OpacityTransition } from 'src/components/transitions/OpacityTransition';
 import CeloIcon from 'src/images/icons/token-celo.svg';
 import stCeloIcon from 'src/images/icons/token-stcelo.svg';
@@ -25,7 +25,10 @@ export const TokenIcon = ({ token, quality = 100, width = 32, height = 32 }: Tok
         quality={quality}
         width={width}
         height={height}
-      />
+        style={{
+          maxWidth: "100%",
+          height: "auto"
+        }} />
     </span>
   </OpacityTransition>
 );
diff --git a/src/components/list/row.tsx b/src/components/list/row.tsx
@@ -31,7 +31,7 @@ export const Row = (props: PropsWithChildren<Props>) => {
           href={props.href}
           target={props.href?.startsWith('http') ? '_blank' : '_self'}
           rel="noreferrer"
-        >
+          legacyBehavior>
           <ThemedIcon name="arrow" alt="open" classes="rotate-[270deg] cursor-pointer" />
         </Link>
       </span>

diff --git a/src/features/swap/utils/toast.tsx b/src/features/swap/utils/toast.tsx
@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from "next/image";
 import { PropsWithChildren } from 'react';
 import { ThemedIcon } from 'src/components/icons/ThemedIcon';
 import { TokenIcon } from 'src/components/icons/TokenIcon';
@@ -21,7 +21,16 @@ export const showStakingToast = (amount: StCelo) =>
 
 export const showUnstakingToast = () =>
   showToast(
-    <Image src={Clock} alt="Clock" quality={100} width={32} height={32} />,
+    <Image
+      src={Clock}
+      alt="Clock"
+      quality={100}
+      width={32}
+      height={32}
+      style={{
+        maxWidth: "100%",
+        height: "auto"
+      }} />,
     <ToastContent>You started unstaking, funds available in 3 days.</ToastContent>
   );
 

diff --git a/src/layout/AppLayout/Header.tsx b/src/layout/AppLayout/Header.tsx
@@ -44,10 +44,12 @@ export const Header = ({ isConnectPage = true }: HeaderProps) => {
 
   return (
     <header className="px-base w-full h-[80px] flex items-center justify-between">
-      <Link href="/stake">
-        <a className={`flex items-center ${isConnectPage ? 'invisible' : ''}`}>
-          <ThemedIcon name="logo" alt="StakedCelo Home" quality={100} width={40} height={40} />
-        </a>
+      <Link
+        href="/stake"
+        className={`flex items-center ${isConnectPage ? 'invisible' : ''}`}>
+
+        <ThemedIcon name="logo" alt="StakedCelo Home" quality={100} width={40} height={40} />
+
       </Link>
       {isConnected && <WalletButton />}
       <ThemeToggle isConnectPage={isConnectPage} />