From b6d1050d5a8d65223bf49127d748cff0762686df Mon Sep 17 00:00:00 2001
From: William Wong <compulim@hotmail.com>
Date: Sun, 3 Nov 2019 14:12:43 -0800
Subject: [PATCH] Use useStyleOptions and useStyleSet

---
 .../component/src/Activity/CarouselLayout.js  |  1 +
 .../src/SendBox/ConnectivityStatus.js         | 40 +++++++------
 .../src/SendBox/DictationInterims.js          | 45 +++++++--------
 packages/component/src/SendBox/IconButton.js  | 35 ++++++------
 .../component/src/SendBox/MicrophoneButton.js | 36 ++++++------
 .../component/src/SendBox/SuggestedAction.js  | 28 +++++-----
 .../component/src/SendBox/SuggestedActions.js | 56 ++++++++++---------
 packages/component/src/SendBox/TextBox.js     | 21 +++----
 .../component/src/SendBox/TypingIndicator.js  | 26 +++------
 .../component/src/SendBox/UploadButton.js     | 20 ++-----
 10 files changed, 149 insertions(+), 159 deletions(-)

diff --git a/packages/component/src/Activity/CarouselLayout.js b/packages/component/src/Activity/CarouselLayout.js
index 9e27734079..e70414b9e0 100644
--- a/packages/component/src/Activity/CarouselLayout.js
+++ b/packages/component/src/Activity/CarouselLayout.js
@@ -16,6 +16,7 @@ const ROOT_CSS = css({
 
 const CarouselLayout = ({ activity, children, language, timestampClassName }) => {
   const [{ carouselFlipper: carouselFlipperStyleSet }] = useStyleSet();
+
   const filmStyleSet = createBasicStyleSet({ cursor: null });
 
   return (
diff --git a/packages/component/src/SendBox/ConnectivityStatus.js b/packages/component/src/SendBox/ConnectivityStatus.js
index f48b9aa7bd..d67f03f657 100644
--- a/packages/component/src/SendBox/ConnectivityStatus.js
+++ b/packages/component/src/SendBox/ConnectivityStatus.js
@@ -6,6 +6,7 @@ import connectToWebChat from '../connectToWebChat';
 import ErrorNotificationIcon from '../Attachment/Assets/ErrorNotificationIcon';
 import ScreenReaderText from '../ScreenReaderText';
 import SpinnerAnimation from '../Attachment/Assets/SpinnerAnimation';
+import useStyleSet from '../hooks/useStyleSet';
 import WarningNotificationIcon from '../Attachment/Assets/WarningNotificationIcon';
 
 const CONNECTIVITY_STATUS_DEBOUNCE = 400;
@@ -50,20 +51,28 @@ DebouncedConnectivityStatus.propTypes = {
 const connectConnectivityStatus = (...selectors) =>
   connectToWebChat(({ connectivityStatus, language }) => ({ connectivityStatus, language }), ...selectors);
 
-const ConnectivityStatus = ({ connectivityStatus, language, styleSet }) => {
+const ConnectivityStatus = ({ connectivityStatus, language }) => {
+  const [
+    {
+      connectivityNotification: connectivityNotificationStyleSet,
+      errorNotification: errorNotificationStyleSet,
+      warningNotification: warningNotificationStyleSet
+    }
+  ] = useStyleSet();
+
   const renderConnectingSlow = useCallback(() => {
     const localizedText = localize('SLOW_CONNECTION_NOTIFICATION', language);
 
     return (
       <React.Fragment>
         <ScreenReaderText text={localizedText} />
-        <div aria-hidden={true} className={styleSet.warningNotification}>
+        <div aria-hidden={true} className={warningNotificationStyleSet}>
           <WarningNotificationIcon />
           {localizedText}
         </div>
       </React.Fragment>
     );
-  }, [language, styleSet.warningNotification]);
+  }, [language, warningNotificationStyleSet]);
 
   const renderNotConnected = useCallback(() => {
     const localizedText = localize('FAILED_CONNECTION_NOTIFICATION', language);
@@ -71,13 +80,13 @@ const ConnectivityStatus = ({ connectivityStatus, language, styleSet }) => {
     return (
       <React.Fragment>
         <ScreenReaderText text={localizedText} />
-        <div aria-hidden={true} className={styleSet.errorNotification}>
+        <div aria-hidden={true} className={errorNotificationStyleSet}>
           <ErrorNotificationIcon />
           {localizedText}
         </div>
       </React.Fragment>
     );
-  }, [language, styleSet.errorNotification]);
+  }, [language, errorNotificationStyleSet]);
 
   const renderUninitialized = useCallback(() => {
     const localizedText = localize('INITIAL_CONNECTION_NOTIFICATION', language);
@@ -85,13 +94,13 @@ const ConnectivityStatus = ({ connectivityStatus, language, styleSet }) => {
     return (
       <React.Fragment>
         <ScreenReaderText text={localizedText} />
-        <div aria-hidden={true} className={styleSet.connectivityNotification}>
+        <div aria-hidden={true} className={connectivityNotificationStyleSet}>
           <SpinnerAnimation />
           {localizedText}
         </div>
       </React.Fragment>
     );
-  }, [language, styleSet.connectivityNotification]);
+  }, [language, connectivityNotificationStyleSet]);
 
   const renderReconnecting = useCallback(() => {
     const localizedText = localize('INTERRUPTED_CONNECTION_NOTIFICATION', language);
@@ -99,13 +108,13 @@ const ConnectivityStatus = ({ connectivityStatus, language, styleSet }) => {
     return (
       <React.Fragment>
         <ScreenReaderText text={localizedText} />
-        <div aria-hidden={true} className={styleSet.connectivityNotification}>
+        <div aria-hidden={true} className={connectivityNotificationStyleSet}>
           <SpinnerAnimation />
           {localizedText}
         </div>
       </React.Fragment>
     );
-  }, [language, styleSet.connectivityNotification]);
+  }, [language, connectivityNotificationStyleSet]);
 
   const renderSagaError = useCallback(() => {
     const localizedText = localize('RENDER_ERROR_NOTIFICATION', language);
@@ -113,13 +122,13 @@ const ConnectivityStatus = ({ connectivityStatus, language, styleSet }) => {
     return (
       <React.Fragment>
         <ScreenReaderText text={localizedText} />
-        <div className={styleSet.errorNotification}>
+        <div className={errorNotificationStyleSet}>
           <ErrorNotificationIcon />
           {localizedText}
         </div>
       </React.Fragment>
     );
-  }, [language, styleSet.errorNotification]);
+  }, [language, errorNotificationStyleSet]);
 
   const renderEmptyStatus = useCallback(
     () => <ScreenReaderText text={localize('CONNECTED_NOTIFICATION', language)} />,
@@ -165,12 +174,7 @@ const ConnectivityStatus = ({ connectivityStatus, language, styleSet }) => {
 
 ConnectivityStatus.propTypes = {
   connectivityStatus: PropTypes.string.isRequired,
-  language: PropTypes.string.isRequired,
-  styleSet: PropTypes.shape({
-    connectivityNotification: PropTypes.any.isRequired,
-    errorNotification: PropTypes.any.isRequired,
-    warningNotification: PropTypes.any.isRequired
-  }).isRequired
+  language: PropTypes.string.isRequired
 };
 
-export default connectConnectivityStatus(({ styleSet }) => ({ styleSet }))(ConnectivityStatus);
+export default connectConnectivityStatus()(ConnectivityStatus);
diff --git a/packages/component/src/SendBox/DictationInterims.js b/packages/component/src/SendBox/DictationInterims.js
index 96b1ee6e32..4edd775069 100644
--- a/packages/component/src/SendBox/DictationInterims.js
+++ b/packages/component/src/SendBox/DictationInterims.js
@@ -9,6 +9,7 @@ import { Constants } from 'botframework-webchat-core';
 
 import connectToWebChat from '../connectToWebChat';
 import Localize from '../Localization/Localize';
+import useStyleSet from '../hooks/useStyleSet';
 
 const {
   DictateState: { DICTATING, STARTING, STOPPING }
@@ -29,28 +30,31 @@ const connectDictationInterims = (...selectors) =>
     ...selectors
   );
 
-const DictationInterims = ({ className, dictateInterims = [], dictateState, styleSet }) =>
-  dictateState === STARTING || dictateState === STOPPING ? (
-    <p className={classNames(styleSet.dictationInterims + '', ROOT_CSS + '', className + '', 'status')}>
+const DictationInterims = ({ className, dictateInterims = [], dictateState }) => {
+  const [{ dictationInterims: dictationInterimsStyleSet }] = useStyleSet();
+
+  return dictateState === STARTING || dictateState === STOPPING ? (
+    <p className={classNames(dictationInterimsStyleSet + '', ROOT_CSS + '', className + '', 'status')}>
       {dictateState === STARTING && <Localize text="Starting&hellip;" />}
     </p>
   ) : (
     dictateState === DICTATING &&
-    (dictateInterims.length ? (
-      <p className={classNames(styleSet.dictationInterims + '', ROOT_CSS + '', className + '', 'dictating')}>
-        {dictateInterims.map((interim, index) => (
-          <span key={index}>
-            {interim}
-            &nbsp;
-          </span>
-        ))}
-      </p>
-    ) : (
-      <p className={classNames(styleSet.dictationInterims + '', ROOT_CSS + '', className + '', 'status')}>
-        <Localize text="Listening&hellip;" />
-      </p>
-    ))
+      (dictateInterims.length ? (
+        <p className={classNames(dictationInterimsStyleSet + '', ROOT_CSS + '', className + '', 'dictating')}>
+          {dictateInterims.map((interim, index) => (
+            <span key={index}>
+              {interim}
+              &nbsp;
+            </span>
+          ))}
+        </p>
+      ) : (
+        <p className={classNames(dictationInterimsStyleSet + '', ROOT_CSS + '', className + '', 'status')}>
+          <Localize text="Listening&hellip;" />
+        </p>
+      ))
   );
+};
 
 DictationInterims.defaultProps = {
   className: ''
@@ -59,15 +63,12 @@ DictationInterims.defaultProps = {
 DictationInterims.propTypes = {
   className: PropTypes.string,
   dictateInterims: PropTypes.arrayOf(PropTypes.string).isRequired,
-  dictateState: PropTypes.number.isRequired,
-  styleSet: PropTypes.shape({
-    dictationInterims: PropTypes.any.isRequired
-  }).isRequired
+  dictateState: PropTypes.number.isRequired
 };
 
 // TODO: [P3] After speech started, when clicking on the transcript, it should
 //       stop the dictation and allow the user to type-correct the transcript
 
-export default connectDictationInterims(({ styleSet }) => ({ styleSet }))(DictationInterims);
+export default connectDictationInterims()(DictationInterims);
 
 export { connectDictationInterims };
diff --git a/packages/component/src/SendBox/IconButton.js b/packages/component/src/SendBox/IconButton.js
index f6471bcef5..a141cb460f 100644
--- a/packages/component/src/SendBox/IconButton.js
+++ b/packages/component/src/SendBox/IconButton.js
@@ -2,19 +2,23 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import connectToWebChat from '../connectToWebChat';
+import useStyleSet from '../hooks/useStyleSet';
 
-const IconButton = ({ alt, children, className, disabled, onClick, styleSet }) => (
-  <button
-    className={classNames(styleSet.sendBoxButton + '', className + '')}
-    disabled={disabled}
-    onClick={onClick}
-    title={alt}
-    type="button"
-  >
-    {children}
-  </button>
-);
+const IconButton = ({ alt, children, className, disabled, onClick }) => {
+  const [{ sendBoxButton: sendBoxButtonStyleSet }] = useStyleSet();
+
+  return (
+    <button
+      className={classNames(sendBoxButtonStyleSet + '', className + '')}
+      disabled={disabled}
+      onClick={onClick}
+      title={alt}
+      type="button"
+    >
+      {children}
+    </button>
+  );
+};
 
 IconButton.defaultProps = {
   alt: '',
@@ -29,10 +33,7 @@ IconButton.propTypes = {
   children: PropTypes.any,
   className: PropTypes.string,
   disabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  styleSet: PropTypes.shape({
-    sendBoxButton: PropTypes.any.isRequired
-  }).isRequired
+  onClick: PropTypes.func
 };
 
-export default connectToWebChat(({ styleSet }) => ({ styleSet }))(IconButton);
+export default IconButton;
diff --git a/packages/component/src/SendBox/MicrophoneButton.js b/packages/component/src/SendBox/MicrophoneButton.js
index 782b8cf9c9..71b8e65b1d 100644
--- a/packages/component/src/SendBox/MicrophoneButton.js
+++ b/packages/component/src/SendBox/MicrophoneButton.js
@@ -12,6 +12,7 @@ import { localize } from '../Localization/Localize';
 import connectToWebChat from '../connectToWebChat';
 import IconButton from './IconButton';
 import MicrophoneIcon from './Assets/MicrophoneIcon';
+import useStyleSet from '../hooks/useStyleSet';
 
 const { DictateState } = Constants;
 
@@ -76,19 +77,23 @@ const connectMicrophoneButton = (...selectors) => {
   );
 };
 
-const MicrophoneButton = ({ className, click, dictating, disabled, language, styleSet }) => (
-  <div
-    aria-controls="webchatSendBoxMicrophoneButton"
-    className={classNames(styleSet.microphoneButton + '', ROOT_CSS + '', className + '', { dictating })}
-  >
-    <IconButton alt={localize('Speak', language)} disabled={disabled} onClick={click}>
-      <MicrophoneIcon />
-    </IconButton>
-    <div aria-live="polite" className="sr-only" id="webchatSendBoxMicrophoneButton" role="status">
-      {localize(dictating ? 'Microphone on' : 'Microphone off', language)}
+const MicrophoneButton = ({ className, click, dictating, disabled, language }) => {
+  const [{ microphoneButton: microphoneButtonStyleSet }] = useStyleSet();
+
+  return (
+    <div
+      aria-controls="webchatSendBoxMicrophoneButton"
+      className={classNames(microphoneButtonStyleSet + '', ROOT_CSS + '', className + '', { dictating })}
+    >
+      <IconButton alt={localize('Speak', language)} disabled={disabled} onClick={click}>
+        <MicrophoneIcon />
+      </IconButton>
+      <div aria-live="polite" className="sr-only" id="webchatSendBoxMicrophoneButton" role="status">
+        {localize(dictating ? 'Microphone on' : 'Microphone off', language)}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 MicrophoneButton.defaultProps = {
   className: '',
@@ -101,12 +106,9 @@ MicrophoneButton.propTypes = {
   click: PropTypes.func.isRequired,
   dictating: PropTypes.bool,
   disabled: PropTypes.bool,
-  language: PropTypes.string.isRequired,
-  styleSet: PropTypes.shape({
-    microphoneButton: PropTypes.any.isRequired
-  }).isRequired
+  language: PropTypes.string.isRequired
 };
 
-export default connectMicrophoneButton(({ styleSet }) => ({ styleSet }))(MicrophoneButton);
+export default connectMicrophoneButton()(MicrophoneButton);
 
 export { connectMicrophoneButton };
diff --git a/packages/component/src/SendBox/SuggestedAction.js b/packages/component/src/SendBox/SuggestedAction.js
index f4e68d3802..fccdf7d3aa 100644
--- a/packages/component/src/SendBox/SuggestedAction.js
+++ b/packages/component/src/SendBox/SuggestedAction.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import connectToWebChat from '../connectToWebChat';
+import useStyleSet from '../hooks/useStyleSet';
 
 const SUGGESTED_ACTION_CSS = css({
   display: 'inline-block',
@@ -27,14 +28,18 @@ const connectSuggestedAction = (...selectors) =>
     ...selectors
   );
 
-const SuggestedAction = ({ buttonText, click, disabled, image, styleSet }) => (
-  <div className={classNames(styleSet.suggestedAction + '', SUGGESTED_ACTION_CSS + '')}>
-    <button disabled={disabled} onClick={click} type="button">
-      {image && <img src={image} />}
-      <nobr>{buttonText}</nobr>
-    </button>
-  </div>
-);
+const SuggestedAction = ({ buttonText, click, disabled, image }) => {
+  const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
+
+  return (
+    <div className={classNames(suggestedActionStyleSet + '', SUGGESTED_ACTION_CSS + '')}>
+      <button disabled={disabled} onClick={click} type="button">
+        {image && <img src={image} />}
+        <nobr>{buttonText}</nobr>
+      </button>
+    </div>
+  );
+};
 
 SuggestedAction.defaultProps = {
   disabled: false,
@@ -45,12 +50,9 @@ SuggestedAction.propTypes = {
   buttonText: PropTypes.string.isRequired,
   click: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
-  image: PropTypes.string,
-  styleSet: PropTypes.shape({
-    suggestedAction: PropTypes.any.isRequired
-  }).isRequired
+  image: PropTypes.string
 };
 
-export default connectSuggestedAction(({ styleSet }) => ({ styleSet }))(SuggestedAction);
+export default connectSuggestedAction()(SuggestedAction);
 
 export { connectSuggestedAction };
diff --git a/packages/component/src/SendBox/SuggestedActions.js b/packages/component/src/SendBox/SuggestedActions.js
index 265adf6d6d..00710b6423 100644
--- a/packages/component/src/SendBox/SuggestedActions.js
+++ b/packages/component/src/SendBox/SuggestedActions.js
@@ -7,6 +7,8 @@ import React from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 import SuggestedAction from './SuggestedAction';
+import useStyleOptions from '../hooks/useStyleOptions';
+import useStyleSet from '../hooks/useStyleSet';
 
 function suggestedActionText({ displayText, title, type, value }) {
   if (type === 'messageBack') {
@@ -29,27 +31,33 @@ const connectSuggestedActions = (...selectors) =>
     ...selectors
   );
 
-const SuggestedActions = ({ className, styleSet, suggestedActions = [] }) =>
-  !!suggestedActions.length && (
-    <BasicFilm
-      autoCenter={false}
-      className={classNames(styleSet.suggestedActions + '', className + '')}
-      showDots={false}
-      styleSet={styleSet.options.suggestedActionsStyleSet}
-    >
-      {suggestedActions.map(({ displayText, image, text, title, type, value }, index) => (
-        <SuggestedAction
-          buttonText={suggestedActionText({ displayText, title, type, value })}
-          displayText={displayText}
-          image={image}
-          key={index}
-          text={text}
-          type={type}
-          value={value}
-        />
-      ))}
-    </BasicFilm>
+const SuggestedActions = ({ className, suggestedActions = [] }) => {
+  const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet();
+  const [{ suggestedActionsStyleSet: suggestedActionsStyleSetForReactFilm }] = useStyleOptions();
+
+  return (
+    !!suggestedActions.length && (
+      <BasicFilm
+        autoCenter={false}
+        className={classNames(suggestedActionsStyleSet + '', className + '')}
+        showDots={false}
+        styleSet={suggestedActionsStyleSetForReactFilm}
+      >
+        {suggestedActions.map(({ displayText, image, text, title, type, value }, index) => (
+          <SuggestedAction
+            buttonText={suggestedActionText({ displayText, title, type, value })}
+            displayText={displayText}
+            image={image}
+            key={index}
+            text={text}
+            type={type}
+            value={value}
+          />
+        ))}
+      </BasicFilm>
+    )
   );
+};
 
 SuggestedActions.defaultProps = {
   className: ''
@@ -57,12 +65,6 @@ SuggestedActions.defaultProps = {
 
 SuggestedActions.propTypes = {
   className: PropTypes.string,
-  styleSet: PropTypes.shape({
-    options: PropTypes.shape({
-      suggestedActionsStyleSet: PropTypes.any.isRequired
-    }).isRequired,
-    suggestedActions: PropTypes.any.isRequired
-  }).isRequired,
   suggestedActions: PropTypes.arrayOf(
     PropTypes.shape({
       displayText: PropTypes.string,
@@ -75,6 +77,6 @@ SuggestedActions.propTypes = {
   ).isRequired
 };
 
-export default connectSuggestedActions(({ styleSet }) => ({ styleSet }))(SuggestedActions);
+export default connectSuggestedActions()(SuggestedActions);
 
 export { connectSuggestedActions };
diff --git a/packages/component/src/SendBox/TextBox.js b/packages/component/src/SendBox/TextBox.js
index 3a1ab41e72..8b5043913c 100644
--- a/packages/component/src/SendBox/TextBox.js
+++ b/packages/component/src/SendBox/TextBox.js
@@ -6,6 +6,8 @@ import React from 'react';
 import { Context as TypeFocusSinkContext } from '../Utils/TypeFocusSink';
 import { localize } from '../Localization/Localize';
 import connectToWebChat from '../connectToWebChat';
+import useStyleOptions from '../hooks/useStyleOptions';
+import useStyleSet from '../hooks/useStyleSet';
 
 const ROOT_CSS = css({
   display: 'flex',
@@ -53,16 +55,16 @@ const connectSendTextBox = (...selectors) =>
     ...selectors
   );
 
-const TextBox = ({ className, disabled, language, onChange, onKeyPress, onSubmit, styleSet, value }) => {
+const TextBox = ({ className, disabled, language, onChange, onKeyPress, onSubmit, value }) => {
+  const [{ sendBoxTextWrap }] = useStyleOptions();
+  const [{ sendBoxTextArea: sendBoxTextAreaStyleSet, sendBoxTextBox: sendBoxTextBoxStyleSet }] = useStyleSet();
+
   const typeYourMessageString = localize('Type your message', language);
   const sendBoxString = localize('Sendbox', language);
-  const {
-    options: { sendBoxTextWrap }
-  } = styleSet;
 
   return (
     <form
-      className={classNames(ROOT_CSS + '', styleSet.sendBoxTextArea + '', styleSet.sendBoxTextBox + '', className + '')}
+      className={classNames(ROOT_CSS + '', sendBoxTextAreaStyleSet + '', sendBoxTextBoxStyleSet + '', className + '')}
       onSubmit={onSubmit}
     >
       {
@@ -115,16 +117,9 @@ TextBox.propTypes = {
   onChange: PropTypes.func.isRequired,
   onKeyPress: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,
-  styleSet: PropTypes.shape({
-    options: PropTypes.shape({
-      sendBoxTextWrap: PropTypes.bool.isRequired
-    }).isRequired,
-    sendBoxTextArea: PropTypes.any.isRequired,
-    sendBoxTextBox: PropTypes.any.isRequired
-  }).isRequired,
   value: PropTypes.string
 };
 
-export default connectSendTextBox(({ styleSet }) => ({ styleSet }))(TextBox);
+export default connectSendTextBox()(TextBox);
 
 export { connectSendTextBox };
diff --git a/packages/component/src/SendBox/TypingIndicator.js b/packages/component/src/SendBox/TypingIndicator.js
index cf7de55efe..c5bcb935bd 100644
--- a/packages/component/src/SendBox/TypingIndicator.js
+++ b/packages/component/src/SendBox/TypingIndicator.js
@@ -4,15 +4,13 @@ import React, { useEffect, useState } from 'react';
 import { localize } from '../Localization/Localize';
 import connectToWebChat from '../connectToWebChat';
 import TypingAnimation from './Assets/TypingAnimation';
+import useStyleOptions from '../hooks/useStyleOptions';
+import useStyleSet from '../hooks/useStyleSet';
+
+const TypingIndicator = ({ language, lastTypingAt }) => {
+  const [{ typingAnimationDuration }] = useStyleOptions();
+  const [{ typingIndicator }] = useStyleSet();
 
-const TypingIndicator = ({
-  language,
-  lastTypingAt,
-  styleSet: {
-    options: { typingAnimationDuration },
-    typingIndicator
-  }
-}) => {
   const [showTyping, setShowTyping] = useState(false);
 
   useEffect(() => {
@@ -41,15 +39,7 @@ const TypingIndicator = ({
 
 TypingIndicator.propTypes = {
   language: PropTypes.string.isRequired,
-  lastTypingAt: PropTypes.any.isRequired,
-  styleSet: PropTypes.shape({
-    options: PropTypes.shape({
-      typingAnimationDuration: PropTypes.number
-    }).isRequired,
-    typingIndicator: PropTypes.any.isRequired
-  }).isRequired
+  lastTypingAt: PropTypes.any.isRequired
 };
 
-export default connectToWebChat(({ lastTypingAt, language, styleSet }) => ({ lastTypingAt, language, styleSet }))(
-  TypingIndicator
-);
+export default connectToWebChat(({ lastTypingAt, language }) => ({ lastTypingAt, language }))(TypingIndicator);
diff --git a/packages/component/src/SendBox/UploadButton.js b/packages/component/src/SendBox/UploadButton.js
index 16aa537ad0..2bd2acff8b 100644
--- a/packages/component/src/SendBox/UploadButton.js
+++ b/packages/component/src/SendBox/UploadButton.js
@@ -8,6 +8,7 @@ import AttachmentIcon from './Assets/AttachmentIcon';
 import connectToWebChat from '../connectToWebChat';
 import downscaleImageToDataURL from '../Utils/downscaleImageToDataURL';
 import IconButton from './IconButton';
+import useStyleSet from '../hooks/useStyleSet';
 
 const ROOT_CSS = css({
   overflow: 'hidden',
@@ -80,7 +81,8 @@ const connectUploadButton = (...selectors) =>
     ...selectors
   );
 
-const UploadButton = ({ disabled, language, sendFiles, styleSet }) => {
+const UploadButton = ({ disabled, language, sendFiles }) => {
+  const [{ uploadButton: uploadButtonStyleSet }] = useStyleSet();
   const inputRef = useRef();
   const uploadFileString = localize('Upload file', language);
   const { current } = inputRef;
@@ -101,7 +103,7 @@ const UploadButton = ({ disabled, language, sendFiles, styleSet }) => {
   );
 
   return (
-    <div className={classNames(ROOT_CSS + '', styleSet.uploadButton + '')}>
+    <div className={classNames(ROOT_CSS + '', uploadButtonStyleSet + '')}>
       <input
         aria-hidden="true"
         disabled={disabled}
@@ -126,19 +128,9 @@ UploadButton.defaultProps = {
 UploadButton.propTypes = {
   disabled: PropTypes.bool,
   language: PropTypes.string.isRequired,
-  sendFiles: PropTypes.func.isRequired,
-  styleSet: PropTypes.shape({
-    options: PropTypes.shape({
-      enableUploadThumbnail: PropTypes.bool.isRequired,
-      uploadThumbnailContentType: PropTypes.string.isRequired,
-      uploadThumbnailHeight: PropTypes.number.isRequired,
-      uploadThumbnailQuality: PropTypes.number.isRequired,
-      uploadThumbnailWidth: PropTypes.number.isRequired
-    }).isRequired,
-    uploadButton: PropTypes.any.isRequired
-  }).isRequired
+  sendFiles: PropTypes.func.isRequired
 };
 
-export default connectUploadButton(({ styleSet }) => ({ styleSet }))(UploadButton);
+export default connectUploadButton()(UploadButton);
 
 export { connectUploadButton };