From 9490166d2c171f1bf8b74935dcd1cb8017487fdf Mon Sep 17 00:00:00 2001
From: RubenSmn <saaman.ruben@gmail.com>
Date: Sun, 30 Oct 2022 11:42:47 +0100
Subject: [PATCH 1/2] refactor: add size property to improve responsiveness for
 mobile

---
 src/components/common/CustomIcon.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/common/CustomIcon.js b/src/components/common/CustomIcon.js
index a76e5d735..9f7f65ecc 100644
--- a/src/components/common/CustomIcon.js
+++ b/src/components/common/CustomIcon.js
@@ -1,6 +1,16 @@
 import SvgIcon from '@mui/material/SvgIcon';
 
-function CustomIcon({ icon, height = '1em', width = '1em', sx = {}, color }) {
+function CustomIcon({ icon, size = '1em', sx = {}, color }) {
+  let formattedSize;
+
+  if (typeof size === 'string') {
+    formattedSize = [`calc(0.75 * ${size})`, size];
+  } else if (typeof size === 'number') {
+    formattedSize = [`calc(0.75 * ${size}px)`, `${size}px`];
+  } else if (size instanceof Array) {
+    formattedSize = size;
+  }
+
   return (
     <SvgIcon
       component={icon}
@@ -12,8 +22,8 @@ function CustomIcon({ icon, height = '1em', width = '1em', sx = {}, color }) {
         '& rect': {
           stroke: color,
         },
-        height: [28, height],
-        width: [28, width],
+        height: formattedSize,
+        width: formattedSize,
         ...sx,
       }}
     />

From 703063b614460675803ada28353cf590ffeb640f Mon Sep 17 00:00:00 2001
From: RubenSmn <saaman.ruben@gmail.com>
Date: Sun, 30 Oct 2022 12:02:38 +0100
Subject: [PATCH 2/2] refactor: update icons with new size property

---
 src/components/ImpactSection.js             |  5 ++++-
 src/components/LeaderBoard.js               | 14 +++-----------
 src/components/Timeline.js                  |  2 +-
 src/components/TreeInfoDialog.js            |  6 ++----
 src/components/common/CustomCard.js         |  2 +-
 src/components/common/Info.js               | 13 +++++++------
 src/pages/organizations/[organizationid].js |  3 +--
 src/pages/planters/[planterid].js           |  3 +--
 src/pages/tokens/[tokenid].js               |  3 +--
 src/pages/top.js                            |  3 +--
 10 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/src/components/ImpactSection.js b/src/components/ImpactSection.js
index 8c5178852..07a41c1a5 100644
--- a/src/components/ImpactSection.js
+++ b/src/components/ImpactSection.js
@@ -70,7 +70,10 @@ function ImpactSection() {
           mb: 6,
         }}
       >
-        <Icon icon={StaticGraph} height={['100%', 487]} width="100%" />
+        <Icon
+          icon={StaticGraph}
+          sx={{ height: ['100%', 487], width: '100%' }}
+        />
         <Typography
           sx={{
             position: 'absolute',
diff --git a/src/components/LeaderBoard.js b/src/components/LeaderBoard.js
index 746f451ff..c3eb1215b 100644
--- a/src/components/LeaderBoard.js
+++ b/src/components/LeaderBoard.js
@@ -90,16 +90,8 @@ function RibbonWrapper({ fill, index }) {
   );
 }
 
-function TreeImage(isMobile) {
-  return (
-    <Icon
-      icon={TreeIcon}
-      sx={{
-        width: !isMobile ? '13.5px' : '12px',
-        height: !isMobile ? '18px' : '14px',
-      }}
-    />
-  );
+function TreeImage() {
+  return <Icon icon={TreeIcon} size={28} />;
 }
 
 function LeaderBoard(props) {
@@ -170,7 +162,7 @@ function LeaderBoard(props) {
             >
               TREES CAPTURED
             </Typography>
-            <TreeImage isMobile={isMobile} />
+            <TreeImage />
           </Grid>
           <Grid item xs={1} />
         </Grid>
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index ff3652ffd..76859863e 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -137,7 +137,7 @@ function Timeline() {
         >
           <Icon
             icon={TimeIcon}
-            width={22}
+            size={[24, 28]}
             sx={{
               '& path': {
                 fill: ({ palette }) => palette.primary.main,
diff --git a/src/components/TreeInfoDialog.js b/src/components/TreeInfoDialog.js
index 568f4c91b..8dcac92c3 100644
--- a/src/components/TreeInfoDialog.js
+++ b/src/components/TreeInfoDialog.js
@@ -143,7 +143,7 @@ export default function TreeInfoDialog(props) {
           },
         }}
       >
-        <Icon icon={MaxIcon} width={52} height={52} />
+        <Icon icon={MaxIcon} size={52} />
       </Box>
       <Dialog
         isFullscreen={isFullscreen}
@@ -309,9 +309,7 @@ export default function TreeInfoDialog(props) {
                   }}
                 >
                   <Button
-                    startIcon={
-                      <Icon icon={HeartIcon} sx={{ height: 22, width: 24 }} />
-                    }
+                    startIcon={<Icon icon={HeartIcon} size={24} />}
                     disableElevation
                     variant="contained"
                     color="primary"
diff --git a/src/components/common/CustomCard.js b/src/components/common/CustomCard.js
index 128a197f0..c3750c920 100644
--- a/src/components/common/CustomCard.js
+++ b/src/components/common/CustomCard.js
@@ -45,7 +45,7 @@ function CustomCard({
                 : palette.success.main,
           }}
         >
-          <Icon icon={iconURI} width={36} height={36} {...iconProps} />
+          <Icon icon={iconURI} size={[24, 36]} {...iconProps} />
         </Avatar>
       </Box>
       <Box
diff --git a/src/components/common/Info.js b/src/components/common/Info.js
index cd39c8d31..9be663ed1 100644
--- a/src/components/common/Info.js
+++ b/src/components/common/Info.js
@@ -9,14 +9,15 @@ export default function Info({ info, iconURI }) {
         display: 'flex',
         alignItems: 'center',
         gap: 3,
-        '& svg': {
-          filter: 'opacity(0.5)',
-          maxWidth: 16,
-          maxHeight: 16,
-        },
       }}
     >
-      <Icon icon={iconURI} />
+      <Icon
+        icon={iconURI}
+        size={[16, 16]}
+        sx={{
+          filter: 'opacity(0.5)',
+        }}
+      />
       <Typography variant="h6">{info}</Typography>
     </Box>
   );
diff --git a/src/pages/organizations/[organizationid].js b/src/pages/organizations/[organizationid].js
index 48c2b0071..24bc0f0c6 100644
--- a/src/pages/organizations/[organizationid].js
+++ b/src/pages/organizations/[organizationid].js
@@ -181,8 +181,7 @@ export default function Organization(props) {
 
             <Icon
               icon={SearchIcon}
-              width={48}
-              height={48}
+              size={48}
               color="grey"
               sx={{
                 fill: 'transparent',
diff --git a/src/pages/planters/[planterid].js b/src/pages/planters/[planterid].js
index f18a51f5a..d38f6c356 100644
--- a/src/pages/planters/[planterid].js
+++ b/src/pages/planters/[planterid].js
@@ -186,8 +186,7 @@ export default function Planter(props) {
             <Box>
               <Icon
                 icon={SearchIcon}
-                width={48}
-                height={48}
+                size={48}
                 color="grey"
                 sx={{
                   fill: 'transparent',
diff --git a/src/pages/tokens/[tokenid].js b/src/pages/tokens/[tokenid].js
index b9ed8e7b0..5c12e7a56 100644
--- a/src/pages/tokens/[tokenid].js
+++ b/src/pages/tokens/[tokenid].js
@@ -202,8 +202,7 @@ export default function Token(props) {
           <Box>
             <Icon
               icon={SearchIcon}
-              width={48}
-              height={48}
+              size={48}
               color="grey"
               sx={{
                 fill: 'transparent',
diff --git a/src/pages/top.js b/src/pages/top.js
index d9ffb984f..54d883d8c 100644
--- a/src/pages/top.js
+++ b/src/pages/top.js
@@ -121,8 +121,7 @@ function Top(props) {
           />
           <Icon
             icon={Search}
-            width={48}
-            height={48}
+            size={48}
             color="grey"
             sx={{
               fill: 'transparent',