fix: handle light mode image in About step (#5601)

src/pages/About/constants.ts

@@ -29,11 +29,13 @@ export const STEPS = [
   {
     title: 'Connect a wallet',
     description: 'Connect your preferred crypto wallet to the Uniswap Interface.',
-    imgSrc: walletsSrc,
+    lightImgSrc: walletsSrc,
+    darkImgSrc: walletsSrc,
   },
   {
     title: 'Swap!',
     description: 'Trade crypto and NFTs through Uniswap’s platform',
-    imgSrc: swapSrc,
+    lightImgSrc: swapSrc,
+    darkImgSrc: swapSrc,
   },
 ]

src/pages/About/index.tsx

@@ -131,6 +131,8 @@ export default function About() {
   }, [])
 
   const [selectedStepIndex, setSelectedStepIndex] = useState(0)
+  const selectedStep = STEPS[selectedStepIndex]
+  const thumbnailImgSrc = isDarkMode ? selectedStep?.darkImgSrc : selectedStep?.lightImgSrc
 
   return (
     <Page isDarkMode={isDarkMode} titleHeight={titleHeight}>
@@ -166,7 +168,7 @@ export default function About() {
           <SubTitle isDarkMode={isDarkMode}>Get Started</SubTitle>
           <Panels>
             <ThumbnailContainer>
-              <Thumbnail alt="Thumbnail" src={STEPS[selectedStepIndex]?.imgSrc} />
+              <Thumbnail alt="Thumbnail" src={thumbnailImgSrc} />
             </ThumbnailContainer>
             <StepList>
               {STEPS.map((step, index) => (