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

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

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

@@ -1,16 +0,0 @@
-@import './styles/variables';
-
-.alertError {
-    background-color: $red !important;
-    min-width: inherit !important;
-}
-
-.alertErrorMsg {
-    display: flex;
-    align-items: center;
-}
-
-.alertIcon {
-    opacity: 0.9;
-    margin-right: 8px;
-}

src/App/styles.ts

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

src/pages/home/home.scss

@@ -1,16 +0,0 @@
-@import '../../styles/variables';
-
-.alertError {
-    background-color: $red !important;
-    min-width: inherit !important;
-}
-
-.alertErrorMsg {
-    display: flex;
-    align-items: center;
-}
-
-.alertIcon {
-    opacity: 0.9;
-    margin-right: 8px;
-}

src/styles/core.scss

@@ -1,22 +0,0 @@
-@import "variables";
-
-html,
-body {
-    height: 100%;
-}
-
-body {
-    font-family: $font-family-base;
-    font-size: $font-size-base;
-    color: $text-color;
-}
-
-ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-strong {
-    font-weight: $font-weight-semibold;
-}

src/styles/global.scss

@@ -1,47 +0,0 @@
-@import "variables";
-@import "mixins";
-
-:global {
-  .container {
-    padding: 15px;
-    flex: 1;
-
-    @include container-size;
-
-    .el-loading-spinner {
-      margin-top: 0 !important;
-    }
-  }
-
-  .content {
-    display: flex;
-  }
-
-  .page-full-height {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    overflow: hidden;
-  }
-
-  .el-button {
-    &:hover, &:focus {
-      color: $primary-color;
-      border-color: $primary-color;
-    }
-  }
-
-  .el-input__inner {
-    &:hover, &:focus {
-      border-color: $primary-color;
-    }
-  }
-
-  .el-dialog__headerbtn:hover .el-dialog__close {
-    color: $eclipse;
-  }
-
-  .package-list-items {
-    width: 100%;
-  }
-}

src/styles/main.scss

@@ -1,2 +0,0 @@
-@import "core";
-@import "global";

src/styles/mixins.scss

@@ -1,46 +0,0 @@
-@import "variables";
-
-@mixin border($direction, $width, $style, $color) {
-    border-#{$direction}: $width $style $color;
-}
-
-@mixin border-bottom-default($color) {
-    border-bottom: 1px solid $color;
-}
-
-@mixin searchBox {
-    width: 100%;
-    font-size: $font-size-md;
-    line-height: $line-height-xl;
-    border: none;
-    @include border-bottom-default($grey-light);
-    outline: none;
-
-    &:focus {
-        @include border-bottom-default($grey);
-    }
-}
-
-@mixin ellipsis {
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-@mixin fullSize {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-@mixin container-size {
-    @media screen and (min-width: $break-lg) {
-        max-width: $break-lg;
-        width: 100%;
-        margin-left: auto;
-        margin-right: auto;
-    }
-}

src/styles/variables.scss

@@ -1,65 +0,0 @@
-// Verdaccio
-// -------------------------
-
-$black:         #000;
-$white:         #fff;
-$red:           #d32f2f;
-$grey:          #808080;
-$grey-light:    #d3d3d3;
-$grey-dark:     #a9a9a9;
-
-$greyChateau:   #95989a;
-$greyGainsboro: #e3e3e3;
-$greyAthens:    #d3dddd;
-
-$eclipse:       #3c3c3c;
-$paleNavy:      #e4e8f1;
-$saltpan:       #f7f8f6;
-$snow:          #f9f9f9;
-
-$nobel-01:      #999999;
-$nobel-02:      #9f9f9f;
-
-// Main colors
-// -------------------------
-
-$primary-color: #4b5e40;
-$seconday-color:#20232a;
-
-// Scaffolding
-// -------------------------
-
-$body-bg:     $white;
-$text-color:  $eclipse;
-
-// Typography
-// -------------------------
-
- // Font Family from Bootstrap v4 Reboot.css
-$font-family-reboot: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-$font-family-base: $font-family-reboot;
-
-$font-size-xxl:   26px;
-$font-size-xl:    24px;
-$font-size-lg:    21px;
-$font-size-md:    18px;
-$font-size-base:  16px;
-$font-size-sm:    14px;
-
-$line-height-xl:  30px;
-$line-height-sm:  18px;
-$line-height-xs:  2;
-$line-height-xxs: 1.5;
-
-$font-weight-light:     400;
-$font-weight-regular:   400;
-$font-weight-semibold:  600;
-$font-weight-bold:      700;
-
-$break-sm: 768px;
-$break-lg: 1240px;
-
-// Spacing
-// -------------------------
-
-$space-lg: 30px;

src/utils/styles/global.ts

@@ -1,5 +1,10 @@
 import { injectGlobal } from 'emotion';
 import { fontSize, fontWeight } from './sizes';
+import colors from './colors';
+import { breakpoints } from './media';
+
+const fontFamily = `-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", 
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
 
 export default injectGlobal`
     html,
@@ -8,7 +13,9 @@ export default injectGlobal`
     }
 
     body {
+        font-family: ${fontFamily};
         font-size: ${fontSize.base};
+        color: ${colors.eclipse};
     }
 
     ul {
@@ -20,4 +27,53 @@ export default injectGlobal`
     strong {
         font-weight: ${fontWeight.semiBold};
     }
+
+    .container {
+        padding: 15px;
+        flex: 1;
+
+        @media screen and (min-width: ${breakpoints.container}px) {
+          max-width: ${breakpoints.container}px;
+          width: 100%;
+          margin-left: auto;
+          margin-right: auto;
+        };
+    
+        .el-loading-spinner {
+            margin-top: 0 !important;
+        }
+    }
+    
+    .content {
+        display: flex;
+    }
+    
+    .page-full-height {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+        overflow: hidden;
+    }
+    
+    .el-button {
+        &:hover, &:focus {
+            color: ${colors.primary};
+            border-color: ${colors.primary};
+        }
+    }
+    
+    .el-input__inner {
+        &:hover, &:focus {
+            border-color: ${colors.primary};
+        }
+    }
+    
+    .el-dialog__headerbtn:hover .el-dialog__close {
+        color: ${colors.eclipse};
+    }
+    
+    .package-list-items {
+        width: 100%;
+    }
+  
 `;

src/utils/styles/media.ts

@@ -4,6 +4,7 @@ export const breakpoints = {
   small: 576,
   medium: 768,
   large: 1024,
+  container: 1240,
   xlarge: 1275,
 };