Merge pull request #11958 from ethereum/calloutbanner-style

Fix CalloutBanner imge sizing/layout bugs

Author: pettinarip

src/components/CalloutBanner.tsx

@@ -11,7 +11,6 @@ export type CalloutBannerProps = FlexProps & {
   children?: React.ReactNode
   image: ImageProps["src"]
   imageWidth?: number
-  maxImageWidth?: ImageProps["width"]
   titleKey: TranslationKey
   descriptionKey: TranslationKey
   alt: string
@@ -20,7 +19,6 @@ export type CalloutBannerProps = FlexProps & {
 const CalloutBanner = ({
   image,
   imageWidth,
-  maxImageWidth,
   titleKey,
   descriptionKey,
   alt,
@@ -44,11 +42,10 @@ const CalloutBanner = ({
             src={image}
             alt={alt}
             width={imageWidth}
-            maxW={{ base: "auto", md: maxImageWidth }}
             style={{
               objectFit: "contain",
             }}
-            alignSelf="center"
+            mx="auto"
             mt={-24}
             mb={{ base: 0, lg: -24 }}
           />

src/pages/get-eth.tsx

@@ -478,7 +478,7 @@ const GetEthPage = ({
         descriptionKey="page-get-eth:page-get-eth-use-your-eth-dapps"
         image={dapps}
         alt={t("page-index:page-index-sections-individuals-image-alt")}
-        maxImageWidth={600}
+        imageWidth={600}
       >
         <Box>
           <ButtonLink href="/dapps/">

src/pages/stablecoins.tsx

@@ -633,7 +633,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
             "page-stablecoins-stablecoins-dapp-callout-description"
           )}
           image={dogeComputerImg}
-          maxImageWidth={600}
+          imageWidth={600}
           alt={t("page-stablecoins-stablecoins-dapp-callout-image-alt")}
         >
           <Flex flexFlow="wrap" gap="1em">