From 4a526c92bbbf2e454326d0d06a8efa61376778b3 Mon Sep 17 00:00:00 2001 From: Griffithtp Date: Thu, 8 Aug 2019 21:58:15 +0100 Subject: [PATCH 1/2] refactor: add reusable styles properties --- src/components/Author/styles.ts | 3 ++- src/components/Developers/styles.ts | 3 ++- src/components/Dist/styles.ts | 3 ++- src/components/Engines/styles.ts | 3 ++- src/components/Header/styles.ts | 2 +- src/components/Layout/Layout.tsx | 3 ++- src/components/Package/styles.ts | 4 ++-- 7 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/Author/styles.ts b/src/components/Author/styles.ts index 9fec8fc..b6b8d6c 100644 --- a/src/components/Author/styles.ts +++ b/src/components/Author/styles.ts @@ -1,10 +1,11 @@ import styled from 'react-emotion'; import ListItem from '@material-ui/core/ListItem'; import Typography from '@material-ui/core/Typography'; +import { fontWeight } from '../../utils/styles/sizes'; export const Heading = styled(Typography)({ '&&': { - fontWeight: 700, + fontWeight: fontWeight.bold, textTransform: 'capitalize', }, }); diff --git a/src/components/Developers/styles.ts b/src/components/Developers/styles.ts index e4dc92b..aa2fc23 100644 --- a/src/components/Developers/styles.ts +++ b/src/components/Developers/styles.ts @@ -2,6 +2,7 @@ import styled from 'react-emotion'; import Typography from '@material-ui/core/Typography'; import { default as MuiFab } from '@material-ui/core/Fab'; import colors from '../../utils/styles/colors'; +import { fontWeight } from '../../utils/styles/sizes'; export const Details = styled('span')({ display: 'flex', @@ -20,7 +21,7 @@ export const Content = styled('div')({ export const Heading = styled(Typography)({ '&&': { - fontWeight: 700, + fontWeight: fontWeight.bold, marginBottom: '10px', textTransform: 'capitalize', }, diff --git a/src/components/Dist/styles.ts b/src/components/Dist/styles.ts index 4100799..1ca45c5 100644 --- a/src/components/Dist/styles.ts +++ b/src/components/Dist/styles.ts @@ -5,10 +5,11 @@ import ListItem from '@material-ui/core/ListItem'; import Typography from '@material-ui/core/Typography'; import colors from '../../utils/styles/colors'; +import { fontWeight } from '../../utils/styles/sizes'; export const Heading = styled(Typography)({ '&&': { - fontWeight: 700, + fontWeight: fontWeight.bold, textTransform: 'capitalize', }, }); diff --git a/src/components/Engines/styles.ts b/src/components/Engines/styles.ts index 69b3d24..e9c3104 100644 --- a/src/components/Engines/styles.ts +++ b/src/components/Engines/styles.ts @@ -1,10 +1,11 @@ import styled from 'react-emotion'; import ListItem from '@material-ui/core/ListItem'; import Typography from '@material-ui/core/Typography'; +import { fontWeight } from '../../utils/styles/sizes'; export const Heading = styled(Typography)({ '&&': { - fontWeight: 700, + fontWeight: fontWeight.bold, textTransform: 'capitalize', }, }); diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts index 3c4ad73..ad7d9c1 100644 --- a/src/components/Header/styles.ts +++ b/src/components/Header/styles.ts @@ -49,7 +49,7 @@ export const InnerMobileNavBar = styled('div')({ backgroundColor: colors.greyLight, color: colors.white, width: '100%', - padding: '0px 5px', + padding: '0 5px', margin: '0 10px 0 0', }, }); diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index f8f9296..968e78f 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -1,8 +1,9 @@ import styled, { css } from 'react-emotion'; +import colors from '../../utils/styles/colors'; export const Content = styled('div')({ '&&': { - backgroundColor: '#ffffff', + backgroundColor: colors.white, flex: 1, display: 'flex', position: 'relative', diff --git a/src/components/Package/styles.ts b/src/components/Package/styles.ts index 7650835..482af45 100644 --- a/src/components/Package/styles.ts +++ b/src/components/Package/styles.ts @@ -36,7 +36,7 @@ export const OverviewItem = styled('span')` export const Icon = styled(Ico)({ '&&': { - margin: '2px 10px 0px 0', + margin: '2px 10px 0 0', fill: colors.greyLight2, }, }); @@ -44,7 +44,7 @@ export const Icon = styled(Ico)({ export const Published = styled('span')({ '&&': { color: colors.greyLight2, - margin: '0px 5px 0px 0px', + margin: '0 5px 0 0', }, }); From d44cc7f6629f5de91165caff0e82d8197a5974f2 Mon Sep 17 00:00:00 2001 From: Griffithtp Date: Thu, 8 Aug 2019 22:08:37 +0100 Subject: [PATCH 2/2] refactor: update all reusable fontWeights --- src/components/Dependencies/styles.ts | 3 ++- src/components/Install/styles.ts | 3 ++- src/components/Package/styles.ts | 3 ++- src/components/Repository/styles.ts | 3 ++- src/components/UpLinks/styles.ts | 3 ++- src/components/Versions/styles.ts | 3 ++- 6 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/Dependencies/styles.ts b/src/components/Dependencies/styles.ts index 545494c..547039d 100644 --- a/src/components/Dependencies/styles.ts +++ b/src/components/Dependencies/styles.ts @@ -2,6 +2,7 @@ import styled from 'react-emotion'; import Card from '@material-ui/core/Card'; import Typography from '@material-ui/core/Typography'; import Chip from '@material-ui/core/Chip'; +import { fontWeight } from '../../utils/styles/sizes'; export const CardWrap = styled(Card)({ '&&': { @@ -11,7 +12,7 @@ export const CardWrap = styled(Card)({ export const Heading = styled(Typography)({ '&&': { - fontWeight: 700, + fontWeight: fontWeight.bold, textTransform: 'capitalize', }, }); diff --git a/src/components/Install/styles.ts b/src/components/Install/styles.ts index d76d538..635294e 100644 --- a/src/components/Install/styles.ts +++ b/src/components/Install/styles.ts @@ -2,10 +2,11 @@ import Avatar from '@material-ui/core/Avatar'; import ListItem from '@material-ui/core/ListItem'; import Typography from '@material-ui/core/Typography'; import styled from 'react-emotion'; +import { fontWeight } from '../../utils/styles/sizes'; export const Heading = styled(Typography)({ '&&': { - fontWeight: 700, + fontWeight: fontWeight.bold, textTransform: 'capitalize', }, }); diff --git a/src/components/Package/styles.ts b/src/components/Package/styles.ts index 482af45..44a1707 100644 --- a/src/components/Package/styles.ts +++ b/src/components/Package/styles.ts @@ -13,6 +13,7 @@ import { breakpoints } from '../../utils/styles/media'; import Ico from '../Icon'; import Label from '../Label'; import colors from '../../utils/styles/colors'; +import { fontWeight } from '../../utils/styles/sizes'; export const OverviewItem = styled('span')` && { @@ -52,7 +53,7 @@ export const Published = styled('span')({ export const Text = styled(Label)({ '&&': { fontSize: '12px', - fontWeight: 500, + fontWeight: fontWeight.semiBold, color: colors.greyLight2, }, }); diff --git a/src/components/Repository/styles.ts b/src/components/Repository/styles.ts index 6fa73fd..4a55ccb 100644 --- a/src/components/Repository/styles.ts +++ b/src/components/Repository/styles.ts @@ -5,10 +5,11 @@ import Typography from '@material-ui/core/Typography'; import Github from '../../icons/GitHub'; import colors from '../../utils/styles/colors'; +import { fontWeight } from '../../utils/styles/sizes'; export const Heading = styled(Typography)({ '&&': { - fontWeight: 700, + fontWeight: fontWeight.bold, textTransform: 'capitalize', }, }); diff --git a/src/components/UpLinks/styles.ts b/src/components/UpLinks/styles.ts index 1dd65c9..01909fe 100644 --- a/src/components/UpLinks/styles.ts +++ b/src/components/UpLinks/styles.ts @@ -1,10 +1,11 @@ import styled from 'react-emotion'; import Typography from '@material-ui/core/Typography'; import { default as MuiListItemText } from '@material-ui/core/ListItemText'; +import { fontWeight } from '../../utils/styles/sizes'; export const Heading = styled(Typography)({ '&&': { - fontWeight: 700, + fontWeight: fontWeight.bold, }, }); diff --git a/src/components/Versions/styles.ts b/src/components/Versions/styles.ts index 1dd65c9..01909fe 100644 --- a/src/components/Versions/styles.ts +++ b/src/components/Versions/styles.ts @@ -1,10 +1,11 @@ import styled from 'react-emotion'; import Typography from '@material-ui/core/Typography'; import { default as MuiListItemText } from '@material-ui/core/ListItemText'; +import { fontWeight } from '../../utils/styles/sizes'; export const Heading = styled(Typography)({ '&&': { - fontWeight: 700, + fontWeight: fontWeight.bold, }, });