From fedcd6c23fbe43e74666708539643be89ed6f7d9 Mon Sep 17 00:00:00 2001
From: vidvidvid <weetopol@gmail.com>
Date: Sat, 5 Feb 2022 23:55:47 +0100
Subject: [PATCH] style: increase font size and icon of XP and seed on mobile

---
 .../components/MegaMenu/PlayerStatsBar.tsx    |  2 +-
 .../components/MegaMenu/XPSeedsBalance.tsx    | 29 +++++++++++++++----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/web/components/MegaMenu/PlayerStatsBar.tsx b/packages/web/components/MegaMenu/PlayerStatsBar.tsx
index 019a13da..f9aba089 100644
--- a/packages/web/components/MegaMenu/PlayerStatsBar.tsx
+++ b/packages/web/components/MegaMenu/PlayerStatsBar.tsx
@@ -100,7 +100,7 @@ export const PlayerStatsBar = () => {
             </MenuList>
           </Menu>
           <HStack justify="flex-end">
-            <XPSeedsBalance totalXP={player.totalXP} />
+            <XPSeedsBalance totalXP={player.totalXP} mobile />
           </HStack>
         </>
       )}
diff --git a/packages/web/components/MegaMenu/XPSeedsBalance.tsx b/packages/web/components/MegaMenu/XPSeedsBalance.tsx
index 65f8b97b..d83a87c9 100644
--- a/packages/web/components/MegaMenu/XPSeedsBalance.tsx
+++ b/packages/web/components/MegaMenu/XPSeedsBalance.tsx
@@ -10,9 +10,13 @@ const { amountToDecimal } = numbers;
 // Display player XP and Seed
 type Props = {
   totalXP: number;
+  mobile?: boolean;
 };
 // Display player XP and Seed
-export const XPSeedsBalance: React.FC<Props> = ({ totalXP }) => {
+export const XPSeedsBalance: React.FC<Props> = ({
+  totalXP,
+  mobile = false,
+}) => {
   const { pSeedBalance } = usePSeedBalance();
 
   return (
@@ -26,8 +30,18 @@ export const XPSeedsBalance: React.FC<Props> = ({ totalXP }) => {
           py={1}
           minW="fit-content"
         >
-          <Image src={XPStar} alignSelf="center" alt="XP" boxSize="1rem" />
-          <Text color="#FFF" lineHeight={2} fontSize="xs" fontWeight="bold">
+          <Image
+            src={XPStar}
+            alignSelf="center"
+            alt="XP"
+            boxSize={mobile ? '1.5rem' : '1rem'}
+          />
+          <Text
+            color="#FFF"
+            lineHeight={2}
+            fontSize={mobile ? 'sm' : 'xs'}
+            fontWeight="bold"
+          >
             {Math.trunc(totalXP).toLocaleString()}
           </Text>
         </HStack>
@@ -45,9 +59,14 @@ export const XPSeedsBalance: React.FC<Props> = ({ totalXP }) => {
             src={SeedMarket}
             alignSelf="center"
             alt="Seed"
-            boxSize="1rem"
+            boxSize={mobile ? '1.5rem' : '1rem'}
           />
-          <Text color="#FFF" lineHeight={2} fontSize="xs" fontWeight="bold">
+          <Text
+            color="#FFF"
+            lineHeight={2}
+            fontSize={mobile ? 'sm' : 'xs'}
+            fontWeight="bold"
+          >
             {parseInt(
               amountToDecimal(pSeedBalance || '0', 18),
               10,