Merge branch '4.x-master' into 4.x-adds-unit-tests-for-repository-component

.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,

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/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)`
+export const ActionListItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding-top: 0;
+    paddingTop: 0,
-    padding-left: 0;
+    paddingLeft: 0,
-    padding-right: 0;
+    paddingRight: 0,
-  }
+  },
-`;
+});
 
-export const Fab = styled(MuiFab)`
+export const Fab = styled(MuiFab)({
-  && {
+  '&&': {
-    background-color: ${colors.primary};
+    backgroundColor: colors.primary,
-    color: ${colors.white};
+    color: colors.white,
-    margin-right: 10px;
+    marginRight: '10px',
-  }
+  },
-`;
+});

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)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
-export const AuthorListItem = styled(ListItem)`
+export const AuthorListItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding-left: 0;
+    paddingLeft: 0,
-    padding-right: 0;
+    paddingRight: 0,
-  }
+  },
-`;
+});

src/components/AutoComplete/styles.tsx

@@ -8,14 +8,14 @@ export interface InputFieldProps {
   color: string;
 }
 
-export const Wrapper = styled('div')`
+export const Wrapper = styled('div')({
-  && {
+  '&&': {
-    width: 100%;
+    width: '100%',
-    height: 32px;
+    height: '32px',
-    position: relative;
+    position: 'relative',
-    z-index: 1;
+    zIndex: 1,
-  }
+  },
-`;
+});
 
 export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => (
   <TextField
@@ -51,9 +51,9 @@ export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => (
   />
 );
 
-export const SuggestionContainer = styled(Paper)`
+export const SuggestionContainer = styled(Paper)({
-  && {
+  '&&': {
-    max-height: 500px;
+    maxHeight: '500px',
-    overflow-y: auto;
+    overflowY: 'auto',
-  }
+  },
-`;
+});

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')`
+export const ClipBoardCopy = styled('div')({
-  && {
+  '&&': {
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    justify-content: space-between;
+    justifyContent: 'space-between',
-  }
+  },
-`;
+});
 
-export const ClipBoardCopyText = styled('span')`
+export const ClipBoardCopyText = styled('span')({
-  && {
+  '&&': {
-    display: inline-block;
+    display: 'inline-block',
-    text-overflow: ellipsis;
+    textOverflow: 'ellipsis',
-    overflow: hidden;
+    overflow: 'hidden',
-    white-space: nowrap;
+    whiteSpace: 'nowrap',
-    height: 21px;
+    height: '21px',
-  }
+  },
-`;
+});
 
-export const CopyIcon = styled(IconButton)`
+export const CopyIcon = styled(IconButton)({
-  && {
+  '&&': {
-    margin: 0 0 0 10px;
+    margin: '0 0 0 10px',
-  }
+  },
-`;
+});

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)`
+export const CardWrap = styled(Card)({
-  && {
+  '&&': {
-    margin: 0 0 16px;
+    margin: '0 0 16px',
-  }
+  },
-`;
+});
 
-export const Heading = styled(Typography)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
 
-export const Tags = styled('div')`
+export const Tags = styled('div')({
-  && {
+  '&&': {
-    display: flex;
+    display: 'flex',
-    justify-content: start;
+    justifyContent: 'start',
-    flex-wrap: wrap;
+    flexWrap: 'wrap',
-    margin: 0 -5px;
+    margin: '0 -5px',
-  }
+  },
-`;
+});
 
-export const Tag = styled(Chip)`
+export const Tag = styled(Chip)({
-  && {
+  '&&': {
-    margin: 5px;
+    margin: '5px',
-  }
+  },
-`;
+});

src/components/DetailContainer/styles.ts

@@ -1,7 +1,7 @@
 import styled from 'react-emotion';
 
-export const Content = styled('div')`
+export const Content = styled('div')({
-  && {
+  '&&': {
-    padding: 15px;
+    padding: '15px',
-  }
+  },
-`;
+});

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)`
+export const TitleListItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding-left: 0;
+    paddingLeft: 0,
-    padding-right: 0;
+    paddingRight: 0,
-    padding-bottom: 0;
+    paddingBottom: 0,
-  }
+  },
-`;
+});
 
-export const TitleListItemText = styled(ListItemText)`
+export const TitleListItemText = styled(ListItemText)({
-  && {
+  '&&': {
-    padding-left: 0;
+    paddingLeft: 0,
-    padding-right: 0;
+    paddingRight: 0,
-    padding-top: 8px;
+    paddingTop: '8px',
-  }
+  },
-`;
+});
 
-export const TitleAvatar = styled(Avatar)`
+export const TitleAvatar = styled(Avatar)({
-  && {
+  '&&': {
-    color: ${colors.greySuperLight};
+    color: colors.greySuperLight,
-    background-color: ${colors.primary};
+    backgroundColor: colors.primary,
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});

src/components/Developers/styles.ts

@@ -3,32 +3,32 @@ 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')`
+export const Content = styled('div')({
-  margin: 10px 0 10px 0;
+  margin: '10px 0 10px 0',
-  display: flex;
+  display: 'flex',
-  flex-wrap: wrap;
+  flexWrap: 'wrap',
-  > * {
+  '> *': {
-    margin: 5px;
+    margin: '5px',
-  }
+  },
-`;
+});
 
-export const Heading = styled(Typography)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-    margin-bottom: 10px;
+    marginBottom: '10px',
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
 
-export const Fab = styled(MuiFab)`
+export const Fab = styled(MuiFab)({
-  && {
+  '&&': {
-    background-color: ${colors.primary};
+    backgroundColor: colors.primary,
-    color: ${colors.white};
+    color: colors.white,
-  }
+  },
-`;
+});

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)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
 
-export const DistListItem = styled(ListItem)`
+export const DistListItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding-left: 0;
+    paddingLeft: 0,
-    padding-right: 0;
+    paddingRight: 0,
-  }
+  },
-`;
+});
 
-export const DistChips = styled(Chip)`
+export const DistChips = styled(Chip)({
-  && {
+  '&&': {
-    margin-right: 5px;
+    marginRight: '5px',
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
 
-export const DownloadButton = styled(MuiFab)`
+export const DownloadButton = styled(MuiFab)({
-  && {
+  '&&': {
-    background-color: ${colors.primary};
+    backgroundColor: colors.primary,
-    color: ${colors.white};
+    color: colors.white,
-  }
+  },
-`;
+});

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)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
 
-export const EngineListItem = styled(ListItem)`
+export const EngineListItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding-left: 0;
+    paddingLeft: 0,
-  }
+  },
-`;
+});

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')`
+export const Wrapper = styled('div')({
-  && {
+  '&&': {
-    background: ${colors.snow};
+    background: colors.snow,
-    border-top: 1px solid ${colors.greyGainsboro};
+    borderTop: `1px solid ${colors.greyGainsboro}`,
-    color: ${colors.nobel01};
+    color: colors.nobel01,
-    font-size: 14px;
+    fontSize: '14px',
-    padding: 20px;
+    padding: '20px',
-  }
+  },
-`;
+});
 
 export const Inner = styled('div')`
   && {
@@ -50,24 +50,24 @@ export const Left = styled('div')`
   }
 `;
 
-export const Right = styled(Left)`
+export const Right = styled(Left)({
-  && {
+  '&&': {
-    display: flex;
+    display: 'flex',
-  }
+  },
-`;
+});
 
-export const ToolTip = styled('span')`
+export const ToolTip = styled('span')({
-  && {
+  '&&': {
-    position: relative;
+    position: 'relative',
-    height: 18px;
+    height: '18px',
-  }
+  },
-`;
+});
 
-export const Earth = styled(Icon)`
+export const Earth = styled(Icon)({
-  && {
+  '&&': {
-    padding: 0 10px;
+    padding: '0 10px',
-  }
+  },
-`;
+});
 
 export const Flags = styled('span')`
   && {
@@ -96,17 +96,17 @@ export const Flags = styled('span')`
   }
 `;
 
-export const Love = styled('span')`
+export const Love = styled('span')({
-  && {
+  '&&': {
-    color: ${colors.love};
+    color: colors.love,
-    padding: 0 5px;
+    padding: '0 5px',
-  }
+  },
-`;
+});
 
-export const Flag = styled(Icon)`
+export const Flag = styled(Icon)({
-  && {
+  '&&': {
-    padding: 0 5px;
+    padding: '0 5px',
-  }
+  },
-`;
+});
 
 export const Logo = Flag;

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)`
+export const InnerNavBar = styled(Toolbar)({
-  && {
+  '&&': {
-    justify-content: space-between;
+    justifyContent: 'space-between',
-    align-items: center;
+    alignItems: 'center',
-    padding: 0 15px;
+    padding: '0 15px',
-  }
+  },
-`;
+});
 
-export const Greetings = styled('span')`
+export const Greetings = styled('span')({
-  && {
+  '&&': {
-    margin: 0 5px 0 0;
+    margin: '0 5px 0 0',
-  }
+  },
-`;
+});
 
-export const RightSide = styled(Toolbar)`
+export const RightSide = styled(Toolbar)({
-  && {
+  '&&': {
-    display: flex;
+    display: 'flex',
-    padding: 0;
+    padding: 0,
-  }
+  },
-`;
+});
 
-export const LeftSide = styled(RightSide)`
+export const LeftSide = styled(RightSide)({
-  && {
+  '&&': {
-    flex: 1;
+    flex: 1,
-  }
+  },
-`;
+});
 
-export const MobileNavBar = styled('div')`
+export const MobileNavBar = styled('div')({
-  && {
+  '&&': {
-    align-items: center;
+    alignItems: 'center',
-    display: flex;
+    display: 'flex',
-    border-bottom: 1px solid ${colors.greyLight};
+    borderBottom: `1px solid ${colors.greyLight}`,
-    padding: 8px;
+    padding: '8px',
-    position: relative;
+    position: 'relative',
-  }
+  },
-`;
+});
 
-export const InnerMobileNavBar = styled('div')`
+export const InnerMobileNavBar = styled('div')({
-  && {
+  '&&': {
-    border-radius: 4px;
+    borderRadius: '4px',
-    background-color: ${colors.greyLight};
+    backgroundColor: colors.greyLight,
-    color: ${colors.white};
+    color: colors.white,
-    width: 100%;
+    width: '100%',
-    padding: 0px 5px;
+    padding: '0px 5px',
-    margin: 0 10px 0 0;
+    margin: '0 10px 0 0',
-  }
+  },
-`;
+});
 
-export const IconSearchButton = styled(IconButton)`
+export const IconSearchButton = styled(IconButton)({
-  && {
+  '&&': {
-    display: block;
+    display: 'block',
-  }
+  },
-`;
+});
 
-export const SearchWrapper = styled('div')`
+export const SearchWrapper = styled('div')({
-  && {
+  '&&': {
-    display: none;
+    display: 'none',
-    max-width: 393px;
+    maxWidth: '393px',
-    width: 100%;
+    width: '100%',
-  }
+  },
-`;
+});
 
 export const NavBar = styled(AppBar)`
   && {

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)`
+export const CardStyled = styled(Card)({
-  && {
+  '&&': {
-    width: 600px;
+    width: '600px',
-    margin: auto;
+    margin: 'auto',
-  }
+  },
-`;
+});
 
-export const HelpTitle = styled(Typography)`
+export const HelpTitle = styled(Typography)({
-  && {
+  '&&': {
-    margin-bottom: 20px;
+    marginBottom: '20px',
-  }
+  },
-`;
+});

src/components/Icon/styles.ts

@@ -48,9 +48,9 @@ export const ImgWrapper: StyledOtherComponent<
   }
 `;
 
-export const Img = styled('img')`
+export const Img = styled('img')({
-  && {
+  '&&': {
-    width: 100%;
+    width: '100%',
-    height: auto;
+    height: 'auto',
-  }
+  },
-`;
+});

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)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
 
-export const InstallItem = styled(ListItem)`
+export const InstallItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding: 0;
+    padding: 0,
-  }
+  },
-`;
+});
 
-export const PackageMangerAvatar = styled(Avatar)`
+export const PackageMangerAvatar = styled(Avatar)({
-  && {
+  '&&': {
-    border-radius: 0px;
+    borderRadius: '0px',
-  }
+  },
-`;
+});

src/components/Layout/Layout.tsx

@@ -1,14 +1,14 @@
 import styled, { css } from 'react-emotion';
 
-export const Content = styled('div')`
+export const Content = styled('div')({
-  && {
+  '&&': {
-    background-color: #ffffff;
+    backgroundColor: '#ffffff',
-    flex: 1;
+    flex: 1,
-    display: flex;
+    display: 'flex',
-    position: relative;
+    position: 'relative',
-    flex-direction: column;
+    flexDirection: 'column',
-  }
+  },
-`;
+});
 
 export const Container = styled('div')`
   && {

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,39 +3,39 @@ 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)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    color: #4b5e40;
+    color: '#4b5e40',
-  }
+  },
-`;
+});
 
-export const List = styled(MuiList)`
+export const List = styled(MuiList)({
-  && {
+  '&&': {
-    padding: 0;
+    padding: 0,
-    color: #4b5e40;
+    color: '#4b5e40',
-  }
+  },
-`;
+});
 
-export const Card = styled(MuiCard)`
+export const Card = styled(MuiCard)({
-  margin-top: 24px;
+  marginTop: '24px',
-`;
+});

src/components/Package/styles.ts

@@ -34,57 +34,57 @@ export const OverviewItem = styled('span')`
   }
 `;
 
-export const Icon = styled(Ico)`
+export const Icon = styled(Ico)({
-  && {
+  '&&': {
-    margin: 2px 10px 0px 0;
+    margin: '2px 10px 0px 0',
-    fill: ${colors.greyLight2};
+    fill: colors.greyLight2,
-  }
+  },
-`;
+});
 
-export const Published = styled('span')`
+export const Published = styled('span')({
-  && {
+  '&&': {
-    color: ${colors.greyLight2};
+    color: colors.greyLight2,
-    margin: 0px 5px 0px 0px;
+    margin: '0px 5px 0px 0px',
-  }
+  },
-`;
+});
 
 // @ts-ignore
-export const Text = styled(Label)`
+export const Text = styled(Label)({
-  && {
+  '&&': {
-    font-size: 12px;
+    fontSize: '12px',
-    font-weight: 500;
+    fontWeight: 500,
-    color: ${colors.greyLight2};
+    color: colors.greyLight2,
-  }
+  },
-`;
+});
 
-export const Details = styled('span')`
+export const Details = styled('span')({
-  && {
+  '&&': {
-    margin-left: 5px;
+    marginLeft: '5px',
-    line-height: 1.5;
+    lineHeight: 1.5,
-    display: flex;
+    display: 'flex',
-    flex-direction: column;
+    flexDirection: 'column',
-  }
+  },
-`;
+});
 
-export const Author = styled('div')`
+export const Author = styled('div')({
-  && {
+  '&&': {
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-  }
+  },
-`;
+});
 
-export const Avatar = styled(Photo)`
+export const Avatar = styled(Photo)({
-  && {
+  '&&': {
-    width: 20px;
+    width: '20px',
-    height: 20px;
+    height: '20px',
-  }
+  },
-`;
+});
 
-export const WrapperLink = styled(Link)`
+export const WrapperLink = styled(Link)({
-  && {
+  '&&': {
-    text-decoration: none;
+    textDecoration: 'none',
-  }
+  },
-`;
+});
 
 export const PackageTitle = styled('span')`
   && {
@@ -106,31 +106,31 @@ export const PackageTitle = styled('span')`
   }
 `;
 
-export const GridRightAligned = styled(Grid)`
+export const GridRightAligned = styled(Grid)({
-  && {
+  '&&': {
-    text-align: right;
+    textAlign: 'right',
-  }
+  },
-`;
+});
 
-export const PackageList = styled(List)`
+export const PackageList = styled(List)({
-  && {
+  '&&': {
-    padding: 12px 0 12px 0;
+    padding: '12px 0 12px 0',
 
-    &:hover {
+    '&:hover': {
-      background-color: ${colors.greyLight3};
+      backgroundColor: colors.greyLight3,
-    }
+    },
-  }
+  },
-`;
+});
 
-export const IconButton = styled(MuiIconButton)`
+export const IconButton = styled(MuiIconButton)({
-  && {
+  '&&': {
-    padding: 6px;
+    padding: '6px',
 
-    svg {
+    svg: {
-      font-size: 16px;
+      fontSize: '16px',
-    }
+    },
-  }
+  },
-`;
+});
 
 export const TagContainer = styled('span')`
   && {
@@ -143,20 +143,20 @@ export const TagContainer = styled('span')`
   }
 `;
 
-export const PackageListItem = styled(ListItem)`
+export const PackageListItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding-top: 0;
+    paddingTop: 0,
-  }
+  },
-`;
+});
 
-export const PackageListItemText = styled(ListItemText)`
+export const PackageListItemText = styled(ListItemText)({
-  && {
+  '&&': {
-    padding-right: 0;
+    paddingRight: 0,
-  }
+  },
-`;
+});
 
-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/RegistryInfoContent/styles.ts

@@ -1,7 +1,7 @@
 import styled from 'react-emotion';
 
-export const CommandContainer = styled('div')`
+export const CommandContainer = styled('div')({
-  && {
+  '&&': {
-    padding-top: 20px;
+    paddingTop: '20px',
-  }
+  },
-`;
+});

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)`
+export const Title = styled(DialogTitle)({
-  && {
+  '&&': {
-    background-color: ${colors.primary};
+    backgroundColor: colors.primary,
-    color: ${colors.white};
+    color: colors.white,
-    font-size: ${fontSize.lg};
+    fontSize: fontSize.lg,
-  }
+  },
-`;
+});
 
-export const Content = styled(DialogContent)`
+export const Content = styled(DialogContent)({
-  && {
+  '&&': {
-    padding: 0 24px;
+    padding: '0 24px',
-  }
+  },
-`;
+});

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)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
 
-export const GridRepo = styled(Grid)`
+export const GridRepo = styled(Grid)({
-  && {
+  '&&': {
-    align-items: center;
+    alignItems: 'center',
-  }
+  },
-`;
+});
 
-export const GithubLink = styled('a')`
+export const GithubLink = styled('a')({
-  && {
+  '&&': {
-    color: ${colors.primary};
+    color: colors.primary,
-  }
+  },
-`;
+});
 
-export const GithubLogo = styled(Github)`
+export const GithubLogo = styled(Github)({
-  && {
+  '&&': {
-    font-size: 40px;
+    fontSize: '40px',
-    color: ${colors.primary};
+    color: colors.primary,
-    background-color: ${colors.greySuperLight};
+    backgroundColor: colors.greySuperLight,
-  }
+  },
-`;
+});
 
-export const RepositoryListItem = styled(ListItem)`
+export const RepositoryListItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding-left: 0;
+    paddingLeft: 0,
-    padding-right: 0;
+    paddingRight: 0,
-  }
+  },
-`;
+});

src/components/Spinner/styles.ts

@@ -20,8 +20,8 @@ export const Wrapper = styled('div')`
   }
 `;
 
-export const Circular = styled(CircularProgress)`
+export const Circular = styled(CircularProgress)({
-  && {
+  '&&': {
-    color: ${colors.primary};
+    color: colors.primary,
-  }
+  },
-`;
+});

src/components/Tag/styles.ts

@@ -1,13 +1,13 @@
 import styled from 'react-emotion';
 
-export const Wrapper = styled('span')`
+export const Wrapper = styled('span')({
-  && {
+  '&&': {
-    vertical-align: middle;
+    verticalAlign: 'middle',
-    line-height: 22px;
+    lineHeight: '22px',
-    border-radius: 2px;
+    borderRadius: '2px',
-    color: #485a3e;
+    color: '#485a3e',
-    background-color: #f3f4f2;
+    backgroundColor: '#f3f4f2',
-    padding: 0.22rem 0.4rem;
+    padding: '0.22rem 0.4rem',
-    margin: 8px 8px 0 0;
+    margin: '8px 8px 0 0',
-  }
+  },
-`;
+});

src/components/UpLinks/styles.ts

@@ -2,23 +2,23 @@ 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)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-  }
+  },
-`;
+});
 
-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)({
-  && {
+  '&&': {
-    flex: none;
+    flex: 'none',
-    color: black;
+    color: 'black',
-    opacity: 0.6;
+    opacity: 0.6,
-  }
+  },
-`;
+});

src/components/Versions/styles.ts

@@ -2,23 +2,23 @@ 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)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-  }
+  },
-`;
+});
 
-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)({
-  && {
+  '&&': {
-    flex: none;
+    flex: 'none',
-    color: black;
+    color: 'black',
-    opacity: 0.6;
+    opacity: 0.6,
-  }
+  },
-`;
+});

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)`
+export const Title = styled(DialogTitle)({
-  && {
+  '&&': {
-    background-color: ${colors.primary};
+    backgroundColor: colors.primary,
-    color: ${colors.white};
+    color: colors.white,
-    font-size: ${fontSize.lg};
+    fontSize: fontSize.lg,
-  }
+  },
-`;
+});