refactor: update global styles using emotion

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/typeface-roboto.css';
-import '../styles/main.scss';
+import '../utils/styles/global';
 import 'normalize.css';
 import Footer from '../components/Footer';
 import { FormError } from 'src/components/Login/Login';
@@ -67,13 +67,7 @@ export default class App extends Component<{}, AppStateInterface> {
     return (
       // @ts-ignore
       <Container isLoading={isLoading}>
-        {isLoading ? (
+        {isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
-          <Loading />
-        ) : (
-          <>
-            <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>
-          </>
-        )}
         {this.renderLoginModal()}
       </Container>
     );

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/Header/Header.tsx

@@ -144,7 +144,7 @@ class Header extends Component<Props, State> {
       <LeftSide>
         <Link
           className={css`
-            margin-right: '1em';
+            margin-right: 1em;
           `}
           to={'/'}>
           {this.renderLogo()}

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/typeface-roboto.css

@@ -0,0 +1 @@
+@import '~typeface-roboto';

src/utils/styles/global.ts

@@ -1,5 +1,7 @@
-import { injectGlobal } from 'emotion';
+import { injectGlobal, css } from 'emotion';
 import { fontSize, fontWeight } from './sizes';
+import colors from './colors';
+import mq, { breakpoints } from './media';
 
 export default injectGlobal`
     html,
@@ -9,6 +11,7 @@ export default injectGlobal`
 
     body {
         font-size: ${fontSize.base};
+        color: ${colors.eclipse};
     }
 
     ul {
@@ -20,4 +23,53 @@ export default injectGlobal`
     strong {
         font-weight: ${fontWeight.semiBold};
     }
+
+    .container {
+        padding: 15px;
+        flex: 1;
+
+        @media screen and (min-width: ${breakpoints.large}px) {
+          max-width: ${breakpoints.large}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%;
+    }
+  
 `;