IE11 support (DO NOT MERGE)

components/AgentAvailability.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {Box, Flex, Text} from 'theme-ui';
+import {colors} from '../helpers/theme';
 
 const AgentAvailability = ({
   hasAvailableAgents,
@@ -15,7 +16,7 @@ const AgentAvailability = ({
       px={20}
       py={1}
       sx={{
-        bg: 'lighter',
+        bg: colors.lighter,
         borderTop: '1px solid rgba(230, 230, 230, 0.25)',
         alignItems: 'center',
       }}
@@ -25,12 +26,12 @@ const AgentAvailability = ({
         sx={{
           height: 8,
           width: 8,
-          bg: hasAvailableAgents ? 'green' : 'muted',
+          bg: hasAvailableAgents ? colors.green : colors.muted,
           border: '1px solid #fff',
           borderRadius: '50%',
         }}
       ></Box>
-      <Text sx={{color: 'offset', fontSize: 12}}>
+      <Text sx={{color: colors.offset, fontSize: 12}}>
         {hasAvailableAgents ? agentAvailableText : agentUnavailableText}
       </Text>
     </Flex>

components/ChatFooter.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {Box, Button, Flex, Input, Textarea} from 'theme-ui';
 import SendIcon from './SendIcon';
+import {colors} from '../helpers/theme';
 
 const ChatFooter = ({
   placeholder,
@@ -72,7 +73,7 @@ const ChatFooter = ({
             <Textarea
               sx={{
                 fontFamily: 'body',
-                color: 'input',
+                color: colors.input,
                 variant: 'styles.input.transparent',
               }}
               ref={messageInput}

components/ChatMessage.tsx

@@ -5,6 +5,7 @@ import utc from 'dayjs/plugin/utc';
 import BotIcon from './BotIcon';
 import ChatMessageBody from './ChatMessageBody';
 import {Message, User} from '../helpers/utils';
+import {colors} from '../helpers/theme';
 
 dayjs.extend(utc);
 
@@ -72,13 +73,13 @@ const SenderAvatar = ({
     <Flex
       mr={2}
       sx={{
-        bg: isBot ? 'lighter' : 'primary',
+        bg: isBot ? colors.lighter : colors.primary,
         height: 32,
         width: 32,
         borderRadius: '50%',
         justifyContent: 'center',
         alignItems: 'center',
-        color: '#fff',
+        color: colors.background,
       }}
     >
       {isBot && name.toLowerCase() === 'bot' ? (
@@ -119,16 +120,16 @@ const ChatMessage = ({
           <ChatMessageBody
             className="Text--white"
             sx={{
-              color: 'background',
-              bg: 'primary',
+              color: colors.background,
+              bg: colors.primary,
               whiteSpace: 'pre-wrap',
             }}
             content={body}
           />
         </Flex>
         {shouldDisplayTimestamp && (
           <Flex m={1} sx={{justifyContent: 'flex-end'}}>
-            <Text sx={{color: 'gray'}}>
+            <Text sx={{color: colors.gray}}>
               {timestamp ? `Sent ${timestamp}` : 'Sending...'}
             </Text>
           </Flex>
@@ -153,7 +154,7 @@ const ChatMessage = ({
       </Flex>
       {shouldDisplayTimestamp && (
         <Flex m={1} sx={{justifyContent: 'flex-start'}}>
-          <Text sx={{color: 'gray'}}>
+          <Text sx={{color: colors.gray}}>
             {identifer} · Sent {timestamp}
           </Text>
         </Flex>
@@ -180,8 +181,8 @@ export const PopupChatMessage = ({message}: Props) => {
           sx={{
             px: 3,
             py: 3,
-            color: 'text',
-            bg: 'background',
+            color: colors.text,
+            bg: colors.background,
             whiteSpace: 'pre-wrap',
             flex: 1,
             border: '1px solid rgb(245, 245, 245)',

components/ChatWindow.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import {Box, Button, Flex, Heading, Text, Link} from 'theme-ui';
 import {Socket, Presence} from 'phoenix';
-import {motion} from 'framer-motion';
 import ChatMessage, {PopupChatMessage} from './ChatMessage';
 import ChatFooter from './ChatFooter';
 import AgentAvailability from './AgentAvailability';
 import PapercupsBranding from './PapercupsBranding';
 import CloseIcon from './CloseIcon';
+// import {motion} from '../helpers/motion';
 import * as API from '../helpers/api';
 import {
   Message,
@@ -21,6 +21,7 @@ import {
   isWindowHidden,
   addVisibilityEventListener,
 } from '../helpers/visibility';
+import {colors} from '../helpers/theme';
 
 type Props = {
   accountId: string;
@@ -696,14 +697,14 @@ class ChatWindow extends React.Component<Props, State> {
       <Flex
         className={isMobile ? 'Mobile' : ''}
         sx={{
-          bg: 'background',
+          bg: colors.background,
           flexDirection: 'column',
           height: '100%',
           width: '100%',
           flex: 1,
         }}
       >
-        <motion.iframe
+        <iframe
           src={`https://reichert621.github.io/?v=2`}
           sandbox="allow-same-origin allow-scripts allow-top-navigation"
           style={{
@@ -712,9 +713,9 @@ class ChatWindow extends React.Component<Props, State> {
             border: 'none',
             boxShadow: 'none',
           }}
-          initial={{opacity: 0, y: 2}}
-          animate={{opacity: 1, y: 0}}
-          transition={{duration: 0.4, ease: 'easeIn'}}
+          // initial={{opacity: 0, y: 2}}
+          // animate={{opacity: 1, y: 0}}
+          // transition={{duration: 0.4, ease: 'easeIn'}}
           onLoad={this.handleGameLoaded}
         />
         <Flex
@@ -786,14 +787,14 @@ class ChatWindow extends React.Component<Props, State> {
       >
         {displayed.map((msg, key) => {
           return (
-            <motion.div
+            <div
               key={key}
-              initial={{opacity: 0, x: -2}}
-              animate={{opacity: 1, x: 0}}
-              transition={{duration: 0.2, ease: 'easeIn'}}
+              // initial={{opacity: 0, x: -2}}
+              // animate={{opacity: 1, x: 0}}
+              // transition={{duration: 0.2, ease: 'easeIn'}}
             >
               <PopupChatMessage key={key} message={msg} />
-            </motion.div>
+            </div>
           );
         })}
 
@@ -852,14 +853,14 @@ class ChatWindow extends React.Component<Props, State> {
       <Flex
         className={isMobile ? 'Mobile' : ''}
         sx={{
-          bg: 'background',
+          bg: colors.background,
           flexDirection: 'column',
           height: '100%',
           width: '100%',
           flex: 1,
         }}
       >
-        <Box sx={{bg: 'primary', position: 'relative'}}>
+        <Box sx={{bg: colors.primary, position: 'relative'}}>
           <Box pt={3} pb={showAgentAvailability ? 12 : 16} px={20}>
             {/* TODO: wrap in a button element */}
             {isCloseable && !this.isOnDeprecatedVersion() && (
@@ -873,11 +874,11 @@ class ChatWindow extends React.Component<Props, State> {
             <Heading
               as="h2"
               className="Papercups-heading"
-              sx={{color: 'background', my: 1, mr: 12}}
+              sx={{color: colors.background, my: 1, mr: 12}}
             >
               {title}
             </Heading>
-            <Text sx={{color: 'offset'}}>{subtitle}</Text>
+            <Text sx={{color: colors.offset}}>{subtitle}</Text>
           </Box>
 
           {showAgentAvailability && (
@@ -909,11 +910,11 @@ class ChatWindow extends React.Component<Props, State> {
             const isMe = this.isCustomerMessage(msg, customerId);
 
             return (
-              <motion.div
+              <div
                 key={key}
-                initial={{opacity: 0, x: isMe ? 2 : -2}}
-                animate={{opacity: 1, x: 0}}
-                transition={{duration: 0.2, ease: 'easeIn'}}
+                // initial={{opacity: 0, x: isMe ? 2 : -2}}
+                // animate={{opacity: 1, x: 0}}
+                // transition={{duration: 0.2, ease: 'easeIn'}}
               >
                 <ChatMessage
                   key={key}
@@ -923,7 +924,7 @@ class ChatWindow extends React.Component<Props, State> {
                   isLastInGroup={isLastInGroup}
                   shouldDisplayTimestamp={shouldDisplayTimestamp}
                 />
-              </motion.div>
+              </div>
             );
           })}
           <div ref={(el) => (this.scrollToEl = el)} />

components/PapercupsBranding.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {Flex, Link} from 'theme-ui';
+import {colors} from '../helpers/theme';
 
 const PapercupsBranding = () => {
   return (
@@ -9,7 +10,7 @@ const PapercupsBranding = () => {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          color: 'gray',
+          color: colors.gray,
           opacity: 0.8,
           transition: '0.2s',
           '&:hover': {opacity: 1},

helpers/theme.ts

@@ -1,7 +1,23 @@
 import tinycolor from 'tinycolor2';
+import cssVars from 'css-vars-ponyfill';
 
 type ThemeSettings = {primary?: string};
 
+export const colors = {
+  text: '#141414',
+  background: '#fff',
+  primary: '#1890ff',
+  darker: '#1890ff',
+  lighter: '#1890ff',
+  secondary: '#722ed1',
+  green: '#52c41a',
+  muted: '#f0f0f0',
+  gray: 'rgba(0, 0, 0, 0.45)',
+  // TODO: come up with better names!
+  input: 'rgba(0, 0, 0, 0.65)',
+  offset: 'rgba(255, 255, 255, 0.8)',
+};
+
 export const getThemeConfig = (settings: ThemeSettings) => {
   const {primary = '#1890ff'} = settings;
   const base = tinycolor(primary);
@@ -11,6 +27,34 @@ export const getThemeConfig = (settings: ThemeSettings) => {
     dark: base.darken().toString(),
   };
 
+  cssVars({
+    onlyLegacy: false,
+    preserveVars: true,
+    watch: true,
+    variables: {
+      '--theme-ui-colors-text': '#141414',
+      '--theme-ui-colors-background': '#fff',
+      '--theme-ui-colors-primary': overrides.primary,
+      '--theme-ui-colors-darker': overrides.dark,
+      '--theme-ui-colors-lighter': overrides.light,
+      '--theme-ui-colors-secondary': '#722ed1',
+      '--theme-ui-colors-green': '#52c41a',
+      '--theme-ui-colors-muted': '#f0f0f0',
+      '--theme-ui-colors-gray': 'rgba(0, 0, 0, 0.45)',
+      '--theme-ui-colors-input': 'rgba(0, 0, 0, 0.65)',
+      '--theme-ui-colors-offset': 'rgba(255, 255, 255, 0.8)',
+      //
+      '--antd-wave-shadow-color': overrides.primary,
+      '--scroll-bar': '0',
+    },
+    // onBeforeSend: console.log,
+    // onError: console.error,
+    // onWarning: console.warn,
+    // onSuccess: console.info,
+    // onComplete: console.info,
+    // onFinally: console.log,
+  });
+
   return {
     useBodyStyles: false,
     space: [0, 4, 8, 16, 32, 64, 128, 256, 512],