Use styled-components/macro

Issue: GREG-40

frontend/src/globalStyles.ts

-import { createGlobalStyle } from 'styled-components'
+import { createGlobalStyle } from 'styled-components/macro'
 
 const GlobalStyle = createGlobalStyle`
   body {

frontend/src/index.tsx

 import React, { Suspense } from 'react'
 import ReactDOM from 'react-dom'
-import { ThemeProvider } from 'styled-components'
+import { ThemeProvider } from 'styled-components/macro'
 
 import 'i18n'
 import getCurrentTheme from 'theme'

frontend/src/styled.d.ts

-import 'styled-components'
+import 'styled-components/macro'
 
 declare module 'styled-components' {
   export interface DefaultTheme {

frontend/src/themes/default.ts

-import { DefaultTheme } from "styled-components";
+import { DefaultTheme } from 'styled-components/macro'
 
 const white = '#FFFFFF'
 const hotPink = '#FF69B4'
@@ -8,7 +8,7 @@ const defaultTheme: DefaultTheme = {
   colors: {
     main: hotPink,
     secondary: white,
-  }
+  },
 }
 
-export default defaultTheme;
+export default defaultTheme

frontend/src/themes/uio.ts

-import { DefaultTheme } from "styled-components";
+import { DefaultTheme } from 'styled-components/macro'
 
 const white = '#FFFFFF'
 const hotPink = '#FF69B4'
@@ -8,7 +8,7 @@ const uioTheme: DefaultTheme = {
   colors: {
     main: hotPink,
     secondary: white,
-  }
+  },
 }
 
-export default uioTheme;
+export default uioTheme