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

@@ -1,12 +1,12 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import Box from '../../muiComponents/Box';
 import Button from '../../muiComponents/Button';
 import Heading from '../../muiComponents/Heading';
-import colors from '../../utils/styles/colors';
 import { spacings } from '../../utils/styles/spacings';
+import { Theme } from '../../design-tokens/theme';
 
 import PackageImg from './img/package.svg';
 
@@ -19,10 +19,10 @@ const EmptyPackage = styled('img')({
   margin: '0 auto',
 });
 
-const StyledHeading = styled(Heading)({
-  color: colors.primary,
+const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({
+  color: props.theme && props.theme.palette.primary.main,
   marginBottom: spacings.sm,
-});
+}));
 
 const NotFound: React.FC = () => {
   const history = useHistory();

src/components/NotFound/Notfound.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { render, fireEvent } from '@testing-library/react';
+
+import { render, fireEvent } from '../../utils/test-react-testing-library';
 
 import NotFound, { GO_TO_HOME_PAGE } from './NotFound';
 

src/components/NotFound/__snapshots__/Notfound.test.tsx.snap

@@ -1,17 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<NotFound /> component should load the component in default state 1`] = `
+.emotion-0 {
+  width: 150px;
+  margin: 0 auto;
+}
+
+.emotion-2 {
+  color: #4b5e40;
+  margin-bottom: 16px;
+}
+
 <div
   class="MuiBox-root MuiBox-root-2"
   data-testid="404"
 >
   <img
     alt="404 - Page not found"
-    class="css-17y48z2 emotion-0"
+    class="emotion-0 emotion-1"
     src="[object Object]"
   />
   <h4
-    class="MuiTypography-root not-found-text css-7pe7kh emotion-1 MuiTypography-h4"
+    class="MuiTypography-root not-found-text emotion-2 emotion-3 MuiTypography-h4"
   >
     Sorry, we couldn't find it...
   </h4>

src/components/NotFound/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { default as Typography } from '../../muiComponents/Heading';
 import List from '../../muiComponents/List';