Merge remote-tracking branch 'origin/4.x-master' into 89-fix-incorrect-logos-style

# Conflicts:
#	src/components/Login/__snapshots__/Login.test.tsx.snap

src/components/Login/Login.tsx

@@ -12,8 +12,7 @@ import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import { css } from 'emotion';
 
-// @ts-ignore
-import classes from './login.scss';
+import * as classes from './styles';
 
 interface FormFields {
   required: boolean;

src/components/Login/login.scss

@@ -1,22 +0,0 @@
-@import '../../styles/variables';
-
-.loginDialog {
-    min-width: 300px;
-}
-
-.loginError {
-    background-color: $red !important;
-    min-width: inherit !important;
-    margin-bottom: 10px !important;
-}
-
-.loginErrorMsg {
-    display: flex;
-    align-items: center;
-}
-
-.loginIcon {
-    opacity: 0.9;
-    margin-right: 8px;
-}
-

src/components/Login/styles.ts

@@ -0,0 +1,22 @@
+import { css } from 'emotion';
+import colors from '../../utils/styles/colors';
+
+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 loginErrorMsg = css`
+  display: flex;
+  align-items: center;
+`;
+
+export const loginIcon = css({
+  opacity: 0.9,
+  marginRight: '8px',
+});

src/components/PackageList/PackageList.tsx

@@ -7,8 +7,7 @@ import Help from '../Help';
 import { formatLicense } from '../../utils/package';
 import { PackageInterface } from '../Package/Package';
 
-// @ts-ignore
-import classes from './packageList.scss';
+import * as classes from './styles';
 
 interface Props {
   packages: PackageInterface[];

src/components/PackageList/packageList.scss

@@ -1,12 +0,0 @@
-@import '../../styles/mixins';
-
-.pkgContainer {
-  margin: 0;
-  padding: 0;
-
-  .listTitle {
-    font-weight: $font-weight-regular;
-    font-size: $font-size-xl;
-    margin: 0 0 10px 0;
-  }
-}

src/components/PackageList/styles.ts

@@ -0,0 +1,17 @@
+import { css } from 'emotion';
+import { fontWeight, fontSize } from '../../utils/styles/sizes';
+
+export const listTitle = css({
+  fontWeight: fontWeight.regular,
+  fontSize: fontSize.xl,
+  margin: `0 0 10px 0`,
+});
+
+export const pkgContainer = css`
+  margin: 0;
+  padding: 0;
+
+  & .listTitle {
+    ${listTitle}
+  }
+`;