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

eliminated all static pixel measurements in favor or relative units

Browse Source 
Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
This commit is contained in:
Raul Kele 2022-08-08 15:43:38 +03:00 committed by Andrei Aaron
parent 47856c1ea5
commit 705662f45e
12 changed files with 38 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Explore.jsx
View File

@ -138,7 +138,7 @@ function Explore ({ keywords, data, updateData }) {
<Grid item xs={9}> <Grid item xs={9}>
<Stack direction="row" className={classes.resultsRow}> <Stack direction="row" className={classes.resultsRow}>
<Typography variant="body2" >Results {filteredData.length}</Typography> <Typography variant="body2" >Results {filteredData.length}</Typography>
<FormControl sx={{m:'1', minWidth:"75px"}} size="small"> <FormControl sx={{m:'1', minWidth:"4.6875rem"}} size="small">
<InputLabel>Sort</InputLabel> <InputLabel>Sort</InputLabel>
<Select label="Sort"> <Select label="Sort">
</Select> </Select>

2
src/components/ExploreHeader.jsx
View File

@ -23,7 +23,7 @@ const useStyles = makeStyles((theme) => {
}, },
explore: { explore: {
color: '#00000099', color: '#00000099',
letterSpacing: "0.15px" letterSpacing: "0.009375rem"
} }
} }
}); });

4
src/components/FilterCard.jsx
View File

@ -8,8 +8,8 @@ const useStyles = makeStyles(() => ({
minWidth:'15%', minWidth:'15%',
alignItems:'flex-start', alignItems:'flex-start',
background:"#FFFFFF", background:"#FFFFFF",
boxShadow:"0px 5px 10px rgba(131, 131, 131, 0.08)", boxShadow:"0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)",
borderRadius: "24px" borderRadius: "1.5rem"
} }
})); }));

10
src/components/Header.jsx
View File

