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/components/Layout/Layout.tsx

@@ -1,32 +1,29 @@
-import styled, { css } from 'react-emotion';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 
-import colors from '../../utils/styles/colors';
+import { Theme } from '../../design-tokens/theme';
 
-export const Content = styled('div')({
-  '&&': {
-    backgroundColor: colors.white,
-    flex: 1,
-    display: 'flex',
-    position: 'relative',
-    flexDirection: 'column',
-  },
-});
+export const Content = styled('div')<{ theme?: Theme }>(props => ({
+  backgroundColor: props.theme && props.theme.palette.white,
+  flex: 1,
+  display: 'flex',
+  position: 'relative',
+  flexDirection: 'column',
+}));
 
 interface ContainerProps {
   isLoading: boolean;
 }
 
-export const Container = styled('div')`
-  && {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    overflow: hidden;
-    ${({ isLoading }: ContainerProps) =>
-      isLoading &&
-      css`
-        ${Content} {
-          background-color: #f5f6f8;
-        }
-      `}
-`;
+export const Container = styled('div')<ContainerProps>(props => ({
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: '100vh',
+  overflow: 'hidden',
+  ...(props.isLoading &&
+    css`
+      ${Content} {
+        background-color: #f5f6f8;
+      }
+    `),
+}));