From 9b460ba68617c59e840d39258b5c9873383e5f58 Mon Sep 17 00:00:00 2001 From: Brian Fleming Date: Mon, 7 Oct 2024 09:06:03 -0400 Subject: [PATCH] IconButton Replacement Finished (#2151) * replace iconbutton and other material ui items in media controls [CV2-3360] * remove last use of iconbutton in favor or buttonmain cds component [CV2-3360] * fix linter errors in test files * Update testing class for playback speed [CV2-3360] * replace mistakenly removed id [CV2-3360] * use BEM class on volume button for testing [CV2-3360] * [smoke tests] Run all smoke tests for this branch --- .../app/components/article/ArticleForm.json | 2 +- .../team/SmoochBot/SmoochBotConfig.json | 12 +- .../SmoochBot/SmoochBotResourceEditor.json | 30 ++++- .../team/SmoochBot/SmoochBotSettings.json | 5 + .../team/SmoochBot/localizables.json | 13 ++- .../team/TeamTags/TeamTagsComponent.json | 15 +++ .../buttons-checkboxes-chips/ButtonMain.js | 4 + .../cds/media-cards/MediaControls.js | 103 +++++------------ .../cds/media-cards/MediaControls.module.css | 108 ++++++++++++++++++ .../cds/media-cards/MediaPlaybackSpeed.js | 52 ++++----- .../media-cards/MediaPlaybackSpeed.test.js | 14 +-- .../components/cds/media-cards/MediaVolume.js | 96 +++------------- .../cds/media-cards/MediaVolume.test.js | 31 +++-- .../team/SmoochBot/SmoochBotIntegrations.js | 30 +++-- 14 files changed, 270 insertions(+), 245 deletions(-) create mode 100644 src/app/components/cds/media-cards/MediaControls.module.css diff --git a/localization/react-intl/src/app/components/article/ArticleForm.json b/localization/react-intl/src/app/components/article/ArticleForm.json index 20e047f1bf..795c26aeb4 100644 --- a/localization/react-intl/src/app/components/article/ArticleForm.json +++ b/localization/react-intl/src/app/components/article/ArticleForm.json @@ -189,4 +189,4 @@ "description": "Label for input to select language", "defaultMessage": "Language" } -] +] \ No newline at end of file diff --git a/localization/react-intl/src/app/components/team/SmoochBot/SmoochBotConfig.json b/localization/react-intl/src/app/components/team/SmoochBot/SmoochBotConfig.json index 373f5800f7..f3b54c4030 100644 --- a/localization/react-intl/src/app/components/team/SmoochBot/SmoochBotConfig.json +++ b/localization/react-intl/src/app/components/team/SmoochBot/SmoochBotConfig.json @@ -1,17 +1,7 @@ [ - { - "id": "smoochBot.designYourBot", - "description": "Title of tipline settings page", - "defaultMessage": "Design your bot" - }, - { - "id": "smoochBot.settings", - "description": "Tab label to click to see the settings area", - "defaultMessage": "Settings" - }, { "id": "smoochBot.addResource", "description": "Button label to add a resource to this bot", - "defaultMessage": "Resource" + "defaultMessage": "New Tipline Resource" } ] \ No newline at end of file diff --git a/localization/react-intl/src/app/components/team/SmoochBot/SmoochBotResourceEditor.json b/localization/react-intl/src/app/components/team/SmoochBot/SmoochBotResourceEditor.json index 1f12f67c2c..a6110cd029 100644 --- a/localization/react-intl/src/app/components/team/SmoochBot/SmoochBotResourceEditor.json +++ b/localization/react-intl/src/app/components/team/SmoochBot/SmoochBotResourceEditor.json @@ -1,4 +1,29 @@ [ + { + "id": "smoochBotResourceEditor.newResource", + "description": "Page title for creating a new resource for the tipline bot to deliver", + "defaultMessage": "Create New Resource" + }, + { + "id": "smoochBotResourceEditor.editResource", + "description": "Page title for editing an existing resource for the tipline bot to deliver", + "defaultMessage": "Edit Resource" + }, + { + "id": "smoochBotResourceEditor.newResourceDescription", + "description": "Page description for adding a new tipline resource", + "defaultMessage": "Add multimedia content as a response to a Tipline Menu option by adding a new resource." + }, + { + "id": "smoochBotResourceEditor.save", + "description": "Label for action button to save a tipline resource.", + "defaultMessage": "Save" + }, + { + "id": "smoochBotResourceEditor.create", + "description": "Label for action button to create a new tipline resource.", + "defaultMessage": "Create Resource" + }, { "id": "smoochBotResourceEditor.errorRssFeedUrl", "description": "Error message displayed when a user submits a form with a URL that the server does not recognize.", @@ -59,11 +84,6 @@ "description": "Label for a switch where the user turns on RSS (Really Simple Syndication) capability - should not be translated unless there is a local idiom for 'RSS'", "defaultMessage": "RSS" }, - { - "id": "smoochBotResourceEditor.save", - "description": "Label for action button to save a tipline resource.", - "defaultMessage": "Save" - }, { "id": "smoochBotResourceEditor.delete", "description": "Label for action button to delete a tipline resource.", diff --git a/localization/react-intl/src/app/components/team/SmoochBot/SmoochBotSettings.json b/localization/react-intl/src/app/components/team/SmoochBot/SmoochBotSettings.json index 3d157f5f91..9dd07ec47a 100644 --- a/localization/react-intl/src/app/components/team/SmoochBot/SmoochBotSettings.json +++ b/localization/react-intl/src/app/components/team/SmoochBot/SmoochBotSettings.json @@ -1,4 +1,9 @@ [ + { + "id": "smoochBotSettings.messagingPlatform", + "description": "Title of available messaging platforms that can be connected in the tipline settings page", + "defaultMessage": "Messaging Platforms" + }, { "id": "smoochBotSettings.internalSettings", "description": "Title of Internal Settings section in the tipline settings page", diff --git a/localization/react-intl/src/app/components/team/SmoochBot/localizables.json b/localization/react-intl/src/app/components/team/SmoochBot/localizables.json index f3d12248b9..e90a2f8929 100644 --- a/localization/react-intl/src/app/components/team/SmoochBot/localizables.json +++ b/localization/react-intl/src/app/components/team/SmoochBot/localizables.json @@ -1,13 +1,18 @@ [ { - "id": "smoochBot.labelContent", - "description": "Button label in tipline settings page", - "defaultMessage": "Content & translation" + "id": "smoochBot.labelSettings", + "description": "Label for the bot platform settings area", + "defaultMessage": "Platforms" }, { "id": "smoochBot.labelMainMenu", "description": "Label for the bot Main menu content area", - "defaultMessage": "Main menu" + "defaultMessage": "Main Menu" + }, + { + "id": "smoochBot.labelContent", + "description": "Button label in tipline settings page", + "defaultMessage": "Content & Translation" }, { "id": "smoochBot.placeholderGreeting", diff --git a/localization/react-intl/src/app/components/team/TeamTags/TeamTagsComponent.json b/localization/react-intl/src/app/components/team/TeamTags/TeamTagsComponent.json index e90e74a894..794996a4dc 100644 --- a/localization/react-intl/src/app/components/team/TeamTags/TeamTagsComponent.json +++ b/localization/react-intl/src/app/components/team/TeamTags/TeamTagsComponent.json @@ -14,6 +14,21 @@ "description": "Title for the tags settings page", "defaultMessage": "Tags [{count}]" }, + { + "id": "search.previousPage", + "description": "Pagination button to go to previous page", + "defaultMessage": "Previous page" + }, + { + "id": "searchResults.itemsCount", + "description": "Pagination count of items returned", + "defaultMessage": "{totalCount, plural, one {1 / 1} other {{from} - {to} / #}}" + }, + { + "id": "search.nextPage", + "description": "Pagination button to go to next page", + "defaultMessage": "Next page" + }, { "id": "teamTagsComponent.blank", "description": "Message displayed when there are no tags in the workspace", diff --git a/src/app/components/cds/buttons-checkboxes-chips/ButtonMain.js b/src/app/components/cds/buttons-checkboxes-chips/ButtonMain.js index 28a30e0c86..69905d3a63 100644 --- a/src/app/components/cds/buttons-checkboxes-chips/ButtonMain.js +++ b/src/app/components/cds/buttons-checkboxes-chips/ButtonMain.js @@ -14,6 +14,7 @@ const ButtonMain = ({ iconRight, label, onClick, + onPointerUp, size, theme, title, @@ -40,6 +41,7 @@ const ButtonMain = ({ type="button" variant={variant} onClick={onClick} + onPointerUp={onPointerUp} {...buttonProps} > { iconLeft && ( @@ -77,6 +79,7 @@ ButtonMain.defaultProps = { customStyle: {}, buttonProps: {}, onClick: () => {}, + onPointerUp: () => {}, }; ButtonMain.propTypes = { @@ -93,6 +96,7 @@ ButtonMain.propTypes = { title: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), variant: PropTypes.oneOf(['contained', 'outlined', 'text']), onClick: PropTypes.func, + onPointerUp: PropTypes.func, }; export default ButtonMain; diff --git a/src/app/components/cds/media-cards/MediaControls.js b/src/app/components/cds/media-cards/MediaControls.js index 5c96513abb..2b270f82b8 100644 --- a/src/app/components/cds/media-cards/MediaControls.js +++ b/src/app/components/cds/media-cards/MediaControls.js @@ -1,47 +1,16 @@ import React from 'react'; // import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; -import { - Box, - Grid, - IconButton, -} from '@material-ui/core'; import MediaTimeline from './MediaTimeline'; import MediaVolume from './MediaVolume'; import MediaPlaybackSpeed from './MediaPlaybackSpeed'; +import ButtonMain from '../buttons-checkboxes-chips/ButtonMain'; import PauseIcon from '../../../icons/pause.svg'; import PlayArrowIcon from '../../../icons/play_arrow.svg'; - -const useStyles = makeStyles(theme => ({ - root: { - color: 'var(--color-white-100)', - background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.31) 51.56%, rgba(0, 0, 0, 0.7) 100%)', - position: 'absolute', - bottom: 0, - width: '100%', - padding: theme.spacing(1.5, 1, 0, 1), - }, - icon: { - color: 'var(--color-white-100)', - fontSize: '24px', - marginRight: theme.spacing(1), - '&:hover': { - color: 'var(--color-white-100)', - backgroundColor: 'var(--overlayLight)', - }, - }, - overlay: { - position: 'absolute', - top: 0, - height: '100%', - width: '100%', - }, -})); +import styles from './MediaControls.module.css'; const MediaControls = ({ videoRef, }) => { - const classes = useStyles(); const [isPlaying, setIsPlaying] = React.useState(false); const [duration, setDuration] = React.useState(0); const [currentTime, setCurrentTime] = React.useState(0); @@ -74,13 +43,13 @@ const MediaControls = ({ }; const PlayButton = () => ( - : } + size="default" + theme="white" + variant="text" onPointerUp={togglePlay} - > - { isPlaying ? : } - + /> ); const prettyPrintTime = (seconds) => { @@ -96,58 +65,38 @@ const MediaControls = ({ }; const durationDisplay = prettyPrintTime(duration); const TimeDisplay = () => ( -
+
{prettyPrintTime(currentTime)} / {durationDisplay}
); return ( <> -
- - +
+
+
- - - - - - - - - +
+
+ + +
- +
); }; diff --git a/src/app/components/cds/media-cards/MediaControls.module.css b/src/app/components/cds/media-cards/MediaControls.module.css new file mode 100644 index 0000000000..358c3ca410 --- /dev/null +++ b/src/app/components/cds/media-cards/MediaControls.module.css @@ -0,0 +1,108 @@ +.media-controls-overlay { + border: solid 3px var(--color-white-100); + height: 100%; + position: absolute; + top: 0; + width: 100%; +} + +.media-controls { + align-items: center; + background: linear-gradient(180deg, rgba(0 0 0 / 0) 0%, rgba(0 0 0 / .31) 51.56%, rgba(0 0 0 / .7) 100%); + bottom: 0; + color: var(--color-white-100); + display: flex; + flex-wrap: wrap; + padding: 12px 8px 0; + position: absolute; + width: 100%; + + .media-controls-play-time, + .media-controls-volume-speed { + @mixin typography-body2; + align-items: center; + display: flex; + flex: 1 0 50%; + flex-wrap: wrap; + gap: 6px; + margin: 0; + max-width: 50%; + width: 100%; + } + + .media-controls-volume-speed { + justify-content: flex-end; + + .media-controls-volume { + align-items: center; + background-color: rgba(0 0 0 / 0); + border-radius: var(--border-radius-default); + display: flex; + max-width: 150px; + padding: 0 0 0 16px; + transition: .5s; + width: 150px; + + .media-controls-volume-slider { + flex: 1; + margin-right: 12px; + opacity: 0; + + :global(.MuiSlider-rail) { + border-radius: var(--border-radius-medium); + color: rgba(255 255 255 / .7); + height: 4px; + } + + :global(.MuiSlider-track) { + border-radius: var(--border-radius-medium); + color: var(--color-white-100); + height: 4px; + } + + :global(.MuiSlider-thumb) { + align-items: center; + background-color: var(--color-white-100); + /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */ + border-radius: 50%; + box-shadow: none; + display: flex; + height: 12px; + justify-content: center; + margin: -5px 0 0 -6px; + opacity: 0; + outline: 0; + position: absolute; + transition: box-shadow 150ms cubic-bezier(.4, 0, .2, 1) 0ms; + width: 12px; + + &:focus, + &:hover { + box-shadow: inherit; + } + } + + &:hover { + :global(.MuiSlider-thumb) { + opacity: 1; + transition: opacity .5s; + } + } + } + + &:hover { + background-color: var(--overlayLight); + + .media-controls-volume-slider { + opacity: 1; + transition: .5s; + } + } + } + + .activePlaybackSpeed { + color: var(--color-blue-54); + font-weight: 700; + } + } +} diff --git a/src/app/components/cds/media-cards/MediaPlaybackSpeed.js b/src/app/components/cds/media-cards/MediaPlaybackSpeed.js index 2718f356d2..0797407ee6 100644 --- a/src/app/components/cds/media-cards/MediaPlaybackSpeed.js +++ b/src/app/components/cds/media-cards/MediaPlaybackSpeed.js @@ -1,34 +1,18 @@ import React from 'react'; // import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; import { FormattedMessage } from 'react-intl'; -import { - IconButton, - Menu, - MenuItem, -} from '@material-ui/core'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; +import cx from 'classnames/bind'; +import ButtonMain from '../buttons-checkboxes-chips/ButtonMain'; import SlowMotionVideoIcon from '../../../icons/slow_motion_video.svg'; - -const useStyles = makeStyles(() => ({ - active: { - backgroundColor: 'var(--color-beige-93)', - }, - icon: { - color: 'var(--color-white-100)', - fontSize: '24px', - '&:hover': { - color: 'var(--color-white-100)', - backgroundColor: 'var(--overlayLight)', - }, - }, -})); +import styles from './MediaControls.module.css'; const MediaPlaybackSpeed = ({ playbackSpeed, setPlaybackSpeed, videoRef, }) => { - const classes = useStyles(); const [anchorEl, setAnchorEl] = React.useState(null); const containerRef = React.useRef(null); @@ -49,9 +33,13 @@ const MediaPlaybackSpeed = ({ return (
- - - + } + size="default" + theme="white" + variant="text" + onClick={handleClick} + /> - handlePlaybackRateChange(0.25)}>0.25x - handlePlaybackRateChange(0.5)}>0.5x - handlePlaybackRateChange(0.75)}>0.75x - handlePlaybackRateChange(1)}> + handlePlaybackRateChange(0.25)}>0.25x + handlePlaybackRateChange(0.5)}>0.5x + handlePlaybackRateChange(0.75)}>0.75x + handlePlaybackRateChange(1)}> - handlePlaybackRateChange(1.25)}>1.25x - handlePlaybackRateChange(1.5)}>1.5x - handlePlaybackRateChange(1.75)}>1.75x - handlePlaybackRateChange(2)}>2x + handlePlaybackRateChange(1.25)}>1.25x + handlePlaybackRateChange(1.5)}>1.5x + handlePlaybackRateChange(1.75)}>1.75x + handlePlaybackRateChange(2)}>2x
); diff --git a/src/app/components/cds/media-cards/MediaPlaybackSpeed.test.js b/src/app/components/cds/media-cards/MediaPlaybackSpeed.test.js index 01652ec854..9196bc355f 100644 --- a/src/app/components/cds/media-cards/MediaPlaybackSpeed.test.js +++ b/src/app/components/cds/media-cards/MediaPlaybackSpeed.test.js @@ -1,11 +1,9 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { - IconButton, - Menu, - MenuItem, -} from '@material-ui/core'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; import MediaPlaybackSpeed from './MediaPlaybackSpeed'; +import ButtonMain from '../buttons-checkboxes-chips/ButtonMain'; describe('MediaPlaybackSpeed', () => { // our "video" DOM node, which is just a ref to a playbackRate from the perspective of this component @@ -29,14 +27,14 @@ describe('MediaPlaybackSpeed', () => { it('opens popover menu on click', () => { const wrapper = shallow(); expect(wrapper.find(Menu).props().open).toBeFalsy(); - expect(wrapper.find(IconButton)).toHaveLength(1); - wrapper.find(IconButton).at(0).simulate('click', { currentTarget: 1 }); + expect(wrapper.find(ButtonMain)).toHaveLength(1); + wrapper.find(ButtonMain).at(0).simulate('click', { currentTarget: 1 }); expect(wrapper.find(Menu).props().open).toBeTruthy(); }); it('changes selected menu item based on mounted speed', () => { const wrapper = shallow(); - expect(wrapper.find('.makeStyles-active-1').at(0).text()).toEqual('0.5x'); + expect(wrapper.find('.test-active-playback-speed').at(0).text()).toEqual('0.5x'); }); it('changes video speed based on menu selections', () => { diff --git a/src/app/components/cds/media-cards/MediaVolume.js b/src/app/components/cds/media-cards/MediaVolume.js index fa346d9fb2..7ab7a3800c 100644 --- a/src/app/components/cds/media-cards/MediaVolume.js +++ b/src/app/components/cds/media-cards/MediaVolume.js @@ -1,87 +1,16 @@ import React from 'react'; // import PropTypes from 'prop-types'; -import { makeStyles, withStyles } from '@material-ui/core/styles'; -import { - Box, - IconButton, - Slider, -} from '@material-ui/core'; +import Slider from '@material-ui/core/Slider'; +import ButtonMain from '../buttons-checkboxes-chips/ButtonMain'; import VolumeUpIcon from '../../../icons/volume_up.svg'; import VolumeOffIcon from '../../../icons/volume_off.svg'; - -const useStyles = makeStyles(theme => ({ - container: { - borderRadius: theme.spacing(4.5), - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - alignItems: 'center', - maxWidth: '150px', - width: '150px', - backgroundColor: 'rgba(0, 0, 0, 0)', - transition: '0.5s', - '&:hover': { - '& $slider': { - opacity: 1, - transition: '0.5s', - }, - backgroundColor: 'var(--overlayLight)', - }, - }, - slider: { - flex: 1, - marginRight: theme.spacing(1.5), - opacity: 0, - }, - icon: { - color: 'var(--color-white-100)', - fontSize: '24px', - '&:hover': { - color: 'var(--color-white-100)', - backgroundColor: 'var(--overlayLight)', - }, - marginRight: theme.spacing(-1), - }, -})); - -const CustomSlider = withStyles(theme => ({ - root: { - '&:hover': { - '& $thumb': { - opacity: 1, - }, - }, - }, - thumb: { - color: 'var(--color-white-100)', - height: theme.spacing(1.5), - width: theme.spacing(1.5), - opacity: 0, - boxShadow: 'none', - '&:focus, &:hover, &$active': { - boxShadow: 'inherit', - }, - }, - focusVisible: { - boxShadow: 'none', - }, - track: { - height: theme.spacing(0.5), - borderRadius: theme.spacing(0.5), - color: 'var(--color-white-100)', - }, - rail: { - height: theme.spacing(0.5), - borderRadius: theme.spacing(0.5), - color: 'rgba(255, 255, 255, 0.7)', - }, -}))(Slider); +import styles from './MediaControls.module.css'; const MediaVolume = ({ setVolume, videoRef, volume, }) => { - const classes = useStyles(); const [isVolumeOff, setIsVolumeOff] = React.useState(false); const [oldVolume, setOldVolume] = React.useState(0); @@ -111,9 +40,9 @@ const MediaVolume = ({ }; return ( - - + - - { isVolumeOff ? : } - - + : } + size="default" + theme="white" + variant="text" + onClick={handleMute} + /> +
); }; diff --git a/src/app/components/cds/media-cards/MediaVolume.test.js b/src/app/components/cds/media-cards/MediaVolume.test.js index f2e0bc6d0b..170ca18cd7 100644 --- a/src/app/components/cds/media-cards/MediaVolume.test.js +++ b/src/app/components/cds/media-cards/MediaVolume.test.js @@ -1,9 +1,7 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { - IconButton, -} from '@material-ui/core'; import MediaVolume from './MediaVolume'; +import ButtonMain from '../buttons-checkboxes-chips/ButtonMain'; describe('MediaVolume', () => { // our "video" DOM node, which is just a ref to a volume from the perspective of this component @@ -25,33 +23,34 @@ describe('MediaVolume', () => { expect(wrapper.find('#media-volume-slider').prop('value')).toEqual(0.75); }); - it('toggles icon state when clicking volume icon', () => { + it('toggles class state when clicking volume icon', () => { const wrapper = shallow(); - expect(wrapper.find(IconButton)).toHaveLength(1); - expect(wrapper.find('.icon__vol-up')).toHaveLength(1); - expect(wrapper.find('.icon__vol-off')).toHaveLength(0); - wrapper.find(IconButton).at(0).simulate('click'); - expect(wrapper.find('.icon__vol-off')).toHaveLength(1); - expect(wrapper.find('.icon__vol-up')).toHaveLength(0); + const button = wrapper.find(ButtonMain); + expect(button).toHaveLength(1); + expect(wrapper.find('.int-button__icon--vol-up')).toHaveLength(1); + expect(wrapper.find('.int-button__icon--vol-off')).toHaveLength(0); + button.simulate('click'); + expect(wrapper.find('.int-button__icon--vol-off')).toHaveLength(1); + expect(wrapper.find('.int-button__icon--vol-up')).toHaveLength(0); }); it('toggles volume icon state when setting volume to 0 via slider', () => { const wrapper = shallow(); - expect(wrapper.find('.icon__vol-up')).toHaveLength(1); - expect(wrapper.find('.icon__vol-off')).toHaveLength(0); + expect(wrapper.find('.int-button__icon--vol-up')).toHaveLength(1); + expect(wrapper.find('.int-button__icon--vol-off')).toHaveLength(0); wrapper.find('#media-volume-slider').at(0).simulate('change', {}, 0); - expect(wrapper.find('.icon__vol-up')).toHaveLength(0); - expect(wrapper.find('.icon__vol-off')).toHaveLength(1); + expect(wrapper.find('.int-button__icon--vol-up')).toHaveLength(0); + expect(wrapper.find('.int-button__icon--vol-off')).toHaveLength(1); }); it('returns volume to prior state when toggling volume icon', () => { const wrapper = shallow(); wrapper.find('#media-volume-slider').at(0).simulate('change', {}, 0.3); // volume off - wrapper.find(IconButton).at(0).simulate('click'); + wrapper.find(ButtonMain).at(0).simulate('click'); expect(videoRef.current.volume).toEqual(0); // restore volume - wrapper.find(IconButton).at(0).simulate('click'); + wrapper.find(ButtonMain).at(0).simulate('click'); expect(videoRef.current.volume).toEqual(0.3); }); }); diff --git a/src/app/components/team/SmoochBot/SmoochBotIntegrations.js b/src/app/components/team/SmoochBot/SmoochBotIntegrations.js index fe590dec76..74b54509dd 100644 --- a/src/app/components/team/SmoochBot/SmoochBotIntegrations.js +++ b/src/app/components/team/SmoochBot/SmoochBotIntegrations.js @@ -3,10 +3,10 @@ import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import Box from '@material-ui/core/Box'; import Tooltip from '@material-ui/core/Tooltip'; -import IconButton from '@material-ui/core/IconButton'; import CopyToClipboard from 'react-copy-to-clipboard'; import { QRCodeCanvas } from 'qrcode.react'; import SmoochBotIntegrationButton from './SmoochBotIntegrationButton'; +import ButtonMain from '../../cds/buttons-checkboxes-chips/ButtonMain'; import TextField from '../../cds/inputs/TextField'; import GetAppIcon from '../../../icons/file_download.svg'; import FileCopyOutlinedIcon from '../../../icons/content_copy.svg'; @@ -107,9 +107,12 @@ const SmoochBotIntegrations = ({ enabledIntegrations, installationId, settings } setTimeout(() => { setCopied(null); }, 1000); }} > - - - + } + size="default" + theme="lightText" + variant="text" + /> @@ -160,17 +163,24 @@ const SmoochBotIntegrations = ({ enabledIntegrations, installationId, settings } setTimeout(() => { setCopied(null); }, 1000); }} > - - - + } + size="default" + theme="lightText" + variant="text" + /> - - - + } + size="default" + theme="lightText" + variant="text" + onClick={handleDownloadWhatsAppQrCode} + />