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/AutoComplete/styles.tsx

@@ -1,60 +1,44 @@
 import React from 'react';
-import styled, { css } from 'react-emotion';
+import styled from '@emotion/styled';
 
 import TextField from '../../muiComponents/TextField';
 import Paper from '../../muiComponents/Paper';
+import { Theme } from '../../design-tokens/theme';
 
 export interface InputFieldProps {
   color: string;
 }
 
 export const Wrapper = styled('div')({
-  '&&': {
-    width: '100%',
-    height: '32px',
-    position: 'relative',
-    zIndex: 1,
-  },
+  width: '100%',
+  height: '32px',
+  position: 'relative',
+  zIndex: 1,
 });
 
+export const StyledTextField = styled(TextField)<{ theme?: Theme }>(props => ({
+  '& .MuiInputBase-root': {
+    ':before': {
+      content: "''",
+      border: 'none',
+    },
+    ':after': {
+      borderColor: props.theme && props.theme.palette.white,
+    },
+    ':hover:before': {
+      content: 'none',
+    },
+  },
+  '& .MuiInputBase-input': {
+    color: props.theme && props.theme.palette.white,
+  },
+}));
+
 /* eslint-disable verdaccio/jsx-spread */
-export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => (
-  <TextField
-    {...others}
-    classes={{
-      // @ts-ignore
-      input: css`
-        && {
-          ${color &&
-            css`
-              color: ${color};
-            `};
-        }
-      `,
-      root: css`
-        && {
-          &:before {
-            content: '';
-            border: none;
-          }
-          &:after {
-            ${color &&
-              css`
-                border-color: ${color};
-              `};
-          }
-          &:hover:before {
-            content: none;
-          }
-        }
-      `,
-    }}
-  />
-);
+// @ts-ignore types of color are incompatible
+export const InputField: React.FC<InputFieldProps> = ({ ...others }) => <StyledTextField {...others} />;
 
 export const SuggestionContainer = styled(Paper)({
-  '&&': {
-    maxHeight: '500px',
-    overflowY: 'auto',
-  },
+  maxHeight: '500px',
+  overflowY: 'auto',
 });