From 99e1bb3ea3ab9fe3d53a6dc0737cbf74f498f661 Mon Sep 17 00:00:00 2001
From: Griffithtp <griffithtp@gmail.com>
Date: Fri, 5 Jul 2019 23:58:18 +0100
Subject: [PATCH] refactor: update global styles using emotion

---
 src/App/App.tsx                  | 12 ++-----
 src/App/app.scss                 | 16 ----------
 src/App/styles.ts                | 17 ++++++++++
 src/components/Header/Header.tsx |  2 +-
 src/pages/home/home.scss         | 16 ----------
 src/styles/typeface-roboto.css   |  1 +
 src/utils/styles/global.ts       | 54 +++++++++++++++++++++++++++++++-
 7 files changed, 75 insertions(+), 43 deletions(-)
 delete mode 100644 src/App/app.scss
 create mode 100644 src/App/styles.ts
 delete mode 100644 src/pages/home/home.scss
 create mode 100644 src/styles/typeface-roboto.css

diff --git a/src/App/App.tsx b/src/App/App.tsx
index db69b60..f832313 100644
--- a/src/App/App.tsx
+++ b/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';
@@ -67,13 +67,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>
     );
diff --git a/src/App/app.scss b/src/App/app.scss
deleted file mode 100644
index 462f8b9..0000000
--- a/src/App/app.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/src/App/styles.ts b/src/App/styles.ts
new file mode 100644
index 0000000..17af52b
--- /dev/null
+++ b/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',
+});
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 7c8d5b8..b0c2ff7 100644
--- a/src/components/Header/Header.tsx
+++ b/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()}
diff --git a/src/pages/home/home.scss b/src/pages/home/home.scss
deleted file mode 100644
index b3ba52a..0000000
--- a/src/pages/home/home.scss
+++ /dev/null
@@ -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;
-}
diff --git a/src/styles/typeface-roboto.css b/src/styles/typeface-roboto.css
new file mode 100644
index 0000000..f79f754
--- /dev/null
+++ b/src/styles/typeface-roboto.css
@@ -0,0 +1 @@
+@import '~typeface-roboto';
diff --git a/src/utils/styles/global.ts b/src/utils/styles/global.ts
index ec77d7c..333ed62 100644
--- a/src/utils/styles/global.ts
+++ b/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%;
+    }
+  
 `;