From 786da9975f61a589475ff2b477e43ac568706f02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Herrera=20Guzm=C3=A1n?= Date: Mon, 15 Jul 2019 10:08:07 +0200 Subject: [PATCH 1/3] chore: disable stylelint on files with no CSS templates --- .stylelintrc | 1 + 1 file changed, 1 insertion(+) diff --git a/.stylelintrc b/.stylelintrc index 91ae548..31d4943 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -26,6 +26,7 @@ "no-descending-specificity": [true, { "severity": "warning" }], "no-duplicate-at-import-rules": true, "no-duplicate-selectors": true, + "no-empty-source": null, "no-extra-semicolons": true, "no-invalid-double-slash-comments": true, "property-no-unknown": true, From 8ea017d8718fdf989bc465ae2cfac228a9e23fe3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Herrera=20Guzm=C3=A1n?= Date: Mon, 15 Jul 2019 10:41:12 +0200 Subject: [PATCH 2/3] refactor: move basic CSS from templates to JS objects --- src/App/styles.ts | 16 ++++++------ src/components/Developers/styles.ts | 10 ++++---- src/components/Login/styles.ts | 18 ++++++------- src/components/NotFound/styles.ts | 40 ++++++++++++++--------------- src/components/Package/styles.ts | 10 ++++---- src/components/UpLinks/styles.ts | 12 ++++----- src/components/Versions/styles.ts | 12 ++++----- 7 files changed, 59 insertions(+), 59 deletions(-) diff --git a/src/App/styles.ts b/src/App/styles.ts index 17af52b..33325da 100644 --- a/src/App/styles.ts +++ b/src/App/styles.ts @@ -1,15 +1,15 @@ import { css } from 'emotion'; import colors from '../utils/styles/colors'; -export const alertError = css` - background-color: ${colors.red} !important; - min-width: inherit !important; -`; +export const alertError = css({ + backgroundColor: `${colors.red} !important`, + minWidth: 'inherit !important', +}); -export const alertErrorMsg = css` - display: flex; - align-items: center; -`; +export const alertErrorMsg = css({ + display: 'flex', + alignItems: 'center', +}); export const alertIcon = css({ opacity: 0.9, diff --git a/src/components/Developers/styles.ts b/src/components/Developers/styles.ts index bc2645d..cb2b10f 100644 --- a/src/components/Developers/styles.ts +++ b/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')` - display: flex; - flex-direction: column; - align-items: center; -`; +export const Details = styled('span')({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', +}); export const Content = styled('div')` margin: 10px 0 10px 0; diff --git a/src/components/Login/styles.ts b/src/components/Login/styles.ts index 6029064..ac2facd 100644 --- a/src/components/Login/styles.ts +++ b/src/components/Login/styles.ts @@ -5,16 +5,16 @@ export const loginDialog = css({ minWidth: '300px', }); -export const loginError = css` - background-color: ${colors.red} !important; - min-width: inherit !important; - margin-bottom: 10px !important; -`; +export const loginError = css({ + backgroundColor: `${colors.red} !important`, + minWidth: 'inherit !important', + marginBottom: '10px !important', +}); -export const loginErrorMsg = css` - display: flex; - align-items: center; -`; +export const loginErrorMsg = css({ + display: 'flex', + alignItems: 'center', +}); export const loginIcon = css({ opacity: 0.9, diff --git a/src/components/NotFound/styles.ts b/src/components/NotFound/styles.ts index cc6a640..01f3979 100644 --- a/src/components/NotFound/styles.ts +++ b/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')` - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; - flex: 1; - padding: 16px; -`; +export const Wrapper = styled('div')({ + display: 'flex', + alignItems: 'center', + flexDirection: 'column', + justifyContent: 'center', + flex: 1, + padding: '16px', +}); -export const Inner = styled('div')` - max-width: 650px; - display: flex; - flex-direction: column; -`; +export const Inner = styled('div')({ + maxWidth: '650px', + display: 'flex', + flexDirection: 'column', +}); -export const EmptyPackage = styled('img')` - width: 150px; - margin: 0 auto; -`; +export const EmptyPackage = styled('img')({ + width: '150px', + margin: '0 auto', +}); export const Heading = styled(Typography)` && { @@ -36,6 +36,6 @@ export const List = styled(MuiList)` } `; -export const Card = styled(MuiCard)` - margin-top: 24px; -`; +export const Card = styled(MuiCard)({ + marginTop: '24px', +}); diff --git a/src/components/Package/styles.ts b/src/components/Package/styles.ts index 2a4f1d5..2a51779 100644 --- a/src/components/Package/styles.ts +++ b/src/components/Package/styles.ts @@ -155,8 +155,8 @@ export const PackageListItemText = styled(ListItemText)` } `; -export const Description = styled(Typography)` - color: ${colors.greyDark2}; - font-size: 14px; - padding-right: 0; -`; +export const Description = styled(Typography)({ + color: colors.greyDark2, + fontSize: '14px', + paddingRight: 0, +}); diff --git a/src/components/UpLinks/styles.ts b/src/components/UpLinks/styles.ts index b530768..e6b005a 100644 --- a/src/components/UpLinks/styles.ts +++ b/src/components/UpLinks/styles.ts @@ -8,12 +8,12 @@ export const Heading = styled(Typography)` } `; -export const Spacer = styled('div')` - flex: 1 1 auto; - border-bottom: 1px dotted rgba(0, 0, 0, 0.2); - white-space: nowrap; - height: 0.5em; -`; +export const Spacer = styled('div')({ + flex: '1 1 auto', + borderBottom: '1px dotted rgba(0, 0, 0, 0.2)', + whiteSpace: 'nowrap', + height: '0.5em', +}); export const ListItemText = styled(MuiListItemText)` && { diff --git a/src/components/Versions/styles.ts b/src/components/Versions/styles.ts index b530768..e6b005a 100644 --- a/src/components/Versions/styles.ts +++ b/src/components/Versions/styles.ts @@ -8,12 +8,12 @@ export const Heading = styled(Typography)` } `; -export const Spacer = styled('div')` - flex: 1 1 auto; - border-bottom: 1px dotted rgba(0, 0, 0, 0.2); - white-space: nowrap; - height: 0.5em; -`; +export const Spacer = styled('div')({ + flex: '1 1 auto', + borderBottom: '1px dotted rgba(0, 0, 0, 0.2)', + whiteSpace: 'nowrap', + height: '0.5em', +}); export const ListItemText = styled(MuiListItemText)` && { From 115be1bb6ec7f6e72fad1fddf92dc8d62267dd3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Herrera=20Guzm=C3=A1n?= Date: Mon, 15 Jul 2019 11:57:32 +0200 Subject: [PATCH 3/3] refactor: move cascaded CSS from templates to JS objects --- src/components/ActionBar/styles.ts | 28 ++-- src/components/Author/styles.ts | 24 +-- src/components/AutoComplete/styles.tsx | 28 ++-- src/components/CopyToClipBoard/styles.ts | 42 +++--- src/components/Dependencies/styles.ts | 48 +++--- src/components/DetailContainer/styles.ts | 10 +- src/components/DetailSidebar/styles.ts | 42 +++--- src/components/Developers/styles.ts | 42 +++--- src/components/Dist/styles.ts | 48 +++--- src/components/Engines/styles.ts | 22 +-- src/components/Footer/styles.ts | 72 ++++----- src/components/Header/styles.ts | 108 ++++++------- src/components/Help/styles.ts | 22 +-- src/components/Icon/styles.ts | 12 +- src/components/Install/styles.ts | 32 ++-- src/components/Layout/Layout.tsx | 18 +-- src/components/NotFound/styles.ts | 22 +-- src/components/Package/styles.ts | 150 +++++++++---------- src/components/RegistryInfoContent/styles.ts | 10 +- src/components/RegistryInfoDialog/styles.ts | 24 +-- src/components/Repository/styles.ts | 58 +++---- src/components/Spinner/styles.ts | 10 +- src/components/Tag/styles.ts | 22 +-- src/components/UpLinks/styles.ts | 24 +-- src/components/Versions/styles.ts | 24 +-- src/pages/version/styles.ts | 14 +- 26 files changed, 478 insertions(+), 478 deletions(-) diff --git a/src/components/ActionBar/styles.ts b/src/components/ActionBar/styles.ts index d71e5a0..8ef987c 100644 --- a/src/components/ActionBar/styles.ts +++ b/src/components/ActionBar/styles.ts @@ -4,18 +4,18 @@ import ListItem from '@material-ui/core/ListItem'; import colors from '../../utils/styles/colors'; -export const ActionListItem = styled(ListItem)` - && { - padding-top: 0; - padding-left: 0; - padding-right: 0; - } -`; +export const ActionListItem = styled(ListItem)({ + '&&': { + paddingTop: 0, + paddingLeft: 0, + paddingRight: 0, + }, +}); -export const Fab = styled(MuiFab)` - && { - background-color: ${colors.primary}; - color: ${colors.white}; - margin-right: 10px; - } -`; +export const Fab = styled(MuiFab)({ + '&&': { + backgroundColor: colors.primary, + color: colors.white, + marginRight: '10px', + }, +}); diff --git a/src/components/Author/styles.ts b/src/components/Author/styles.ts index 22eb7e3..9fec8fc 100644 --- a/src/components/Author/styles.ts +++ b/src/components/Author/styles.ts @@ -2,15 +2,15 @@ import styled from 'react-emotion'; import ListItem from '@material-ui/core/ListItem'; import Typography from '@material-ui/core/Typography'; -export const Heading = styled(Typography)` - && { - font-weight: 700; - text-transform: capitalize; - } -`; -export const AuthorListItem = styled(ListItem)` - && { - padding-left: 0; - padding-right: 0; - } -`; +export const Heading = styled(Typography)({ + '&&': { + fontWeight: 700, + textTransform: 'capitalize', + }, +}); +export const AuthorListItem = styled(ListItem)({ + '&&': { + paddingLeft: 0, + paddingRight: 0, + }, +}); diff --git a/src/components/AutoComplete/styles.tsx b/src/components/AutoComplete/styles.tsx index dab79fb..9c296f4 100644 --- a/src/components/AutoComplete/styles.tsx +++ b/src/components/AutoComplete/styles.tsx @@ -8,14 +8,14 @@ export interface InputFieldProps { color: string; } -export const Wrapper = styled('div')` - && { - width: 100%; - height: 32px; - position: relative; - z-index: 1; - } -`; +export const Wrapper = styled('div')({ + '&&': { + width: '100%', + height: '32px', + position: 'relative', + zIndex: 1, + }, +}); export const InputField: React.FC = ({ color, ...others }) => ( = ({ color, ...others }) => ( /> ); -export const SuggestionContainer = styled(Paper)` - && { - max-height: 500px; - overflow-y: auto; - } -`; +export const SuggestionContainer = styled(Paper)({ + '&&': { + maxHeight: '500px', + overflowY: 'auto', + }, +}); diff --git a/src/components/CopyToClipBoard/styles.ts b/src/components/CopyToClipBoard/styles.ts index 8efd1b8..deb75fa 100644 --- a/src/components/CopyToClipBoard/styles.ts +++ b/src/components/CopyToClipBoard/styles.ts @@ -1,26 +1,26 @@ import IconButton from '@material-ui/core/IconButton'; import styled from 'react-emotion'; -export const ClipBoardCopy = styled('div')` - && { - display: flex; - align-items: center; - justify-content: space-between; - } -`; +export const ClipBoardCopy = styled('div')({ + '&&': { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + }, +}); -export const ClipBoardCopyText = styled('span')` - && { - display: inline-block; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - height: 21px; - } -`; +export const ClipBoardCopyText = styled('span')({ + '&&': { + display: 'inline-block', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + height: '21px', + }, +}); -export const CopyIcon = styled(IconButton)` - && { - margin: 0 0 0 10px; - } -`; +export const CopyIcon = styled(IconButton)({ + '&&': { + margin: '0 0 0 10px', + }, +}); diff --git a/src/components/Dependencies/styles.ts b/src/components/Dependencies/styles.ts index e333e78..545494c 100644 --- a/src/components/Dependencies/styles.ts +++ b/src/components/Dependencies/styles.ts @@ -3,30 +3,30 @@ import Card from '@material-ui/core/Card'; import Typography from '@material-ui/core/Typography'; import Chip from '@material-ui/core/Chip'; -export const CardWrap = styled(Card)` - && { - margin: 0 0 16px; - } -`; +export const CardWrap = styled(Card)({ + '&&': { + margin: '0 0 16px', + }, +}); -export const Heading = styled(Typography)` - && { - font-weight: 700; - text-transform: capitalize; - } -`; +export const Heading = styled(Typography)({ + '&&': { + fontWeight: 700, + textTransform: 'capitalize', + }, +}); -export const Tags = styled('div')` - && { - display: flex; - justify-content: start; - flex-wrap: wrap; - margin: 0 -5px; - } -`; +export const Tags = styled('div')({ + '&&': { + display: 'flex', + justifyContent: 'start', + flexWrap: 'wrap', + margin: '0 -5px', + }, +}); -export const Tag = styled(Chip)` - && { - margin: 5px; - } -`; +export const Tag = styled(Chip)({ + '&&': { + margin: '5px', + }, +}); diff --git a/src/components/DetailContainer/styles.ts b/src/components/DetailContainer/styles.ts index acf0122..af9dc91 100644 --- a/src/components/DetailContainer/styles.ts +++ b/src/components/DetailContainer/styles.ts @@ -1,7 +1,7 @@ import styled from 'react-emotion'; -export const Content = styled('div')` - && { - padding: 15px; - } -`; +export const Content = styled('div')({ + '&&': { + padding: '15px', + }, +}); diff --git a/src/components/DetailSidebar/styles.ts b/src/components/DetailSidebar/styles.ts index b6b46f1..86252a1 100644 --- a/src/components/DetailSidebar/styles.ts +++ b/src/components/DetailSidebar/styles.ts @@ -5,26 +5,26 @@ import ListItemText from '@material-ui/core/ListItemText'; import colors from '../../utils/styles/colors'; -export const TitleListItem = styled(ListItem)` - && { - padding-left: 0; - padding-right: 0; - padding-bottom: 0; - } -`; +export const TitleListItem = styled(ListItem)({ + '&&': { + paddingLeft: 0, + paddingRight: 0, + paddingBottom: 0, + }, +}); -export const TitleListItemText = styled(ListItemText)` - && { - padding-left: 0; - padding-right: 0; - padding-top: 8px; - } -`; +export const TitleListItemText = styled(ListItemText)({ + '&&': { + paddingLeft: 0, + paddingRight: 0, + paddingTop: '8px', + }, +}); -export const TitleAvatar = styled(Avatar)` - && { - color: ${colors.greySuperLight}; - background-color: ${colors.primary}; - text-transform: capitalize; - } -`; +export const TitleAvatar = styled(Avatar)({ + '&&': { + color: colors.greySuperLight, + backgroundColor: colors.primary, + textTransform: 'capitalize', + }, +}); diff --git a/src/components/Developers/styles.ts b/src/components/Developers/styles.ts index cb2b10f..e4dc92b 100644 --- a/src/components/Developers/styles.ts +++ b/src/components/Developers/styles.ts @@ -9,26 +9,26 @@ export const Details = styled('span')({ alignItems: 'center', }); -export const Content = styled('div')` - margin: 10px 0 10px 0; - display: flex; - flex-wrap: wrap; - > * { - margin: 5px; - } -`; +export const Content = styled('div')({ + margin: '10px 0 10px 0', + display: 'flex', + flexWrap: 'wrap', + '> *': { + margin: '5px', + }, +}); -export const Heading = styled(Typography)` - && { - font-weight: 700; - margin-bottom: 10px; - text-transform: capitalize; - } -`; +export const Heading = styled(Typography)({ + '&&': { + fontWeight: 700, + marginBottom: '10px', + textTransform: 'capitalize', + }, +}); -export const Fab = styled(MuiFab)` - && { - background-color: ${colors.primary}; - color: ${colors.white}; - } -`; +export const Fab = styled(MuiFab)({ + '&&': { + backgroundColor: colors.primary, + color: colors.white, + }, +}); diff --git a/src/components/Dist/styles.ts b/src/components/Dist/styles.ts index 4aac11c..4100799 100644 --- a/src/components/Dist/styles.ts +++ b/src/components/Dist/styles.ts @@ -6,30 +6,30 @@ import Typography from '@material-ui/core/Typography'; import colors from '../../utils/styles/colors'; -export const Heading = styled(Typography)` - && { - font-weight: 700; - text-transform: capitalize; - } -`; +export const Heading = styled(Typography)({ + '&&': { + fontWeight: 700, + textTransform: 'capitalize', + }, +}); -export const DistListItem = styled(ListItem)` - && { - padding-left: 0; - padding-right: 0; - } -`; +export const DistListItem = styled(ListItem)({ + '&&': { + paddingLeft: 0, + paddingRight: 0, + }, +}); -export const DistChips = styled(Chip)` - && { - margin-right: 5px; - text-transform: capitalize; - } -`; +export const DistChips = styled(Chip)({ + '&&': { + marginRight: '5px', + textTransform: 'capitalize', + }, +}); -export const DownloadButton = styled(MuiFab)` - && { - background-color: ${colors.primary}; - color: ${colors.white}; - } -`; +export const DownloadButton = styled(MuiFab)({ + '&&': { + backgroundColor: colors.primary, + color: colors.white, + }, +}); diff --git a/src/components/Engines/styles.ts b/src/components/Engines/styles.ts index 1436c97..69b3d24 100644 --- a/src/components/Engines/styles.ts +++ b/src/components/Engines/styles.ts @@ -2,15 +2,15 @@ import styled from 'react-emotion'; import ListItem from '@material-ui/core/ListItem'; import Typography from '@material-ui/core/Typography'; -export const Heading = styled(Typography)` - && { - font-weight: 700; - text-transform: capitalize; - } -`; +export const Heading = styled(Typography)({ + '&&': { + fontWeight: 700, + textTransform: 'capitalize', + }, +}); -export const EngineListItem = styled(ListItem)` - && { - padding-left: 0; - } -`; +export const EngineListItem = styled(ListItem)({ + '&&': { + paddingLeft: 0, + }, +}); diff --git a/src/components/Footer/styles.ts b/src/components/Footer/styles.ts index 6eb7535..7a63fa9 100644 --- a/src/components/Footer/styles.ts +++ b/src/components/Footer/styles.ts @@ -3,15 +3,15 @@ import mq from '../../utils/styles/media'; import Icon from '../Icon/Icon'; import colors from '../../utils/styles/colors'; -export const Wrapper = styled('div')` - && { - background: ${colors.snow}; - border-top: 1px solid ${colors.greyGainsboro}; - color: ${colors.nobel01}; - font-size: 14px; - padding: 20px; - } -`; +export const Wrapper = styled('div')({ + '&&': { + background: colors.snow, + borderTop: `1px solid ${colors.greyGainsboro}`, + color: colors.nobel01, + fontSize: '14px', + padding: '20px', + }, +}); export const Inner = styled('div')` && { @@ -50,24 +50,24 @@ export const Left = styled('div')` } `; -export const Right = styled(Left)` - && { - display: flex; - } -`; +export const Right = styled(Left)({ + '&&': { + display: 'flex', + }, +}); -export const ToolTip = styled('span')` - && { - position: relative; - height: 18px; - } -`; +export const ToolTip = styled('span')({ + '&&': { + position: 'relative', + height: '18px', + }, +}); -export const Earth = styled(Icon)` - && { - padding: 0 10px; - } -`; +export const Earth = styled(Icon)({ + '&&': { + padding: '0 10px', + }, +}); export const Flags = styled('span')` && { @@ -96,17 +96,17 @@ export const Flags = styled('span')` } `; -export const Love = styled('span')` - && { - color: ${colors.love}; - padding: 0 5px; - } -`; +export const Love = styled('span')({ + '&&': { + color: colors.love, + padding: '0 5px', + }, +}); -export const Flag = styled(Icon)` - && { - padding: 0 5px; - } -`; +export const Flag = styled(Icon)({ + '&&': { + padding: '0 5px', + }, +}); export const Logo = Flag; diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts index cfaba58..3c4ad73 100644 --- a/src/components/Header/styles.ts +++ b/src/components/Header/styles.ts @@ -6,67 +6,67 @@ import IconButton from '@material-ui/core/IconButton'; import colors from '../../utils/styles/colors'; import mq from '../../utils/styles/media'; -export const InnerNavBar = styled(Toolbar)` - && { - justify-content: space-between; - align-items: center; - padding: 0 15px; - } -`; +export const InnerNavBar = styled(Toolbar)({ + '&&': { + justifyContent: 'space-between', + alignItems: 'center', + padding: '0 15px', + }, +}); -export const Greetings = styled('span')` - && { - margin: 0 5px 0 0; - } -`; +export const Greetings = styled('span')({ + '&&': { + margin: '0 5px 0 0', + }, +}); -export const RightSide = styled(Toolbar)` - && { - display: flex; - padding: 0; - } -`; +export const RightSide = styled(Toolbar)({ + '&&': { + display: 'flex', + padding: 0, + }, +}); -export const LeftSide = styled(RightSide)` - && { - flex: 1; - } -`; +export const LeftSide = styled(RightSide)({ + '&&': { + flex: 1, + }, +}); -export const MobileNavBar = styled('div')` - && { - align-items: center; - display: flex; - border-bottom: 1px solid ${colors.greyLight}; - padding: 8px; - position: relative; - } -`; +export const MobileNavBar = styled('div')({ + '&&': { + alignItems: 'center', + display: 'flex', + borderBottom: `1px solid ${colors.greyLight}`, + padding: '8px', + position: 'relative', + }, +}); -export const InnerMobileNavBar = styled('div')` - && { - border-radius: 4px; - background-color: ${colors.greyLight}; - color: ${colors.white}; - width: 100%; - padding: 0px 5px; - margin: 0 10px 0 0; - } -`; +export const InnerMobileNavBar = styled('div')({ + '&&': { + borderRadius: '4px', + backgroundColor: colors.greyLight, + color: colors.white, + width: '100%', + padding: '0px 5px', + margin: '0 10px 0 0', + }, +}); -export const IconSearchButton = styled(IconButton)` - && { - display: block; - } -`; +export const IconSearchButton = styled(IconButton)({ + '&&': { + display: 'block', + }, +}); -export const SearchWrapper = styled('div')` - && { - display: none; - max-width: 393px; - width: 100%; - } -`; +export const SearchWrapper = styled('div')({ + '&&': { + display: 'none', + maxWidth: '393px', + width: '100%', + }, +}); export const NavBar = styled(AppBar)` && { diff --git a/src/components/Help/styles.ts b/src/components/Help/styles.ts index d90121a..d68ec2c 100644 --- a/src/components/Help/styles.ts +++ b/src/components/Help/styles.ts @@ -2,15 +2,15 @@ import Card from '@material-ui/core/Card'; import Typography from '@material-ui/core/Typography'; import styled from 'react-emotion'; -export const CardStyled = styled(Card)` - && { - width: 600px; - margin: auto; - } -`; +export const CardStyled = styled(Card)({ + '&&': { + width: '600px', + margin: 'auto', + }, +}); -export const HelpTitle = styled(Typography)` - && { - margin-bottom: 20px; - } -`; +export const HelpTitle = styled(Typography)({ + '&&': { + marginBottom: '20px', + }, +}); diff --git a/src/components/Icon/styles.ts b/src/components/Icon/styles.ts index 366190e..1dba1b1 100644 --- a/src/components/Icon/styles.ts +++ b/src/components/Icon/styles.ts @@ -48,9 +48,9 @@ export const ImgWrapper: StyledOtherComponent< } `; -export const Img = styled('img')` - && { - width: 100%; - height: auto; - } -`; +export const Img = styled('img')({ + '&&': { + width: '100%', + height: 'auto', + }, +}); diff --git a/src/components/Install/styles.ts b/src/components/Install/styles.ts index 9ef365c..d76d538 100644 --- a/src/components/Install/styles.ts +++ b/src/components/Install/styles.ts @@ -3,21 +3,21 @@ import ListItem from '@material-ui/core/ListItem'; import Typography from '@material-ui/core/Typography'; import styled from 'react-emotion'; -export const Heading = styled(Typography)` - && { - font-weight: 700; - text-transform: capitalize; - } -`; +export const Heading = styled(Typography)({ + '&&': { + fontWeight: 700, + textTransform: 'capitalize', + }, +}); -export const InstallItem = styled(ListItem)` - && { - padding: 0; - } -`; +export const InstallItem = styled(ListItem)({ + '&&': { + padding: 0, + }, +}); -export const PackageMangerAvatar = styled(Avatar)` - && { - border-radius: 0px; - } -`; +export const PackageMangerAvatar = styled(Avatar)({ + '&&': { + borderRadius: '0px', + }, +}); diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 77ffba8..f8f9296 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -1,14 +1,14 @@ import styled, { css } from 'react-emotion'; -export const Content = styled('div')` - && { - background-color: #ffffff; - flex: 1; - display: flex; - position: relative; - flex-direction: column; - } -`; +export const Content = styled('div')({ + '&&': { + backgroundColor: '#ffffff', + flex: 1, + display: 'flex', + position: 'relative', + flexDirection: 'column', + }, +}); export const Container = styled('div')` && { diff --git a/src/components/NotFound/styles.ts b/src/components/NotFound/styles.ts index 01f3979..3647875 100644 --- a/src/components/NotFound/styles.ts +++ b/src/components/NotFound/styles.ts @@ -23,18 +23,18 @@ export const EmptyPackage = styled('img')({ margin: '0 auto', }); -export const Heading = styled(Typography)` - && { - color: #4b5e40; - } -`; +export const Heading = styled(Typography)({ + '&&': { + color: '#4b5e40', + }, +}); -export const List = styled(MuiList)` - && { - padding: 0; - color: #4b5e40; - } -`; +export const List = styled(MuiList)({ + '&&': { + padding: 0, + color: '#4b5e40', + }, +}); export const Card = styled(MuiCard)({ marginTop: '24px', diff --git a/src/components/Package/styles.ts b/src/components/Package/styles.ts index 2a51779..7650835 100644 --- a/src/components/Package/styles.ts +++ b/src/components/Package/styles.ts @@ -34,57 +34,57 @@ export const OverviewItem = styled('span')` } `; -export const Icon = styled(Ico)` - && { - margin: 2px 10px 0px 0; - fill: ${colors.greyLight2}; - } -`; +export const Icon = styled(Ico)({ + '&&': { + margin: '2px 10px 0px 0', + fill: colors.greyLight2, + }, +}); -export const Published = styled('span')` - && { - color: ${colors.greyLight2}; - margin: 0px 5px 0px 0px; - } -`; +export const Published = styled('span')({ + '&&': { + color: colors.greyLight2, + margin: '0px 5px 0px 0px', + }, +}); // @ts-ignore -export const Text = styled(Label)` - && { - font-size: 12px; - font-weight: 500; - color: ${colors.greyLight2}; - } -`; +export const Text = styled(Label)({ + '&&': { + fontSize: '12px', + fontWeight: 500, + color: colors.greyLight2, + }, +}); -export const Details = styled('span')` - && { - margin-left: 5px; - line-height: 1.5; - display: flex; - flex-direction: column; - } -`; +export const Details = styled('span')({ + '&&': { + marginLeft: '5px', + lineHeight: 1.5, + display: 'flex', + flexDirection: 'column', + }, +}); -export const Author = styled('div')` - && { - display: flex; - align-items: center; - } -`; +export const Author = styled('div')({ + '&&': { + display: 'flex', + alignItems: 'center', + }, +}); -export const Avatar = styled(Photo)` - && { - width: 20px; - height: 20px; - } -`; +export const Avatar = styled(Photo)({ + '&&': { + width: '20px', + height: '20px', + }, +}); -export const WrapperLink = styled(Link)` - && { - text-decoration: none; - } -`; +export const WrapperLink = styled(Link)({ + '&&': { + textDecoration: 'none', + }, +}); export const PackageTitle = styled('span')` && { @@ -106,31 +106,31 @@ export const PackageTitle = styled('span')` } `; -export const GridRightAligned = styled(Grid)` - && { - text-align: right; - } -`; +export const GridRightAligned = styled(Grid)({ + '&&': { + textAlign: 'right', + }, +}); -export const PackageList = styled(List)` - && { - padding: 12px 0 12px 0; +export const PackageList = styled(List)({ + '&&': { + padding: '12px 0 12px 0', - &:hover { - background-color: ${colors.greyLight3}; - } - } -`; + '&:hover': { + backgroundColor: colors.greyLight3, + }, + }, +}); -export const IconButton = styled(MuiIconButton)` - && { - padding: 6px; +export const IconButton = styled(MuiIconButton)({ + '&&': { + padding: '6px', - svg { - font-size: 16px; - } - } -`; + svg: { + fontSize: '16px', + }, + }, +}); export const TagContainer = styled('span')` && { @@ -143,17 +143,17 @@ export const TagContainer = styled('span')` } `; -export const PackageListItem = styled(ListItem)` - && { - padding-top: 0; - } -`; +export const PackageListItem = styled(ListItem)({ + '&&': { + paddingTop: 0, + }, +}); -export const PackageListItemText = styled(ListItemText)` - && { - padding-right: 0; - } -`; +export const PackageListItemText = styled(ListItemText)({ + '&&': { + paddingRight: 0, + }, +}); export const Description = styled(Typography)({ color: colors.greyDark2, diff --git a/src/components/RegistryInfoContent/styles.ts b/src/components/RegistryInfoContent/styles.ts index 14d5180..08d82d8 100644 --- a/src/components/RegistryInfoContent/styles.ts +++ b/src/components/RegistryInfoContent/styles.ts @@ -1,7 +1,7 @@ import styled from 'react-emotion'; -export const CommandContainer = styled('div')` - && { - padding-top: 20px; - } -`; +export const CommandContainer = styled('div')({ + '&&': { + paddingTop: '20px', + }, +}); diff --git a/src/components/RegistryInfoDialog/styles.ts b/src/components/RegistryInfoDialog/styles.ts index d394d41..a327748 100644 --- a/src/components/RegistryInfoDialog/styles.ts +++ b/src/components/RegistryInfoDialog/styles.ts @@ -4,16 +4,16 @@ import DialogContent from '@material-ui/core/DialogContent'; import colors from '../../utils/styles/colors'; import { fontSize } from '../../utils/styles/sizes'; -export const Title = styled(DialogTitle)` - && { - background-color: ${colors.primary}; - color: ${colors.white}; - font-size: ${fontSize.lg}; - } -`; +export const Title = styled(DialogTitle)({ + '&&': { + backgroundColor: colors.primary, + color: colors.white, + fontSize: fontSize.lg, + }, +}); -export const Content = styled(DialogContent)` - && { - padding: 0 24px; - } -`; +export const Content = styled(DialogContent)({ + '&&': { + padding: '0 24px', + }, +}); diff --git a/src/components/Repository/styles.ts b/src/components/Repository/styles.ts index 51e477b..6fa73fd 100644 --- a/src/components/Repository/styles.ts +++ b/src/components/Repository/styles.ts @@ -6,36 +6,36 @@ import Typography from '@material-ui/core/Typography'; import Github from '../../icons/GitHub'; import colors from '../../utils/styles/colors'; -export const Heading = styled(Typography)` - && { - font-weight: 700; - text-transform: capitalize; - } -`; +export const Heading = styled(Typography)({ + '&&': { + fontWeight: 700, + textTransform: 'capitalize', + }, +}); -export const GridRepo = styled(Grid)` - && { - align-items: center; - } -`; +export const GridRepo = styled(Grid)({ + '&&': { + alignItems: 'center', + }, +}); -export const GithubLink = styled('a')` - && { - color: ${colors.primary}; - } -`; +export const GithubLink = styled('a')({ + '&&': { + color: colors.primary, + }, +}); -export const GithubLogo = styled(Github)` - && { - font-size: 40px; - color: ${colors.primary}; - background-color: ${colors.greySuperLight}; - } -`; +export const GithubLogo = styled(Github)({ + '&&': { + fontSize: '40px', + color: colors.primary, + backgroundColor: colors.greySuperLight, + }, +}); -export const RepositoryListItem = styled(ListItem)` - && { - padding-left: 0; - padding-right: 0; - } -`; +export const RepositoryListItem = styled(ListItem)({ + '&&': { + paddingLeft: 0, + paddingRight: 0, + }, +}); diff --git a/src/components/Spinner/styles.ts b/src/components/Spinner/styles.ts index b86364a..c342171 100644 --- a/src/components/Spinner/styles.ts +++ b/src/components/Spinner/styles.ts @@ -20,8 +20,8 @@ export const Wrapper = styled('div')` } `; -export const Circular = styled(CircularProgress)` - && { - color: ${colors.primary}; - } -`; +export const Circular = styled(CircularProgress)({ + '&&': { + color: colors.primary, + }, +}); diff --git a/src/components/Tag/styles.ts b/src/components/Tag/styles.ts index 23f77a4..f41dbad 100644 --- a/src/components/Tag/styles.ts +++ b/src/components/Tag/styles.ts @@ -1,13 +1,13 @@ import styled from 'react-emotion'; -export const Wrapper = styled('span')` - && { - vertical-align: middle; - line-height: 22px; - border-radius: 2px; - color: #485a3e; - background-color: #f3f4f2; - padding: 0.22rem 0.4rem; - margin: 8px 8px 0 0; - } -`; +export const Wrapper = styled('span')({ + '&&': { + verticalAlign: 'middle', + lineHeight: '22px', + borderRadius: '2px', + color: '#485a3e', + backgroundColor: '#f3f4f2', + padding: '0.22rem 0.4rem', + margin: '8px 8px 0 0', + }, +}); diff --git a/src/components/UpLinks/styles.ts b/src/components/UpLinks/styles.ts index e6b005a..1dd65c9 100644 --- a/src/components/UpLinks/styles.ts +++ b/src/components/UpLinks/styles.ts @@ -2,11 +2,11 @@ import styled from 'react-emotion'; import Typography from '@material-ui/core/Typography'; import { default as MuiListItemText } from '@material-ui/core/ListItemText'; -export const Heading = styled(Typography)` - && { - font-weight: 700; - } -`; +export const Heading = styled(Typography)({ + '&&': { + fontWeight: 700, + }, +}); export const Spacer = styled('div')({ flex: '1 1 auto', @@ -15,10 +15,10 @@ export const Spacer = styled('div')({ height: '0.5em', }); -export const ListItemText = styled(MuiListItemText)` - && { - flex: none; - color: black; - opacity: 0.6; - } -`; +export const ListItemText = styled(MuiListItemText)({ + '&&': { + flex: 'none', + color: 'black', + opacity: 0.6, + }, +}); diff --git a/src/components/Versions/styles.ts b/src/components/Versions/styles.ts index e6b005a..1dd65c9 100644 --- a/src/components/Versions/styles.ts +++ b/src/components/Versions/styles.ts @@ -2,11 +2,11 @@ import styled from 'react-emotion'; import Typography from '@material-ui/core/Typography'; import { default as MuiListItemText } from '@material-ui/core/ListItemText'; -export const Heading = styled(Typography)` - && { - font-weight: 700; - } -`; +export const Heading = styled(Typography)({ + '&&': { + fontWeight: 700, + }, +}); export const Spacer = styled('div')({ flex: '1 1 auto', @@ -15,10 +15,10 @@ export const Spacer = styled('div')({ height: '0.5em', }); -export const ListItemText = styled(MuiListItemText)` - && { - flex: none; - color: black; - opacity: 0.6; - } -`; +export const ListItemText = styled(MuiListItemText)({ + '&&': { + flex: 'none', + color: 'black', + opacity: 0.6, + }, +}); diff --git a/src/pages/version/styles.ts b/src/pages/version/styles.ts index bd97624..9c8ffd3 100644 --- a/src/pages/version/styles.ts +++ b/src/pages/version/styles.ts @@ -3,10 +3,10 @@ import DialogTitle from '@material-ui/core/DialogTitle'; import colors from '../../utils/styles/colors'; import { fontSize } from '../../utils/styles/sizes'; -export const Title = styled(DialogTitle)` - && { - background-color: ${colors.primary}; - color: ${colors.white}; - font-size: ${fontSize.lg}; - } -`; +export const Title = styled(DialogTitle)({ + '&&': { + backgroundColor: colors.primary, + color: colors.white, + fontSize: fontSize.lg, + }, +});