Migrate TS types to new Emotion v11 Theme implementation - See https:…

…//emotion.sh/docs/emotion-11#theme-type

src/components/appBootstrap/BrowserPageBootstrap.tsx

@@ -76,7 +76,7 @@ const BrowserPageBootstrap = (props: BrowserPageBootstrapProps): JSX.Element =>
     cookiesManager,
     userSession,
   };
-  const theme = useTheme<CustomerTheme>();
+  const theme = useTheme();
   const isCypressRunning = detectCypress();
   const isLightHouseRunning = detectLightHouse();
 

src/components/pageLayouts/Footer.tsx

@@ -28,7 +28,7 @@ const Footer: React.FunctionComponent<Props> = (props) => {
   const customer: Customer = useCustomer();
   const { availableLanguages } = customer;
   const shouldDisplayI18nButton = availableLanguages?.length > 1;
-  const theme = useTheme<CustomerTheme>();
+  const theme = useTheme();
   const {
     backgroundColor,
     onBackgroundColor,

src/components/pageLayouts/Nav.tsx

@@ -46,7 +46,7 @@ type Props = {};
 const Nav: React.FunctionComponent<Props> = () => {
   const { t } = useTranslation();
   const router: NextRouter = useRouter();
-  const theme = useTheme<CustomerTheme>();
+  const theme = useTheme();
   const { primaryColor, logo: logoAirtable } = theme;
   const logo: AirtableAttachment = logoAirtable;
   const { locale }: I18n = useI18n();

src/components/pageLayouts/PreviewModeBanner.tsx

@@ -61,7 +61,7 @@ const PreviewModeBanner: React.FunctionComponent<Props> = (props): JSX.Element =
   const { t } = useTranslation();
   const {
     secondaryColor, secondaryColorVariant1, onSecondaryColor,
-  } = useTheme<CustomerTheme>();
+  } = useTheme();
 
   if (process.env.NEXT_PUBLIC_APP_STAGE === 'production') {
     return null;

src/components/pageLayouts/QuickPreviewBanner.tsx

@@ -45,7 +45,7 @@ const QuickPreviewBanner: React.FunctionComponent<Props> = (props): JSX.Element
   } = props;
   const {
     secondaryColor, secondaryColorVariant1, onSecondaryColor,
-  } = useTheme<CustomerTheme>();
+  } = useTheme();
   const { t } = useTranslation();
   const router: NextRouter = useRouter();
   const customer: Customer = useCustomer();

src/components/svg/AnimatedTextBubble.tsx

@@ -1,14 +1,19 @@
-import { css } from '@emotion/core';
-import { useTheme } from 'emotion-theming';
+import {
+  css,
+  useTheme,
+} from '@emotion/react';
 import React from 'react';
 
-import { Theme } from '../../types/data/Theme';
-
 const AnimatedTextBubble = props => {
-  const theme: Theme = useTheme();
+  const theme = useTheme();
   const { surfaceColor } = theme;
   return (
-    <div style={{ width: '100%', marginLeft: '20px' }}>
+    <div
+      style={{
+        width: '100%',
+        marginLeft: '20px',
+      }}
+    >
       <svg
         viewBox="0 0 33 21" width="50px" {...props}
         css={css`
@@ -20,7 +25,7 @@ const AnimatedTextBubble = props => {
               transform: translateY(-4px);
             }
             30% {
-             transform: translateY(0px);
+              transform: translateY(0px);
             }
             100% {
               transform: translateY(0px);

src/components/utils/Btn.tsx

@@ -35,7 +35,7 @@ const Btn: React.FunctionComponent<Props> = (props): JSX.Element => {
     transparent,
     ...rest
   } = props;
-  const customerTheme = useTheme<CustomerTheme>();
+  const customerTheme = useTheme();
   const {
     color,
     backgroundColor,

src/components/utils/CircleBtn.tsx

@@ -32,7 +32,7 @@ const CircleBtn: React.FunctionComponent<Props> = (props): JSX.Element => {
     transparent,
     ...rest
   } = props;
-  const customerTheme = useTheme<CustomerTheme>();
+  const customerTheme = useTheme();
   const {
     color,
     backgroundColor,

src/components/utils/LegalContent.tsx

@@ -16,7 +16,7 @@ type Props = {
  * Meant to be used to display anything that is legal-related (privacy policies, terms of use, etc.)
  */
 const LegalContent: React.FunctionComponent<Props> = (props): JSX.Element => {
-  const theme = useTheme<CustomerTheme>();
+  const theme = useTheme();
   const { primaryColor } = theme;
   const { content} = props;
 

src/components/utils/Stamp.tsx

@@ -17,7 +17,7 @@ export const Stamp: React.FunctionComponent<Props> = (props): JSX.Element => {
     children,
     ...rest
   } = props;
-  const { secondaryColorVariant1, secondaryColor } = useTheme<CustomerTheme>();
+  const { secondaryColorVariant1, secondaryColor } = useTheme();
 
   return (
     <div

src/types/emotion-theme.ts

@@ -0,0 +1,11 @@
+import { CustomerTheme } from './data/CustomerTheme';
+
+/**
+ * Emotion theme used thorough the whole application.
+ *
+ * @see https://emotion.sh/docs/emotion-11#theme-type
+ */
+declare module '@emotion/react' {
+  export interface Theme extends CustomerTheme {
+  }
+}