@ -23,16 +23,16 @@ const useStyles = makeStyles((theme) => ({
backgroundColor: "#fff", backgroundColor: "#fff",
height: "100%", height: "100%",
width:"100%", width:"100%",
borderBottom: "1px solid #BDBDBD", borderBottom: "0.0625rem solid #BDBDBD",
boxShadow: "0px 1.5px 5px rgba(87, 87, 87, 0.16)" boxShadow: "0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)"
}, },
search: { search: {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
backgroundColor: "#FFFFFF", backgroundColor: "#FFFFFF",
boxShadow: "0px 5px 10px rgba(131, 131, 131, 0.08)", boxShadow: "0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)",
borderRadius: "40px", borderRadius: "2.5rem",
border: "2px solid #E7E7E7", border: "0.125rem solid #E7E7E7",
minWidth: "60%", minWidth: "60%",
marginLeft: 16, marginLeft: 16,
flexDirection: "row" flexDirection: "row"

5
src/components/Home.jsx
View File

@ -6,7 +6,6 @@ import {isEmpty} from 'lodash';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import PreviewCard from './PreviewCard'; import PreviewCard from './PreviewCard';
import RepoCard from './RepoCard'; import RepoCard from './RepoCard';
import { Container } from '@mui/system';
const useStyles = makeStyles(() => ({ const useStyles = makeStyles(() => ({
@ -40,10 +39,10 @@ const useStyles = makeStyles(() => ({
subtitle: { subtitle: {
color:"#00000099", color:"#00000099",
fontWeight:400, fontWeight:400,
fontSize:"16px", fontSize:"1rem",
textAlign:"center", textAlign:"center",
lineHeight:"150%", lineHeight:"150%",
letterSpacing:"0.15px", letterSpacing:"0.009375rem",
width:"65%", width:"65%",
} }
})); }));

26
src/components/RepoDetails.jsx
View File

@ -37,27 +37,27 @@ const useStyles = makeStyles((theme) => ({
}, },
repoName: { repoName: {
fontWeight:"400", fontWeight:"400",
fontSize:"48px", fontSize:"3rem",
color:"#220052" color:"#220052"
}, },
avatar: { avatar: {
height:"48px", height:"3rem",
width:"48px" width:"3rem"
}, },
cardBtn: { cardBtn: {
height: "100%", height: "100%",
width: "100%" width: "100%"
}, },
media: { media: {
borderRadius: '50px', borderRadius: '3.125em',
}, },
tabs: { tabs: {
marginTop: "5%", marginTop: "5%",
border: 1, border: 1,
borderColor: 'divider', borderColor: 'divider',
padding:"8px", padding:"0.5rem",
boxShadow: "0px 5px 10px rgba(131, 131, 131, 0.08)", boxShadow: "0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)",
borderRadius:"32px", borderRadius:"2rem",
height: "100%" height: "100%"
}, },
tabContent:{ tabContent:{
@ -65,13 +65,13 @@ const useStyles = makeStyles((theme) => ({
}, },
selectedTab: { selectedTab: {
background:"#A53692", background:"#A53692",
borderRadius:"24px" borderRadius:"1.5rem"
}, },
tabPanel: { tabPanel: {
height:"100%" height:"100%"
}, },
metadata: { metadata: {
padding:"24px" padding:"1.5rem"
}, },
card: { card: {
marginBottom: 2, marginBottom: 2,
@ -79,8 +79,8 @@ const useStyles = makeStyles((theme) => ({
flexDirection:"row", flexDirection:"row",
alignItems:"start", alignItems:"start",
background:"#FFFFFF", background:"#FFFFFF",
boxShadow:"0px 5px 10px rgba(131, 131, 131, 0.08)", boxShadow:"0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)",
borderRadius:"24px", borderRadius:"1.5rem",
flex:"none", flex:"none",
alignSelf:"stretch", alignSelf:"stretch",
flexGrow:0, flexGrow:0,
@ -166,7 +166,7 @@ function RepoDetails (props) {
<Card className={classes.card}> <Card className={classes.card}>
<CardContent> <CardContent>
<Typography variant="h4" align="left">{overviewTitle || 'Quickstart'}</Typography> <Typography variant="h4" align="left">{overviewTitle || 'Quickstart'}</Typography>
<Typography variant="body1" sx={{color:"rgba(0, 0, 0, 0.6)", fontSize:"16px",lineHeight:"150%", marginTop:"5%"}}>{description || mockData.loremIpsum}</Typography> <Typography variant="body1" sx={{color:"rgba(0, 0, 0, 0.6)", fontSize:"1rem",lineHeight:"150%", marginTop:"5%"}}>{description || mockData.loremIpsum}</Typography>
</CardContent> </CardContent>
</Card> </Card>
); );
@ -218,7 +218,7 @@ function RepoDetails (props) {
<Chip label="Verified license" sx={{backgroundColor:"#E8F5E9", color:"#388E3C"}} variant="filled" onDelete={() => {return}} deleteIcon={verifiedCheck()}/> <Chip label="Verified license" sx={{backgroundColor:"#E8F5E9", color:"#388E3C"}} variant="filled" onDelete={() => {return}} deleteIcon={verifiedCheck()}/>
<BookmarkIcon/> <BookmarkIcon/>
</Stack> </Stack>
<Typography pt={1} sx={{ fontSize: 16,lineHeight:"24px", color:"rgba(0, 0, 0, 0.6)" }} gutterBottom align="left"> <Typography pt={1} sx={{ fontSize: 16,lineHeight:"1.5rem", color:"rgba(0, 0, 0, 0.6)" }} gutterBottom align="left">
{description || 'The complete solution for node.js command-line programs'} {description || 'The complete solution for node.js command-line programs'}
</Typography> </Typography>
<Stack alignItems="center" direction="row" spacing={2} pt={1}> <Stack alignItems="center" direction="row" spacing={2} pt={1}>

6
src/components/RepoDetailsMetadata.jsx
View File

@ -10,8 +10,8 @@ const useStyles = makeStyles(() => ({
flexDirection:"row", flexDirection:"row",
alignItems:"start", alignItems:"start",
background:"#FFFFFF", background:"#FFFFFF",
boxShadow:"0px 5px 10px rgba(131, 131, 131, 0.08)", boxShadow:"0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)",
borderRadius:"24px", borderRadius:"1.5rem",
flex:"none", flex:"none",
alignSelf:"stretch", alignSelf:"stretch",
flexGrow:0, flexGrow:0,
@ -26,7 +26,7 @@ const useStyles = makeStyles(() => ({
fontFamily: 'Roboto', fontFamily: 'Roboto',
fontStyle: "normal", fontStyle: "normal",
fontWeight: 400, fontWeight: 400,
fontSize: "16px", fontSize: "1rem",
lineHeight: "150%", lineHeight: "150%",
align:"left" align:"left"
} }

8
src/components/SignIn.jsx
View File

@ -34,16 +34,16 @@ const useStyles = makeStyles((theme) => ({
width: "60%", width: "60%",
height: "60%", height: "60%",
background: '#FFFFFF', background: '#FFFFFF',
gap: '10px', gap: '0.625em',
boxShadow: '0px 5px 10px rgba(131, 131, 131, 0.08)', boxShadow: '0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)',
borderRadius: '24px' borderRadius: '1.5rem'
}, },
loginCardContent: { loginCardContent: {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
border: '3px black', border: '0.1875rem black',
maxWidth: '73%', maxWidth: '73%',
height: '90%' height: '90%'
}, },

6
src/components/Tags.jsx
View File

@ -22,8 +22,8 @@ const useStyles = makeStyles(() => ({
flexDirection:"row", flexDirection:"row",
alignItems:"center", alignItems:"center",
background:"#FFFFFF", background:"#FFFFFF",
boxShadow:"0px 5px 10px rgba(131, 131, 131, 0.08)", boxShadow:"0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)",
borderRadius:"30px", borderRadius:"1.875rem",
flex:"none", flex:"none",
alignSelf:"stretch", alignSelf:"stretch",
flexGrow:0, flexGrow:0,
@ -118,7 +118,7 @@ export default function CollapsibleTable(props) {
<Card className={classes.card}> <Card className={classes.card}>
<CardContent className={classes.content}> <CardContent className={classes.content}>
<Typography variant="h4" gutterBottom component="div" align="left" style={{color: "rgba(0, 0, 0, 0.87)"}}>Tags history</Typography> <Typography variant="h4" gutterBottom component="div" align="left" style={{color: "rgba(0, 0, 0, 0.87)"}}>Tags history</Typography>
<Divider variant="fullWidth" sx={{margin:"5% 0% 5% 0%", background:"rgba(0, 0, 0, 0.38)", height:"1px", width:"100%"}}/> <Divider variant="fullWidth" sx={{margin:"5% 0% 5% 0%", background:"rgba(0, 0, 0, 0.38)", height:"0.0625rem", width:"100%"}}/>
{renderTags(tags)} {renderTags(tags)}
</CardContent> </CardContent>
</Card> </Card>

4
src/components/TermsOfService.jsx
View File

@ -8,9 +8,9 @@ const useStyles = makeStyles((theme) => ({
subtext: { subtext: {
color: "rgba(0, 0, 0, 0.6)", color: "rgba(0, 0, 0, 0.6)",
margin: 0, margin: 0,
fontSize:"12px", fontSize:"0.75rem",
lineHeight:"166%", lineHeight:"166%",
letterSpacing:"0.4px" letterSpacing:"0.025rem"
} }
})); }));

2
src/pages/ExplorePage.jsx
View File

@ -16,7 +16,7 @@ const useStyles = makeStyles((theme) => ({
}, },
gridWrapper: { gridWrapper: {
// backgroundColor: "#fff", // backgroundColor: "#fff",
border: "1px #f2f2f2 dashed", border: "0.0625rem #f2f2f2 dashed",
}, },
pageWrapper: { pageWrapper: {
height:"100%" height:"100%"

2
src/pages/HomePage.jsx
View File

@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) => ({
}, },
gridWrapper: { gridWrapper: {
// backgroundColor: "#fff", // backgroundColor: "#fff",
border: "1px #f2f2f2 dashed", border: "0.0625em #f2f2f2 dashed",
}, },
pageWrapper: { pageWrapper: {
height:"100%" height:"100%"