Greenstand · RubenSmn · Oct 30, 2022 · Oct 30, 2022 · Dec 6, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,8 @@
 # [2.0.0-beta.192](https://github.com/Greenstand/treetracker-web-map-client/compare/v2.0.0-beta.191...v2.0.0-beta.192) (2022-12-06)
 
-
 ### Features
 
-* cache ([60eeaa4](https://github.com/Greenstand/treetracker-web-map-client/commit/60eeaa49f0fd5d09790e0f3aedbfc27408b8f3ec))
+- cache ([60eeaa4](https://github.com/Greenstand/treetracker-web-map-client/commit/60eeaa49f0fd5d09790e0f3aedbfc27408b8f3ec))
 
 # [2.0.0-beta.191](https://github.com/Greenstand/treetracker-web-map-client/compare/v2.0.0-beta.190...v2.0.0-beta.191) (2022-12-05)
 

diff --git a/deployment-beta/overlays/development/service.yaml b/deployment-beta/overlays/development/service.yaml
@@ -6,7 +6,7 @@ metadata:
   labels:
     app: treetracker-web-map-client-beta
   annotations:
-    getambassador.io/config: 
+    getambassador.io/config:
       apiVersion: ambassador/v2
       kind: Mapping
       name: domain-name
@@ -19,6 +19,6 @@ spec:
   selector:
     app: treetracker-web-map-client-beta
   ports:
-  - port: 80
-    protocol: TCP
-    targetPort: 3000
+    - port: 80
+      protocol: TCP
+      targetPort: 3000
diff --git 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
@@ -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
@@ -157,7 +157,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
@@ -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
@@ -52,7 +52,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/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,
       }}
     />

diff --git 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
@@ -166,8 +166,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
@@ -183,8 +183,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
@@ -203,8 +203,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
@@ -121,8 +121,7 @@ function Top(props) {
           />
           <Icon
             icon={Search}
-            width={48}
-            height={48}
+            size={48}
             color="grey"
             sx={{
               fill: 'transparent',