refactor: move basic CSS from templates to JS objects

This commit is contained in:
Sergio Herrera Guzmán 2019-07-15 10:41:12 +02:00
parent 786da9975f
commit 8ea017d871
7 changed files with 59 additions and 59 deletions

View File

@ -1,15 +1,15 @@
import { css } from 'emotion'; import { css } from 'emotion';
import colors from '../utils/styles/colors'; import colors from '../utils/styles/colors';
export const alertError = css` export const alertError = css({
background-color: ${colors.red} !important; backgroundColor: `${colors.red} !important`,
min-width: inherit !important; minWidth: 'inherit !important',
`; });
export const alertErrorMsg = css` export const alertErrorMsg = css({
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
`; });
export const alertIcon = css({ export const alertIcon = css({
opacity: 0.9, opacity: 0.9,

View File

@ -3,11 +3,11 @@ import Typography from '@material-ui/core/Typography';
import { default as MuiFab } from '@material-ui/core/Fab'; import { default as MuiFab } from '@material-ui/core/Fab';
import colors from '../../utils/styles/colors'; import colors from '../../utils/styles/colors';
export const Details = styled('span')` export const Details = styled('span')({
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
align-items: center; alignItems: 'center',
`; });
export const Content = styled('div')` export const Content = styled('div')`
margin: 10px 0 10px 0; margin: 10px 0 10px 0;

View File

@ -5,16 +5,16 @@ export const loginDialog = css({
minWidth: '300px', minWidth: '300px',
}); });
export const loginError = css` export const loginError = css({
background-color: ${colors.red} !important; backgroundColor: `${colors.red} !important`,
min-width: inherit !important; minWidth: 'inherit !important',
margin-bottom: 10px !important; marginBottom: '10px !important',
`; });
export const loginErrorMsg = css` export const loginErrorMsg = css({
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
`; });
export const loginIcon = css({ export const loginIcon = css({
opacity: 0.9, opacity: 0.9,

View File

@ -3,25 +3,25 @@ import { default as MuiList } from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import styled from 'react-emotion'; import styled from 'react-emotion';
export const Wrapper = styled('div')` export const Wrapper = styled('div')({
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
flex-direction: column; flexDirection: 'column',
justify-content: center; justifyContent: 'center',
flex: 1; flex: 1,
padding: 16px; padding: '16px',
`; });
export const Inner = styled('div')` export const Inner = styled('div')({
max-width: 650px; maxWidth: '650px',
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
`; });
export const EmptyPackage = styled('img')` export const EmptyPackage = styled('img')({
width: 150px; width: '150px',
margin: 0 auto; margin: '0 auto',
`; });
export const Heading = styled(Typography)` export const Heading = styled(Typography)`
&& { && {
@ -36,6 +36,6 @@ export const List = styled(MuiList)`
} }
`; `;
export const Card = styled(MuiCard)` export const Card = styled(MuiCard)({
margin-top: 24px; marginTop: '24px',
`; });

View File

@ -155,8 +155,8 @@ export const PackageListItemText = styled(ListItemText)`
} }
`; `;
export const Description = styled(Typography)` export const Description = styled(Typography)({
color: ${colors.greyDark2}; color: colors.greyDark2,
font-size: 14px; fontSize: '14px',
padding-right: 0; paddingRight: 0,
`; });

View File

@ -8,12 +8,12 @@ export const Heading = styled(Typography)`
} }
`; `;
export const Spacer = styled('div')` export const Spacer = styled('div')({
flex: 1 1 auto; flex: '1 1 auto',
border-bottom: 1px dotted rgba(0, 0, 0, 0.2); borderBottom: '1px dotted rgba(0, 0, 0, 0.2)',
white-space: nowrap; whiteSpace: 'nowrap',
height: 0.5em; height: '0.5em',
`; });
export const ListItemText = styled(MuiListItemText)` export const ListItemText = styled(MuiListItemText)`
&& { && {

View File

@ -8,12 +8,12 @@ export const Heading = styled(Typography)`
} }
`; `;
export const Spacer = styled('div')` export const Spacer = styled('div')({
flex: 1 1 auto; flex: '1 1 auto',
border-bottom: 1px dotted rgba(0, 0, 0, 0.2); borderBottom: '1px dotted rgba(0, 0, 0, 0.2)',
white-space: nowrap; whiteSpace: 'nowrap',
height: 0.5em; height: '0.5em',
`; });
export const ListItemText = styled(MuiListItemText)` export const ListItemText = styled(MuiListItemText)`
&& { && {