From 47856c1ea5bc266efcc7d022fd6b61642cbe095e Mon Sep 17 00:00:00 2001
From: Raul Kele <raulkeleblk@gmail.com>
Date: Mon, 8 Aug 2022 12:38:11 +0300
Subject: [PATCH] changed all static px measurements to relative units

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
---
 src/components/PreviewCard.jsx |  24 +++---
 src/components/RepoCard.jsx    | 148 ++++++++++++++++-----------------
 2 files changed, 86 insertions(+), 86 deletions(-)

diff --git a/src/components/PreviewCard.jsx b/src/components/PreviewCard.jsx
index 5b6d57ce..cf1f0e95 100644
--- a/src/components/PreviewCard.jsx
+++ b/src/components/PreviewCard.jsx
@@ -28,26 +28,26 @@ const useStyles = makeStyles(() => ({
     flexDirection: "row",
     alignItems: "center",
     background: "#FFFFFF",
-    boxShadow: "0px 5px 10px rgba(131, 131, 131, 0.08)",
-    borderRadius: "24px",
+    boxShadow: "0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)",
+    borderRadius: "1.5rem",
     flex: "none",
     alignSelf: "stretch",
     flexGrow: 0,
     order: 0,
     width: "100%",
-    maxWidth:"270px",
-    maxHeight:"138px"
+    maxWidth:"16.875rem",
+    maxHeight:"8.625rem"
   },
   avatar: {
-    height: "23px",
-    width: "23px"
+    height: "1.4375rem",
+    width: "1.4375rem"
   },
   cardBtn: {
     height: "100%",
     width: "100%"
   },
   media: {
-    borderRadius: '50px',
+    borderRadius: '3.125rem',
   },
   content: {
     textAlign: "left",
@@ -55,8 +55,8 @@ const useStyles = makeStyles(() => ({
   },
   signedBadge: {
     color: '#9ccc65',
-    height: '22px',
-    width: '22px',
+    height: '1.375rem',
+    width: '1.375rem',
     marginLeft: 10,
   }
 }));
@@ -71,7 +71,7 @@ function RepoCard(props) {
   };
 
   const verifiedCheck = () => {
-    return (<CheckCircleOutlineOutlinedIcon sx={{ color: "#388E3C!important", height:"32px", width:"32px" }} />);
+    return (<CheckCircleOutlineOutlinedIcon sx={{ color: "#388E3C!important", height:"2rem", width:"2rem" }} />);
   }
 
   return (
@@ -89,14 +89,14 @@ function RepoCard(props) {
                   image={randomImage()}
                   alt="icon"
                 />
-                <Typography variant="h5" component="div" sx={{size:"24px", lineHeight:"32px", color:"#220052"}}>
+                <Typography variant="h5" component="div" sx={{size:"1.5rem", lineHeight:"2rem", color:"#220052"}}>
                   {name}
                 </Typography>
                 {verifiedCheck()}
               </Stack>
             </Grid>
             <Grid container item xs={12} mt={2}>
-              <Typography variant="body2" sx={{fontSize:"14px", lineHeight:"143%", letterSpacing:"0.17px"}}>Official*PH</Typography>
+              <Typography variant="body2" sx={{fontSize:"0.875rem", lineHeight:"143%", letterSpacing:"0.010625rem"}}>Official*PH</Typography>
             </Grid>
             <Grid container item xs={12}>
             </Grid>
diff --git a/src/components/RepoCard.jsx b/src/components/RepoCard.jsx
index a0f33c97..7b54eef4 100644
--- a/src/components/RepoCard.jsx
+++ b/src/components/RepoCard.jsx
@@ -1,11 +1,11 @@
 // react global
 import React from "react";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 // utility
-import {DateTime} from 'luxon';
+import { DateTime } from 'luxon';
 // components
-import {Card, CardActionArea, CardMedia, CardContent, Typography, Stack, Chip, Box, Grid} from '@mui/material';
+import { Card, CardActionArea, CardMedia, CardContent, Typography, Stack, Chip, Box, Grid } from '@mui/material';
 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 import makeStyles from '@mui/styles/makeStyles';
@@ -22,49 +22,49 @@ const randomIntFromInterval = (min, max) => {
 };
 
 const randomImage = () => {
-  const imageArray = [repocube1,repocube2,repocube3,repocube4];
-  return imageArray[randomIntFromInterval(0,3)];
+  const imageArray = [repocube1, repocube2, repocube3, repocube4];
+  return imageArray[randomIntFromInterval(0, 3)];
 };
 
 const useStyles = makeStyles(() => ({
   card: {
-      marginBottom: 2,
-      display:"flex",
-      flexDirection:"row",
-      alignItems:"center",
-      background:"#FFFFFF",
-      boxShadow:"0px 5px 10px rgba(131, 131, 131, 0.08)",
-      borderRadius:"24px",
-      flex:"none",
-      alignSelf:"stretch",
-      flexGrow:0,
-      order:0,
-      width:"100%",
-      maxWidth:"1152px"
+    marginBottom: 2,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    background: "#FFFFFF",
+    boxShadow: "0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)",
+    borderRadius: "1.5rem",
+    flex: "none",
+    alignSelf: "stretch",
+    flexGrow: 0,
+    order: 0,
+    width: "100%",
+    maxWidth: "72rem"
   },
   avatar: {
-      height:"23px",
-      width:"23px"
+    height: "1.4375rem",
+    width: "1.4375rem"
   },
   cardBtn: {
     height: "100%",
     width: "100%"
   },
   media: {
-    borderRadius: '50px',
+    borderRadius: '3.125rem',
   },
   content: {
-     textAlign: "left",
-     color: "#606060",
-     maxHeight:"148px"
+    textAlign: "left",
+    color: "#606060",
+    maxHeight: "9.25rem"
   },
   contentRight: {
-    height:"100%"
+    height: "100%"
   },
   signedBadge: {
     color: '#9ccc65',
-    height: '22px',
-    width: '22px',
+    height: '1.375rem',
+    width: '1.375rem',
     marginLeft: 10,
   }
 }));
@@ -72,71 +72,71 @@ const useStyles = makeStyles(() => ({
 function RepoCard(props) {
   const classes = useStyles();
   const navigate = useNavigate();
-  const {name, vendor, description, lastUpdated, downloads, rating} = props;
+  const { name, vendor, description, lastUpdated, downloads, rating } = props;
 
   const goToDetails = (repo) => {
-    navigate(`/image/${name}`, {state: {lastDate: (lastUpdated? DateTime.fromISO(lastUpdated) : DateTime.now().minus({days:1})).toRelative({unit:'days'})}});
+    navigate(`/image/${name}`, { state: { lastDate: (lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 })).toRelative({ unit: 'days' }) } });
   }
 
   const verifiedCheck = () => {
-    return (<CheckCircleOutlineOutlinedIcon sx={{color:"#388E3C!important"}}/>);
+    return (<CheckCircleOutlineOutlinedIcon sx={{ color: "#388E3C!important" }} />);
   }
 
   const platformChips = () => {
     // if platforms not received, mock data
-    const platforms = props.platforms || ["Windows","PowerPC64LE","IBM Z","Linux"];
+    const platforms = props.platforms || ["Windows", "PowerPC64LE", "IBM Z", "Linux"];
     return platforms.map((platform, index) => (
-      <Chip key={index} label={platform} sx={{backgroundColor:"#EDE7F6", color: "#311B92"}}/>
+      <Chip key={index} label={platform} sx={{ backgroundColor: "#EDE7F6", color: "#311B92" }} />
     ));
   }
 
   const getVendorLastPublish = () => {
-    const lastDate = lastUpdated? DateTime.fromISO(lastUpdated) : DateTime.now().minus({days:1});
-    return `${vendor || 'andrewc'} • published ${lastDate.toFormat('MM.d.yy')} • ${lastDate.toRelative({unit:'days'})}`;
+    const lastDate = lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 });
+    return `${vendor || 'andrewc'} • published ${lastDate.toFormat('MM.d.yy')} • ${lastDate.toRelative({ unit: 'days' })}`;
   }
 
   return (
     <Card variant="outlined" className={classes.card}>
-        <CardActionArea onClick={() => goToDetails()} className={classes.cardBtn}>
-            <CardContent className={classes.content}>
-              <Grid container>
-                <Grid item xs={10}>
-                  <Stack alignItems="center" direction="row" spacing={2}>
-                    <CardMedia classes={{
-                        root: classes.media,
-                        img: classes.avatar,
-                    }}
-                      component="img"
-                      image={randomImage()}
-                      alt="icon"
-                    />
-                    <Typography variant="h5" component="div">
-                      {name}
-                    </Typography>
-                    <Chip label="Verified license" sx={{backgroundColor:"#E8F5E9", color:"#388E3C"}} variant="filled" onDelete={() => {return}} deleteIcon={verifiedCheck()}/>
-                  </Stack>
-                  <Typography pt={1} sx={{ fontSize: 12 }} gutterBottom>
-                    {description || 'The complete solution for node.js command-line programs'}
-                  </Typography>
-                  <Stack alignItems="center" direction="row" spacing={2} pt={1}>
-                    {platformChips()}
-                  </Stack>
-                  <Typography variant="body2" pt={1}>
-                    {getVendorLastPublish()}
-                  </Typography>
-                </Grid>
-                <Grid item xs={2} >
-                  <Stack alignItems="flex-end" justifyContent="space-between" direction="column" className={classes.contentRight}>
-                    <Stack direction="column" alignItems="flex-end">
-                      <Typography variant="body2">Downloads • {downloads || '-'}</Typography>
-                      <Typography variant="body2">Rating • {rating || '-'}</Typography>
-                    </Stack>
-                    <BookmarkIcon />
-                  </Stack>                  
-                </Grid>
-              </Grid>
-            </CardContent>
-        </CardActionArea>
+      <CardActionArea onClick={() => goToDetails()} className={classes.cardBtn}>
+        <CardContent className={classes.content}>
+          <Grid container>
+            <Grid item xs={10}>
+              <Stack alignItems="center" direction="row" spacing={2}>
+                <CardMedia classes={{
+                  root: classes.media,
+                  img: classes.avatar,
+                }}
+                  component="img"
+                  image={randomImage()}
+                  alt="icon"
+                />
+                <Typography variant="h5" component="div">
+                  {name}
+                </Typography>
+                <Chip label="Verified license" sx={{ backgroundColor: "#E8F5E9", color: "#388E3C" }} variant="filled" onDelete={() => { return }} deleteIcon={verifiedCheck()} />
+              </Stack>
+              <Typography pt={1} sx={{ fontSize: 12 }} gutterBottom>
+                {description || 'The complete solution for node.js command-line programs'}
+              </Typography>
+              <Stack alignItems="center" direction="row" spacing={2} pt={1}>
+                {platformChips()}
+              </Stack>
+              <Typography variant="body2" pt={1}>
+                {getVendorLastPublish()}
+              </Typography>
+            </Grid>
+            <Grid item xs={2} >
+              <Stack alignItems="flex-end" justifyContent="space-between" direction="column" className={classes.contentRight}>
+                <Stack direction="column" alignItems="flex-end">
+                  <Typography variant="body2">Downloads • {downloads || '-'}</Typography>
+                  <Typography variant="body2">Rating • {rating || '-'}</Typography>
+                </Stack>
+                <BookmarkIcon />
+              </Stack>
+            </Grid>
+          </Grid>
+        </CardContent>
+      </CardActionArea>
     </Card>
   );
 }