eliminated all static pixel measurements in favor or relative units

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

View File

@ -138,7 +138,7 @@ function Explore ({ keywords, data, updateData }) {
<Grid item xs={9}>
<Stack direction="row" className={classes.resultsRow}>
<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>
<Select label="Sort">
</Select>

View File

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

View File

@ -8,8 +8,8 @@ const useStyles = makeStyles(() => ({
minWidth:'15%',
alignItems:'flex-start',
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"
}
}));

View File

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

View File

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

View File

@ -37,27 +37,27 @@ const useStyles = makeStyles((theme) => ({
},
repoName: {
fontWeight:"400",
fontSize:"48px",
fontSize:"3rem",
color:"#220052"
},
avatar: {
height:"48px",
width:"48px"
height:"3rem",
width:"3rem"
},
cardBtn: {
height: "100%",
width: "100%"
},
media: {
borderRadius: '50px',
borderRadius: '3.125em',
},
tabs: {
marginTop: "5%",
border: 1,
borderColor: 'divider',
padding:"8px",
boxShadow: "0px 5px 10px rgba(131, 131, 131, 0.08)",
borderRadius:"32px",
padding:"0.5rem",
boxShadow: "0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)",
borderRadius:"2rem",
height: "100%"
},
tabContent:{
@ -65,13 +65,13 @@ const useStyles = makeStyles((theme) => ({
},
selectedTab: {
background:"#A53692",
borderRadius:"24px"
borderRadius:"1.5rem"
},
tabPanel: {
height:"100%"
},
metadata: {
padding:"24px"
padding:"1.5rem"
},
card: {
marginBottom: 2,
@ -79,8 +79,8 @@ const useStyles = makeStyles((theme) => ({
flexDirection:"row",
alignItems:"start",
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,
@ -166,7 +166,7 @@ function RepoDetails (props) {
<Card className={classes.card}>
<CardContent>
<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>
</Card>
);
@ -218,7 +218,7 @@ function RepoDetails (props) {
<Chip label="Verified license" sx={{backgroundColor:"#E8F5E9", color:"#388E3C"}} variant="filled" onDelete={() => {return}} deleteIcon={verifiedCheck()}/>
<BookmarkIcon/>
</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'}
</Typography>
<Stack alignItems="center" direction="row" spacing={2} pt={1}>

View File

@ -10,8 +10,8 @@ const useStyles = makeStyles(() => ({
flexDirection:"row",
alignItems:"start",
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,
@ -26,7 +26,7 @@ const useStyles = makeStyles(() => ({
fontFamily: 'Roboto',
fontStyle: "normal",
fontWeight: 400,
fontSize: "16px",
fontSize: "1rem",
lineHeight: "150%",
align:"left"
}

View File

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

View File

@ -22,8 +22,8 @@ const useStyles = makeStyles(() => ({
flexDirection:"row",
alignItems:"center",
background:"#FFFFFF",
boxShadow:"0px 5px 10px rgba(131, 131, 131, 0.08)",
borderRadius:"30px",
boxShadow:"0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)",
borderRadius:"1.875rem",
flex:"none",
alignSelf:"stretch",
flexGrow:0,
@ -118,7 +118,7 @@ export default function CollapsibleTable(props) {
<Card className={classes.card}>
<CardContent className={classes.content}>
<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)}
</CardContent>
</Card>

View File

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

View File

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

View File

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