Mobile UI: AD text and alerts (#3074)

* update text size for text ad and alerts on mobile

* more screenshot updates

* fix text ad layout on mobile

* fixes after review

* fix tests

toolkit/chakra/alert.tsx

@@ -30,6 +30,7 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       startElement,
       endElement,
       loading,
+      size,
       showIcon = false,
       descriptionProps,
       ...rest
@@ -62,7 +63,7 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
 
     return (
       <Skeleton loading={ loading } asChild>
-        <ChakraAlert.Root ref={ ref } { ...rest }>
+        <ChakraAlert.Root ref={ ref } size={ size ?? { base: 'sm', lg: 'md' } } { ...rest }>
           { iconElement }
           { children ? (
             <ChakraAlert.Content>
@@ -76,7 +77,8 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
           { closable && (
             <CloseButton
               pos="relative"
-              m={ 0.5 }
+              // default size for mobile is "sm", and for desktop is "md"
+              m={{ base: size === 'md' ? 0.5 : 0, lg: size === 'sm' ? 0 : 0.5 }}
               alignSelf="flex-start"
               onClick={ handleClose }
             />

toolkit/theme/recipes/alert.recipe.ts

@@ -71,6 +71,21 @@ export const recipe = defineSlotRecipe({
     },
 
     size: {
+      sm: {
+        root: {
+          gap: '2',
+          px: '2',
+          py: '2',
+          textStyle: 'xs',
+        },
+        indicator: {
+          boxSize: '5',
+          my: 0,
+        },
+        content: {
+          minH: '5',
+        },
+      },
       md: {
         root: {
           gap: '2',

ui/address/contract/alerts/ContractDetailsAlertVerificationSource.tsx

@@ -16,7 +16,6 @@ const ContractDetailsAlertVerificationSource = ({ data }: Props) => {
         <span>This contract has been { data.is_partially_verified ? 'partially ' : '' }verified using </span>
         <Link
           href="https://docs.blockscout.com/devs/verification/ethereum-bytecode-database-microservice"
-          textStyle="md"
           external
         >
           Blockscout Bytecode Database

ui/address/contract/alerts/ContractDetailsAlerts.tsx

@@ -48,7 +48,7 @@ const ContractDetailsAlerts = ({ data, isLoading, addressData, channel }: Props)
         </Box>
       ) }
       { data?.is_verified && (
-        <Alert status="success" loading={ isLoading } descriptionProps={{ alignItems: 'center', flexWrap: 'wrap', rowGap: 3, columnGap: 5 }}>
+        <Alert status="success" loading={ isLoading } descriptionProps={{ alignItems: 'center', flexWrap: 'wrap', rowGap: 2, columnGap: 5 }}>
           <span>Contract Source Code Verified ({ data.is_partially_verified ? 'Partial' : 'Exact' } Match)</span>
           {
             data.is_partially_verified ? (

ui/address/contract/methods/ContractMethodsCustom.tsx

@@ -76,7 +76,7 @@ const ContractMethodsCustom = ({ isLoading: isLoadingProp }: Props) => {
     <Flex flexDir="column" rowGap={ 6 }>
       { currentInfo ? (
         <>
-          <Flex flexDir="column" rowGap={ 2 }>
+          <Flex flexDir="column" rowGap={ 1 }>
             <ConnectWalletAlert isLoading={ isLoading }/>
             <ContractCustomAbiAlert isLoading={ isLoading }/>
           </Flex>

ui/optimismSuperchain/address/OpSuperchainAddressTokenTransfers.pw.tsx

@@ -57,7 +57,7 @@ test.describe('local transfers', () => {
     test.use({ viewport: pwConfig.viewport.mobile });
 
     test('base view', async() => {
-      await expect(component).toHaveScreenshot();
+      await expect(component).toHaveScreenshot({ maxDiffPixels: 10 });
     });
   });
 });

ui/pages/InteropMessages.pw.tsx

@@ -37,6 +37,6 @@ test.describe('mobile', () => {
     await mockApiResponse('general:optimistic_l2_interop_messages', MESSAGES_RESPONSE);
     await mockApiResponse('general:optimistic_l2_interop_messages_count', 4000000);
     const component = await render(<InteropMessages/>);
-    await expect(component).toHaveScreenshot();
+    await expect(component).toHaveScreenshot({ maxDiffPixels: 20 });
   });
 });