feat: Added Theme and migrate to emotion@10.x 🚀 (#286)

* chore: updated emotion dependency

* feat: introduced theme

* refactor: updated emotion styles

* fix: fixed emotion error

* fix: fixed tests

* chore: add missing types

Co-Authored-By: Thomas Klein <tmkn@users.noreply.github.com>

src/App/App.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
+import { ReactWrapper } from 'enzyme';
 
+import { mount } from '../utils/test-enzyme';
 import storage from '../utils/storage';
 import { generateTokenWithTimeRange } from '../../jest/unit/components/__mocks__/token';
 

src/App/App.tsx

@@ -9,7 +9,6 @@ import Header from '../components/Header';
 import { Container, Content } from '../components/Layout';
 import API from '../utils/api';
 import Footer from '../components/Footer';
-import StyleBaseline from '../design-tokens/StyleBaseline';
 
 import AppRoute from './AppRoute';
 import { AppProps, AppContextProvider } from './AppContext';
@@ -44,13 +43,10 @@ export default class App extends Component<{}, AppProps> {
     const context = { isUserLoggedIn, packages, logoUrl, user, scope };
 
     return (
-      <>
-        <StyleBaseline />
-        <Container isLoading={isLoading}>
-          {isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
-          {this.renderLoginModal()}
-        </Container>
-      </>
+      <Container isLoading={isLoading}>
+        {isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
+        {this.renderLoginModal()}
+      </Container>
     );
   }
 

src/App/styles.ts

@@ -1,9 +1,9 @@
-import { css } from 'emotion';
+import { css } from '@emotion/core';
 
-import colors from '../utils/styles/colors';
+import { theme } from '../design-tokens/theme';
 
 export const alertError = css({
-  backgroundColor: `${colors.red} !important`,
+  backgroundColor: `${theme.palette.red} !important`,
   minWidth: 'inherit !important',
 });