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/Header/styles.ts

@@ -1,7 +1,8 @@
-import styled, { css } from 'react-emotion';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 
-import colors from '../../utils/styles/colors';
-import mq from '../../utils/styles/media';
+import { Theme } from '../../design-tokens/theme';
+import { breakpoints } from '../../utils/styles/media';
 import IconButton from '../../muiComponents/IconButton';
 import AppBar from '../../muiComponents/AppBar';
 import Toolbar from '../../muiComponents/Toolbar';
@@ -26,22 +27,22 @@ export const LeftSide = styled(RightSide)({
   flex: 1,
 });
 
-export const MobileNavBar = styled('div')({
+export const MobileNavBar = styled('div')<{ theme?: Theme }>(props => ({
   alignItems: 'center',
   display: 'flex',
-  borderBottom: `1px solid ${colors.greyLight}`,
+  borderBottom: `1px solid ${props.theme && props.theme.palette.greyLight}`,
   padding: '8px',
   position: 'relative',
-});
+}));
 
-export const InnerMobileNavBar = styled('div')({
+export const InnerMobileNavBar = styled('div')<{ theme?: Theme }>(props => ({
   borderRadius: '4px',
-  backgroundColor: colors.greyLight,
-  color: colors.white,
+  backgroundColor: props.theme && props.theme.palette.greyLight,
+  color: props.theme && props.theme.palette.white,
   width: '100%',
   padding: '0 5px',
   margin: '0 10px 0 0',
-});
+}));
 
 export const IconSearchButton = styled(IconButton)({
   display: 'block',
@@ -53,41 +54,36 @@ export const SearchWrapper = styled('div')({
   width: '100%',
 });
 
-export const NavBar = styled(AppBar)`
-  && {
-    background-color: ${colors.primary};
-    min-height: 60px;
-    display: flex;
-    justify-content: center;
-    ${() =>
-      mq.medium(css`
-        ${SearchWrapper} {
-          display: flex;
-        }
-        ${IconSearchButton} {
-          display: none;
-        }
-        ${MobileNavBar} {
-          display: none;
-        }
-      `)};
-    ${() =>
-      mq.large(css`
-        ${InnerNavBar} {
-          padding: 0 20px;
-        }
-      `)};
-    ${() =>
-      mq.xlarge(css`
-        ${InnerNavBar} {
-          max-width: 1240px;
-          width: 100%;
-          margin: 0 auto;
-        }
-      `)};
-  }
-`;
+export const NavBar = styled(AppBar)<{ theme?: Theme }>(props => ({
+  backgroundColor: props.theme && props.theme.palette.primary.main,
+  minHeight: 60,
+  display: 'flex',
+  justifyContent: 'center',
+  [`@media (min-width: ${breakpoints.medium}px)`]: css`
+    ${SearchWrapper} {
+      display: flex;
+    }
+    ${IconSearchButton} {
+      display: none;
+    }
+    ${MobileNavBar} {
+      display: none;
+    }
+  `,
+  [`@media (min-width: ${breakpoints.large}px)`]: css`
+    ${InnerNavBar} {
+      padding: 0 20px;
+    }
+  `,
+  [`@media (min-width: ${breakpoints.xlarge}px)`]: css`
+    ${InnerNavBar} {
+      max-width: 1240px;
+      width: 100%;
+      margin: 0 auto;
+    }
+  `,
+}));
 
-export const StyledLink = styled(Link)({
-  color: 'white',
-});
+export const StyledLink = styled(Link)<{ theme?: Theme }>(props => ({
+  color: props.theme && props.theme.palette.white,
+}));