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/Loading/Loading.test.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+
+import { render } from '../../utils/test-react-testing-library';
 
 import Loading from './Loading';
 
 describe('<Loading /> component', () => {
   test('should render the component in default state', () => {
-    const wrapper = shallow(<Loading />);
-    expect(wrapper.html()).toMatchSnapshot();
+    const { container } = render(<Loading />);
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

src/components/Loading/__snapshots__/Loading.test.tsx.snap

@@ -1,3 +1,86 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Loading /> component should render the component in default state 1`] = `"<div data-testid=\\"loading\\" class=\\"css-1221txa eimgwje0\\"><div class=\\"css-bxochs eimgwje1\\"><div class=\\"css-ge0nak em793ed0\\"></div></div><div class=\\"css-vqrgi e1ag4h8b0\\"><div class=\\"MuiCircularProgress-root css-15gl0ho e1ag4h8b1 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate\\" style=\\"width:50px;height:50px\\" role=\\"progressbar\\"><svg class=\\"MuiCircularProgress-svg\\" viewBox=\\"22 22 44 44\\"><circle class=\\"MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate\\" cx=\\"44\\" cy=\\"44\\" r=\\"20.2\\" fill=\\"none\\" stroke-width=\\"3.6\\"></circle></svg></div></div></div>"`;
+exports[`<Loading /> component should render the component in default state 1`] = `
+.emotion-8 {
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+  top: 50%;
+  left: 50%;
+  position: absolute;
+}
+
+.emotion-2 {
+  margin: 0 0 30px 0;
+  border-radius: 25px;
+  box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
+  background: #f7f8f6;
+}
+
+.emotion-0 {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  background-position: center;
+  background-size: contain;
+  background-image: url([object Object]);
+  background-repeat: no-repeat;
+  width: 90px;
+  height: 90px;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.emotion-4 {
+  color: #4b5e40;
+}
+
+<div
+  class="emotion-8 emotion-9"
+  data-testid="loading"
+>
+  <div
+    class="emotion-2 emotion-3"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    />
+  </div>
+  <div
+    class="emotion-6 emotion-7"
+  >
+    <div
+      class="MuiCircularProgress-root emotion-4 emotion-5 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+      role="progressbar"
+      style="width: 50px; height: 50px;"
+    >
+      <svg
+        class="MuiCircularProgress-svg"
+        viewBox="22 22 44 44"
+      >
+        <circle
+          class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+          cx="44"
+          cy="44"
+          fill="none"
+          r="20.2"
+          stroke-width="3.6"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;

src/components/Loading/styles.ts

@@ -1,19 +1,15 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-export const Wrapper = styled('div')`
-  && {
-    transform: translate(-50%, -50%);
-    top: 50%;
-    left: 50%;
-    position: absolute;
-  }
-`;
+export const Wrapper = styled('div')({
+  transform: 'translate(-50%, -50%)',
+  top: '50%',
+  left: '50%',
+  position: 'absolute',
+});
 
-export const Badge = styled('div')`
-  && {
-    margin: 0 0 30px 0;
-    border-radius: 25px;
-    box-shadow: 0 10px 20px 0 rgba(69, 58, 100, 0.2);
-    background: #f7f8f6;
-  }
-`;
+export const Badge = styled('div')({
+  margin: '0 0 30px 0',
+  borderRadius: 25,
+  boxShadow: '0 10px 20px 0 rgba(69, 58, 100, 0.2)',
+  background: '#f7f8f6',
+});