alt/zot-wo-auth
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated repo card design to be more inline with mocks

Browse Source 
Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
This commit is contained in:
Raul Kele 2022-07-25 20:26:50 +03:00 committed by Andrei Aaron
parent 4b0982a48c
commit a0b28bb60d
2 changed files with 65 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/PreviewCard.jsx
View File

@ -1,4 +1,4 @@
import { Card, CardActionArea, CardContent, CardMedia, Chip, Grid, Typography } from '@mui/material';
import { Card, CardActionArea, CardContent, CardMedia, Chip, Grid, Stack, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { DateTime } from 'luxon';
import React from 'react';
@ -17,28 +17,30 @@ 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%",
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:"270px",
maxHeight:"138PX"
},
avatar: {
height:"23px",
width:"23px"
height: "23px",
width: "23px"
},
cardBtn: {
height: "100%",
@ -48,8 +50,8 @@ const useStyles = makeStyles(() => ({
borderRadius: '50px',
},
content: {
textAlign: "left",
color: "#606060",
textAlign: "left",
color: "#606060",
},
signedBadge: {
color: '#9ccc65',
@ -62,46 +64,48 @@ const useStyles = makeStyles(() => ({
function RepoCard(props) {
const classes = useStyles();
const navigate = useNavigate();
const {name, lastUpdated} = props;
const { name, lastUpdated } = 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", height:"32px", width:"32px" }} />);
}
return (
<Card variant="outlined" className={classes.card}>
<CardActionArea onClick={() => goToDetails()} className={classes.cardBtn}>
<CardContent className={classes.content}>
<Grid container spacing={1}>
<Grid container item xs={12}>
<CardMedia classes={{
root: classes.media,
img: classes.avatar,
}}
component="img"
image={randomImage()}
alt="icon"
/>
<Typography variant="h5" component="div">
{name}
</Typography>
{verifiedCheck()}
</Grid>
<Grid container item xs={12}>
<Typography variant="body2">Official*PH</Typography>
</Grid>
<Grid container item xs={12}>
</Grid>
<Grid container item xs={12}>
<Typography variant="subtitle2" sx={{color:"#7C4DFF"}}>Discover more</Typography>
</Grid>
</Grid>
</CardContent>
</CardActionArea>
<CardActionArea onClick={() => goToDetails()} className={classes.cardBtn}>
<CardContent className={classes.content}>
<Grid container spacing={1}>
<Grid container item xs={12}>
<Stack direction="row" spacing={3} sx={{display:"flex",alignItems:"center", flexWrap:"wrap"}}>
<CardMedia classes={{
root: classes.media,
img: classes.avatar,
}}
component="img"
image={randomImage()}
alt="icon"
/>
<Typography variant="h5" component="div" sx={{size:"24px", lineHeight:"32px", 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>
</Grid>
<Grid container item xs={12}>
</Grid>
<Grid container item xs={12}>
<Typography variant="subtitle2" sx={{ color: "#7C4DFF" }}>Discover more</Typography>
</Grid>
</Grid>
</CardContent>
</CardActionArea>
</Card>
);
};

15
src/components/RepoCard.jsx
View File

@ -40,6 +40,7 @@ const useStyles = makeStyles(() => ({
flexGrow:0,
order:0,
width:"100%",
maxWidth:"1152px"
},
avatar: {
height:"23px",
@ -55,6 +56,10 @@ const useStyles = makeStyles(() => ({
content: {
textAlign: "left",
color: "#606060",
maxHeight:"148px"
},
contentRight: {
height:"100%"
},
signedBadge: {
color: '#9ccc65',
@ -121,10 +126,12 @@ function RepoCard(props) {
</Typography>
</Grid>
<Grid item xs={2} >
<Stack justifyContent="end">
<Typography variant="body2">Downloads • {downloads || '-'}</Typography>
<Typography variant="body2">Rating • {rating || '-'}</Typography>
<BookmarkIcon sx={{marginTop:"55%", marginLeft:"70%"}}/>
<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>