Fix donation buttons font-size (#4221)

* fix donation buttons font-size * Fix font-size * Fix font-size * Fix breakpoints * Fix font-size * Fix button on small heights * add breakpoint to buttons
MyCryptoHQ · Feb 3, 2022 · ddabdd2 · ddabdd2
1 parent 9764b59
commit ddabdd2
Showing 1 changed file with 34 additions and 19 deletions.
diff --git a/src/features/Layout/Navigation/components/SupportUsTray.tsx b/src/features/Layout/Navigation/components/SupportUsTray.tsx
@@ -1,17 +1,32 @@
 import { useCallback, useState } from 'react';
 
 import CopyToClipboard from 'react-copy-to-clipboard';
+import styled from 'styled-components';
 
 import { Box, Icon, Text } from '@components';
 import { donationAddressMap } from '@config';
 import { useAnalytics } from '@services/Analytics';
-import { SPACING } from '@theme';
+import { SPACING, theme } from '@theme';
 import { translateRaw } from '@translations';
 import { TTrayItem } from '@types';
 import { useEffectOnce, useTimeoutFn } from '@vendor';
 
 import { TrayLink } from './TrayLink';
 
+const SBox = styled(Box)`
+  @media screen and (max-height: 700px) and (max-width: ${theme.breakpoints.sm}) {
+    flex-direction: column;
+  }
+`;
+
+const Button = styled(Box)`
+  @media screen and (max-height: 700px) and (max-width: ${theme.breakpoints.sm}) {
+    width: 90%;
+    height: 30px;
+    margin-top: 10px;
+  }
+`;
+
 export const SupportUsTray = ({ items }: { items: TTrayItem[] }) => {
   const [displayingMessage, setDisplayingMessage] = useState(false);
   const { track } = useAnalytics();
@@ -45,7 +60,7 @@ export const SupportUsTray = ({ items }: { items: TTrayItem[] }) => {
         >
           {translateRaw('NAVIGATION_DONATE')}
         </Text>
-        <Box
+        <SBox
           variant="rowAlign"
           justifyContent="space-between"
           width={{ _: '220px', sm: '100%' }}
@@ -58,7 +73,7 @@ export const SupportUsTray = ({ items }: { items: TTrayItem[] }) => {
               trackDonationClicked('Ethereum');
             }}
           >
-            <Box
+            <Button
               variant="rowCenter"
               width={{ _: '105px', sm: '10.5vh', xxl: '105px' }}
               height={{ _: '32px', sm: '3.2vh', xxl: '32px' }}
@@ -67,15 +82,15 @@ export const SupportUsTray = ({ items }: { items: TTrayItem[] }) => {
               borderRadius="3px"
               py={{ _: '10px', sm: '1vh', xxl: '10px' }}
             >
-              <Icon type="nav-ethereum" width={{ _: '10px', sm: '1vh', xxl: '10px' }} />
-              <Text
-                ml={{ _: '10xp', sm: '1vh', xxl: '10px' }}
-                mb={0}
-                fontSize={{ _: '16px', sm: '1.6vh', xxl: '16px' }}
-              >
+              <Icon
+                type="nav-ethereum"
+                width={{ _: '10px', sm: '1vh', xxl: '10px' }}
+                mr={{ _: '10px', sm: '1vh', xxl: '10px' }}
+              />
+              <Text mb={0} fontSize={['16px', null, '0.8rem']}>
                 {translateRaw('NAVIGATION_ETHEREUM')}
               </Text>
-            </Box>
+            </Button>
           </CopyToClipboard>
           <CopyToClipboard
             text={donationAddressMap.BTC}
@@ -84,7 +99,7 @@ export const SupportUsTray = ({ items }: { items: TTrayItem[] }) => {
               trackDonationClicked('Bitcoin');
             }}
           >
-            <Box
+            <Button
               variant="rowCenter"
               width={{ _: '105px', sm: '10.5vh', xxl: '105px' }}
               height={{ _: '32px', sm: '3.2vh', xxl: '32px' }}
@@ -93,17 +108,17 @@ export const SupportUsTray = ({ items }: { items: TTrayItem[] }) => {
               borderRadius="3px"
               py={{ _: '10px', sm: '1vh', xxl: '10px' }}
             >
-              <Icon type="nav-bitcoin" width={{ _: '10px', sm: '1vh', xxl: '10px' }} />
-              <Text
-                ml={{ _: '10xp', sm: '1vh', xxl: '10px' }}
-                mb={0}
-                fontSize={{ _: '16px', sm: '1.6vh', xxl: '16px' }}
-              >
+              <Icon
+                type="nav-bitcoin"
+                width={{ _: '10px', sm: '1vh', xxl: '10px' }}
+                mr={{ _: '10px', sm: '1vh', xxl: '10px' }}
+              />
+              <Text mb={0} fontSize={['16px', null, '0.8rem']}>
                 {translateRaw('NAVIGATION_BITCOIN')}
               </Text>
-            </Box>
+            </Button>
           </CopyToClipboard>
-        </Box>
+        </SBox>
         <Box minHeight={{ _: '25px', sm: '2.5vh', xxl: '25px' }} pb={SPACING.SM} variant="rowAlign">
           {displayingMessage && (
             <>