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

@@ -29,7 +29,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

@@ -47,7 +47,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

@@ -62,7 +62,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

@@ -47,7 +47,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,10 +1,11 @@
-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' }}>

src/components/utils/Btn.tsx

@@ -37,7 +37,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

@@ -34,7 +34,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

@@ -18,7 +18,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

@@ -19,7 +19,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 {
+  }
+}