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

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

Author: juanpicado

package.json

@@ -60,7 +60,6 @@
     "localstorage-memory": "1.0.3",
     "mini-css-extract-plugin": "0.7.0",
     "node-mocks-http": "1.7.3",
-    "node-sass": "4.12.0",
     "normalize.css": "8.0.1",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "ora": "3.4.0",
@@ -76,16 +75,13 @@
     "react-router-dom": "4.3.1",
     "resolve-url-loader": "3.0.1",
     "rimraf": "2.6.3",
-    "sass-loader": "7.1.0",
     "source-map-loader": "0.2.4",
     "standard-version": "4.4.0",
     "style-loader": "0.23.1",
     "stylelint": "10.1.0",
     "stylelint-config-recommended": "2.2.0",
-    "stylelint-config-recommended-scss": "3.3.0",
     "stylelint-config-styled-components": "0.1.1",
     "stylelint-processor-styled-components": "1.8.0",
-    "stylelint-scss": "3.8.0",
     "stylelint-webpack-plugin": "0.10.5",
     "supertest": "4.0.2",
     "typeface-roboto": "0.0.54",

src/App/App.tsx

@@ -10,8 +10,8 @@ import Header from '../components/Header';
 import { Container, Content } from '../components/Layout';
 import RouterApp from '../router';
 import API from '../utils/api';
-import '../styles/typeface-roboto.scss';
-import '../styles/main.scss';
+import '../styles/typeface-roboto.css';
+import '../utils/styles/global';
 import 'normalize.css';
 import Footer from '../components/Footer';
 import { FormError } from 'src/components/Login/Login';
@@ -66,13 +66,7 @@ export default class App extends Component<{}, AppStateInterface> {
     return (
       // @ts-ignore
       <Container isLoading={isLoading}>
-        {isLoading ? (
-          <Loading />
-        ) : (
-          <>
-            <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>
-          </>
-        )}
+        {isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
         {this.renderLoginModal()}
       </Container>
     );
@@ -138,7 +132,7 @@ export default class App extends Component<{}, AppStateInterface> {
     if (username && token) {
       storage.setItem('username', username);
       storage.setItem('token', token);
-      this.setLoggedUser(username, token);
+      this.setLoggedUser(username);
     }
 
     if (error) {
@@ -149,7 +143,7 @@ export default class App extends Component<{}, AppStateInterface> {
     }
   };
 
-  public setLoggedUser = (username, token) => {
+  public setLoggedUser = username => {
     this.setState({
       user: {
         username,

src/App/app.scss

@@ -0,0 +1,17 @@
+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 alertErrorMsg = css`
+  display: flex;
+  align-items: center;
+`;
+
+export const alertIcon = css({
+  opacity: 0.9,
+  marginRight: '8px',
+});

src/App/styles.ts

@@ -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.tsx

@@ -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/Login/login.scss

@@ -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/Login/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}
+  }
+`;