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

@@ -1,30 +1,24 @@
-import styled, { css } from 'react-emotion';
+import styled from '@emotion/styled';
 
-import colors from '../../utils/styles/colors';
 import CircularProgress from '../../muiComponents/CircularProgress';
+import { Theme } from '../../design-tokens/theme';
 
 interface WrapperProps {
   centered: boolean;
 }
 
-export const Wrapper = styled('div')`
-  && {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    ${(props: WrapperProps) =>
-      props.centered &&
-      css`
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      `};
-  }
-`;
+export const Wrapper = styled('div')<WrapperProps>(props => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  ...(props.centered && {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  }),
+}));
 
-export const Circular = styled(CircularProgress)({
-  '&&': {
-    color: colors.primary,
-  },
-});
+export const Circular = styled(CircularProgress)<{ theme?: Theme }>(props => ({
+  color: props.theme && props.theme.palette.primary.main,
+}));