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

@@ -1,110 +1,88 @@
-import styled, { css } from 'react-emotion';
+import styled from '@emotion/styled';
 
-import mq from '../../utils/styles/media';
+import { breakpoints } from '../../utils/styles/media';
 import Icon from '../Icon/Icon';
-import colors from '../../utils/styles/colors';
+import { Theme } from '../../design-tokens/theme';
 
-export const Wrapper = styled('div')({
-  '&&': {
-    background: colors.snow,
-    borderTop: `1px solid ${colors.greyGainsboro}`,
-    color: colors.nobel01,
-    fontSize: '14px',
-    padding: '20px',
+export const Wrapper = styled('div')<{ theme?: Theme }>(props => ({
+  background: props.theme && props.theme.palette.snow,
+  borderTop: `1px solid ${props.theme && props.theme.palette.greyGainsboro}`,
+  color: props.theme && props.theme.palette.nobel01,
+  fontSize: '14px',
+  padding: '20px',
+}));
+
+export const Inner = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  width: '100%',
+  [`@media (min-width: ${breakpoints.medium}px)`]: {
+    minWidth: 400,
+    maxWidth: 800,
+    margin: 'auto',
+    justifyContent: 'space-between',
+  },
+  [`@media (min-width: ${breakpoints.large}px)`]: {
+    maxWidth: 1240,
   },
 });
 
-export const Inner = styled('div')`
-  && {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    width: 100%;
-    ${() => {
-      return mq.medium(css`
-        min-width: 400px;
-        max-width: 800px;
-        margin: auto;
-        justify-content: space-between;
-      `);
-    }};
-    ${() => {
-      return mq.large(css`
-        max-width: 1240px;
-      `);
-    }};
-  }
-`;
-
-export const Left = styled('div')`
-  && {
-    align-items: center;
-    display: none;
-    ${() => {
-      return mq.medium(css`
-        display: flex;
-      `);
-    }};
-  }
-`;
-
-export const Right = styled(Left)({
-  '&&': {
+export const Left = styled('div')({
+  alignItems: 'center',
+  display: 'none',
+  [`@media (min-width: ${breakpoints.medium}px)`]: {
     display: 'flex',
   },
 });
 
-export const ToolTip = styled('span')({
-  '&&': {
-    position: 'relative',
-    height: '18px',
-  },
+export const Right = styled(Left)({
+  display: 'flex',
 });
 
 export const Earth = styled(Icon)({
-  '&&': {
-    padding: '0 10px',
+  padding: '0 10px',
+});
+
+export const Flags = styled('span')<{ theme?: Theme }>(props => ({
+  position: 'absolute',
+  background: props.theme && props.theme.palette.greyAthens,
+  padding: '1px 4px',
+  borderRadius: 3,
+  height: 20,
+  display: 'inline-flex',
+  alignItems: 'center',
+  visibility: 'hidden',
+  top: -2,
+  ':before': {
+    content: "''",
+    position: 'absolute',
+    top: '29%',
+    left: -4,
+    marginLeft: -5,
+    border: '5px solid',
+    borderColor: `${props.theme && props.theme.palette.greyAthens} transparent transparent transparent`,
+    transform: 'rotate(90deg)',
+  },
+}));
+
+export const ToolTip = styled('span')({
+  position: 'relative',
+  height: '18px',
+  ':hover': {
+    [`${Flags}`]: {
+      visibility: 'visible',
+    },
   },
 });
 
-export const Flags = styled('span')`
-  && {
-    position: absolute;
-    background: ${colors.greyAthens};
-    padding: 1px 4px;
-    border-radius: 3px;
-    height: 20px;
-    display: inline-flex;
-    align-items: center;
-    visibility: hidden;
-    top: -2px;
-    :before {
-      content: '';
-      position: absolute;
-      top: 29%;
-      left: -4px;
-      margin-left: -5px;
-      border: 5px solid;
-      border-color: ${colors.greyAthens} transparent transparent transparent;
-      transform: rotate(90deg);
-    }
-    ${/* sc-selector */ ToolTip}:hover & {
-      visibility: visible;
-    }
-  }
-`;
-
-export const Love = styled('span')({
-  '&&': {
-    color: colors.love,
-    padding: '0 5px',
-  },
-});
+export const Love = styled('span')<{ theme?: Theme }>(props => ({
+  color: props.theme && props.theme.palette.love,
+  padding: '0 5px',
+}));
 
 export const Flag = styled(Icon)({
-  '&&': {
-    padding: '0 5px',
-  },
+  padding: '0 5px',
 });
 
 export const Logo = Flag;