refactor: move basic CSS from templates to JS objects

src/App/styles.ts

@@ -1,15 +1,15 @@
 import { css } from 'emotion';
 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({
   opacity: 0.9,

src/components/Developers/styles.ts

@@ -3,11 +3,11 @@ import Typography from '@material-ui/core/Typography';
 import { default as MuiFab } from '@material-ui/core/Fab';
 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')`
   margin: 10px 0 10px 0;

src/components/Login/styles.ts

@@ -5,16 +5,16 @@ export const loginDialog = css({
   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({
   opacity: 0.9,

src/components/NotFound/styles.ts

@@ -3,25 +3,25 @@ import { default as MuiList } from '@material-ui/core/List';
 import Typography from '@material-ui/core/Typography';
 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)`
   && {
@@ -36,6 +36,6 @@ export const List = styled(MuiList)`
   }
 `;
 
-export const Card = styled(MuiCard)`
+export const Card = styled(MuiCard)({
-  margin-top: 24px;
+  marginTop: '24px',
-`;
+});

src/components/Package/styles.ts

@@ -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,
-`;
+});

src/components/UpLinks/styles.ts

@@ -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)`
   && {

src/components/Versions/styles.ts

@@ -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)`
   && {