adapt rewards dashboard for mobiles

ui/pages/RewardsDashboard.tsx

@@ -65,17 +65,14 @@ const RewardsDashboard = () => {
       <PageTitle
         title="Dashboard"
         secondRow={ (
-          <>
+          <span>
             The Blockscout Merits Program is just getting started! Learn more about the details,
-            features, and future plans in our <LinkExternal ml={ 1 } href="">blog post</LinkExternal>.
-          </>
+            features, and future plans in our <LinkExternal href="">blog post</LinkExternal>.
+          </span>
         ) }
       />
       <Flex flexDirection="column" alignItems="flex-start" w="full" gap={ 6 }>
-        <Button variant="outline" isDisabled>
-          Pre-staking dashboard
-        </Button>
-        <Flex gap={ 6 }>
+        <Flex gap={ 6 } flexDirection={{ base: 'column', md: 'row' }}>
           <RewardsDashboardCard
             description="Claim your daily merits and any merits received from referrals."
             direction="column-reverse"
@@ -136,7 +133,13 @@ const RewardsDashboard = () => {
           ) }
           direction="row"
         >
-          <Flex flex={ 1 } gap={ 6 } px={ 6 }>
+          <Flex
+            flex={ 1 }
+            gap={{ base: 2, md: 6 }}
+            px={{ base: 4, md: 6 }}
+            py={{ base: 4, md: 0 }}
+            flexDirection={{ base: 'column', md: 'row' }}
+          >
             <CopyField
               label="Referral link"
               value={ `https://eth.blockscout.com?ref=${ referralsQuery.data?.code }` }
@@ -149,7 +152,7 @@ const RewardsDashboard = () => {
             />
           </Flex>
         </RewardsDashboardCard>
-        <Flex gap={ 6 }>
+        <Flex gap={ 6 } flexDirection={{ base: 'column', md: 'row' }}>
           <RewardsDashboardCard
             title="Activity"
             description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
@@ -175,15 +178,19 @@ const RewardsDashboard = () => {
           direction="row"
           availableSoon
         >
-          <Flex flex={ 1 } gap={ 6 } px={ 6 } justifyContent="space-between">
+          <Flex
+            flex={ 1 }
+            px={{ base: 4, md: 6 }}
+            py={{ base: 4, md: 0 }}
+            justifyContent="space-between"
+          >
             { Array(5).fill(null).map((_, index) => (
               <Image
                 key={ index }
                 src={ `/static/badges/badge_${ index + 1 }.svg` }
                 alt={ `Badge ${ index + 1 }` }
-                w="100px"
-                h="100px"
-                fallback={ <Skeleton w="100px" h="100px"/> }
+                boxSize={{ base: '50px', md: '100px' }}
+                fallback={ <Skeleton boxSize={{ base: '50px', md: '100px' }}/> }
               />
             )) }
           </Flex>

ui/rewards/RewardsDashboardCard.tsx

@@ -20,19 +20,25 @@ const RewardsDashboardCard = ({
 }: Props) => {
   return (
     <Flex
-      flexDirection={ direction }
+      flexDirection={{ base: direction === 'row' ? 'column' : direction, md: direction }}
       justifyContent={ direction === 'column-reverse' ? 'flex-end' : 'flex-start' }
-      p={ 2 }
+      p={{ base: 1.5, md: 2 }}
       border="1px solid"
       borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }
       borderRadius="lg"
-      gap={ direction === 'row' ? 10 : 1 }
+      gap={{ base: 1, md: direction === 'row' ? 10 : 1 }}
       w={ direction === 'row' ? 'full' : 'auto' }
+      flex={ direction !== 'row' ? 1 : '0 1 auto' }
     >
-      <Flex flexDirection="column" gap={ 2 } p={ 3 } w={ direction === 'row' ? '340px' : 'full' }>
+      <Flex
+        flexDirection="column"
+        gap={ 2 }
+        p={{ base: 1.5, md: 3 }}
+        w={{ base: 'full', md: direction === 'row' ? '340px' : 'full' }}
+      >
         { title && (
           <Flex alignItems="center" gap={ 2 }>
-            <Text fontSize="lg" fontWeight="500">{ title }</Text>
+            <Text fontSize={{ base: 'md', md: 'lg' }} fontWeight="500">{ title }</Text>
             { availableSoon && <AvailableSoonLabel/> }
           </Flex>
         ) }
@@ -44,9 +50,9 @@ const RewardsDashboardCard = ({
       <Flex
         alignItems="center"
         justifyContent="space-around"
-        borderRadius="8px"
+        borderRadius={{ base: 'lg', md: '8px' }}
         backgroundColor={ useColorModeValue('gray.50', 'whiteAlpha.50') }
-        h="128px"
+        h={{ base: '80px', md: '128px' }}
         filter="auto"
         blur={ blurFilter ? '4px' : '0' }
         flex={ direction === 'row' ? 1 : '0 1 auto' }

ui/rewards/RewardsDashboardCardValue.tsx

@@ -31,11 +31,12 @@ const RewardsDashboardCard = ({ label, value, withIcon, hint }: Props) => {
           <IconSvg
             name="merits_colored"
             boxSize={ 12 }
-            mb={ -0.5 }
+            mt={ -2 }
+            mb={ -2.5 }
             filter="drop-shadow(0px 4px 3px rgba(21, 57, 103, 0.1))"
           />
         ) }
-        <Text fontSize="32px" fontWeight="500">
+        <Text fontSize={{ base: '24px', md: '32px' }} lineHeight={{ base: '24px', md: 1.5 }} fontWeight="500">
           { value }
         </Text>
       </Flex>