Feat/fix merchant logo size (#228)

* feat: adjust por pages to landscape ipad
DLC-link · Jan 21, 2025 · 732c777 · 732c777
1 parent 20b4a60
commit 732c777
Show file tree

Hide file tree

Showing 15 changed files with 72 additions and 57 deletions.
diff --git a/src/app/components/account/account.tsx b/src/app/components/account/account.tsx
@@ -63,7 +63,7 @@ export function Account(): React.JSX.Element {
   }
 
   return (
-    <HStack h={isMobile ? '40px' : '50px'}>
+    <HStack h={'50px'}>
       {isConnected ? (
         <AccountMenu
           address={getWalletInformation()?.address}
@@ -74,7 +74,7 @@ export function Account(): React.JSX.Element {
         <Button
           variant={'account'}
           onClick={() => onConnectWalletClick()}
-          h={isMobile ? '40px' : '50px'}
+          h={'50px'}
           w={isMobile ? '150px' : '275px'}
           fontSize={isMobile ? 'md' : 'lg'}
         >

diff --git a/src/app/components/account/components/account-menu.tsx b/src/app/components/account/components/account-menu.tsx
@@ -32,7 +32,7 @@ export function AccountMenu({
   if (!address) return false;
   return (
     <Menu variant={'account'}>
-      <MenuButton h={isMobile ? '40px' : '50px'} w={isMobile ? '120px' : '275px'}>
+      <MenuButton h={'50px'} w={isMobile ? '120px' : '275px'}>
         <HStack justifyContent={'space-evenly'}>
           {!isMobile ? (
             <>

diff --git a/src/app/components/header/components/mobile-header.tsx b/src/app/components/header/components/mobile-header.tsx
@@ -27,17 +27,15 @@ const MobileHeader: React.FC<MobileHeaderProps> = ({ isNetworkMenuOpen, setIsNet
             <MenuButton
               as={IconButton}
               aria-label={'Options'}
-              icon={<HamburgerIcon />}
+              icon={<HamburgerIcon boxSize={6} />}
               justifyContent={'center'}
-              p={'3px'}
-              h={'40px'}
-              w={'40px'}
+              h={'50px'}
+              w={'50px'}
               bg={'background.content.01'}
               border={'1.5px solid'}
               borderColor={'border.white.01'}
               borderRadius={'md'}
               color={'white'}
-              fontSize={'sm'}
               fontWeight={600}
             />
             <MenuList

diff --git a/src/app/components/header/header.tsx b/src/app/components/header/header.tsx
@@ -26,7 +26,7 @@ export function Header(): React.JSX.Element {
     navigate(route);
   };
 
-  const isMobile = useBreakpointValue({ base: true, md: false });
+  const isMobile = useBreakpointValue({ base: true, xl: false });
 
   useEffect(() => {
     if (networkType === NetworkType.EVM && isConnected && !ethereumNetwork) {

diff --git a/src/app/components/network/components/networks-menu.tsx b/src/app/components/network/components/networks-menu.tsx
@@ -57,13 +57,13 @@ export function NetworksMenu({
 
   return (
     <Menu variant={'networkChange'} isOpen={isMenuOpen}>
-      <MenuButton onClick={() => setIsMenuOpen(!isMenuOpen)} h={isMobile ? '40px' : '50px'}>
+      <MenuButton onClick={() => setIsMenuOpen(!isMenuOpen)} h={'50px'}>
         {isMobile ? (
           <Image
             src={getNetworkLogo(ethereumNetwork?.id.toString() as EthereumNetworkID)}
             alt={'Selected network logo'}
-            w={'30px'}
-            ml={'4px'}
+            w={'35px'}
+            ml={'7px'}
           />
         ) : (
           //TODO: what to display in case of not connected?

diff --git a/src/app/components/network/network.tsx b/src/app/components/network/network.tsx
@@ -10,7 +10,7 @@ interface NetworkBoxProps {
 export function NetworkBox({ isMenuOpen, setIsMenuOpen }: NetworkBoxProps): React.JSX.Element {
   const isMobile = useBreakpointValue({ base: true, md: false });
   return (
-    <HStack w={isMobile ? '40px' : '175px'}>
+    <HStack w={isMobile ? '50px' : '175px'} h={isMobile ? '50px' : 'auto'}>
       <NetworksMenu isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
     </HStack>
   );

diff --git a/src/app/components/proof-of-reserve/components/merchant-details/merchant-details.tsx b/src/app/components/proof-of-reserve/components/merchant-details/merchant-details.tsx
@@ -32,6 +32,7 @@ export function MerchantDetails(): React.JSX.Element {
   const selectedMerchant = proofOfReserve?.[1].find(item => item.merchant.name === name);
   const mintBurnEvents = merchantMintBurnEvents?.find(item => item.name === name)?.mintBurnEvents;
   const isMobile = useBreakpointValue({ base: true, md: false });
+  const imageWidth = useBreakpointValue({ base: '150px', xl: '200px' });
 
   if (!name) return <Text>Error: No merchant name provided</Text>;
 
@@ -69,12 +70,8 @@ export function MerchantDetails(): React.JSX.Element {
           direction={isMobile ? 'column' : 'row'}
           gap={isMobile ? '20px' : '0px'}
         >
-          <Image
-            src={selectedMerchant?.merchant.logo}
-            alt={'Merchant logo'}
-            width={isMobile ? '150px' : '100px'}
-            mx={isMobile ? '0px' : '30px'}
-          />
+          <Image src={selectedMerchant?.merchant.logo} alt={'Merchant logo'} width={imageWidth} />
+
           <Divider
             orientation={isMobile ? 'horizontal' : 'vertical'}
             px={isMobile ? '0px' : '10px'}

diff --git a/.../components/proof-of-reserve/components/merchant-table/components/merchant-table-item.tsx b/.../components/proof-of-reserve/components/merchant-table/components/merchant-table-item.tsx
@@ -25,7 +25,7 @@ export function MerchantTableItem({
 }: MerchantTableItemProps): React.ReactElement {
   const navigate = useNavigate();
 
-  const isMobile = useBreakpointValue({ base: true, md: false });
+  const isMobile = useBreakpointValue({ base: true, xl: false });
 
   return (
     <VStack w={'100%'} gap={isMobile ? '20px' : '10px'}>
@@ -37,16 +37,25 @@ export function MerchantTableItem({
         direction={isMobile ? 'column' : 'row'}
         gap={isMobile ? '10px' : '0px'}
       >
-        <HStack>
-          <HStack w={isMobile ? 'auto' : 'auto'}>
-            <Image src={merchant.logo} alt={merchant.name} width={'150px'} />
+        <HStack w={'100%'}>
+          <HStack w={'auto'} justifyContent={'flex-start'}>
+            <Image
+              src={merchant.logo}
+              alt={merchant.name}
+              width={useBreakpointValue({
+                base: '120px',
+                md: '100px',
+              })}
+              maxWidth={'150px'}
+              minWidth={'120px'}
+            />
           </HStack>
-          <HStack w={'140px'} h={'35px'} alignItems={'center'}>
+          <HStack w={'100px'} h={'35px'} alignItems={'center'}>
             <Image src={'/images/logos/ibtc-logo.svg'} alt={'iBTC Logo'} boxSize={'25px'} />
-            <Skeleton isLoaded={iBTCAmount !== undefined} h={'auto'} w={'150px'}>
+            <Skeleton isLoaded={iBTCAmount !== undefined} h={'auto'} w={'50px'}>
               <Text
                 color={'white'}
-                fontSize={'xl'}
+                fontSize={'lg'}
                 fontWeight={800}
                 h={'35px'}
                 display={'flex'}

diff --git a/src/app/components/proof-of-reserve/components/merchant-table/merchant-details-table.tsx b/src/app/components/proof-of-reserve/components/merchant-table/merchant-details-table.tsx
@@ -11,11 +11,11 @@ interface MerchantDetailsTableProps {
 }
 
 export function MerchantDetailsTable({ items }: MerchantDetailsTableProps): React.JSX.Element {
-  const dynamicHeight = items ? items.length * 59 + 20 : 20;
+  const dynamicHeight = items ? items.length * 75 + 20 : 20;
   const isMobile = useBreakpointValue({ base: true, md: false });
 
   return (
-    <GenericTableLayout height={`${dynamicHeight}px`} isMobile={isMobile}>
+    <GenericTableLayout height={`${dynamicHeight}px`} isMobile={isMobile} isMerchant={true}>
       <GenericTableHeader>
         {isMobile ? (
           <>

diff --git a/src/app/components/proof-of-reserve/components/merchant-table/merchant-table.tsx b/src/app/components/proof-of-reserve/components/merchant-table/merchant-table.tsx
@@ -1,4 +1,4 @@
-import { useBreakpointValue } from '@chakra-ui/react';
+import { VStack, useBreakpointValue } from '@chakra-ui/react';
 import { GenericTableBody } from '@components/generic-table/components/generic-table-body';
 import { GenericTableHeader } from '@components/generic-table/components/generic-table-header';
 import { GenericTableHeaderText } from '@components/generic-table/components/generic-table-header-text';
@@ -11,26 +11,34 @@ interface MerchantTableProps {
 }
 
 export function MerchantTable({ items }: MerchantTableProps): React.JSX.Element {
+  const isMobile = useBreakpointValue({ base: true, xl: false });
   const dynamicHeight = items ? items.length * 75 + 20 : 20;
-  const isMobile = useBreakpointValue({ base: true, md: false });
-  return (
-    <GenericTableLayout
-      height={isMobile ? 'auto' : `${dynamicHeight}px`}
-      width={isMobile ? '100%' : '30%'}
-      padding={isMobile ? '10px' : '15px'}
-      isMobile={isMobile}
-      isMerchant={true}
-    >
-      <GenericTableHeader>
-        <GenericTableHeaderText w={'50%'}>Merchant</GenericTableHeaderText>
-        <GenericTableHeaderText w={'100%'}>iBTC Minted</GenericTableHeaderText>
-      </GenericTableHeader>
 
-      <GenericTableBody>
-        {items
-          ?.sort((a, b) => b.iBTCAmount - a.iBTCAmount)
-          .map(item => <MerchantTableItem key={item.merchant.name} {...item} />)}
-      </GenericTableBody>
-    </GenericTableLayout>
+  const widthValue = useBreakpointValue({
+    base: '100%',
+    md: '50%',
+    lg: '40%',
+    xl: 'auto',
+  });
+  return (
+    <VStack w={widthValue}>
+      <GenericTableLayout
+        height={isMobile ? 'auto' : `${dynamicHeight}px`}
+        padding={isMobile ? '10px' : '15px'}
+        isMobile={isMobile}
+        isMerchant={true}
+        width={widthValue}
+      >
+        <GenericTableHeader>
+          <GenericTableHeaderText w={'50%'}>Merchant</GenericTableHeaderText>
+          <GenericTableHeaderText w={'100%'}>iBTC Minted</GenericTableHeaderText>
+        </GenericTableHeader>
+        <GenericTableBody>
+          {items
+            ?.sort((a, b) => b.iBTCAmount - a.iBTCAmount)
+            .map(item => <MerchantTableItem key={item.merchant.name} {...item} />)}
+        </GenericTableBody>
+      </GenericTableLayout>
+    </VStack>
   );
 }
diff --git a/...ents/proof-of-reserve/components/token-stats-board/components/token-stats-board-token.tsx b/...ents/proof-of-reserve/components/token-stats-board/components/token-stats-board-token.tsx
@@ -1,4 +1,4 @@
-import { HStack, Image, Skeleton, Text, VStack } from '@chakra-ui/react';
+import { HStack, Image, Skeleton, Text, VStack, useBreakpointValue } from '@chakra-ui/react';
 import { Token } from '@models/token';
 
 interface TokenStatsBoardTokenProps {
@@ -20,6 +20,8 @@ export function TokenStatsBoardToken({
       break;
   }
 
+  const amountFontSize = useBreakpointValue({ base: '2xl', md: 'xl', lg: 'xl', xl: '2xl' });
+
   return (
     <VStack w={'100%'} h={'100%'} alignItems={'start'}>
       <Text color={'white.01'} fontWeight={600} fontSize={'lg'}>
@@ -28,7 +30,7 @@ export function TokenStatsBoardToken({
       <Skeleton isLoaded={totalSupply !== undefined} h={'auto'} w={'100%'}>
         <HStack>
           <Image src={token.logo} alt={token.logoAlt} boxSize={'25px'} />
-          <Text color={'white.01'} fontWeight={200} fontSize={'2xl'}>
+          <Text color={'white.01'} fontWeight={200} fontSize={amountFontSize}>
             {Number(totalSupply).toFixed(4)}
           </Text>
         </HStack>

diff --git a/...onents/proof-of-reserve/components/token-stats-board/components/token-stats-board-tvl.tsx b/...onents/proof-of-reserve/components/token-stats-board/components/token-stats-board-tvl.tsx
@@ -1,4 +1,4 @@
-import { Skeleton, Text, VStack } from '@chakra-ui/react';
+import { Skeleton, Text, VStack, useBreakpointValue } from '@chakra-ui/react';
 
 interface TokenStatsBoardTVLProps {
   totalSupply: number | undefined;
@@ -9,13 +9,14 @@ export function TokenStatsBoardTVL({
   totalSupply,
   bitcoinPrice,
 }: TokenStatsBoardTVLProps): React.JSX.Element {
+  const amountFontSize = useBreakpointValue({ base: '2xl', md: 'xl', lg: 'xl', xl: '2xl' });
   return (
     <VStack w={'100%'} alignItems={'flex-start'}>
       <Text color={'white.01'} fontSize={'lg'} fontWeight={'600'} textAlign={'left'}>
         TVL
       </Text>
       <Skeleton w={'100%'} isLoaded={totalSupply !== undefined}>
-        <Text fontSize={'2xl'} fontWeight={600} color={'white.01'}>
+        <Text fontSize={amountFontSize} fontWeight={600} color={'white.01'}>
           $
           {totalSupply && bitcoinPrice
             ? `${Math.floor(totalSupply * bitcoinPrice).toLocaleString('en-US')} USD`

diff --git a/src/app/components/proof-of-reserve/proof-of-reserve.tsx b/src/app/components/proof-of-reserve/proof-of-reserve.tsx
@@ -62,7 +62,7 @@ export function ProofOfReserve(): React.JSX.Element {
       </TokenStatsBoardLayout>
       <Stack
         w={'100%'}
-        alignItems={'flex-start'}
+        alignItems={'stretch'}
         direction={isMobile ? 'column' : 'row'}
         gap={isMobile ? '40px' : '20px'}
       >

diff --git a/src/app/components/protocol-history-table/components/protocol-history-table-item.tsx b/src/app/components/protocol-history-table/components/protocol-history-table-item.tsx
@@ -22,7 +22,7 @@ export function ProtocolHistoryTableItem(
 
   const ethereumNetwork = findEthereumNetworkByName(eventChain);
 
-  const isMobile = useBreakpointValue({ base: true, md: false });
+  const isMobile = useBreakpointValue({ base: true, lg: false });
   return (
     <HStack
       p={'10px'}

diff --git a/src/app/components/protocol-history-table/protocol-history-table.tsx b/src/app/components/protocol-history-table/protocol-history-table.tsx
@@ -14,7 +14,7 @@ interface ProtocolHistoryTableProps {
 export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): React.JSX.Element {
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 10;
-  const isMobile = useBreakpointValue({ base: true, md: false });
+  const isMobile = useBreakpointValue({ base: true, lg: false });
 
   const totalPages = Math.ceil((items?.length || 0) / itemsPerPage);
 
@@ -29,8 +29,8 @@ export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): Reac
   };
 
   return (
-    <VStack w={'70%'} spacing={4}>
-      <GenericTableLayout height={'680px'} width={'100%'} isMobile={isMobile}>
+    <VStack w={'100%'} spacing={4}>
+      <GenericTableLayout height={'680px'} width={'100%'} isMobile={isMobile} isMerchant={true}>
         <GenericTableHeader>
           {isMobile ? (
             <>