eliminated all static pixel measurements in favor or relative units
Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
This commit is contained in:
parent
47856c1ea5
commit
705662f45e
@ -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>
|
||||
|
@ -23,7 +23,7 @@ const useStyles = makeStyles((theme) => {
|
||||
},
|
||||
explore: {
|
||||
color: '#00000099',
|
||||
letterSpacing: "0.15px"
|
||||
letterSpacing: "0.009375rem"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
@ -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"
|
||||
}
|
||||
}));
|
||||
|
||||
|
@ -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"
|
||||
|
@ -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%",
|
||||
}
|
||||
}));
|
||||
|
@ -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}>
|
||||
|
@ -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"
|
||||
}
|
||||
|
@ -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%'
|
||||
},
|
||||
|
@ -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>
|
||||
|
@ -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"
|
||||
}
|
||||
}));
|
||||
|
||||
|
@ -16,7 +16,7 @@ const useStyles = makeStyles((theme) => ({
|
||||
},
|
||||
gridWrapper: {
|
||||
// backgroundColor: "#fff",
|
||||
border: "1px #f2f2f2 dashed",
|
||||
border: "0.0625rem #f2f2f2 dashed",
|
||||
},
|
||||
pageWrapper: {
|
||||
height:"100%"
|
||||
|
@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) => ({
|
||||
},
|
||||
gridWrapper: {
|
||||
// backgroundColor: "#fff",
|
||||
border: "1px #f2f2f2 dashed",
|
||||
border: "0.0625em #f2f2f2 dashed",
|
||||
},
|
||||
pageWrapper: {
|
||||
height:"100%"
|
||||
|
Loading…
x
Reference in New Issue
Block a user