From 471e5beaaeb93291860102062ec1ff1223e2f2bd Mon Sep 17 00:00:00 2001
From: julia foresti <juliaforesti@julias-MacBook-Pro.local>
Date: Tue, 24 May 2022 16:57:51 -0300
Subject: [PATCH 01/22] Update Buttons with new colors. Ghost variant
 deprecated - replaced with Secondary. Replace ActionButton with IconButton.

---
 .yarnrc.yml                                          |  2 ++
 apps/meteor/client/components/GenericModal.tsx       |  2 +-
 apps/meteor/client/components/Header/State.tsx       |  5 ++---
 .../client/components/Header/ToolBoxAction.tsx       |  5 ++---
 .../components/Message/MessageActions/Action.tsx     |  2 +-
 .../Omnichannel/modals/TranscriptModal.tsx           |  2 +-
 apps/meteor/client/components/Sidebar/Header.js      |  4 ++--
 apps/meteor/client/components/TextCopy.tsx           |  2 +-
 apps/meteor/client/components/UserStatusMenu.tsx     | 12 +++++++++++-
 .../components/VerticalBar/VerticalBarButton.tsx     |  4 +++-
 .../avatar/UserAvatarEditor/UserAvatarEditor.js      | 10 +++-------
 .../client/components/voip/modal/WrapUpCallModal.tsx |  2 +-
 apps/meteor/client/sidebar/Item/Condensed.js         |  4 ++--
 apps/meteor/client/sidebar/Item/Extended.js          |  4 ++--
 apps/meteor/client/sidebar/Item/Medium.js            |  4 ++--
 .../meteor/client/sidebar/footer/voip/VoipFooter.tsx |  6 +++---
 .../meteor/client/sidebar/header/EditStatusModal.tsx |  4 ++--
 .../client/views/account/AccountIntegrationsPage.tsx |  4 ++--
 .../client/views/account/AccountProfilePage.js       |  4 ++--
 .../client/views/account/security/TwoFactorEmail.js  |  2 +-
 .../client/views/account/security/TwoFactorTOTP.js   |  2 +-
 .../views/admin/apps/AppPermissionsReviewModal.js    |  2 +-
 .../client/views/admin/apps/AppUpdateModal.tsx       |  4 ++--
 apps/meteor/client/views/admin/apps/WarningModal.js  |  4 ++--
 .../views/admin/cloud/WorkspaceLoginSection.js       |  4 ++--
 .../views/admin/customEmoji/EditCustomEmoji.tsx      |  8 +++-----
 .../admin/customEmoji/EditCustomEmojiWithData.tsx    |  2 +-
 .../views/admin/customSounds/EditCustomSound.tsx     |  2 +-
 .../client/views/admin/customSounds/EditSound.tsx    |  8 +++-----
 .../admin/customUserStatus/CustomUserStatusForm.tsx  |  2 +-
 .../CustomUserStatusFormWithData.tsx                 |  2 +-
 .../client/views/admin/emailInbox/EmailInboxForm.js  |  2 +-
 .../client/views/admin/emailInbox/SendTestButton.tsx |  6 ++----
 .../client/views/admin/import/NewImportPage.js       |  2 +-
 .../client/views/admin/import/PrepareImportPage.js   |  2 +-
 .../admin/integrations/edit/EditIncomingWebhook.js   |  2 +-
 .../admin/integrations/edit/EditOutgoingWebhook.js   |  2 +-
 .../views/admin/integrations/edit/HistoryItem.js     |  2 +-
 .../integrations/edit/OutgoingWebhookHistoryPage.js  |  2 +-
 apps/meteor/client/views/admin/invites/InviteRow.tsx |  6 ++----
 .../client/views/admin/oauthApps/EditOauthApp.tsx    |  2 +-
 .../views/admin/oauthApps/EditOauthAppWithData.tsx   |  2 +-
 .../client/views/admin/permissions/EditRolePage.tsx  |  6 +++---
 .../UsersInRoleTable/UsersInRoleTableRow.tsx         |  2 +-
 apps/meteor/client/views/admin/rooms/EditRoom.tsx    |  2 +-
 .../meteor/client/views/admin/settings/GroupPage.tsx |  2 +-
 .../views/admin/settings/ResetSettingButton.tsx      |  8 ++------
 apps/meteor/client/views/admin/settings/Section.js   |  2 +-
 .../views/admin/settings/groups/OAuthGroupPage.tsx   |  2 +-
 .../admin/settings/groups/voip/AssignAgentButton.tsx |  6 ++----
 .../admin/settings/groups/voip/RemoveAgentButton.tsx |  6 ++----
 apps/meteor/client/views/meet/CallPage.tsx           |  2 +-
 .../views/omnichannel/agents/RemoveAgentButton.js    |  6 ++----
 .../businessHours/EditBusinessHoursPage.js           |  2 +-
 .../omnichannel/currentChats/RemoveChatButton.tsx    |  8 +++-----
 .../customFields/RemoveCustomFieldButton.js          |  6 ++----
 .../omnichannel/departments/RemoveAgentButton.js     |  8 ++------
 .../departments/RemoveDepartmentButton.js            |  6 ++----
 .../views/omnichannel/facebook/FacebookPage.tsx      |  2 +-
 .../omnichannel/managers/RemoveManagerButton.tsx     |  6 ++----
 .../client/views/omnichannel/triggers/TriggersRow.js |  6 ++----
 .../contextualBar/Info/EditRoomInfo/EditChannel.js   |  2 +-
 .../NotificationPreferences.js                       |  6 ++----
 .../contextualBar/OTR/components/OTREstablished.tsx  |  2 +-
 .../contextualBar/PruneMessages/PruneMessages.js     |  2 +-
 .../RoomMembers/List/components/MemberItem.js        |  4 ++--
 .../room/contextualBar/Threads/components/Message.js | 10 ++++------
 .../UserInfo/UserWebRTC/UserWebRTCButtons.tsx        |  2 +-
 .../contextualBar/VideoConference/BBB/CallBBB.tsx    |  2 +-
 .../client/views/room/hooks/useUserInfoActions.js    |  4 ++--
 .../room/modals/FileUploadModal/FileUploadModal.tsx  |  2 +-
 .../views/room/webdav/AddWebdavAccountModal.tsx      |  4 ++--
 .../channels/ConfirmationModal/ConfirmationModal.tsx |  2 +-
 .../teams/contextualBar/channels/TeamsChannelItem.js |  4 ++--
 .../client/omnichannel/RemoveBusinessHourButton.js   |  6 ++----
 .../cannedResponses/RemoveCannedResponseButton.tsx   |  8 +++-----
 .../ee/client/omnichannel/monitors/MonitorsRow.js    |  6 ++----
 .../omnichannel/priorities/RemovePriorityButton.js   |  6 ++----
 .../ee/client/omnichannel/tags/RemoveTagButton.js    |  6 ++----
 .../ee/client/omnichannel/units/RemoveUnitButton.js  |  6 ++----
 .../engagementDashboard/users/ContentForDays.tsx     | 10 +++-------
 packages/livechat/src/components/Modal/component.js  |  2 +-
 .../src/routes/SwitchDepartment/component.js         |  2 +-
 yarn.lock                                            |  2 +-
 84 files changed, 149 insertions(+), 193 deletions(-)

diff --git a/.yarnrc.yml b/.yarnrc.yml
index d4854ebe9212..9fcd9d1afd98 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -11,3 +11,5 @@ plugins:
     spec: "@yarnpkg/plugin-typescript"
 
 yarnPath: .yarn/releases/yarn-3.2.0.cjs
+
+checksumBehavior: update
\ No newline at end of file
diff --git a/apps/meteor/client/components/GenericModal.tsx b/apps/meteor/client/components/GenericModal.tsx
index afd8467aee08..d44aa8d35f28 100644
--- a/apps/meteor/client/components/GenericModal.tsx
+++ b/apps/meteor/client/components/GenericModal.tsx
@@ -82,7 +82,7 @@ const GenericModal: FC<GenericModalProps> = ({
 					{dontAskAgain}
 					<ButtonGroup align='end' flexGrow={1} maxWidth='full'>
 						{onCancel && (
-							<Button ghost onClick={onCancel}>
+							<Button secondary onClick={onCancel}>
 								{cancelText ?? t('Cancel')}
 							</Button>
 						)}
diff --git a/apps/meteor/client/components/Header/State.tsx b/apps/meteor/client/components/Header/State.tsx
index 65b51e33466f..63ac1ceb1f3a 100644
--- a/apps/meteor/client/components/Header/State.tsx
+++ b/apps/meteor/client/components/Header/State.tsx
@@ -1,7 +1,6 @@
-import { Icon, ActionButton } from '@rocket.chat/fuselage';
+import { Icon, IconButton } from '@rocket.chat/fuselage';
 import React, { FC } from 'react';
 
-const State: FC<any> = (props) =>
-	props.onClick ? <ActionButton ghost mini {...props} /> : <Icon size={16} name={props.icon} {...props} />;
+const State: FC<any> = (props) => (props.onClick ? <IconButton mini {...props} /> : <Icon size={16} name={props.icon} {...props} />);
 
 export default State;
diff --git a/apps/meteor/client/components/Header/ToolBoxAction.tsx b/apps/meteor/client/components/Header/ToolBoxAction.tsx
index d1aebb2f31f3..1154c878257d 100644
--- a/apps/meteor/client/components/Header/ToolBoxAction.tsx
+++ b/apps/meteor/client/components/Header/ToolBoxAction.tsx
@@ -1,8 +1,8 @@
-import { ActionButton } from '@rocket.chat/fuselage';
+import { IconButton } from '@rocket.chat/fuselage';
 import React, { FC } from 'react';
 
 const ToolBoxAction: FC<any> = ({ id, icon, color, title, action, className, index, ...props }) => (
-	<ActionButton
+	<IconButton
 		className={className}
 		onClick={action}
 		title={title}
@@ -10,7 +10,6 @@ const ToolBoxAction: FC<any> = ({ id, icon, color, title, action, className, ind
 		key={id}
 		icon={icon}
 		position='relative'
-		ghost
 		tiny
 		overflow='visible'
 		color={!!color && color}
diff --git a/apps/meteor/client/components/Message/MessageActions/Action.tsx b/apps/meteor/client/components/Message/MessageActions/Action.tsx
index 942ab68c0b5e..3a205adde4bd 100644
--- a/apps/meteor/client/components/Message/MessageActions/Action.tsx
+++ b/apps/meteor/client/components/Message/MessageActions/Action.tsx
@@ -27,7 +27,7 @@ const Action: FC<ActionOptions> = ({ icon, methodId, i18nLabel, label, runAction
 	const resolvedIcon = resolveLegacyIcon(icon);
 
 	return (
-		<Button data-method-id={methodId} onClick={runAction(methodId)} marginInline='x4' primary small danger={danger}>
+		<Button data-method-id={methodId} onClick={runAction(methodId)} marginInline='x4' small danger={danger}>
 			{icon && <Icon name={resolvedIcon} />}
 			{i18nLabel ? t(i18nLabel) : label}
 		</Button>
diff --git a/apps/meteor/client/components/Omnichannel/modals/TranscriptModal.tsx b/apps/meteor/client/components/Omnichannel/modals/TranscriptModal.tsx
index c25e8cc23aaa..2b773f417055 100644
--- a/apps/meteor/client/components/Omnichannel/modals/TranscriptModal.tsx
+++ b/apps/meteor/client/components/Omnichannel/modals/TranscriptModal.tsx
@@ -110,7 +110,7 @@ const TranscriptModal: FC<TranscriptModalProps> = ({
 				<ButtonGroup align='end'>
 					<Button onClick={onCancel}>{t('Cancel')}</Button>
 					{roomOpen && transcriptRequest ? (
-						<Button primary danger onClick={handleDiscard}>
+						<Button danger onClick={handleDiscard}>
 							{t('Discard')}
 						</Button>
 					) : (
diff --git a/apps/meteor/client/components/Sidebar/Header.js b/apps/meteor/client/components/Sidebar/Header.js
index 1c90fbd05c8e..23fc786c8d0c 100644
--- a/apps/meteor/client/components/Sidebar/Header.js
+++ b/apps/meteor/client/components/Sidebar/Header.js
@@ -1,4 +1,4 @@
-import { Box, ActionButton } from '@rocket.chat/fuselage';
+import { Box, IconButton } from '@rocket.chat/fuselage';
 import React from 'react';
 
 const Header = ({ title, onClose, children = undefined, ...props }) => (
@@ -10,7 +10,7 @@ const Header = ({ title, onClose, children = undefined, ...props }) => (
 						{title}
 					</Box>
 				)}
-				{onClose && <ActionButton ghost small icon='cross' onClick={onClose} />}
+				{onClose && <IconButton small icon='cross' onClick={onClose} />}
 			</Box>
 		)}
 		{children}
diff --git a/apps/meteor/client/components/TextCopy.tsx b/apps/meteor/client/components/TextCopy.tsx
index 89d4300687f1..dc92e722a0a6 100644
--- a/apps/meteor/client/components/TextCopy.tsx
+++ b/apps/meteor/client/components/TextCopy.tsx
@@ -39,7 +39,7 @@ const TextCopy = ({ text, wrapper = defaultWrapperRenderer, ...props }: TextCopy
 			{...props}
 		>
 			<Scrollable vertical>{wrapper(text)}</Scrollable>
-			<Button ghost square small flexShrink={0} onClick={onClick} title={t('Copy')}>
+			<Button secondary square small flexShrink={0} onClick={onClick} title={t('Copy')}>
 				<Icon name='copy' size='x20' />
 			</Button>
 		</Box>
diff --git a/apps/meteor/client/components/UserStatusMenu.tsx b/apps/meteor/client/components/UserStatusMenu.tsx
index c435f26cc8e1..e29627622a50 100644
--- a/apps/meteor/client/components/UserStatusMenu.tsx
+++ b/apps/meteor/client/components/UserStatusMenu.tsx
@@ -77,7 +77,17 @@ const UserStatusMenu = ({
 
 	return (
 		<>
-			<Button ref={ref} small square ghost onClick={onClick} onBlur={hide} onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} margin={margin}>
+			<Button
+				ref={ref}
+				small
+				square
+				secondary
+				onClick={onClick}
+				onBlur={hide}
+				onKeyUp={handleKeyUp}
+				onKeyDown={handleKeyDown}
+				margin={margin}
+			>
 				<UserStatus status={status} />
 			</Button>
 			<PositionAnimated width='auto' visible={visible} anchor={ref} placement={placement}>
diff --git a/apps/meteor/client/components/VerticalBar/VerticalBarButton.tsx b/apps/meteor/client/components/VerticalBar/VerticalBarButton.tsx
index 12d9283e820b..299cfa0c77ee 100644
--- a/apps/meteor/client/components/VerticalBar/VerticalBarButton.tsx
+++ b/apps/meteor/client/components/VerticalBar/VerticalBarButton.tsx
@@ -1,6 +1,8 @@
 import { Button } from '@rocket.chat/fuselage';
 import React, { ComponentProps, memo, ReactElement } from 'react';
 
-const VerticalBarButton = (props: ComponentProps<typeof Button>): ReactElement => <Button small square flexShrink={0} ghost {...props} />;
+const VerticalBarButton = (props: ComponentProps<typeof Button>): ReactElement => (
+	<Button small square flexShrink={0} secondary {...props} />
+);
 
 export default memo(VerticalBarButton);
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.js b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.js
index 0868c9a4a422..23a40edcd0a7 100644
--- a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.js
+++ b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.js
@@ -1,4 +1,4 @@
-import { Box, Button, Icon, TextInput, Margins, Avatar } from '@rocket.chat/fuselage';
+import { Box, Button, TextInput, Margins, Avatar, IconButton } from '@rocket.chat/fuselage';
 import { useToastMessageDispatch, useSetting, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useState, useCallback } from 'react';
 
@@ -75,12 +75,8 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, suggestions
 							<Button square mis='none' onClick={clickReset} disabled={disabled} mie='x4' title={t('Accounts_SetDefaultAvatar')}>
 								<Avatar url={`/avatar/%40${username}`} />
 							</Button>
-							<Button square onClick={clickUpload} disabled={disabled} title={t('Upload')}>
-								<Icon name='upload' size='x20' />
-							</Button>
-							<Button square mie='none' onClick={clickUrl} disabled={disabled || urlEmpty} title={t('Add URL')}>
-								<Icon name='permalink' size='x20' />
-							</Button>
+							<IconButton icon='upload' square secondary onClick={clickUpload} disabled={disabled} title={t('Upload')} />
+							<IconButton icon='permalink' square secondary onClick={clickUrl} disabled={disabled || urlEmpty} title={t('Add URL')} />
 							{suggestions && (
 								<UserAvatarSuggestions
 									suggestions={suggestions}
diff --git a/apps/meteor/client/components/voip/modal/WrapUpCallModal.tsx b/apps/meteor/client/components/voip/modal/WrapUpCallModal.tsx
index 104fd5427070..02adfac19bdc 100644
--- a/apps/meteor/client/components/voip/modal/WrapUpCallModal.tsx
+++ b/apps/meteor/client/components/voip/modal/WrapUpCallModal.tsx
@@ -60,7 +60,7 @@ export const WrapUpCallModal = (): ReactElement => {
 			</Modal.Content>
 			<Modal.Footer>
 				<ButtonGroup align='end'>
-					<Button ghost onClick={onCancel}>
+					<Button secondary onClick={onCancel}>
 						{t('Cancel')}
 					</Button>
 					<Button type='submit' primary>
diff --git a/apps/meteor/client/sidebar/Item/Condensed.js b/apps/meteor/client/sidebar/Item/Condensed.js
index fe4e9ecd7642..572135556805 100644
--- a/apps/meteor/client/sidebar/Item/Condensed.js
+++ b/apps/meteor/client/sidebar/Item/Condensed.js
@@ -1,4 +1,4 @@
-import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
+import { Sidebar } from '@rock, IconButtonet.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import React, { memo, useState } from 'react';
 
@@ -27,7 +27,7 @@ const Condensed = ({ icon, title = '', titleIcon, avatar, actions, href, menuOpt
 				{badges && <Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>}
 				{menu && (
 					<Sidebar.Item.Menu {...handleMenuEvent}>
-						{menuVisibility ? menu() : <ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />}
+						{menuVisibility ? menu() : <IconButton square mini rcx-sidebar-item__menu icon='kebab' />}
 					</Sidebar.Item.Menu>
 				)}
 			</Sidebar.Item.Content>
diff --git a/apps/meteor/client/sidebar/Item/Extended.js b/apps/meteor/client/sidebar/Item/Extended.js
index 1e205136a59f..b5c8d46ac5cd 100644
--- a/apps/meteor/client/sidebar/Item/Extended.js
+++ b/apps/meteor/client/sidebar/Item/Extended.js
@@ -1,4 +1,4 @@
-import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
+import { Sidebar, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import React, { memo, useState } from 'react';
 
@@ -72,7 +72,7 @@ const Extended = ({
 						<Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>
 						{menu && (
 							<Sidebar.Item.Menu {...handleMenuEvent}>
-								{menuVisibility ? menu() : <ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />}
+								{menuVisibility ? menu() : <IconButton square mini rcx-sidebar-item__menu icon='kebab' />}
 							</Sidebar.Item.Menu>
 						)}
 					</Sidebar.Item.Wrapper>
diff --git a/apps/meteor/client/sidebar/Item/Medium.js b/apps/meteor/client/sidebar/Item/Medium.js
index 3e74f980d816..64dd89ad5bb4 100644
--- a/apps/meteor/client/sidebar/Item/Medium.js
+++ b/apps/meteor/client/sidebar/Item/Medium.js
@@ -1,4 +1,4 @@
-import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
+import { Sidebar, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import React, { memo, useState } from 'react';
 
@@ -27,7 +27,7 @@ const Medium = ({ icon, title = '', titleIcon, avatar, actions, href, menuOption
 				{badges && <Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>}
 				{menu && (
 					<Sidebar.Item.Menu {...handleMenuEvent}>
-						{menuVisibility ? menu() : <ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />}
+						{menuVisibility ? menu() : <IconButton square mini rcx-sidebar-item__menu icon='kebab' />}
 					</Sidebar.Item.Menu>
 				)}
 			</Sidebar.Item.Content>
diff --git a/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx b/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx
index e38971a39337..6febef1c6e79 100644
--- a/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx
+++ b/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx
@@ -82,7 +82,7 @@ export const VoipFooter = ({
 								title={tooltips.mute}
 								small
 								square
-								nude
+								secondary
 								onClick={(e): void => {
 									e.stopPropagation();
 									toggleMic(!muted);
@@ -94,7 +94,7 @@ export const VoipFooter = ({
 								title={tooltips.holdCall}
 								small
 								square
-								nude
+								secondary
 								onClick={(e): void => {
 									e.stopPropagation();
 									if (paused) {
@@ -147,7 +147,7 @@ export const VoipFooter = ({
 							</Button>
 						)}
 						{callerState === 'OFFER_RECEIVED' && (
-							<Button title={tooltips.endCall} small square danger primary onClick={callActions.reject}>
+							<Button title={tooltips.endCall} small square danger onClick={callActions.reject}>
 								<Icon name='phone-off' size='x16' />
 							</Button>
 						)}
diff --git a/apps/meteor/client/sidebar/header/EditStatusModal.tsx b/apps/meteor/client/sidebar/header/EditStatusModal.tsx
index 16ec76b24bd5..93b04600fb83 100644
--- a/apps/meteor/client/sidebar/header/EditStatusModal.tsx
+++ b/apps/meteor/client/sidebar/header/EditStatusModal.tsx
@@ -40,7 +40,7 @@ const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModa
 			await setUserStatus(statusType, statusText);
 			dispatchToastMessage({ type: 'success', message: t('StatusMessage_Changed_Successfully') });
 		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
+			dispatchToastMessage({ type: 'error', message: String(error) });
 		}
 
 		onClose();
@@ -75,7 +75,7 @@ const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModa
 			</Modal.Content>
 			<Modal.Footer>
 				<ButtonGroup align='end' flexGrow={1} maxWidth='full'>
-					<Button ghost onClick={onClose}>
+					<Button secondary onClick={onClose}>
 						{t('Cancel')}
 					</Button>
 					<Button primary onClick={handleSaveStatus} disabled={!!statusTextError}>
diff --git a/apps/meteor/client/views/account/AccountIntegrationsPage.tsx b/apps/meteor/client/views/account/AccountIntegrationsPage.tsx
index 4fd35110f3ff..5b3ee36ba987 100644
--- a/apps/meteor/client/views/account/AccountIntegrationsPage.tsx
+++ b/apps/meteor/client/views/account/AccountIntegrationsPage.tsx
@@ -33,7 +33,7 @@ const AccountIntegrationsPage = (): ReactElement => {
 			removeWebdavAccount(selected as string);
 			dispatchToastMessage({ type: 'success', message: t('Webdav_account_removed') });
 		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
+			dispatchToastMessage({ type: 'error', message: String(error) });
 		}
 	}, [dispatchToastMessage, removeWebdavAccount, selected, t]);
 
@@ -46,7 +46,7 @@ const AccountIntegrationsPage = (): ReactElement => {
 						<Field.Label>{t('WebDAV_Accounts')}</Field.Label>
 						<Field.Row>
 							<Select options={options} onChange={handleSelected} value={selected as string} placeholder={t('Select_an_option')} />
-							<Button primary danger onClick={handleClickRemove}>
+							<Button danger onClick={handleClickRemove}>
 								{t('Remove')}
 							</Button>
 						</Field.Row>
diff --git a/apps/meteor/client/views/account/AccountProfilePage.js b/apps/meteor/client/views/account/AccountProfilePage.js
index 7238d21f5861..b362bd7ee462 100644
--- a/apps/meteor/client/views/account/AccountProfilePage.js
+++ b/apps/meteor/client/views/account/AccountProfilePage.js
@@ -225,7 +225,7 @@ const AccountProfilePage = () => {
 		<Page>
 			<Page.Header title={t('Profile')}>
 				<ButtonGroup>
-					<Button primary danger disabled={!hasUnsavedChanges} onClick={reset}>
+					<Button danger disabled={!hasUnsavedChanges} onClick={reset}>
 						{t('Reset')}
 					</Button>
 					<Button data-qa='AccountProfilePageSaveButton' primary disabled={!hasUnsavedChanges || !canSave || loggingOut} onClick={onSave}>
@@ -247,7 +247,7 @@ const AccountProfilePage = () => {
 							{t('Logout_Others')}
 						</Button>
 						{allowDeleteOwnAccount && (
-							<Button danger onClick={handleDeleteOwnAccount}>
+							<Button secondaryDanger onClick={handleDeleteOwnAccount}>
 								<Icon name='trash' size='x20' mie='x4' />
 								{t('Delete_my_account')}
 							</Button>
diff --git a/apps/meteor/client/views/account/security/TwoFactorEmail.js b/apps/meteor/client/views/account/security/TwoFactorEmail.js
index 767b5afcdae2..e7c8a120cfdd 100644
--- a/apps/meteor/client/views/account/security/TwoFactorEmail.js
+++ b/apps/meteor/client/views/account/security/TwoFactorEmail.js
@@ -25,7 +25,7 @@ const TwoFactorEmail = (props) => {
 			<Margins blockEnd='x8'>
 				<Box fontScale='h4'>{t('Two-factor_authentication_email')}</Box>
 				{isEnabled && (
-					<Button primary danger onClick={handleDisable}>
+					<Button danger onClick={handleDisable}>
 						{t('Disable_two-factor_authentication_email')}
 					</Button>
 				)}
diff --git a/apps/meteor/client/views/account/security/TwoFactorTOTP.js b/apps/meteor/client/views/account/security/TwoFactorTOTP.js
index 1b17170ccaed..34dd86ab77ae 100644
--- a/apps/meteor/client/views/account/security/TwoFactorTOTP.js
+++ b/apps/meteor/client/views/account/security/TwoFactorTOTP.js
@@ -136,7 +136,7 @@ const TwoFactorTOTP = (props) => {
 				)}
 				{totpEnabled && (
 					<>
-						<Button primary danger onClick={handleDisableTotp}>
+						<Button danger onClick={handleDisableTotp}>
 							{t('Disable_two-factor_authentication')}
 						</Button>
 						<Box fontScale='p2m' mbs='x8'>
diff --git a/apps/meteor/client/views/admin/apps/AppPermissionsReviewModal.js b/apps/meteor/client/views/admin/apps/AppPermissionsReviewModal.js
index 82f4e74c4d4c..53a7e32c01fd 100644
--- a/apps/meteor/client/views/admin/apps/AppPermissionsReviewModal.js
+++ b/apps/meteor/client/views/admin/apps/AppPermissionsReviewModal.js
@@ -42,7 +42,7 @@ const AppPermissionsReviewModal = ({ appPermissions, cancel, confirm, modalProps
 			</Modal.Content>
 			<Modal.Footer>
 				<ButtonGroup align='end'>
-					<Button ghost onClick={handleCancelButtonClick}>
+					<Button secondary onClick={handleCancelButtonClick}>
 						{t('Cancel')}
 					</Button>
 					<Button primary onClick={handleConfirmButtonClick}>
diff --git a/apps/meteor/client/views/admin/apps/AppUpdateModal.tsx b/apps/meteor/client/views/admin/apps/AppUpdateModal.tsx
index e8ebb15c2dc7..482c542c3b64 100644
--- a/apps/meteor/client/views/admin/apps/AppUpdateModal.tsx
+++ b/apps/meteor/client/views/admin/apps/AppUpdateModal.tsx
@@ -32,10 +32,10 @@ const AppUpdateModal: FC<AppUpdateModalProps> = ({ confirm, cancel, ...props })
 			<Modal.Content fontScale='p2'>{t('Apps_Manual_Update_Modal_Body')}</Modal.Content>
 			<Modal.Footer>
 				<ButtonGroup align='end'>
-					<Button ghost onClick={handleCancelButtonClick}>
+					<Button secondary onClick={handleCancelButtonClick}>
 						{t('No')}
 					</Button>
-					<Button primary danger onClick={handleConfirmButtonClick}>
+					<Button danger onClick={handleConfirmButtonClick}>
 						{t('Yes')}
 					</Button>
 				</ButtonGroup>
diff --git a/apps/meteor/client/views/admin/apps/WarningModal.js b/apps/meteor/client/views/admin/apps/WarningModal.js
index 982d743dd73c..6a33e10321a4 100644
--- a/apps/meteor/client/views/admin/apps/WarningModal.js
+++ b/apps/meteor/client/views/admin/apps/WarningModal.js
@@ -14,10 +14,10 @@ const WarningModal = ({ text, confirmText, close, cancel, cancelText, confirm, .
 			<Modal.Content fontScale='p2'>{text}</Modal.Content>
 			<Modal.Footer>
 				<ButtonGroup align='end'>
-					<Button ghost onClick={cancel || close}>
+					<Button secondary onClick={cancel || close}>
 						{cancelText || t('Cancel')}
 					</Button>
-					<Button primary danger onClick={confirm}>
+					<Button danger onClick={confirm}>
 						{confirmText}
 					</Button>
 				</ButtonGroup>
diff --git a/apps/meteor/client/views/admin/cloud/WorkspaceLoginSection.js b/apps/meteor/client/views/admin/cloud/WorkspaceLoginSection.js
index 8a2cbdd7f666..3941dc264bc3 100644
--- a/apps/meteor/client/views/admin/cloud/WorkspaceLoginSection.js
+++ b/apps/meteor/client/views/admin/cloud/WorkspaceLoginSection.js
@@ -86,7 +86,7 @@ function WorkspaceLoginSection({ onRegisterStatusChange, ...props }) {
 
 			<ButtonGroup>
 				{isLoggedIn ? (
-					<Button primary danger disabled={isLoading} onClick={handleLogoutButtonClick}>
+					<Button danger disabled={isLoading} onClick={handleLogoutButtonClick}>
 						{t('Cloud_logout')}
 					</Button>
 				) : (
@@ -101,7 +101,7 @@ function WorkspaceLoginSection({ onRegisterStatusChange, ...props }) {
 			</Box>
 
 			<ButtonGroup>
-				<Button primary danger disabled={isLoading} onClick={handleDisconnectButtonClick}>
+				<Button danger disabled={isLoading} onClick={handleDisconnectButtonClick}>
 					{t('Disconnect')}
 				</Button>
 			</ButtonGroup>
diff --git a/apps/meteor/client/views/admin/customEmoji/EditCustomEmoji.tsx b/apps/meteor/client/views/admin/customEmoji/EditCustomEmoji.tsx
index 61472d809323..6dcc522f2c65 100644
--- a/apps/meteor/client/views/admin/customEmoji/EditCustomEmoji.tsx
+++ b/apps/meteor/client/views/admin/customEmoji/EditCustomEmoji.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, ButtonGroup, Margins, TextInput, Field, Icon, FieldGroup } from '@rocket.chat/fuselage';
+import { Box, Button, ButtonGroup, Margins, TextInput, Field, Icon, FieldGroup, IconButton } from '@rocket.chat/fuselage';
 import { useSetModal, useToastMessageDispatch, useAbsoluteUrl, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useCallback, useState, useMemo, useEffect, FC, ChangeEvent } from 'react';
 
@@ -152,9 +152,7 @@ const EditCustomEmoji: FC<EditCustomEmojiProps> = ({ close, onChange, data, ...p
 				<Field>
 					<Field.Label alignSelf='stretch' display='flex' justifyContent='space-between' alignItems='center'>
 						{t('Custom_Emoji')}
-						<Button square onClick={clickUpload}>
-							<Icon name='upload' size='x20' />
-						</Button>
+						<IconButton icon='upload' secondary square onClick={clickUpload} />
 					</Field.Label>
 					{newEmojiPreview && (
 						<Box display='flex' flexDirection='row' mbs='none' justifyContent='center'>
@@ -173,7 +171,7 @@ const EditCustomEmoji: FC<EditCustomEmojiProps> = ({ close, onChange, data, ...p
 			</ButtonGroup>
 
 			<ButtonGroup stretch w='full'>
-				<Button primary danger onClick={handleDeleteButtonClick}>
+				<Button danger onClick={handleDeleteButtonClick}>
 					<Icon name='trash' mie='x4' />
 					{t('Delete')}
 				</Button>
diff --git a/apps/meteor/client/views/admin/customEmoji/EditCustomEmojiWithData.tsx b/apps/meteor/client/views/admin/customEmoji/EditCustomEmojiWithData.tsx
index 8bff47185cb7..2cfa49771c91 100644
--- a/apps/meteor/client/views/admin/customEmoji/EditCustomEmojiWithData.tsx
+++ b/apps/meteor/client/views/admin/customEmoji/EditCustomEmojiWithData.tsx
@@ -43,7 +43,7 @@ const EditCustomEmojiWithData: FC<EditCustomEmojiWithDataProps> = ({ _id, onChan
 					</Button>
 				</ButtonGroup>
 				<ButtonGroup stretch w='full' mbs='x8'>
-					<Button primary danger disabled>
+					<Button danger disabled>
 						<Throbber inheritColor />
 					</Button>
 				</ButtonGroup>
diff --git a/apps/meteor/client/views/admin/customSounds/EditCustomSound.tsx b/apps/meteor/client/views/admin/customSounds/EditCustomSound.tsx
index 3fdb38b9b400..36debeb324a8 100644
--- a/apps/meteor/client/views/admin/customSounds/EditCustomSound.tsx
+++ b/apps/meteor/client/views/admin/customSounds/EditCustomSound.tsx
@@ -32,7 +32,7 @@ function EditCustomSound({ _id, onChange, ...props }: EditCustomSoundProps): Rea
 					</Button>
 				</ButtonGroup>
 				<ButtonGroup stretch w='full' mbs='x8'>
-					<Button primary danger disabled>
+					<Button danger disabled>
 						<Throbber inheritColor />
 					</Button>
 				</ButtonGroup>
diff --git a/apps/meteor/client/views/admin/customSounds/EditSound.tsx b/apps/meteor/client/views/admin/customSounds/EditSound.tsx
index 010f12c28f30..e529a2b02aac 100644
--- a/apps/meteor/client/views/admin/customSounds/EditSound.tsx
+++ b/apps/meteor/client/views/admin/customSounds/EditSound.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, ButtonGroup, Margins, TextInput, Field, Icon } from '@rocket.chat/fuselage';
+import { Box, Button, ButtonGroup, Margins, TextInput, Field, Icon, IconButton } from '@rocket.chat/fuselage';
 import { useSetModal, useToastMessageDispatch, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useCallback, useState, useMemo, useEffect, ReactElement, SyntheticEvent } from 'react';
 
@@ -140,9 +140,7 @@ function EditSound({ close, onChange, data, ...props }: EditSoundProps): ReactEl
 				<Field.Label alignSelf='stretch'>{t('Sound_File_mp3')}</Field.Label>
 				<Box display='flex' flexDirection='row' mbs='none'>
 					<Margins inline='x4'>
-						<Button square onClick={clickUpload}>
-							<Icon name='upload' size='x20' />
-						</Button>
+						<IconButton icon='upload' secondary onClick={clickUpload} />
 						{sound?.name || 'none'}
 					</Margins>
 				</Box>
@@ -161,7 +159,7 @@ function EditSound({ close, onChange, data, ...props }: EditSoundProps): ReactEl
 			<Field>
 				<Field.Row>
 					<ButtonGroup stretch w='full'>
-						<Button primary danger onClick={handleDeleteButtonClick}>
+						<Button danger onClick={handleDeleteButtonClick}>
 							<Icon name='trash' mie='x4' />
 							{t('Delete')}
 						</Button>
diff --git a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusForm.tsx b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusForm.tsx
index fd2a3739d0a4..8df628c9041b 100644
--- a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusForm.tsx
+++ b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusForm.tsx
@@ -118,7 +118,7 @@ const CustomUserStatusForm = ({ onClose, onReload, status }: CustomUserStatusFor
 				<Field>
 					<Field.Row>
 						<ButtonGroup stretch w='full'>
-							<Button primary danger onClick={handleDeleteStatus}>
+							<Button danger onClick={handleDeleteStatus}>
 								<Icon name='trash' mie='x4' />
 								{t('Delete')}
 							</Button>
diff --git a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusFormWithData.tsx b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusFormWithData.tsx
index ace27c478ec8..4ad110f25334 100644
--- a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusFormWithData.tsx
+++ b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusFormWithData.tsx
@@ -44,7 +44,7 @@ const CustomUserStatusFormWithData = ({ _id, onReload, onClose }: CustomUserStat
 					</Button>
 				</ButtonGroup>
 				<ButtonGroup stretch w='full' mbs='x8'>
-					<Button primary danger disabled>
+					<Button danger disabled>
 						<Throbber inheritColor />
 					</Button>
 				</ButtonGroup>
diff --git a/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.js b/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.js
index 2597997e3859..80eb833a94fb 100644
--- a/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.js
+++ b/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.js
@@ -352,7 +352,7 @@ function EmailInboxForm({ id, data }) {
 							<Margins blockStart='x16'>
 								<ButtonGroup stretch w='full'>
 									{id && (
-										<Button primary danger onClick={handleDelete}>
+										<Button danger onClick={handleDelete}>
 											{t('Delete')}
 										</Button>
 									)}
diff --git a/apps/meteor/client/views/admin/emailInbox/SendTestButton.tsx b/apps/meteor/client/views/admin/emailInbox/SendTestButton.tsx
index d1d2937459c0..aa3875130e67 100644
--- a/apps/meteor/client/views/admin/emailInbox/SendTestButton.tsx
+++ b/apps/meteor/client/views/admin/emailInbox/SendTestButton.tsx
@@ -1,4 +1,4 @@
-import { Button, Icon, TableCell } from '@rocket.chat/fuselage';
+import { IconButton, TableCell } from '@rocket.chat/fuselage';
 import { useToastMessageDispatch, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
@@ -24,9 +24,7 @@ const SendTestButton = ({ id }: SendTestButtonProps): ReactElement => {
 
 	return (
 		<TableCell fontScale='p2' color='hint' withTruncatedText>
-			<Button small ghost title={t('Send_Test_Email')} onClick={handleOnClick}>
-				<Icon name='send' size='x20' />
-			</Button>
+			<IconButton icon='send' small title={t('Send_Test_Email')} onClick={handleOnClick} />
 		</TableCell>
 	);
 };
diff --git a/apps/meteor/client/views/admin/import/NewImportPage.js b/apps/meteor/client/views/admin/import/NewImportPage.js
index 8e41803da6ce..b1b0d64ca681 100644
--- a/apps/meteor/client/views/admin/import/NewImportPage.js
+++ b/apps/meteor/client/views/admin/import/NewImportPage.js
@@ -168,7 +168,7 @@ function NewImportPage() {
 		<Page className='page-settings'>
 			<Page.Header title={t('Import_New_File')}>
 				<ButtonGroup>
-					<Button ghost onClick={handleBackToImportsButtonClick}>
+					<Button secondary onClick={handleBackToImportsButtonClick}>
 						<Icon name='back' /> {t('Back_to_imports')}
 					</Button>
 					{importer && (
diff --git a/apps/meteor/client/views/admin/import/PrepareImportPage.js b/apps/meteor/client/views/admin/import/PrepareImportPage.js
index b41004936da1..5b3f85fd91df 100644
--- a/apps/meteor/client/views/admin/import/PrepareImportPage.js
+++ b/apps/meteor/client/views/admin/import/PrepareImportPage.js
@@ -188,7 +188,7 @@ function PrepareImportPage() {
 		<Page>
 			<Page.Header title={t('Importing_Data')}>
 				<ButtonGroup>
-					<Button ghost onClick={handleBackToImportsButtonClick}>
+					<Button secondary onClick={handleBackToImportsButtonClick}>
 						<Icon name='back' /> {t('Back_to_imports')}
 					</Button>
 					<Button primary disabled={isImporting || handleMinimumImportData()} onClick={handleStartButtonClick}>
diff --git a/apps/meteor/client/views/admin/integrations/edit/EditIncomingWebhook.js b/apps/meteor/client/views/admin/integrations/edit/EditIncomingWebhook.js
index 6f852be08a02..8429696a404c 100644
--- a/apps/meteor/client/views/admin/integrations/edit/EditIncomingWebhook.js
+++ b/apps/meteor/client/views/admin/integrations/edit/EditIncomingWebhook.js
@@ -85,7 +85,7 @@ function EditIncomingWebhook({ data, onChange, ...props }) {
 							</Button>
 						</Margins>
 					</Box>
-					<Button mbs='x4' primary danger w='full' onClick={handleDeleteIntegration}>
+					<Button mbs='x4' danger w='full' onClick={handleDeleteIntegration}>
 						{t('Delete')}
 					</Button>
 				</Field.Row>
diff --git a/apps/meteor/client/views/admin/integrations/edit/EditOutgoingWebhook.js b/apps/meteor/client/views/admin/integrations/edit/EditOutgoingWebhook.js
index da41752c7969..e0cb744e0648 100644
--- a/apps/meteor/client/views/admin/integrations/edit/EditOutgoingWebhook.js
+++ b/apps/meteor/client/views/admin/integrations/edit/EditOutgoingWebhook.js
@@ -105,7 +105,7 @@ function EditOutgoingWebhook({ data, onChange, setSaveAction, ...props }) {
 							</Button>
 						</Margins>
 					</Box>
-					<Button mbs='x4' primary danger w='full' onClick={handleDeleteIntegration}>
+					<Button mbs='x4' danger w='full' onClick={handleDeleteIntegration}>
 						{t('Delete')}
 					</Button>
 				</Field.Row>
diff --git a/apps/meteor/client/views/admin/integrations/edit/HistoryItem.js b/apps/meteor/client/views/admin/integrations/edit/HistoryItem.js
index 350a267d529e..bbe4b0f38855 100644
--- a/apps/meteor/client/views/admin/integrations/edit/HistoryItem.js
+++ b/apps/meteor/client/views/admin/integrations/edit/HistoryItem.js
@@ -56,7 +56,7 @@ function HistoryItem({ data, ...props }) {
 						<Icon name='info-circled' size='x16' mie='x4' />
 						{formatDateAndTime(_createdAt)}
 					</Box>
-					<Button ghost onClick={handleClickReplay}>
+					<Button secondary onClick={handleClickReplay}>
 						{t('Replay')}
 					</Button>
 				</Box>
diff --git a/apps/meteor/client/views/admin/integrations/edit/OutgoingWebhookHistoryPage.js b/apps/meteor/client/views/admin/integrations/edit/OutgoingWebhookHistoryPage.js
index b917cc85149f..48f03b550dc2 100644
--- a/apps/meteor/client/views/admin/integrations/edit/OutgoingWebhookHistoryPage.js
+++ b/apps/meteor/client/views/admin/integrations/edit/OutgoingWebhookHistoryPage.js
@@ -101,7 +101,7 @@ function OutgoingWebhookHistoryPage(props) {
 					<Button onClick={handleClickReturn}>
 						<Icon name='back' size='x16' /> {t('Back')}
 					</Button>
-					<Button primary danger onClick={handleClearHistory} disabled={total === 0}>
+					<Button danger onClick={handleClearHistory} disabled={total === 0}>
 						<Icon name='trash' /> {t('clear_history')}
 					</Button>
 				</ButtonGroup>
diff --git a/apps/meteor/client/views/admin/invites/InviteRow.tsx b/apps/meteor/client/views/admin/invites/InviteRow.tsx
index 571f09f56293..bf5c4d96c6ef 100644
--- a/apps/meteor/client/views/admin/invites/InviteRow.tsx
+++ b/apps/meteor/client/views/admin/invites/InviteRow.tsx
@@ -1,5 +1,5 @@
 import type { IInvite } from '@rocket.chat/core-typings';
-import { Button, Icon, Box } from '@rocket.chat/fuselage';
+import { Box, IconButton } from '@rocket.chat/fuselage';
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, MouseEvent } from 'react';
@@ -77,9 +77,7 @@ const InviteRow = ({ _id, createdAt, expires, uses, maxUses, onRemove }: InviteR
 				</>
 			)}
 			<GenericTableCell>
-				<Button ghost danger small square onClick={handleRemoveButtonClick}>
-					<Icon name='cross' size='x20' />
-				</Button>
+				<IconButton icon='cross' danger small onClick={handleRemoveButtonClick} />
 			</GenericTableCell>
 		</GenericTableRow>
 	);
diff --git a/apps/meteor/client/views/admin/oauthApps/EditOauthApp.tsx b/apps/meteor/client/views/admin/oauthApps/EditOauthApp.tsx
index 7754d9178a51..7aced44ae787 100644
--- a/apps/meteor/client/views/admin/oauthApps/EditOauthApp.tsx
+++ b/apps/meteor/client/views/admin/oauthApps/EditOauthApp.tsx
@@ -157,7 +157,7 @@ const EditOauthApp = ({ onChange, data, ...props }: EditOauthAppProps): ReactEle
 				<Field>
 					<Field.Row>
 						<ButtonGroup stretch w='full'>
-							<Button primary danger onClick={openConfirmDelete}>
+							<Button danger onClick={openConfirmDelete}>
 								<Icon name='trash' mie='x4' />
 								{t('Delete')}
 							</Button>
diff --git a/apps/meteor/client/views/admin/oauthApps/EditOauthAppWithData.tsx b/apps/meteor/client/views/admin/oauthApps/EditOauthAppWithData.tsx
index e246de859be2..f41d232b5a82 100644
--- a/apps/meteor/client/views/admin/oauthApps/EditOauthAppWithData.tsx
+++ b/apps/meteor/client/views/admin/oauthApps/EditOauthAppWithData.tsx
@@ -33,7 +33,7 @@ const EditOauthAppWithData = ({ _id, ...props }: { _id: string }): ReactElement
 					</Button>
 				</ButtonGroup>
 				<ButtonGroup stretch w='full' mbs='x8'>
-					<Button primary danger disabled>
+					<Button danger disabled>
 						<Throbber inheritColor />
 					</Button>
 				</ButtonGroup>
diff --git a/apps/meteor/client/views/admin/permissions/EditRolePage.tsx b/apps/meteor/client/views/admin/permissions/EditRolePage.tsx
index 7ae9cc135eed..4ee0267ed745 100644
--- a/apps/meteor/client/views/admin/permissions/EditRolePage.tsx
+++ b/apps/meteor/client/views/admin/permissions/EditRolePage.tsx
@@ -51,7 +51,7 @@ const EditRolePage = ({ role }: { role?: IRole }): ReactElement => {
 			dispatchToastMessage({ type: 'success', message: t('Saved') });
 			router.push({});
 		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
+			dispatchToastMessage({ type: 'error', message: String(error) });
 		}
 	});
 
@@ -68,7 +68,7 @@ const EditRolePage = ({ role }: { role?: IRole }): ReactElement => {
 
 				router.push({});
 			} catch (error) {
-				dispatchToastMessage({ type: 'error', message: error });
+				dispatchToastMessage({ type: 'error', message: String(error) });
 				setModal();
 			}
 		};
@@ -103,7 +103,7 @@ const EditRolePage = ({ role }: { role?: IRole }): ReactElement => {
 						{t('Save')}
 					</Button>
 					{!role?.protected && role?._id && (
-						<Button danger onClick={handleDelete}>
+						<Button secondaryDanger onClick={handleDelete}>
 							{t('Delete')}
 						</Button>
 					)}
diff --git a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx
index 553b7aaed17f..9bd902cf11c2 100644
--- a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx
+++ b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx
@@ -41,7 +41,7 @@ const UsersInRoleTableRow = ({ user, onRemove }: UsersInRoleTableRowProps): Reac
 			</TableCell>
 			<TableCell withTruncatedText>{email}</TableCell>
 			<TableCell withTruncatedText>
-				<Button small square danger onClick={handleRemove}>
+				<Button small square secondaryDanger onClick={handleRemove}>
 					<Icon name='trash' size='x20' />
 				</Button>
 			</TableCell>
diff --git a/apps/meteor/client/views/admin/rooms/EditRoom.tsx b/apps/meteor/client/views/admin/rooms/EditRoom.tsx
index 029c1fbb251b..99a5df69d3b7 100644
--- a/apps/meteor/client/views/admin/rooms/EditRoom.tsx
+++ b/apps/meteor/client/views/admin/rooms/EditRoom.tsx
@@ -322,7 +322,7 @@ const EditRoom = ({ room, onChange, onDelete }: EditRoomProps): ReactElement =>
 			</Field>
 			<Field>
 				<Field.Row>
-					<Button primary flexGrow={1} danger disabled={deleting || !canDelete} onClick={handleDelete}>
+					<Button flexGrow={1} danger disabled={deleting || !canDelete} onClick={handleDelete}>
 						<Icon name='trash' size='x16' />
 						{t('Delete')}
 					</Button>
diff --git a/apps/meteor/client/views/admin/settings/GroupPage.tsx b/apps/meteor/client/views/admin/settings/GroupPage.tsx
index 19b16adee851..9b3deefd2e38 100644
--- a/apps/meteor/client/views/admin/settings/GroupPage.tsx
+++ b/apps/meteor/client/views/admin/settings/GroupPage.tsx
@@ -161,7 +161,7 @@ const GroupPage: FC<GroupPageProps> = ({
 			<Page.Header onClickBack={handleBack} title={i18nLabel && isTranslationKey(i18nLabel) && t(i18nLabel)}>
 				<ButtonGroup>
 					{changedEditableSettings.length > 0 && (
-						<Button danger primary type='reset' onClick={handleCancelClick}>
+						<Button primary type='reset' onClick={handleCancelClick}>
 							{t('Cancel')}
 						</Button>
 					)}
diff --git a/apps/meteor/client/views/admin/settings/ResetSettingButton.tsx b/apps/meteor/client/views/admin/settings/ResetSettingButton.tsx
index 3db4f7a17cd8..f708ff477c9d 100644
--- a/apps/meteor/client/views/admin/settings/ResetSettingButton.tsx
+++ b/apps/meteor/client/views/admin/settings/ResetSettingButton.tsx
@@ -1,15 +1,11 @@
-import { Button, Icon } from '@rocket.chat/fuselage';
+import { Button, IconButton } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ComponentProps, ReactElement } from 'react';
 
 function ResetSettingButton(props: ComponentProps<typeof Button>): ReactElement {
 	const t = useTranslation();
 
-	return (
-		<Button aria-label={t('Reset')} danger ghost small title={t('Reset')} style={{ padding: 0 }} {...props}>
-			<Icon name='undo' />
-		</Button>
-	);
+	return <IconButton icon='undo' aria-label={t('Reset')} danger small title={t('Reset')} style={{ padding: 0 }} {...props} />;
 }
 
 export default ResetSettingButton;
diff --git a/apps/meteor/client/views/admin/settings/Section.js b/apps/meteor/client/views/admin/settings/Section.js
index e2c4ca138e66..3383ba1cb1aa 100644
--- a/apps/meteor/client/views/admin/settings/Section.js
+++ b/apps/meteor/client/views/admin/settings/Section.js
@@ -65,7 +65,7 @@ function Section({ groupId, hasReset = true, sectionName, tabName = '', solo, ..
 			{hasReset && canReset && (
 				<Button
 					children={t('Reset_section_settings')}
-					danger
+					secondaryDanger
 					marginBlockStart={'x16'}
 					data-section={sectionName}
 					onClick={handleResetSectionClick}
diff --git a/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage.tsx
index 170643aa7e9b..cbec38722a92 100644
--- a/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage.tsx
+++ b/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage.tsx
@@ -118,7 +118,7 @@ function OAuthGroupPage({ _id, ...group }: OAuthGroupPageProps): ReactElement {
 							solo={solo}
 						>
 							<div className='submit'>
-								<Button danger onClick={handleRemoveCustomOAuthButtonClick}>
+								<Button secondaryDanger onClick={handleRemoveCustomOAuthButtonClick}>
 									{t('Remove_custom_oauth')}
 								</Button>
 							</div>
diff --git a/apps/meteor/client/views/admin/settings/groups/voip/AssignAgentButton.tsx b/apps/meteor/client/views/admin/settings/groups/voip/AssignAgentButton.tsx
index ca722815b65b..6a5c19090d71 100644
--- a/apps/meteor/client/views/admin/settings/groups/voip/AssignAgentButton.tsx
+++ b/apps/meteor/client/views/admin/settings/groups/voip/AssignAgentButton.tsx
@@ -1,4 +1,4 @@
-import { Table, Icon, Button } from '@rocket.chat/fuselage';
+import { Table, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
@@ -16,9 +16,7 @@ const AssignAgentButton: FC<{ extension: string; reload: () => void }> = ({ exte
 
 	return (
 		<Table.Cell fontScale='p2' color='hint' withTruncatedText>
-			<Button small ghost title={t('Associate_Agent')} onClick={handleAssociation}>
-				<Icon name='user-plus' size='x20' mie='x4' />
-			</Button>
+			<IconButton icon='user-plus' small title={t('Associate_Agent')} onClick={handleAssociation} />
 		</Table.Cell>
 	);
 };
diff --git a/apps/meteor/client/views/admin/settings/groups/voip/RemoveAgentButton.tsx b/apps/meteor/client/views/admin/settings/groups/voip/RemoveAgentButton.tsx
index df3ec0fb57b6..1162bef18210 100644
--- a/apps/meteor/client/views/admin/settings/groups/voip/RemoveAgentButton.tsx
+++ b/apps/meteor/client/views/admin/settings/groups/voip/RemoveAgentButton.tsx
@@ -1,4 +1,4 @@
-import { Table, Icon, Button } from '@rocket.chat/fuselage';
+import { Table, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
@@ -45,9 +45,7 @@ const RemoveAgentButton: FC<{ username: string; reload: () => void }> = ({ usern
 
 	return (
 		<Table.Cell fontScale='p2' color='hint' withTruncatedText>
-			<Button small ghost title={t('Remove_Association')} onClick={handleDelete}>
-				<Icon name='trash' size='x16' />
-			</Button>
+			<IconButton icon='trash' small title={t('Remove_Association')} onClick={handleDelete} />
 		</Table.Cell>
 	);
 };
diff --git a/apps/meteor/client/views/meet/CallPage.tsx b/apps/meteor/client/views/meet/CallPage.tsx
index 1492d05d63ff..f1f006d98038 100644
--- a/apps/meteor/client/views/meet/CallPage.tsx
+++ b/apps/meteor/client/views/meet/CallPage.tsx
@@ -227,7 +227,7 @@ const CallPage: FC<CallPageProps> = ({
 							<Icon name='arrow-expand' size={iconSize} color='white' />
 						</Button>
 					)}
-					<Button square primary danger data-title={t('End_call')} onClick={closeWindow} size={parseInt(buttonSize)}>
+					<Button square danger data-title={t('End_call')} onClick={closeWindow} size={parseInt(buttonSize)}>
 						<Icon name='phone-off' size={iconSize} color='white' />
 					</Button>
 				</ButtonGroup>
diff --git a/apps/meteor/client/views/omnichannel/agents/RemoveAgentButton.js b/apps/meteor/client/views/omnichannel/agents/RemoveAgentButton.js
index b8c8ea0b7d98..162ed5e42f32 100644
--- a/apps/meteor/client/views/omnichannel/agents/RemoveAgentButton.js
+++ b/apps/meteor/client/views/omnichannel/agents/RemoveAgentButton.js
@@ -1,4 +1,4 @@
-import { Table, Icon, Button } from '@rocket.chat/fuselage';
+import { Table, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
@@ -36,9 +36,7 @@ function RemoveAgentButton({ _id, reload }) {
 
 	return (
 		<Table.Cell fontScale='p2' color='hint' withTruncatedText>
-			<Button small ghost title={t('Remove')} onClick={handleDelete}>
-				<Icon name='trash' size='x16' />
-			</Button>
+			<IconButton icon='trash' mini small title={t('Remove')} onClick={handleDelete} />
 		</Table.Cell>
 	);
 }
diff --git a/apps/meteor/client/views/omnichannel/businessHours/EditBusinessHoursPage.js b/apps/meteor/client/views/omnichannel/businessHours/EditBusinessHoursPage.js
index 7bbc3c55a757..4a1a9f23193f 100644
--- a/apps/meteor/client/views/omnichannel/businessHours/EditBusinessHoursPage.js
+++ b/apps/meteor/client/views/omnichannel/businessHours/EditBusinessHoursPage.js
@@ -108,7 +108,7 @@ const EditBusinessHoursPage = ({ id, type }) => {
 				<ButtonGroup>
 					{!isSingleBH && <Button onClick={handleReturn}>{t('Back')}</Button>}
 					{type === 'custom' && (
-						<Button primary danger onClick={handleDelete}>
+						<Button danger onClick={handleDelete}>
 							{t('Delete')}
 						</Button>
 					)}
diff --git a/apps/meteor/client/views/omnichannel/currentChats/RemoveChatButton.tsx b/apps/meteor/client/views/omnichannel/currentChats/RemoveChatButton.tsx
index cbd648b21210..06016489ed54 100644
--- a/apps/meteor/client/views/omnichannel/currentChats/RemoveChatButton.tsx
+++ b/apps/meteor/client/views/omnichannel/currentChats/RemoveChatButton.tsx
@@ -1,4 +1,4 @@
-import { Table, Icon, Button } from '@rocket.chat/fuselage';
+import { Table, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
@@ -27,7 +27,7 @@ const RemoveChatButton: FC<{ _id: string; reload: () => void }> = ({ _id, reload
 				await handleRemoveClick();
 				dispatchToastMessage({ type: 'success', message: t('Chat_removed') });
 			} catch (error) {
-				dispatchToastMessage({ type: 'error', message: error });
+				dispatchToastMessage({ type: 'error', message: String(error) });
 			}
 			setModal(null);
 		};
@@ -43,9 +43,7 @@ const RemoveChatButton: FC<{ _id: string; reload: () => void }> = ({ _id, reload
 
 	return (
 		<Table.Cell fontScale='p2' color='hint' withTruncatedText>
-			<Button small ghost title={t('Remove')} onClick={handleDelete}>
-				<Icon name='trash' size='x16' />
-			</Button>
+			<IconButton small icon='trash' title={t('Remove')} onClick={handleDelete} />
 		</Table.Cell>
 	);
 };
diff --git a/apps/meteor/client/views/omnichannel/customFields/RemoveCustomFieldButton.js b/apps/meteor/client/views/omnichannel/customFields/RemoveCustomFieldButton.js
index 120e31a195b8..24004069012a 100644
--- a/apps/meteor/client/views/omnichannel/customFields/RemoveCustomFieldButton.js
+++ b/apps/meteor/client/views/omnichannel/customFields/RemoveCustomFieldButton.js
@@ -1,4 +1,4 @@
-import { Table, Icon, Button } from '@rocket.chat/fuselage';
+import { Table, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
@@ -37,9 +37,7 @@ function RemoveCustomFieldButton({ _id, reload }) {
 
 	return (
 		<Table.Cell fontScale='p2' color='hint' withTruncatedText>
-			<Button small ghost title={t('Remove')} onClick={handleDelete}>
-				<Icon name='trash' size='x16' />
-			</Button>
+			<IconButton icon='trash' mini title={t('Remove')} onClick={handleDelete} />
 		</Table.Cell>
 	);
 }
diff --git a/apps/meteor/client/views/omnichannel/departments/RemoveAgentButton.js b/apps/meteor/client/views/omnichannel/departments/RemoveAgentButton.js
index 2d60f68b08d7..d383ad16f0b9 100644
--- a/apps/meteor/client/views/omnichannel/departments/RemoveAgentButton.js
+++ b/apps/meteor/client/views/omnichannel/departments/RemoveAgentButton.js
@@ -1,4 +1,4 @@
-import { Icon, Button } from '@rocket.chat/fuselage';
+import { Icon, Button, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
@@ -23,11 +23,7 @@ function RemoveAgentButton({ agentId, setAgentList, agentList, setAgentsRemoved
 		setModal(<GenericModal variant='danger' onConfirm={onDeleteAgent} onCancel={() => setModal()} confirmText={t('Delete')} />);
 	});
 
-	return (
-		<Button small ghost title={t('Remove')} onClick={handleDelete}>
-			<Icon name='trash' size='x16' />
-		</Button>
-	);
+	return <IconButton icon='trash' mini title={t('Remove')} onClick={handleDelete} />;
 }
 
 export default RemoveAgentButton;
diff --git a/apps/meteor/client/views/omnichannel/departments/RemoveDepartmentButton.js b/apps/meteor/client/views/omnichannel/departments/RemoveDepartmentButton.js
index 16889b62e906..080f6e898ba8 100644
--- a/apps/meteor/client/views/omnichannel/departments/RemoveDepartmentButton.js
+++ b/apps/meteor/client/views/omnichannel/departments/RemoveDepartmentButton.js
@@ -1,4 +1,4 @@
-import { Table, Icon, Button } from '@rocket.chat/fuselage';
+import { Table, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
@@ -36,9 +36,7 @@ function RemoveDepartmentButton({ _id, reload }) {
 
 	return (
 		<Table.Cell fontScale='p2' color='hint' withTruncatedText>
-			<Button small ghost title={t('Remove')} onClick={handleDelete}>
-				<Icon name='trash' size='x16' />
-			</Button>
+			<IconButton icon='trash' title={t('Remove')} onClick={handleDelete} />
 		</Table.Cell>
 	);
 }
diff --git a/apps/meteor/client/views/omnichannel/facebook/FacebookPage.tsx b/apps/meteor/client/views/omnichannel/facebook/FacebookPage.tsx
index 4720f73f6587..00d21e61523b 100644
--- a/apps/meteor/client/views/omnichannel/facebook/FacebookPage.tsx
+++ b/apps/meteor/client/views/omnichannel/facebook/FacebookPage.tsx
@@ -64,7 +64,7 @@ const FacebookPage: FC<FacebookPageProps> = ({ pages, enabled, hasToken, onToggl
 							</Box>
 							<ButtonGroup stretch vertical>
 								<Button onClick={onRefresh}>{t('Reload_Pages')}</Button>
-								<Button danger onClick={onDisable}>
+								<Button secondaryDanger onClick={onDisable}>
 									{t('Disable')}
 								</Button>
 							</ButtonGroup>
diff --git a/apps/meteor/client/views/omnichannel/managers/RemoveManagerButton.tsx b/apps/meteor/client/views/omnichannel/managers/RemoveManagerButton.tsx
index c8e437353d32..8ac7e6ee4654 100644
--- a/apps/meteor/client/views/omnichannel/managers/RemoveManagerButton.tsx
+++ b/apps/meteor/client/views/omnichannel/managers/RemoveManagerButton.tsx
@@ -1,4 +1,4 @@
-import { Table, Icon, Button } from '@rocket.chat/fuselage';
+import { Table, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
@@ -43,9 +43,7 @@ const RemoveManagerButton = ({ _id, reload }: { _id: string; reload: () => void
 
 	return (
 		<Table.Cell fontScale='p2' color='hint' withTruncatedText>
-			<Button small ghost title={t('Remove')} onClick={handleDelete}>
-				<Icon name='trash' size='x16' />
-			</Button>
+			<IconButton small icon='trash' title={t('Remove')} onClick={handleDelete} />
 		</Table.Cell>
 	);
 };
diff --git a/apps/meteor/client/views/omnichannel/triggers/TriggersRow.js b/apps/meteor/client/views/omnichannel/triggers/TriggersRow.js
index c8c73e90caf4..1419221ce54e 100644
--- a/apps/meteor/client/views/omnichannel/triggers/TriggersRow.js
+++ b/apps/meteor/client/views/omnichannel/triggers/TriggersRow.js
@@ -1,4 +1,4 @@
-import { Table, Icon, Button } from '@rocket.chat/fuselage';
+import { Table, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useRoute, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { memo } from 'react';
@@ -54,9 +54,7 @@ const TriggersRow = memo(function TriggersRow(props) {
 			<Table.Cell withTruncatedText>{description}</Table.Cell>
 			<Table.Cell withTruncatedText>{enabled ? t('Yes') : t('No')}</Table.Cell>
 			<Table.Cell withTruncatedText>
-				<Button small ghost title={t('Remove')} onClick={handleDelete}>
-					<Icon name='trash' size='x16' />
-				</Button>
+				<IconButton icon='trash' mini ghost title={t('Remove')} onClick={handleDelete} />
 			</Table.Cell>
 		</Table.Row>
 	);
diff --git a/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditChannel.js b/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditChannel.js
index 7486de4e0839..4c76a650959c 100644
--- a/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditChannel.js
+++ b/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditChannel.js
@@ -479,7 +479,7 @@ function EditChannel({ room, onClickClose, onClickBack }) {
 				</Field>
 				<Field>
 					<Field.Row>
-						<Button flexGrow={1} primary danger disabled={!canDelete} onClick={handleDelete}>
+						<Button flexGrow={1} danger disabled={!canDelete} onClick={handleDelete}>
 							<Icon name='trash' size='x16' />
 							{t('Delete')}
 						</Button>
diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js
index a4dfb0a09481..de4180a8aeb9 100644
--- a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js
+++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js
@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, FieldGroup, Icon } from '@rocket.chat/fuselage';
+import { Button, ButtonGroup, FieldGroup, Icon, IconButton } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
@@ -59,9 +59,7 @@ const NotificationPreferences = ({
 							options={handleOptions.sound}
 							optionDefault={formValues?.desktopSound}
 						>
-							<Button mis='x4' square ghost onClick={handlePlaySound}>
-								<Icon name='play' size='x18' />
-							</Button>
+							<IconButton icon='play' mis='x4' square ghost onClick={handlePlaySound} />
 						</Preferences>
 					</NotificationByDevice>
 					<NotificationByDevice device={t('Mobile')} icon={'mobile'}>
diff --git a/apps/meteor/client/views/room/contextualBar/OTR/components/OTREstablished.tsx b/apps/meteor/client/views/room/contextualBar/OTR/components/OTREstablished.tsx
index 2b4b2f5ea454..9b19542471d9 100644
--- a/apps/meteor/client/views/room/contextualBar/OTR/components/OTREstablished.tsx
+++ b/apps/meteor/client/views/room/contextualBar/OTR/components/OTREstablished.tsx
@@ -13,7 +13,7 @@ const OTREstablished = ({ onClickRefresh, onClickEnd }: OTREstablishedProps): Re
 	return (
 		<ButtonGroup stretch>
 			<Button onClick={onClickRefresh}>{t('Refresh_keys')}</Button>
-			<Button danger onClick={onClickEnd}>
+			<Button secondaryDanger onClick={onClickEnd}>
 				{t('End_OTR')}
 			</Button>
 		</ButtonGroup>
diff --git a/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessages.js b/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessages.js
index 3bb7dae29d2e..4f70b8ac8902 100644
--- a/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessages.js
+++ b/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessages.js
@@ -93,7 +93,7 @@ const PruneMessages = ({
 			</VerticalBar.ScrollableContent>
 			<VerticalBar.Footer>
 				<ButtonGroup stretch>
-					<Button primary danger disabled={validateText && true} onClick={onClickPrune}>
+					<Button danger disabled={validateText && true} onClick={onClickPrune}>
 						{t('Prune')}
 					</Button>
 				</ButtonGroup>
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/List/components/MemberItem.js b/apps/meteor/client/views/room/contextualBar/RoomMembers/List/components/MemberItem.js
index e0663e298c37..d6e1274898d2 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/List/components/MemberItem.js
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/List/components/MemberItem.js
@@ -1,4 +1,4 @@
-import { Option, OptionContent, ActionButton } from '@rocket.chat/fuselage';
+import { Option, OptionContent, IconButton } from '@rocket.chat/fuselage';
 import { usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import React, { useState } from 'react';
 
@@ -29,7 +29,7 @@ export const MemberItem = ({ _id, status, name, username, onClickView, style, ri
 				{name} <Option.Description>({username})</Option.Description>
 			</OptionContent>
 			<Option.Menu onClick={onClick}>
-				{showButton ? <UserActions username={username} rid={rid} _id={_id} reload={reload} /> : <ActionButton ghost tiny icon='kebab' />}
+				{showButton ? <UserActions username={username} rid={rid} _id={_id} reload={reload} /> : <IconButton tiny icon='kebab' />}
 			</Option.Menu>
 		</Option>
 	);
diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/Message.js b/apps/meteor/client/views/room/contextualBar/Threads/components/Message.js
index 35cae5855b8c..006281bfd451 100644
--- a/apps/meteor/client/views/room/contextualBar/Threads/components/Message.js
+++ b/apps/meteor/client/views/room/contextualBar/Threads/components/Message.js
@@ -1,4 +1,4 @@
-import { Button, Icon, Message, Box } from '@rocket.chat/fuselage';
+import { Message, Box, IconButton } from '@rocket.chat/fuselage';
 import React from 'react';
 
 import * as NotificationStatus from '../../../../../components/Message/NotificationStatus';
@@ -67,20 +67,18 @@ export default React.memo(function MessageThread({
 					</Message.Block>
 				</Message.Container>
 				<Message.ContainerFixed>
-					<Button
+					<IconButton
 						className={anchor}
 						small
+						icon={button}
 						square
 						flexShrink={0}
-						ghost
 						data-following={following}
 						data-id={_id}
 						onClick={handleFollowButton}
 						title={actionLabel}
 						aria-label={actionLabel}
-					>
-						<Icon name={button} size='x20' />
-					</Button>
+					/>
 					{(mention && <NotificationStatus.Me mb='x24' />) ||
 						(all && <NotificationStatus.All mb='x24' />) ||
 						(unread && <NotificationStatus.Unread mb='x24' />)}
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserWebRTC/UserWebRTCButtons.tsx b/apps/meteor/client/views/room/contextualBar/UserInfo/UserWebRTC/UserWebRTCButtons.tsx
index 19dc3fbabd73..44ab0e831291 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserWebRTC/UserWebRTCButtons.tsx
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/UserWebRTC/UserWebRTCButtons.tsx
@@ -21,7 +21,7 @@ const UserWebRTCButtons = ({ webRTCData }: { webRTCData: useWebRTCProps }): Reac
 
 	return (
 		<ButtonGroup align='center'>
-			<Button primary danger onClick={handleStopCall} title={t('Stop_call')}>
+			<Button danger onClick={handleStopCall} title={t('Stop_call')}>
 				<Icon size='x20' name='phone-off' />
 			</Button>
 
diff --git a/apps/meteor/client/views/room/contextualBar/VideoConference/BBB/CallBBB.tsx b/apps/meteor/client/views/room/contextualBar/VideoConference/BBB/CallBBB.tsx
index c15bf51929af..d4dfdfbd9745 100644
--- a/apps/meteor/client/views/room/contextualBar/VideoConference/BBB/CallBBB.tsx
+++ b/apps/meteor/client/views/room/contextualBar/VideoConference/BBB/CallBBB.tsx
@@ -38,7 +38,7 @@ const CallBBB: FC<CallBBBProps> = ({ handleClose, canManageCall, live, startCall
 						</Button>
 					)}
 					{live && canManageCall && (
-						<Button danger onClick={endCall}>
+						<Button secondaryDanger onClick={endCall}>
 							{t('BBB_End_Meeting')}
 						</Button>
 					)}
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions.js b/apps/meteor/client/views/room/hooks/useUserInfoActions.js
index 9f5f61b91b63..c294d7379f3e 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions.js
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions.js
@@ -62,10 +62,10 @@ const WarningModal = ({ text, confirmText, close, confirm, ...props }) => {
 			<Modal.Content fontScale='p2'>{text}</Modal.Content>
 			<Modal.Footer>
 				<ButtonGroup align='end'>
-					<Button ghost onClick={close}>
+					<Button secondary onClick={close}>
 						{t('Cancel')}
 					</Button>
-					<Button ref={refAutoFocus} primary danger onClick={confirm}>
+					<Button ref={refAutoFocus} danger onClick={confirm}>
 						{confirmText}
 					</Button>
 				</ButtonGroup>
diff --git a/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx b/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx
index a45dd78e01db..f322e9dca011 100644
--- a/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx
+++ b/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx
@@ -96,7 +96,7 @@ const FileUploadModal = ({
 				</Modal.Content>
 				<Modal.Footer>
 					<ButtonGroup align='end'>
-						<Button ghost onClick={onClose}>
+						<Button secondary onClick={onClose}>
 							{t('Cancel')}
 						</Button>
 						<Button primary type='submit' disabled={!name}>
diff --git a/apps/meteor/client/views/room/webdav/AddWebdavAccountModal.tsx b/apps/meteor/client/views/room/webdav/AddWebdavAccountModal.tsx
index c7145aed6f40..55a6a55d9ceb 100644
--- a/apps/meteor/client/views/room/webdav/AddWebdavAccountModal.tsx
+++ b/apps/meteor/client/views/room/webdav/AddWebdavAccountModal.tsx
@@ -30,7 +30,7 @@ const AddWebdavAccountModal = ({ onClose, onConfirm }: AddWebdavAccountModalProp
 			return dispatchToastMessage({ type: 'success', message: t('webdav-account-saved') });
 		} catch (error) {
 			console.error(error);
-			return dispatchToastMessage({ type: 'error', message: error });
+			return dispatchToastMessage({ type: 'error', message: String(error) });
 		} finally {
 			onConfirm();
 			setIsLoading(false);
@@ -76,7 +76,7 @@ const AddWebdavAccountModal = ({ onClose, onConfirm }: AddWebdavAccountModalProp
 			</Modal.Content>
 			<Modal.Footer>
 				<ButtonGroup align='end'>
-					<Button ghost onClick={onClose}>
+					<Button secondary onClick={onClose}>
 						{t('Cancel')}
 					</Button>
 					<Button primary type='submit' disabled={isLoading}>
diff --git a/apps/meteor/client/views/teams/contextualBar/channels/ConfirmationModal/ConfirmationModal.tsx b/apps/meteor/client/views/teams/contextualBar/channels/ConfirmationModal/ConfirmationModal.tsx
index 4e827c342612..189e3a73df17 100644
--- a/apps/meteor/client/views/teams/contextualBar/channels/ConfirmationModal/ConfirmationModal.tsx
+++ b/apps/meteor/client/views/teams/contextualBar/channels/ConfirmationModal/ConfirmationModal.tsx
@@ -32,7 +32,7 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ onClose, onConfirmActio
 			<Modal.Footer>
 				<ButtonGroup align='end'>
 					<Button onClick={onClose}>{t('Cancel')}</Button>
-					<Button onClick={handleConfirm} primary danger>
+					<Button onClick={handleConfirm} danger>
 						{labelButton}
 					</Button>
 				</ButtonGroup>
diff --git a/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannelItem.js b/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannelItem.js
index 64af814280c3..c60c087a309e 100644
--- a/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannelItem.js
+++ b/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannelItem.js
@@ -1,4 +1,4 @@
-import { ActionButton, Box, Icon, Option, OptionContent, Tag } from '@rocket.chat/fuselage';
+import { Box, Icon, IconButton, Option, OptionContent, Tag } from '@rocket.chat/fuselage';
 import { usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import { usePermission, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useState } from 'react';
@@ -46,7 +46,7 @@ const TeamsChannelItem = ({ room, onClickView, reload }) => {
 			</OptionContent>
 			{(canRemoveTeamChannel || canEditTeamChannel || canDeleteTeamChannel) && (
 				<Option.Menu onClick={onClick}>
-					{showButton ? <RoomActions room={room} reload={reload} /> : <ActionButton ghost tiny icon='kebab' />}
+					{showButton ? <RoomActions room={room} reload={reload} /> : <IconButton tiny icon='kebab' />}
 				</Option.Menu>
 			)}
 		</Option>
diff --git a/apps/meteor/ee/client/omnichannel/RemoveBusinessHourButton.js b/apps/meteor/ee/client/omnichannel/RemoveBusinessHourButton.js
index eab1918883a0..48706148ccb1 100644
--- a/apps/meteor/ee/client/omnichannel/RemoveBusinessHourButton.js
+++ b/apps/meteor/ee/client/omnichannel/RemoveBusinessHourButton.js
@@ -1,4 +1,4 @@
-import { Table, Icon, Button } from '@rocket.chat/fuselage';
+import { Table, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
@@ -37,9 +37,7 @@ function RemoveBusinessHourButton({ _id, type, reload }) {
 
 	return (
 		<Table.Cell fontScale='p2' color='hint' onClick={handleDelete} withTruncatedText>
-			<Button small ghost title={t('Remove')} onClick={handleDelete}>
-				<Icon name='trash' size='x16' />
-			</Button>
+			<IconButton icon='trash' mini title={t('Remove')} onClick={handleDelete} />
 		</Table.Cell>
 	);
 }
diff --git a/apps/meteor/ee/client/omnichannel/cannedResponses/RemoveCannedResponseButton.tsx b/apps/meteor/ee/client/omnichannel/cannedResponses/RemoveCannedResponseButton.tsx
index 948ce50c7d0d..7242545e425b 100644
--- a/apps/meteor/ee/client/omnichannel/cannedResponses/RemoveCannedResponseButton.tsx
+++ b/apps/meteor/ee/client/omnichannel/cannedResponses/RemoveCannedResponseButton.tsx
@@ -1,4 +1,4 @@
-import { Table, Icon, Button } from '@rocket.chat/fuselage';
+import { Table, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useRoute, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
@@ -36,7 +36,7 @@ const RemoveCannedResponseButton: FC<RemoveCannedResponseButtonProps> = ({ _id,
 				totalDataReload();
 				dispatchToastMessage({ type: 'success', message: t('Canned_Response_Removed') });
 			} catch (error) {
-				dispatchToastMessage({ type: 'error', message: error });
+				dispatchToastMessage({ type: 'error', message: String(error) });
 			}
 			setModal(null);
 		};
@@ -53,9 +53,7 @@ const RemoveCannedResponseButton: FC<RemoveCannedResponseButtonProps> = ({ _id,
 
 	return (
 		<Table.Cell fontScale='p2' color='hint' withTruncatedText>
-			<Button small ghost title={t('Remove')} onClick={handleDelete}>
-				<Icon name='trash' size='x16' />
-			</Button>
+			<IconButton icon='trash' small title={t('Remove')} onClick={handleDelete} />
 		</Table.Cell>
 	);
 };
diff --git a/apps/meteor/ee/client/omnichannel/monitors/MonitorsRow.js b/apps/meteor/ee/client/omnichannel/monitors/MonitorsRow.js
index 1f8f7f814526..b6ed24213f8c 100644
--- a/apps/meteor/ee/client/omnichannel/monitors/MonitorsRow.js
+++ b/apps/meteor/ee/client/omnichannel/monitors/MonitorsRow.js
@@ -1,4 +1,4 @@
-import { Table, Icon, Button } from '@rocket.chat/fuselage';
+import { Table, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { memo } from 'react';
@@ -37,9 +37,7 @@ function MonitorsRow(props) {
 			<Table.Cell withTruncatedText>{username}</Table.Cell>
 			<Table.Cell withTruncatedText>{emails?.find(({ address }) => !!address)?.address}</Table.Cell>
 			<Table.Cell withTruncatedText>
-				<Button small ghost title={t('Remove')} onClick={handleRemove}>
-					<Icon name='trash' size='x16' />
-				</Button>
+				<IconButton icon='trash' mini title={t('Remove')} onClick={handleRemove} />
 			</Table.Cell>
 		</Table.Row>
 	);
diff --git a/apps/meteor/ee/client/omnichannel/priorities/RemovePriorityButton.js b/apps/meteor/ee/client/omnichannel/priorities/RemovePriorityButton.js
index 6ffb0761765a..39cc48d632f2 100644
--- a/apps/meteor/ee/client/omnichannel/priorities/RemovePriorityButton.js
+++ b/apps/meteor/ee/client/omnichannel/priorities/RemovePriorityButton.js
@@ -1,4 +1,4 @@
-import { Table, Icon, Button } from '@rocket.chat/fuselage';
+import { Table, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useRoute, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
@@ -39,9 +39,7 @@ function RemovePriorityButton({ _id, reload }) {
 
 	return (
 		<Table.Cell fontScale='p2' color='hint' withTruncatedText>
-			<Button small ghost title={t('Remove')} onClick={handleDelete}>
-				<Icon name='trash' size='x16' />
-			</Button>
+			<IconButton icon='trash' mini title={t('Remove')} onClick={handleDelete} />
 		</Table.Cell>
 	);
 }
diff --git a/apps/meteor/ee/client/omnichannel/tags/RemoveTagButton.js b/apps/meteor/ee/client/omnichannel/tags/RemoveTagButton.js
index 488a11011ab2..54532a903dc5 100644
--- a/apps/meteor/ee/client/omnichannel/tags/RemoveTagButton.js
+++ b/apps/meteor/ee/client/omnichannel/tags/RemoveTagButton.js
@@ -1,4 +1,4 @@
-import { Table, Icon, Button } from '@rocket.chat/fuselage';
+import { Table, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useRoute, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
@@ -39,9 +39,7 @@ function RemoveTagButton({ _id, reload }) {
 
 	return (
 		<Table.Cell fontScale='p2' color='hint' withTruncatedText>
-			<Button small ghost title={t('Remove')} onClick={handleDelete}>
-				<Icon name='trash' size='x16' />
-			</Button>
+			<IconButton icon='trash' small title={t('Remove')} onClick={handleDelete} />
 		</Table.Cell>
 	);
 }
diff --git a/apps/meteor/ee/client/omnichannel/units/RemoveUnitButton.js b/apps/meteor/ee/client/omnichannel/units/RemoveUnitButton.js
index e4dec617384e..0d8a2c820ba1 100644
--- a/apps/meteor/ee/client/omnichannel/units/RemoveUnitButton.js
+++ b/apps/meteor/ee/client/omnichannel/units/RemoveUnitButton.js
@@ -1,4 +1,4 @@
-import { Table, Icon, Button } from '@rocket.chat/fuselage';
+import { Table, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useRoute, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
@@ -39,9 +39,7 @@ function RemoveUnitButton({ _id, reload }) {
 
 	return (
 		<Table.Cell fontScale='p2' color='hint' withTruncatedText>
-			<Button small ghost title={t('Remove')} onClick={handleDelete}>
-				<Icon name='trash' size='x16' />
-			</Button>
+			<IconButton icon='trash' mini title={t('Remove')} onClick={handleDelete} />
 		</Table.Cell>
 	);
 }
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForDays.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForDays.tsx
index 6137284e50f1..90b7d7af441c 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForDays.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForDays.tsx
@@ -1,5 +1,5 @@
 import { ResponsiveBar } from '@nivo/bar';
-import { Box, Button, Chevron, Flex, Margins, Skeleton } from '@rocket.chat/fuselage';
+import { Box, Flex, IconButton, Margins, Skeleton } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors';
 import moment from 'moment';
 import React, { ReactElement, useMemo } from 'react';
@@ -43,9 +43,7 @@ const ContentForDays = ({ displacement, onPreviousDateClick, onNextDateClick, ti
 		<>
 			<Flex.Container alignItems='center' justifyContent='center'>
 				<Box>
-					<Button ghost square small onClick={onPreviousDateClick}>
-						<Chevron left size='x20' style={{ verticalAlign: 'middle' }} />
-					</Button>
+					<IconButton icon='chevron-down' square small onClick={onPreviousDateClick} style={{ verticalAlign: 'middle' }} />
 					<Flex.Item basis='50%'>
 						<Margins inline='x8'>
 							<Box is='span' style={{ textAlign: 'center' }}>
@@ -53,9 +51,7 @@ const ContentForDays = ({ displacement, onPreviousDateClick, onNextDateClick, ti
 							</Box>
 						</Margins>
 					</Flex.Item>
-					<Button ghost square small disabled={displacement === 0} onClick={onNextDateClick}>
-						<Chevron right size='x20' style={{ verticalAlign: 'middle' }} />
-					</Button>
+					<IconButton icon='chevron-down' square small disabled={displacement === 0} onClick={onNextDateClick} />
 				</Box>
 			</Flex.Container>
 			<Flex.Container>
diff --git a/packages/livechat/src/components/Modal/component.js b/packages/livechat/src/components/Modal/component.js
index e409f0ed8089..48ae08e929e8 100644
--- a/packages/livechat/src/components/Modal/component.js
+++ b/packages/livechat/src/components/Modal/component.js
@@ -80,7 +80,7 @@ export const ConfirmationModal = withTranslation()(({
 	<Modal.Message>{text}</Modal.Message>
 	<ButtonGroup>
 		<Button outline secondary onClick={onCancel}>{cancelButtonText || t('no')}</Button>
-		<Button danger onClick={onConfirm}>{confirmButtonText || t('yes')}</Button>
+		<Button secondaryDanger onClick={onConfirm}>{confirmButtonText || t('yes')}</Button>
 	</ButtonGroup>
 </Modal>);
 
diff --git a/packages/livechat/src/routes/SwitchDepartment/component.js b/packages/livechat/src/routes/SwitchDepartment/component.js
index 98022ece4506..f3b020113316 100644
--- a/packages/livechat/src/routes/SwitchDepartment/component.js
+++ b/packages/livechat/src/routes/SwitchDepartment/component.js
@@ -115,7 +115,7 @@ class SwitchDepartment extends Component {
 
 						<ButtonGroup>
 							<Button submit loading={loading} disabled={!valid || loading} stack>{t('start_chat')}</Button>
-							<Button disabled={loading} stack secondary nude onClick={this.handleCancelClick}>{t('cancel')}</Button>
+							<Button disabled={loading} stack secondary onClick={this.handleCancelClick}>{t('cancel')}</Button>
 						</ButtonGroup>
 					</Form>
 				</Screen.Content>
diff --git a/yarn.lock b/yarn.lock
index 9220a4fdeda2..6bcc18a66a4d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7973,7 +7973,7 @@ __metadata:
     human-interval: ~1.0.0
     moment-timezone: ~0.5.27
     mongodb: ~3.5.0
-  checksum: f5f68008298f9482631f1f494e392cd6b8ba7971a3b0ece81ae2abe60f53d67973ff4476156fa5c9c41b8b58c4ccd284e95c545e0523996dfd05f9a80b843e07
+  checksum: acb4ebb7e7356f6e53e810d821eb6aa3d88bbfb9e85183e707517bee6d1eea1f189f38bdf0dd2b91360492ab7643134d510c320d2523d86596498ab98e59735b
   languageName: node
   linkType: hard
 

From 3e523b17a2217cf9d04a7c11dce50756fbffd00e Mon Sep 17 00:00:00 2001
From: julia foresti <juliaforesti@julias-MacBook-Pro.local>
Date: Tue, 24 May 2022 17:09:40 -0300
Subject: [PATCH 02/22] lint

---
 apps/meteor/client/sidebar/Item/Condensed.js          |  2 +-
 .../omnichannel/departments/RemoveAgentButton.js      |  2 +-
 .../contextualBar/AutoTranslate/AutoTranslate.tsx     | 11 +++++++++--
 .../NotificationPreferences.js                        |  2 +-
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/meteor/client/sidebar/Item/Condensed.js b/apps/meteor/client/sidebar/Item/Condensed.js
index 572135556805..d5e3e3ce86fe 100644
--- a/apps/meteor/client/sidebar/Item/Condensed.js
+++ b/apps/meteor/client/sidebar/Item/Condensed.js
@@ -1,4 +1,4 @@
-import { Sidebar } from '@rock, IconButtonet.chat/fuselage';
+import { IconButton, Sidebar } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import React, { memo, useState } from 'react';
 
diff --git a/apps/meteor/client/views/omnichannel/departments/RemoveAgentButton.js b/apps/meteor/client/views/omnichannel/departments/RemoveAgentButton.js
index d383ad16f0b9..d79c3d214a7e 100644
--- a/apps/meteor/client/views/omnichannel/departments/RemoveAgentButton.js
+++ b/apps/meteor/client/views/omnichannel/departments/RemoveAgentButton.js
@@ -1,4 +1,4 @@
-import { Icon, Button, IconButton } from '@rocket.chat/fuselage';
+import { IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
diff --git a/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.tsx b/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.tsx
index 30b815fbb098..0f979d605d05 100644
--- a/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.tsx
+++ b/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.tsx
@@ -1,7 +1,7 @@
 import { FieldGroup, Field, ToggleSwitch, Select } from '@rocket.chat/fuselage';
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import VerticalBar from '../../../../components/VerticalBar';
 
@@ -14,7 +14,14 @@ type AutoTranslateProps = {
 	handleClose?: () => void;
 };
 
-const AutoTranslate = ({ language, languages, handleSwitch, translateEnable, handleChangeLanguage, handleClose }: AutoTranslateProps) => {
+const AutoTranslate = ({
+	language,
+	languages,
+	handleSwitch,
+	translateEnable,
+	handleChangeLanguage,
+	handleClose,
+}: AutoTranslateProps): ReactElement => {
 	const t = useTranslation();
 
 	return (
diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js
index de4180a8aeb9..ea9ec4730614 100644
--- a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js
+++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js
@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, FieldGroup, Icon, IconButton } from '@rocket.chat/fuselage';
+import { Button, ButtonGroup, FieldGroup, IconButton } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 

From eb79a417ecf144852db03a34df819130dde5ecdd Mon Sep 17 00:00:00 2001
From: julia foresti <juliajforesti@gmail.com>
Date: Tue, 24 May 2022 17:33:51 -0300
Subject: [PATCH 03/22] Replace ActionButton with IconButton

---
 .../Message/Attachments/Attachment/Action.tsx          |  4 ++--
 .../components/Message/Metrics/MetricsFollowing.tsx    |  4 ++--
 apps/meteor/client/components/Page/PageHeader.tsx      |  4 ++--
 apps/meteor/client/components/UserCard/UserCard.tsx    |  4 ++--
 .../client/components/UserCard/UserCardAction.tsx      |  4 ++--
 .../components/VerticalBar/VerticalBarAction.tsx       |  4 ++--
 apps/meteor/client/sidebar/Item/Condensed.stories.tsx  | 10 +++++-----
 apps/meteor/client/sidebar/Item/Extended.stories.tsx   | 10 +++++-----
 apps/meteor/client/sidebar/Item/Medium.stories.tsx     | 10 +++++-----
 .../engagementDashboard/data/DownloadDataButton.tsx    |  5 +++--
 10 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/apps/meteor/client/components/Message/Attachments/Attachment/Action.tsx b/apps/meteor/client/components/Message/Attachments/Attachment/Action.tsx
index f98f4397e719..71da0ec61da0 100644
--- a/apps/meteor/client/components/Message/Attachments/Attachment/Action.tsx
+++ b/apps/meteor/client/components/Message/Attachments/Attachment/Action.tsx
@@ -1,6 +1,6 @@
-import { ActionButton } from '@rocket.chat/fuselage';
+import { IconButton } from '@rocket.chat/fuselage';
 import React, { ComponentProps, FC } from 'react';
 
-const Action: FC<ComponentProps<typeof ActionButton> & { icon: string }> = (props) => <ActionButton mi='x2' mini ghost {...props} />;
+const Action: FC<ComponentProps<typeof IconButton> & { icon: string }> = (props) => <IconButton mi='x2' mini {...props} />;
 
 export default Action;
diff --git a/apps/meteor/client/components/Message/Metrics/MetricsFollowing.tsx b/apps/meteor/client/components/Message/Metrics/MetricsFollowing.tsx
index 704305dc4091..91842a0c7247 100644
--- a/apps/meteor/client/components/Message/Metrics/MetricsFollowing.tsx
+++ b/apps/meteor/client/components/Message/Metrics/MetricsFollowing.tsx
@@ -1,8 +1,8 @@
-import { ActionButton } from '@rocket.chat/fuselage';
+import { IconButton } from '@rocket.chat/fuselage';
 import React, { FC } from 'react';
 
 type MetricsFollowingProps = { name: 'bell' | 'bell-off' };
 
-const MetricsFollowing: FC<MetricsFollowingProps> = ({ name }) => <ActionButton color='info' small ghost icon={name} />;
+const MetricsFollowing: FC<MetricsFollowingProps> = ({ name }) => <IconButton color='info' small icon={name} />;
 
 export default MetricsFollowing;
diff --git a/apps/meteor/client/components/Page/PageHeader.tsx b/apps/meteor/client/components/Page/PageHeader.tsx
index 9517eaae1d3a..6a584c90b2d7 100644
--- a/apps/meteor/client/components/Page/PageHeader.tsx
+++ b/apps/meteor/client/components/Page/PageHeader.tsx
@@ -1,4 +1,4 @@
-import { Box, ActionButton } from '@rocket.chat/fuselage';
+import { Box, IconButton } from '@rocket.chat/fuselage';
 import { useLayout, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useContext, FC, ReactNode } from 'react';
 
@@ -35,7 +35,7 @@ const PageHeader: FC<PageHeaderProps> = ({ children = undefined, title, onClickB
 						<BurgerMenu />
 					</TemplateHeader.ToolBox>
 				)}
-				{onClickBack && <ActionButton ghost small mie='x8' icon='arrow-back' onClick={onClickBack} title={t('Back')} />}
+				{onClickBack && <IconButton small mie='x8' icon='arrow-back' onClick={onClickBack} title={t('Back')} />}
 				<Box is='h2' fontScale='h2' flexGrow={1}>
 					{title}
 				</Box>
diff --git a/apps/meteor/client/components/UserCard/UserCard.tsx b/apps/meteor/client/components/UserCard/UserCard.tsx
index 0758c75bed11..511434059917 100644
--- a/apps/meteor/client/components/UserCard/UserCard.tsx
+++ b/apps/meteor/client/components/UserCard/UserCard.tsx
@@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, ActionButton, Skeleton } from '@rocket.chat/fuselage';
+import { Box, IconButton, Skeleton } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { forwardRef, ReactNode, ComponentProps } from 'react';
 
@@ -108,7 +108,7 @@ const UserCard = forwardRef(function UserCard(
 			</Box>
 			{onClose && (
 				<Box>
-					<ActionButton small ghost title={t('Close')} icon='cross' onClick={onClose} />
+					<IconButton small title={t('Close')} icon='cross' onClick={onClose} />
 				</Box>
 			)}
 		</UserCardContainer>
diff --git a/apps/meteor/client/components/UserCard/UserCardAction.tsx b/apps/meteor/client/components/UserCard/UserCardAction.tsx
index 6d308a28b5b4..816dc9aed17f 100644
--- a/apps/meteor/client/components/UserCard/UserCardAction.tsx
+++ b/apps/meteor/client/components/UserCard/UserCardAction.tsx
@@ -1,4 +1,4 @@
-import { ActionButton, Icon } from '@rocket.chat/fuselage';
+import { IconButton, Icon } from '@rocket.chat/fuselage';
 import React, { ReactElement, ComponentProps } from 'react';
 
 type UserCardActionProps = {
@@ -7,7 +7,7 @@ type UserCardActionProps = {
 };
 
 const UserCardAction = ({ label, icon, ...props }: UserCardActionProps): ReactElement => (
-	<ActionButton icon={icon} small title={label} {...props} mi='x2' />
+	<IconButton icon={icon} small title={label} {...props} mi='x2' />
 );
 
 export default UserCardAction;
diff --git a/apps/meteor/client/components/VerticalBar/VerticalBarAction.tsx b/apps/meteor/client/components/VerticalBar/VerticalBarAction.tsx
index 3461c9c814ad..564b66b06603 100644
--- a/apps/meteor/client/components/VerticalBar/VerticalBarAction.tsx
+++ b/apps/meteor/client/components/VerticalBar/VerticalBarAction.tsx
@@ -1,4 +1,4 @@
-import { ActionButton, Icon } from '@rocket.chat/fuselage';
+import { IconButton, Icon } from '@rocket.chat/fuselage';
 import React, { ReactElement, memo, MouseEventHandler, ComponentProps } from 'react';
 
 const VerticalBarAction = ({
@@ -8,6 +8,6 @@ const VerticalBarAction = ({
 	name: ComponentProps<typeof Icon>['name'];
 	title?: string;
 	onClick?: MouseEventHandler<HTMLOrSVGElement>;
-}): ReactElement => <ActionButton flexShrink={0} icon={name} ghost {...props} tiny />;
+}): ReactElement => <IconButton flexShrink={0} icon={name} {...props} tiny />;
 
 export default memo(VerticalBarAction);
diff --git a/apps/meteor/client/sidebar/Item/Condensed.stories.tsx b/apps/meteor/client/sidebar/Item/Condensed.stories.tsx
index 6bfd73c519f3..b8e4bf89962a 100644
--- a/apps/meteor/client/sidebar/Item/Condensed.stories.tsx
+++ b/apps/meteor/client/sidebar/Item/Condensed.stories.tsx
@@ -1,4 +1,4 @@
-import { Box, ActionButton } from '@rocket.chat/fuselage';
+import { Box, IconButton } from '@rocket.chat/fuselage';
 import { action } from '@storybook/addon-actions';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
@@ -60,10 +60,10 @@ export const Actions = Template.bind({});
 Actions.args = {
 	actions: (
 		<>
-			<ActionButton primary success icon='phone' />
-			<ActionButton primary danger icon='circle-cross' />
-			<ActionButton primary icon='trash' />
-			<ActionButton icon='phone' />
+			<IconButton secondarySuccess icon='phone' />
+			<IconButton secondaryDanger icon='circle-cross' />
+			<IconButton secondaryInfo icon='trash' />
+			<IconButton secondary icon='phone' />
 		</>
 	),
 };
diff --git a/apps/meteor/client/sidebar/Item/Extended.stories.tsx b/apps/meteor/client/sidebar/Item/Extended.stories.tsx
index 19bbdf60abe0..36cd5e1e9ad8 100644
--- a/apps/meteor/client/sidebar/Item/Extended.stories.tsx
+++ b/apps/meteor/client/sidebar/Item/Extended.stories.tsx
@@ -1,4 +1,4 @@
-import { Box, ActionButton, Badge } from '@rocket.chat/fuselage';
+import { Box, IconButton, Badge } from '@rocket.chat/fuselage';
 import { action } from '@storybook/addon-actions';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
@@ -85,10 +85,10 @@ export const Actions = Template.bind({});
 Actions.args = {
 	actions: (
 		<>
-			<ActionButton primary success icon='phone' />
-			<ActionButton primary danger icon='circle-cross' />
-			<ActionButton primary icon='trash' />
-			<ActionButton icon='phone' />
+			<IconButton secondarySuccess icon='phone' />
+			<IconButton secondaryDanger icon='circle-cross' />
+			<IconButton secondaryInfo icon='trash' />
+			<IconButton secondary icon='phone' />
 		</>
 	),
 };
diff --git a/apps/meteor/client/sidebar/Item/Medium.stories.tsx b/apps/meteor/client/sidebar/Item/Medium.stories.tsx
index 0e67a5ae273b..291e3595f2ef 100644
--- a/apps/meteor/client/sidebar/Item/Medium.stories.tsx
+++ b/apps/meteor/client/sidebar/Item/Medium.stories.tsx
@@ -1,4 +1,4 @@
-import { Box, ActionButton } from '@rocket.chat/fuselage';
+import { Box, IconButton } from '@rocket.chat/fuselage';
 import { action } from '@storybook/addon-actions';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
@@ -60,10 +60,10 @@ export const Actions = Template.bind({});
 Actions.args = {
 	actions: (
 		<>
-			<ActionButton primary success icon='phone' />
-			<ActionButton primary danger icon='circle-cross' />
-			<ActionButton primary icon='trash' />
-			<ActionButton icon='phone' />
+			<IconButton secondarySuccess icon='phone' />
+			<IconButton secondaryDanger icon='circle-cross' />
+			<IconButton secondaryInfo icon='trash' />
+			<IconButton secondary icon='phone' />
 		</>
 	),
 };
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/data/DownloadDataButton.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/data/DownloadDataButton.tsx
index 4c40a16f3da6..2fda3bb1e99a 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/data/DownloadDataButton.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/data/DownloadDataButton.tsx
@@ -1,4 +1,4 @@
-import { Box, ActionButton } from '@rocket.chat/fuselage';
+import { Box, IconButton } from '@rocket.chat/fuselage';
 import React, { ComponentProps, ReactElement } from 'react';
 
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
@@ -45,7 +45,8 @@ const DownloadDataButton = <H extends readonly string[]>({
 	};
 
 	return (
-		<ActionButton
+		<IconButton
+			secondary
 			small
 			mis='x16'
 			disabled={!dataAvailable}

From 188a549be9e1d632d94685e530688cb8724d36dd Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Tue, 24 May 2022 18:56:49 -0300
Subject: [PATCH 04/22] reset author

---
 .../Message/Attachments/Attachment/Action.tsx          |  4 ++--
 .../components/Message/Metrics/MetricsFollowing.tsx    |  4 ++--
 apps/meteor/client/components/Page/PageHeader.tsx      |  4 ++--
 apps/meteor/client/components/UserCard/UserCard.tsx    |  4 ++--
 .../client/components/UserCard/UserCardAction.tsx      |  4 ++--
 .../components/VerticalBar/VerticalBarAction.tsx       |  4 ++--
 apps/meteor/client/sidebar/Item/Condensed.stories.tsx  | 10 +++++-----
 apps/meteor/client/sidebar/Item/Extended.stories.tsx   | 10 +++++-----
 apps/meteor/client/sidebar/Item/Medium.stories.tsx     | 10 +++++-----
 .../engagementDashboard/data/DownloadDataButton.tsx    |  5 +++--
 10 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/apps/meteor/client/components/Message/Attachments/Attachment/Action.tsx b/apps/meteor/client/components/Message/Attachments/Attachment/Action.tsx
index f98f4397e719..71da0ec61da0 100644
--- a/apps/meteor/client/components/Message/Attachments/Attachment/Action.tsx
+++ b/apps/meteor/client/components/Message/Attachments/Attachment/Action.tsx
@@ -1,6 +1,6 @@
-import { ActionButton } from '@rocket.chat/fuselage';
+import { IconButton } from '@rocket.chat/fuselage';
 import React, { ComponentProps, FC } from 'react';
 
-const Action: FC<ComponentProps<typeof ActionButton> & { icon: string }> = (props) => <ActionButton mi='x2' mini ghost {...props} />;
+const Action: FC<ComponentProps<typeof IconButton> & { icon: string }> = (props) => <IconButton mi='x2' mini {...props} />;
 
 export default Action;
diff --git a/apps/meteor/client/components/Message/Metrics/MetricsFollowing.tsx b/apps/meteor/client/components/Message/Metrics/MetricsFollowing.tsx
index 704305dc4091..91842a0c7247 100644
--- a/apps/meteor/client/components/Message/Metrics/MetricsFollowing.tsx
+++ b/apps/meteor/client/components/Message/Metrics/MetricsFollowing.tsx
@@ -1,8 +1,8 @@
-import { ActionButton } from '@rocket.chat/fuselage';
+import { IconButton } from '@rocket.chat/fuselage';
 import React, { FC } from 'react';
 
 type MetricsFollowingProps = { name: 'bell' | 'bell-off' };
 
-const MetricsFollowing: FC<MetricsFollowingProps> = ({ name }) => <ActionButton color='info' small ghost icon={name} />;
+const MetricsFollowing: FC<MetricsFollowingProps> = ({ name }) => <IconButton color='info' small icon={name} />;
 
 export default MetricsFollowing;
diff --git a/apps/meteor/client/components/Page/PageHeader.tsx b/apps/meteor/client/components/Page/PageHeader.tsx
index 9517eaae1d3a..6a584c90b2d7 100644
--- a/apps/meteor/client/components/Page/PageHeader.tsx
+++ b/apps/meteor/client/components/Page/PageHeader.tsx
@@ -1,4 +1,4 @@
-import { Box, ActionButton } from '@rocket.chat/fuselage';
+import { Box, IconButton } from '@rocket.chat/fuselage';
 import { useLayout, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useContext, FC, ReactNode } from 'react';
 
@@ -35,7 +35,7 @@ const PageHeader: FC<PageHeaderProps> = ({ children = undefined, title, onClickB
 						<BurgerMenu />
 					</TemplateHeader.ToolBox>
 				)}
-				{onClickBack && <ActionButton ghost small mie='x8' icon='arrow-back' onClick={onClickBack} title={t('Back')} />}
+				{onClickBack && <IconButton small mie='x8' icon='arrow-back' onClick={onClickBack} title={t('Back')} />}
 				<Box is='h2' fontScale='h2' flexGrow={1}>
 					{title}
 				</Box>
diff --git a/apps/meteor/client/components/UserCard/UserCard.tsx b/apps/meteor/client/components/UserCard/UserCard.tsx
index 0758c75bed11..511434059917 100644
--- a/apps/meteor/client/components/UserCard/UserCard.tsx
+++ b/apps/meteor/client/components/UserCard/UserCard.tsx
@@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, ActionButton, Skeleton } from '@rocket.chat/fuselage';
+import { Box, IconButton, Skeleton } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { forwardRef, ReactNode, ComponentProps } from 'react';
 
@@ -108,7 +108,7 @@ const UserCard = forwardRef(function UserCard(
 			</Box>
 			{onClose && (
 				<Box>
-					<ActionButton small ghost title={t('Close')} icon='cross' onClick={onClose} />
+					<IconButton small title={t('Close')} icon='cross' onClick={onClose} />
 				</Box>
 			)}
 		</UserCardContainer>
diff --git a/apps/meteor/client/components/UserCard/UserCardAction.tsx b/apps/meteor/client/components/UserCard/UserCardAction.tsx
index 6d308a28b5b4..816dc9aed17f 100644
--- a/apps/meteor/client/components/UserCard/UserCardAction.tsx
+++ b/apps/meteor/client/components/UserCard/UserCardAction.tsx
@@ -1,4 +1,4 @@
-import { ActionButton, Icon } from '@rocket.chat/fuselage';
+import { IconButton, Icon } from '@rocket.chat/fuselage';
 import React, { ReactElement, ComponentProps } from 'react';
 
 type UserCardActionProps = {
@@ -7,7 +7,7 @@ type UserCardActionProps = {
 };
 
 const UserCardAction = ({ label, icon, ...props }: UserCardActionProps): ReactElement => (
-	<ActionButton icon={icon} small title={label} {...props} mi='x2' />
+	<IconButton icon={icon} small title={label} {...props} mi='x2' />
 );
 
 export default UserCardAction;
diff --git a/apps/meteor/client/components/VerticalBar/VerticalBarAction.tsx b/apps/meteor/client/components/VerticalBar/VerticalBarAction.tsx
index 3461c9c814ad..564b66b06603 100644
--- a/apps/meteor/client/components/VerticalBar/VerticalBarAction.tsx
+++ b/apps/meteor/client/components/VerticalBar/VerticalBarAction.tsx
@@ -1,4 +1,4 @@
-import { ActionButton, Icon } from '@rocket.chat/fuselage';
+import { IconButton, Icon } from '@rocket.chat/fuselage';
 import React, { ReactElement, memo, MouseEventHandler, ComponentProps } from 'react';
 
 const VerticalBarAction = ({
@@ -8,6 +8,6 @@ const VerticalBarAction = ({
 	name: ComponentProps<typeof Icon>['name'];
 	title?: string;
 	onClick?: MouseEventHandler<HTMLOrSVGElement>;
-}): ReactElement => <ActionButton flexShrink={0} icon={name} ghost {...props} tiny />;
+}): ReactElement => <IconButton flexShrink={0} icon={name} {...props} tiny />;
 
 export default memo(VerticalBarAction);
diff --git a/apps/meteor/client/sidebar/Item/Condensed.stories.tsx b/apps/meteor/client/sidebar/Item/Condensed.stories.tsx
index 6bfd73c519f3..b8e4bf89962a 100644
--- a/apps/meteor/client/sidebar/Item/Condensed.stories.tsx
+++ b/apps/meteor/client/sidebar/Item/Condensed.stories.tsx
@@ -1,4 +1,4 @@
-import { Box, ActionButton } from '@rocket.chat/fuselage';
+import { Box, IconButton } from '@rocket.chat/fuselage';
 import { action } from '@storybook/addon-actions';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
@@ -60,10 +60,10 @@ export const Actions = Template.bind({});
 Actions.args = {
 	actions: (
 		<>
-			<ActionButton primary success icon='phone' />
-			<ActionButton primary danger icon='circle-cross' />
-			<ActionButton primary icon='trash' />
-			<ActionButton icon='phone' />
+			<IconButton secondarySuccess icon='phone' />
+			<IconButton secondaryDanger icon='circle-cross' />
+			<IconButton secondaryInfo icon='trash' />
+			<IconButton secondary icon='phone' />
 		</>
 	),
 };
diff --git a/apps/meteor/client/sidebar/Item/Extended.stories.tsx b/apps/meteor/client/sidebar/Item/Extended.stories.tsx
index 19bbdf60abe0..36cd5e1e9ad8 100644
--- a/apps/meteor/client/sidebar/Item/Extended.stories.tsx
+++ b/apps/meteor/client/sidebar/Item/Extended.stories.tsx
@@ -1,4 +1,4 @@
-import { Box, ActionButton, Badge } from '@rocket.chat/fuselage';
+import { Box, IconButton, Badge } from '@rocket.chat/fuselage';
 import { action } from '@storybook/addon-actions';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
@@ -85,10 +85,10 @@ export const Actions = Template.bind({});
 Actions.args = {
 	actions: (
 		<>
-			<ActionButton primary success icon='phone' />
-			<ActionButton primary danger icon='circle-cross' />
-			<ActionButton primary icon='trash' />
-			<ActionButton icon='phone' />
+			<IconButton secondarySuccess icon='phone' />
+			<IconButton secondaryDanger icon='circle-cross' />
+			<IconButton secondaryInfo icon='trash' />
+			<IconButton secondary icon='phone' />
 		</>
 	),
 };
diff --git a/apps/meteor/client/sidebar/Item/Medium.stories.tsx b/apps/meteor/client/sidebar/Item/Medium.stories.tsx
index 0e67a5ae273b..291e3595f2ef 100644
--- a/apps/meteor/client/sidebar/Item/Medium.stories.tsx
+++ b/apps/meteor/client/sidebar/Item/Medium.stories.tsx
@@ -1,4 +1,4 @@
-import { Box, ActionButton } from '@rocket.chat/fuselage';
+import { Box, IconButton } from '@rocket.chat/fuselage';
 import { action } from '@storybook/addon-actions';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
@@ -60,10 +60,10 @@ export const Actions = Template.bind({});
 Actions.args = {
 	actions: (
 		<>
-			<ActionButton primary success icon='phone' />
-			<ActionButton primary danger icon='circle-cross' />
-			<ActionButton primary icon='trash' />
-			<ActionButton icon='phone' />
+			<IconButton secondarySuccess icon='phone' />
+			<IconButton secondaryDanger icon='circle-cross' />
+			<IconButton secondaryInfo icon='trash' />
+			<IconButton secondary icon='phone' />
 		</>
 	),
 };
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/data/DownloadDataButton.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/data/DownloadDataButton.tsx
index 4c40a16f3da6..2fda3bb1e99a 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/data/DownloadDataButton.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/data/DownloadDataButton.tsx
@@ -1,4 +1,4 @@
-import { Box, ActionButton } from '@rocket.chat/fuselage';
+import { Box, IconButton } from '@rocket.chat/fuselage';
 import React, { ComponentProps, ReactElement } from 'react';
 
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
@@ -45,7 +45,8 @@ const DownloadDataButton = <H extends readonly string[]>({
 	};
 
 	return (
-		<ActionButton
+		<IconButton
+			secondary
 			small
 			mis='x16'
 			disabled={!dataAvailable}

From f18a575925b67b559005798b470403b3087becb1 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Tue, 24 May 2022 18:58:45 -0300
Subject: [PATCH 05/22] reset author


From f015d144b3f9910c4f143247e626e44300027bf8 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Thu, 26 May 2022 14:15:09 -0300
Subject: [PATCH 06/22] Tag new colors

---
 apps/meteor/client/components/RoomForeword.tsx                | 2 +-
 apps/meteor/client/components/voip/room/VoipRoomForeword.tsx  | 2 +-
 apps/meteor/client/views/directory/RoomTags.js                | 4 ++--
 .../client/views/room/contextualBar/UserInfo/UserInfo.js      | 2 +-
 .../views/room/modals/ReactionListModal/ReactionUserTag.tsx   | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/meteor/client/components/RoomForeword.tsx b/apps/meteor/client/components/RoomForeword.tsx
index 3993a1ddf194..27597800da5d 100644
--- a/apps/meteor/client/components/RoomForeword.tsx
+++ b/apps/meteor/client/components/RoomForeword.tsx
@@ -63,7 +63,7 @@ const RoomForeword = ({ _id, rid }: RoomForewordProps): ReactElement | null => {
 				{usernames.map((username, index) => (
 					<Margins inline='x4' key={index}>
 						<Box is='a' href={`/direct/${username}`}>
-							<Tag variant='secondary' className='mention-link' data-username={username} medium>
+							<Tag variant='primary' className='mention-link' data-username={username} medium>
 								{username}
 							</Tag>
 						</Box>
diff --git a/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx b/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx
index 94046bd40a5a..222db6f4fa6d 100644
--- a/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx
+++ b/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx
@@ -20,7 +20,7 @@ export const VoipRoomForeword = ({ room }: { room: IRoom }): ReactElement => {
 			</Box>
 			<Box is='div' mb='x8' flexGrow={1} display='flex' justifyContent='center'>
 				<Box mi='x4'>
-					<Tag style={{ cursor: 'default' }} variant='secondary' medium>
+					<Tag style={{ cursor: 'default' }} variant='primary' medium>
 						{room.name || room.fname}
 					</Tag>
 				</Box>
diff --git a/apps/meteor/client/views/directory/RoomTags.js b/apps/meteor/client/views/directory/RoomTags.js
index 6b7079d609cc..a2c1c926bd41 100644
--- a/apps/meteor/client/views/directory/RoomTags.js
+++ b/apps/meteor/client/views/directory/RoomTags.js
@@ -7,8 +7,8 @@ function RoomTags({ room }) {
 	return (
 		<Box mi='x4' alignItems='center' display='flex'>
 			<Margins inline='x2'>
-				{room.default && <Tag variant='primary'>{t('default')}</Tag>}
-				{room.featured && <Tag variant='primary'>{t('featured')}</Tag>}
+				{room.default && <Tag variant='secondary'>{t('default')}</Tag>}
+				{room.featured && <Tag variant='secondary'>{t('featured')}</Tag>}
 			</Margins>
 		</Box>
 	);
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfo.js b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfo.js
index 5f2fcc0cbf59..3bd62d2907b4 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfo.js
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfo.js
@@ -143,7 +143,7 @@ function UserInfo({
 									{email}
 								</Box>
 								<Margins inline='x4'>
-									{verified && <Tag variant='primary'>{t('Verified')}</Tag>}
+									{verified && <Tag variant='secondary'>{t('Verified')}</Tag>}
 									{verified || <Tag disabled>{t('Not_verified')}</Tag>}
 								</Margins>
 							</InfoPanel.Text>
diff --git a/apps/meteor/client/views/room/modals/ReactionListModal/ReactionUserTag.tsx b/apps/meteor/client/views/room/modals/ReactionListModal/ReactionUserTag.tsx
index dd6714d1049a..b86538af3729 100644
--- a/apps/meteor/client/views/room/modals/ReactionListModal/ReactionUserTag.tsx
+++ b/apps/meteor/client/views/room/modals/ReactionListModal/ReactionUserTag.tsx
@@ -10,7 +10,7 @@ type ReactionUserTag = {
 
 const ReactionUserTag = ({ username, onClick, displayName }: ReactionUserTag): ReactElement => (
 	<Box mie='x4' mbe='x4' data-username={username} onClick={onClick} key={displayName}>
-		<Tag variant='secondary'>{displayName}</Tag>
+		<Tag variant='primary'>{displayName}</Tag>
 	</Box>
 );
 

From 6c58f493f0acf1c9044f3c9aa4c54ab6abce780e Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Fri, 27 May 2022 09:04:30 -0300
Subject: [PATCH 07/22] IconButton colors

---
 .../client/components/Message/Metrics/MetricsFollowing.tsx    | 2 +-
 .../NotificationPreferences/NotificationPreferences.js        | 2 +-
 .../views/admin/engagementDashboard/users/ContentForHours.tsx | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/meteor/client/components/Message/Metrics/MetricsFollowing.tsx b/apps/meteor/client/components/Message/Metrics/MetricsFollowing.tsx
index 91842a0c7247..371f3438cf81 100644
--- a/apps/meteor/client/components/Message/Metrics/MetricsFollowing.tsx
+++ b/apps/meteor/client/components/Message/Metrics/MetricsFollowing.tsx
@@ -3,6 +3,6 @@ import React, { FC } from 'react';
 
 type MetricsFollowingProps = { name: 'bell' | 'bell-off' };
 
-const MetricsFollowing: FC<MetricsFollowingProps> = ({ name }) => <IconButton color='info' small icon={name} />;
+const MetricsFollowing: FC<MetricsFollowingProps> = ({ name }) => <IconButton info small icon={name} />;
 
 export default MetricsFollowing;
diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js
index ea9ec4730614..141856548eef 100644
--- a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js
+++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js
@@ -59,7 +59,7 @@ const NotificationPreferences = ({
 							options={handleOptions.sound}
 							optionDefault={formValues?.desktopSound}
 						>
-							<IconButton icon='play' mis='x4' square ghost onClick={handlePlaySound} />
+							<IconButton icon='play' mis='x4' square onClick={handlePlaySound} />
 						</Preferences>
 					</NotificationByDevice>
 					<NotificationByDevice device={t('Mobile')} icon={'mobile'}>
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForHours.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForHours.tsx
index 3ae71d78c239..a87ee909bac9 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForHours.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForHours.tsx
@@ -45,13 +45,13 @@ const ContentForHours = ({ displacement, onPreviousDateClick, onNextDateClick, t
 	return (
 		<>
 			<Box display='flex' alignItems='center' justifyContent='center'>
-				<Button ghost square small onClick={onPreviousDateClick}>
+				<Button square small onClick={onPreviousDateClick}>
 					<Chevron left size='x20' style={{ verticalAlign: 'middle' }} />
 				</Button>
 				<Box mi='x8' flexBasis='25%' is='span' style={{ textAlign: 'center' }}>
 					{data ? moment(data.day).format(displacement < 7 ? 'dddd' : 'L') : null}
 				</Box>
-				<Button ghost square small disabled={displacement === 0} onClick={onNextDateClick}>
+				<Button square small disabled={displacement === 0} onClick={onNextDateClick}>
 					<Chevron right size='x20' style={{ verticalAlign: 'middle' }} />
 				</Button>
 			</Box>

From 321c8e756c805068f9a5cdacbe71f76ddaeaa238 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Tue, 31 May 2022 10:14:11 -0300
Subject: [PATCH 08/22] remove ghost qnd info Button variants

---
 apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx | 2 +-
 apps/meteor/client/views/room/Header/icons/Favorite.js   | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
index 5ad0b0277e94..f036dd4fb919 100644
--- a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
+++ b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
@@ -79,7 +79,7 @@ const ToolBox = ({ className }: ToolBoxProps): ReactElement => {
 					'title': t(title),
 					className,
 					index,
-					'info': id === tab?.id,
+					'secondary': id === tab?.id,
 					'data-toolbox': index,
 					action,
 					'key': id,
diff --git a/apps/meteor/client/views/room/Header/icons/Favorite.js b/apps/meteor/client/views/room/Header/icons/Favorite.js
index 8b397ad34297..e5baee689c7b 100644
--- a/apps/meteor/client/views/room/Header/icons/Favorite.js
+++ b/apps/meteor/client/views/room/Header/icons/Favorite.js
@@ -24,7 +24,6 @@ const Favorite = ({ room: { _id, f: favorited = false, t: type } }) => {
 				onClick={handleFavoriteClick}
 				color={favorited ? colors.y500 : null}
 				tiny
-				ghost
 			/>
 		)
 	);

From b4a9d0651e2a1d412d42fcc1cbc594d4768e36f6 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Tue, 31 May 2022 10:22:44 -0300
Subject: [PATCH 09/22] remove ghost variants

---
 .../views/admin/customSounds/AdminSoundsRoute.tsx      | 10 ++++------
 .../client/views/omnichannel/triggers/TriggersRow.js   |  2 +-
 .../meteor/client/views/room/Header/icons/Encrypted.js |  2 +-
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/meteor/client/views/admin/customSounds/AdminSoundsRoute.tsx b/apps/meteor/client/views/admin/customSounds/AdminSoundsRoute.tsx
index e489eb7b3eeb..12200ab40f8c 100644
--- a/apps/meteor/client/views/admin/customSounds/AdminSoundsRoute.tsx
+++ b/apps/meteor/client/views/admin/customSounds/AdminSoundsRoute.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Icon, Pagination } from '@rocket.chat/fuselage';
+import { Box, Button, Icon, IconButton, Pagination } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { useCustomSound, useRoute, useRouteParameter, usePermission, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useMemo, useState, useCallback, ReactElement } from 'react';
@@ -117,8 +117,8 @@ function CustomSoundsRoute(): ReactElement {
 											<Box withTruncatedText>{sound.name}</Box>
 										</GenericTableCell>
 										<GenericTableCell>
-											<Button
-												ghost
+											<IconButton
+												icon='play'
 												small
 												square
 												aria-label={t('Play')}
@@ -127,9 +127,7 @@ function CustomSoundsRoute(): ReactElement {
 													e.stopPropagation();
 													handlePlay(sound._id);
 												}}
-											>
-												<Icon name='play' size='x20' />
-											</Button>
+											/>
 										</GenericTableCell>
 									</GenericTableRow>
 								))}
diff --git a/apps/meteor/client/views/omnichannel/triggers/TriggersRow.js b/apps/meteor/client/views/omnichannel/triggers/TriggersRow.js
index 1419221ce54e..ea842b0a34eb 100644
--- a/apps/meteor/client/views/omnichannel/triggers/TriggersRow.js
+++ b/apps/meteor/client/views/omnichannel/triggers/TriggersRow.js
@@ -54,7 +54,7 @@ const TriggersRow = memo(function TriggersRow(props) {
 			<Table.Cell withTruncatedText>{description}</Table.Cell>
 			<Table.Cell withTruncatedText>{enabled ? t('Yes') : t('No')}</Table.Cell>
 			<Table.Cell withTruncatedText>
-				<IconButton icon='trash' mini ghost title={t('Remove')} onClick={handleDelete} />
+				<IconButton icon='trash' mini title={t('Remove')} onClick={handleDelete} />
 			</Table.Cell>
 		</Table.Row>
 	);
diff --git a/apps/meteor/client/views/room/Header/icons/Encrypted.js b/apps/meteor/client/views/room/Header/icons/Encrypted.js
index f3c2224449f0..25d1d7df2fb1 100644
--- a/apps/meteor/client/views/room/Header/icons/Encrypted.js
+++ b/apps/meteor/client/views/room/Header/icons/Encrypted.js
@@ -18,7 +18,7 @@ const Encrypted = ({ room }) => {
 		toggleE2E(room._id, 'encrypted', !(room && room.encrypted));
 	});
 	return e2eEnabled && room?.encrypted ? (
-		<Header.State title={encryptedLabel} icon='key' onClick={handleE2EClick} color={colors.g500} tiny ghost />
+		<Header.State title={encryptedLabel} icon='key' onClick={handleE2EClick} color={colors.g500} tiny />
 	) : null;
 };
 

From 907025986271458a44327f3f1c0a4b66a79e9903 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Thu, 2 Jun 2022 17:40:09 -0300
Subject: [PATCH 10/22] fix ToolBox selected IconButton color

---
 apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
index f036dd4fb919..5ad0b0277e94 100644
--- a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
+++ b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
@@ -79,7 +79,7 @@ const ToolBox = ({ className }: ToolBoxProps): ReactElement => {
 					'title': t(title),
 					className,
 					index,
-					'secondary': id === tab?.id,
+					'info': id === tab?.id,
 					'data-toolbox': index,
 					action,
 					'key': id,

From 1ee534aa98e2e848f184bda48ba2c570fe790b37 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 13 Jun 2022 12:00:06 -0300
Subject: [PATCH 11/22] replace tokens

---
 .../sidebar/hooks/useSidebarPaletteColor.js   | 18 ++++++++---------
 .../client/views/admin/apps/AppStatus.js      |  6 +++---
 .../admin/info/UsagePieGraph.stories.tsx      | 14 ++++++-------
 .../client/views/admin/info/UsagePieGraph.tsx |  2 +-
 .../client/views/admin/sidebar/UpgradeTab.tsx |  6 +++---
 .../Announcement/AnnouncementComponent.tsx    | 20 +++++++++----------
 .../views/room/Header/icons/Encrypted.js      |  2 +-
 .../views/room/Header/icons/Favorite.js       |  2 +-
 .../views/room/Header/icons/Translate.tsx     |  2 +-
 .../messages/MessagesPerChannelSection.tsx    | 14 ++++++-------
 .../messages/MessagesSentSection.tsx          |  2 +-
 .../users/ActiveUsersSection.tsx              |  8 ++++----
 .../users/ContentForDays.tsx                  |  2 +-
 .../users/ContentForHours.tsx                 |  2 +-
 .../users/NewUsersSection.tsx                 |  2 +-
 .../users/UsersByTimeOfTheDaySection.tsx      | 14 ++++++-------
 .../ee/client/views/admin/info/SeatsCard.tsx  |  2 +-
 17 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/apps/meteor/client/sidebar/hooks/useSidebarPaletteColor.js b/apps/meteor/client/sidebar/hooks/useSidebarPaletteColor.js
index c824c95b5b8a..b782fce7ba62 100644
--- a/apps/meteor/client/sidebar/hooks/useSidebarPaletteColor.js
+++ b/apps/meteor/client/sidebar/hooks/useSidebarPaletteColor.js
@@ -150,15 +150,15 @@ const getStyle = (
 			--rcx-color-neutral-800: ${toVar(colors.n200)};
 			--rcx-color-neutral-900: ${toVar(colors.n100)};
 
-			--rcx-color-primary-100: ${toVar(colors.b900)};
-			--rcx-color-primary-200: ${toVar(colors.b800)};
-			--rcx-color-primary-300: ${toVar(colors.b700)};
-			--rcx-color-primary-400: ${toVar(colors.b600)};
-			--rcx-color-primary-500: ${toVar(colors.b500)};
-			--rcx-color-primary-600: ${toVar(colors.b400)};
-			--rcx-color-primary-700: ${toVar(colors.b300)};
-			--rcx-color-primary-800: ${toVar(colors.b200)};
-			--rcx-color-primary-900: ${toVar(colors.b100)};
+			--rcx-color-primary-100: ${toVar(colors.p900)};
+			--rcx-color-primary-200: ${toVar(colors.p800)};
+			--rcx-color-primary-300: ${toVar(colors.p700)};
+			--rcx-color-primary-400: ${toVar(colors.p600)};
+			--rcx-color-primary-500: ${toVar(colors.p500)};
+			--rcx-color-primary-600: ${toVar(colors.p400)};
+			--rcx-color-primary-700: ${toVar(colors.p300)};
+			--rcx-color-primary-800: ${toVar(colors.p200)};
+			--rcx-color-primary-900: ${toVar(colors.p100)};
 
 			--rcx-button-colors-ghost-active-border-color: ${toVar(colors.n900)};
 			--rcx-button-colors-ghost-active-background-color: ${toVar(colors.n800)};
diff --git a/apps/meteor/client/views/admin/apps/AppStatus.js b/apps/meteor/client/views/admin/apps/AppStatus.js
index b79179310a54..3c7715071aeb 100644
--- a/apps/meteor/client/views/admin/apps/AppStatus.js
+++ b/apps/meteor/client/views/admin/apps/AppStatus.js
@@ -107,15 +107,15 @@ const AppStatus = ({ app, showStatus = true, isAppDetailsPage, installed = false
 	};
 
 	const AppStatusStyle = {
-		bg: status.label === 'Disabled' ? colors.y100 : colors.b100,
-		color: status.label === 'Disabled' ? colors.y800 : 'primary-500',
+		bg: status.label === 'Disabled' ? colors.w100 : colors.p100,
+		color: status.label === 'Disabled' ? colors.w800 : colors.p500,
 	};
 
 	return (
 		<Box {...props}>
 			{button && (
 				<Box
-					bg={colors.b100}
+					bg={colors.p100}
 					display='flex'
 					flexDirection='row'
 					alignItems='center'
diff --git a/apps/meteor/client/views/admin/info/UsagePieGraph.stories.tsx b/apps/meteor/client/views/admin/info/UsagePieGraph.stories.tsx
index 0c4efdc1c415..2ca5cef1f5fc 100644
--- a/apps/meteor/client/views/admin/info/UsagePieGraph.stories.tsx
+++ b/apps/meteor/client/views/admin/info/UsagePieGraph.stories.tsx
@@ -21,7 +21,7 @@ Example.args = {
 	used: 123,
 	size: 128,
 	label: 'Example label',
-	color: colorTokens.b500,
+	color: colorTokens.p500,
 };
 
 export const Unlimited = Template.bind({});
@@ -29,7 +29,7 @@ Unlimited.args = {
 	used: 123,
 	size: 128,
 	label: 'Example label',
-	color: colorTokens.b500,
+	color: colorTokens.p500,
 };
 
 export const Animated: Story<Pick<ComponentProps<typeof UsagePieGraph>, 'size' | 'label'>> = (args) => {
@@ -37,27 +37,27 @@ export const Animated: Story<Pick<ComponentProps<typeof UsagePieGraph>, 'size' |
 		{
 			total: 100,
 			used: 0,
-			color: colorTokens.g500,
+			color: colorTokens.s500,
 		},
 		{
 			total: 100,
 			used: 25,
-			color: colorTokens.b500,
+			color: colorTokens.p500,
 		},
 		{
 			total: 100,
 			used: 50,
-			color: colorTokens.y500,
+			color: colorTokens.w500,
 		},
 		{
 			total: 100,
 			used: 75,
-			color: colorTokens.o500,
+			color: colorTokens['s1-500'],
 		},
 		{
 			total: 100,
 			used: 100,
-			color: colorTokens.r500,
+			color: colorTokens.d500,
 		},
 	]);
 
diff --git a/apps/meteor/client/views/admin/info/UsagePieGraph.tsx b/apps/meteor/client/views/admin/info/UsagePieGraph.tsx
index 531499504285..9fe46da3a179 100644
--- a/apps/meteor/client/views/admin/info/UsagePieGraph.tsx
+++ b/apps/meteor/client/views/admin/info/UsagePieGraph.tsx
@@ -8,7 +8,7 @@ import { useLocalePercentage } from '../../../hooks/useLocalePercentage';
 type GraphColorsReturn = { [key: string]: string };
 
 const graphColors = (color: CSSProperties['color']): GraphColorsReturn => ({
-	used: color || colors.b500,
+	used: color || colors.p500,
 	free: colors.n300,
 });
 
diff --git a/apps/meteor/client/views/admin/sidebar/UpgradeTab.tsx b/apps/meteor/client/views/admin/sidebar/UpgradeTab.tsx
index e1d20d6970d8..65a144f027a8 100644
--- a/apps/meteor/client/views/admin/sidebar/UpgradeTab.tsx
+++ b/apps/meteor/client/views/admin/sidebar/UpgradeTab.tsx
@@ -21,9 +21,9 @@ const getUpgradeTabLabel = (type: UpgradeTabVariant): TranslationKey => {
 };
 
 const customColors = {
-	default: colors.p700,
-	hover: colors.p800,
-	active: colors.p900,
+	default: colors['s2-700'],
+	hover: colors['s2-800'],
+	active: colors['s2-900'],
 };
 
 type UpgradeTabProps = { type: UpgradeTabVariant; currentPath: string; trialEndDate: string | undefined };
diff --git a/apps/meteor/client/views/room/Announcement/AnnouncementComponent.tsx b/apps/meteor/client/views/room/Announcement/AnnouncementComponent.tsx
index 604b3c4a1600..841750d67ef5 100644
--- a/apps/meteor/client/views/room/Announcement/AnnouncementComponent.tsx
+++ b/apps/meteor/client/views/room/Announcement/AnnouncementComponent.tsx
@@ -9,15 +9,15 @@ type AnnouncementComponentParams = {
 
 const AnnouncementComponent: FC<AnnouncementComponentParams> = ({ children, onClickOpen }) => {
 	const announcementBar = css`
-		background-color: ${colors.b200};
-		background-color: var(--rc-color-announcement-background, ${colors.b200});
-		color: ${colors.b600};
-		color: var(--rc-color-announcement-text, ${colors.b600});
+		background-color: ${colors.p200};
+		background-color: var(--rc-color-announcement-background, ${colors.p200});
+		color: ${colors.p600};
+		color: var(--rc-color-announcement-text, ${colors.p600});
 		cursor: pointer;
 		transition: transform 0.2s ease-out;
 		a {
-			color: ${colors.b600} !important;
-			color: var(--rc-color-announcement-text, ${colors.b600}) !important;
+			color: ${colors.p600} !important;
+			color: var(--rc-color-announcement-text, ${colors.p600}) !important;
 			text-decoration: underline !important;
 		}
 		> * {
@@ -25,10 +25,10 @@ const AnnouncementComponent: FC<AnnouncementComponentParams> = ({ children, onCl
 		}
 		&:hover,
 		&:focus {
-			background-color: ${colors.b300};
-			background-color: var(--rc-color-announcement-background-hover, ${colors.b300});
-			color: ${colors.b800};
-			color: var(--rc-color-announcement-text-hover, ${colors.b800});
+			background-color: ${colors.p300};
+			background-color: var(--rc-color-announcement-background-hover, ${colors.p300});
+			color: ${colors.p800};
+			color: var(--rc-color-announcement-text-hover, ${colors.p800});
 		}
 	`;
 
diff --git a/apps/meteor/client/views/room/Header/icons/Encrypted.js b/apps/meteor/client/views/room/Header/icons/Encrypted.js
index f3c2224449f0..5baaf410e954 100644
--- a/apps/meteor/client/views/room/Header/icons/Encrypted.js
+++ b/apps/meteor/client/views/room/Header/icons/Encrypted.js
@@ -18,7 +18,7 @@ const Encrypted = ({ room }) => {
 		toggleE2E(room._id, 'encrypted', !(room && room.encrypted));
 	});
 	return e2eEnabled && room?.encrypted ? (
-		<Header.State title={encryptedLabel} icon='key' onClick={handleE2EClick} color={colors.g500} tiny ghost />
+		<Header.State title={encryptedLabel} icon='key' onClick={handleE2EClick} color={colors.s500} tiny ghost />
 	) : null;
 };
 
diff --git a/apps/meteor/client/views/room/Header/icons/Favorite.js b/apps/meteor/client/views/room/Header/icons/Favorite.js
index 8b397ad34297..adb53ea3ba3e 100644
--- a/apps/meteor/client/views/room/Header/icons/Favorite.js
+++ b/apps/meteor/client/views/room/Header/icons/Favorite.js
@@ -22,7 +22,7 @@ const Favorite = ({ room: { _id, f: favorited = false, t: type } }) => {
 				title={favoriteLabel}
 				icon={favorited ? 'star-filled' : 'star'}
 				onClick={handleFavoriteClick}
-				color={favorited ? colors.y500 : null}
+				color={favorited ? colors.w500 : null}
 				tiny
 				ghost
 			/>
diff --git a/apps/meteor/client/views/room/Header/icons/Translate.tsx b/apps/meteor/client/views/room/Header/icons/Translate.tsx
index a7e92e808ed8..f7de9ee3a8ee 100644
--- a/apps/meteor/client/views/room/Header/icons/Translate.tsx
+++ b/apps/meteor/client/views/room/Header/icons/Translate.tsx
@@ -14,7 +14,7 @@ const Translate: FC<TranslateProps> = ({ room: { autoTranslateLanguage, autoTran
 	const autoTranslateEnabled = useSetting('AutoTranslate_Enabled');
 	const encryptedLabel = t('Translated');
 	return autoTranslateEnabled && autoTranslate && autoTranslateLanguage ? (
-		<Header.State title={encryptedLabel} icon='language' color={colors.b500} />
+		<Header.State title={encryptedLabel} icon='language' color={colors.p500} />
 	) : null;
 };
 
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx
index 38eea9598efe..d24f364a36c4 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx
@@ -83,23 +83,23 @@ const MessagesPerChannelSection = (): ReactElement => {
 																			id: 'd',
 																			label: t('Direct_Messages'),
 																			value: pie.d,
-																			color: colors.y500,
+																			color: colors.w500,
 																		},
 																		{
 																			id: 'c',
 																			label: t('Private_Channels'),
 																			value: pie.c,
-																			color: colors.g500,
+																			color: colors.s500,
 																		},
 																		{
 																			id: 'p',
 																			label: t('Public_Channels'),
 																			value: pie.p,
-																			color: colors.b500,
+																			color: colors.p500,
 																		},
 																	]}
 																	innerRadius={0.6}
-																	colors={[colors.y500, colors.g500, colors.b500]}
+																	colors={[colors.w500, colors.s500, colors.p500]}
 																	// @ts-ignore
 																	enableRadialLabels={false}
 																	enableSlicesLabels={false}
@@ -146,15 +146,15 @@ const MessagesPerChannelSection = (): ReactElement => {
 														<Box>
 															<Margins block='x4'>
 																<Box color='info' fontScale='p1'>
-																	<LegendSymbol color={colors.y500} />
+																	<LegendSymbol color={colors.w500} />
 																	{t('Private_Chats')}
 																</Box>
 																<Box color='info' fontScale='p1'>
-																	<LegendSymbol color={colors.g500} />
+																	<LegendSymbol color={colors.s500} />
 																	{t('Private_Channels')}
 																</Box>
 																<Box color='info' fontScale='p1'>
-																	<LegendSymbol color={colors.b500} />
+																	<LegendSymbol color={colors.p500} />
 																	{t('Public_Channels')}
 																</Box>
 															</Margins>
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx
index c49b69d8a5e5..64a01bdb4eaa 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx
@@ -94,7 +94,7 @@ const MessagesSentSection = (): ReactElement => {
 										}}
 										colors={[
 											// TODO: Get it from theme
-											colors.b500,
+											colors.p500,
 										]}
 										enableLabel={false}
 										enableGridY={false}
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx
index c5ad784a2bd3..9428afb7e2a4 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx
@@ -128,7 +128,7 @@ const ActiveUsersSection = ({ timezone }: ActiveUsersSectionProps): ReactElement
 						variation: diffDailyActiveUsers ?? 0,
 						description: (
 							<>
-								<LegendSymbol color={colors.b200} /> {t('Daily_Active_Users')}
+								<LegendSymbol color={colors.p200} /> {t('Daily_Active_Users')}
 							</>
 						),
 					},
@@ -137,7 +137,7 @@ const ActiveUsersSection = ({ timezone }: ActiveUsersSectionProps): ReactElement
 						variation: diffWeeklyActiveUsers ?? 0,
 						description: (
 							<>
-								<LegendSymbol color={colors.b300} /> {t('Weekly_Active_Users')}
+								<LegendSymbol color={colors.p300} /> {t('Weekly_Active_Users')}
 							</>
 						),
 					},
@@ -146,7 +146,7 @@ const ActiveUsersSection = ({ timezone }: ActiveUsersSectionProps): ReactElement
 						variation: diffMonthlyActiveUsers ?? 0,
 						description: (
 							<>
-								<LegendSymbol color={colors.b500} /> {t('Monthly_Active_Users')}
+								<LegendSymbol color={colors.p500} /> {t('Monthly_Active_Users')}
 							</>
 						),
 					},
@@ -204,7 +204,7 @@ const ActiveUsersSection = ({ timezone }: ActiveUsersSectionProps): ReactElement
 											right: 0,
 											left: 40,
 										}}
-										colors={[colors.b200, colors.b300, colors.b500]}
+										colors={[colors.p200, colors.p300, colors.p500]}
 										axisLeft={{
 											// TODO: Get it from theme
 											tickSize: 0,
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForDays.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForDays.tsx
index 6137284e50f1..8460b2c05691 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForDays.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForDays.tsx
@@ -82,7 +82,7 @@ const ContentForDays = ({ displacement, onPreviousDateClick, onNextDateClick, ti
 										}}
 										colors={[
 											// TODO: Get it from theme
-											colors.b500,
+											colors.p500,
 										]}
 										enableLabel={false}
 										enableGridY={false}
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForHours.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForHours.tsx
index 3ae71d78c239..be62e4b1cc8e 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForHours.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/users/ContentForHours.tsx
@@ -72,7 +72,7 @@ const ContentForHours = ({ displacement, onPreviousDateClick, onNextDateClick, t
 								}}
 								colors={[
 									// TODO: Get it from theme
-									colors.b500,
+									colors.p500,
 								]}
 								enableLabel={false}
 								enableGridY={false}
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/users/NewUsersSection.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/users/NewUsersSection.tsx
index 926c5f861f8d..17197cad329f 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/users/NewUsersSection.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/users/NewUsersSection.tsx
@@ -132,7 +132,7 @@ const NewUsersSection = ({ timezone }: NewUsersSectionProps): ReactElement => {
 										}}
 										colors={[
 											// TODO: Get it from theme
-											colors.b500,
+											colors.p500,
 										]}
 										enableLabel={false}
 										enableGridY={false}
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx
index dff93b43dee8..edcc61104d93 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx
@@ -109,13 +109,13 @@ const UsersByTimeOfTheDaySection = ({ timezone }: UsersByTimeOfTheDaySectionProp
 									}}
 									colors={[
 										// TODO: Get it from theme
-										colors.b100,
-										colors.b200,
-										colors.b300,
-										colors.b400,
-										colors.b500,
-										colors.b600,
-										colors.b700,
+										colors.p100,
+										colors.p200,
+										colors.p300,
+										colors.p400,
+										colors.p500,
+										colors.p600,
+										colors.p700,
 									]}
 									cellOpacity={1}
 									enableLabels={false}
diff --git a/apps/meteor/ee/client/views/admin/info/SeatsCard.tsx b/apps/meteor/ee/client/views/admin/info/SeatsCard.tsx
index 2c2c256cae16..70e261e40c54 100644
--- a/apps/meteor/ee/client/views/admin/info/SeatsCard.tsx
+++ b/apps/meteor/ee/client/views/admin/info/SeatsCard.tsx
@@ -18,7 +18,7 @@ const SeatsCard = (): ReactElement | null => {
 
 	const isNearLimit = seatsCap && seatsCap.activeUsers / seatsCap.maxActiveUsers >= 0.8;
 
-	const color = isNearLimit ? colors.r500 : undefined;
+	const color = isNearLimit ? colors.d500 : undefined;
 
 	if (seatsCap && seatsCap.maxActiveUsers === Infinity) {
 		return null;

From 7e88b37b7a554062d36971e2e6bb20ee7d8eb904 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Tue, 14 Jun 2022 15:24:54 -0300
Subject: [PATCH 12/22] upgrade fuselage and fuselage-tokens to next version

---
 apps/meteor/package.json |  4 +-
 yarn.lock                | 88 ++++++++++++++++++++++++++++++++++++++--
 2 files changed, 86 insertions(+), 6 deletions(-)

diff --git a/apps/meteor/package.json b/apps/meteor/package.json
index f73336794d10..31f8e10f8ee7 100644
--- a/apps/meteor/package.json
+++ b/apps/meteor/package.json
@@ -194,11 +194,11 @@
 		"@rocket.chat/emitter": "~0.31.12",
 		"@rocket.chat/forked-matrix-appservice-bridge": "^4.0.1",
 		"@rocket.chat/forked-matrix-bot-sdk": "^0.6.0-beta.2",
-		"@rocket.chat/fuselage": "0.31.13",
+		"@rocket.chat/fuselage": "next",
 		"@rocket.chat/fuselage-hooks": "~0.31.12",
 		"@rocket.chat/fuselage-polyfills": "~0.31.12",
 		"@rocket.chat/fuselage-toastbar": "^0.32.0-dev.22",
-		"@rocket.chat/fuselage-tokens": "~0.31.12",
+		"@rocket.chat/fuselage-tokens": "next",
 		"@rocket.chat/fuselage-ui-kit": "~0.31.14-dev.1",
 		"@rocket.chat/icons": "~0.31.12",
 		"@rocket.chat/logo": "~0.31.12",
diff --git a/yarn.lock b/yarn.lock
index 5d7c025a9338..cb78adb8faf4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3331,6 +3331,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rocket.chat/css-in-js@npm:~0.31.14-dev.3":
+  version: 0.31.14-dev.3
+  resolution: "@rocket.chat/css-in-js@npm:0.31.14-dev.3"
+  dependencies:
+    "@emotion/hash": ^0.8.0
+    "@rocket.chat/css-supports": ~0.31.14-dev.3
+    "@rocket.chat/memo": ~0.31.14-dev.3
+    "@rocket.chat/stylis-logical-props-middleware": ~0.31.14-dev.3
+    stylis: ~4.0.13
+  checksum: 9d0755d3fe23f091fa7e19863a069c540b424f021e58bfbdc3200f89f3c8f07df8088f60b617a0488386a933718d94dfa131ed1c65f4a01cc9dd8eeddc85d564
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/css-supports@npm:^0.31.13":
   version: 0.31.13
   resolution: "@rocket.chat/css-supports@npm:0.31.13"
@@ -3349,6 +3362,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rocket.chat/css-supports@npm:~0.31.14-dev.3":
+  version: 0.31.14-dev.3
+  resolution: "@rocket.chat/css-supports@npm:0.31.14-dev.3"
+  dependencies:
+    "@rocket.chat/memo": ~0.31.14-dev.3
+  checksum: d2e01fd77afcdd11f77f23bae053a425b9204fed134e19b112e35a6d7fee08f8dc12cdd6c51404d4c2b50bc4b2cbd20d2112e98d97c7c3f5a3e00053afed63de
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/ddp-streamer@workspace:ee/apps/ddp-streamer":
   version: 0.0.0-use.local
   resolution: "@rocket.chat/ddp-streamer@workspace:ee/apps/ddp-streamer"
@@ -3536,13 +3558,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage-tokens@npm:^0.31.13, @rocket.chat/fuselage-tokens@npm:~0.31.11, @rocket.chat/fuselage-tokens@npm:~0.31.12":
+"@rocket.chat/fuselage-tokens@npm:^0.31.13, @rocket.chat/fuselage-tokens@npm:~0.31.11":
   version: 0.31.13
   resolution: "@rocket.chat/fuselage-tokens@npm:0.31.13"
   checksum: 848a800e6bd8c8fc46d473f18152168515e54ecf5b5a51ec4920d5478a28797e9d5bad652708b988305484cf646b3a167d0bff4bf0689bfbc7999f50f4bbf3ef
   languageName: node
   linkType: hard
 
+"@rocket.chat/fuselage-tokens@npm:next, @rocket.chat/fuselage-tokens@npm:~0.32.0-dev.0":
+  version: 0.32.0-dev.0
+  resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.0"
+  checksum: 739017b8c2ae063d82f52241e04ec5c0c53cde9908658dfa88ddf03e3454925f6e4c417370278345867801e10a1b0933e06415b1ec2cff93751b27ad7973f2a9
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/fuselage-ui-kit@npm:~0.31.14-dev.1":
   version: 0.31.14-dev.1
   resolution: "@rocket.chat/fuselage-ui-kit@npm:0.31.14-dev.1"
@@ -3561,7 +3590,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage@npm:0.31.13, @rocket.chat/fuselage@npm:^0.31.13":
+"@rocket.chat/fuselage@npm:^0.31.13":
   version: 0.31.13
   resolution: "@rocket.chat/fuselage@npm:0.31.13"
   dependencies:
@@ -3583,6 +3612,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rocket.chat/fuselage@npm:next":
+  version: 0.32.0-dev.50
+  resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.50"
+  dependencies:
+    "@rocket.chat/css-in-js": ~0.31.14-dev.3
+    "@rocket.chat/css-supports": ~0.31.14-dev.3
+    "@rocket.chat/fuselage-tokens": ~0.32.0-dev.0
+    "@rocket.chat/memo": ~0.31.14-dev.3
+    "@rocket.chat/styled": ~0.31.14-dev.3
+    invariant: ^2.2.4
+    react-keyed-flatten-children: ^1.3.0
+  peerDependencies:
+    "@rocket.chat/fuselage-hooks": "*"
+    "@rocket.chat/fuselage-polyfills": "*"
+    "@rocket.chat/icons": "*"
+    react: ^17.0.2
+    react-dom: ^17.0.2
+    react-virtuoso: 1.2.4
+  checksum: 231478e7229a0d29abd6dca125fabfd02164d5551d8e563cddbc30179f88d9ab9637aecb91636bd487accb51cd7209c3eeda335f10c9a39e620bf3c6f8f59d26
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/icons@npm:^0.31.0, @rocket.chat/icons@npm:^0.31.13, @rocket.chat/icons@npm:^0.31.9, @rocket.chat/icons@npm:~0.31.12":
   version: 0.31.13
   resolution: "@rocket.chat/icons@npm:0.31.13"
@@ -3699,6 +3750,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rocket.chat/memo@npm:~0.31.14-dev.3":
+  version: 0.31.14-dev.3
+  resolution: "@rocket.chat/memo@npm:0.31.14-dev.3"
+  checksum: deb06562ed9d8b01c1cd0c8d12296388c1dd26cc5d36fa69edaaa4206373e4bad422c759fc7caad3a432f67e53be3e528cf3ce6f7686996057843080c6c1fc2e
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/message-parser@npm:next":
   version: 0.31.14-dev.1
   resolution: "@rocket.chat/message-parser@npm:0.31.14-dev.1"
@@ -3741,11 +3799,11 @@ __metadata:
     "@rocket.chat/eslint-config": "workspace:^"
     "@rocket.chat/forked-matrix-appservice-bridge": ^4.0.1
     "@rocket.chat/forked-matrix-bot-sdk": ^0.6.0-beta.2
-    "@rocket.chat/fuselage": 0.31.13
+    "@rocket.chat/fuselage": next
     "@rocket.chat/fuselage-hooks": ~0.31.12
     "@rocket.chat/fuselage-polyfills": ~0.31.12
     "@rocket.chat/fuselage-toastbar": ^0.32.0-dev.22
-    "@rocket.chat/fuselage-tokens": ~0.31.12
+    "@rocket.chat/fuselage-tokens": next
     "@rocket.chat/fuselage-ui-kit": ~0.31.14-dev.1
     "@rocket.chat/icons": ~0.31.12
     "@rocket.chat/livechat": "workspace:^"
@@ -4107,6 +4165,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rocket.chat/styled@npm:~0.31.14-dev.3":
+  version: 0.31.14-dev.3
+  resolution: "@rocket.chat/styled@npm:0.31.14-dev.3"
+  dependencies:
+    "@rocket.chat/css-in-js": ~0.31.14-dev.3
+    tslib: ^2.3.1
+  checksum: b246103092fae9bc9e32b011e25d30195a8a6a3e830adddc975a8cf4403d30f0954a817c33808e00009f179ca64c1cc2399e2c8ef67d2cd27876376543ff4c9d
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/stylis-logical-props-middleware@npm:^0.31.13":
   version: 0.31.13
   resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.13"
@@ -4131,6 +4199,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rocket.chat/stylis-logical-props-middleware@npm:~0.31.14-dev.3":
+  version: 0.31.14-dev.3
+  resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.14-dev.3"
+  dependencies:
+    "@rocket.chat/css-supports": ~0.31.14-dev.3
+    tslib: ^2.3.1
+  peerDependencies:
+    stylis: 4.0.10
+  checksum: 6fd3434b2a6ce072a55be70d1afdd5dca37968efc7694831fe50cd075f94e228c61bd5b440153936790c88b705853cd2ccec1ef0e3a0e7bf37fb314005612d90
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/ui-contexts@workspace:^, @rocket.chat/ui-contexts@workspace:packages/ui-contexts":
   version: 0.0.0-use.local
   resolution: "@rocket.chat/ui-contexts@workspace:packages/ui-contexts"

From b14232da2ebbf68be23bf0f6e0a62010429047c9 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Tue, 14 Jun 2022 15:47:45 -0300
Subject: [PATCH 13/22] fix ci

---
 .../Attachment/AttachmentAction.tsx            |  6 ++----
 .../client/sidebar/header/actions/Login.tsx    |  1 -
 .../CannedResponse/TextEditor/IconButton.tsx   | 18 +++++++++---------
 .../CannedResponse/TextEditor/TextButton.tsx   |  1 -
 4 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/apps/meteor/client/components/message/Attachments/Attachment/AttachmentAction.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentAction.tsx
index e006cc947896..e8d1d8f7a504 100644
--- a/apps/meteor/client/components/message/Attachments/Attachment/AttachmentAction.tsx
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentAction.tsx
@@ -1,8 +1,6 @@
-import { ActionButton } from '@rocket.chat/fuselage';
+import { IconButton } from '@rocket.chat/fuselage';
 import React, { ComponentProps, FC } from 'react';
 
-const AttachmentAction: FC<ComponentProps<typeof ActionButton> & { icon: string }> = (props) => (
-	<ActionButton mi='x2' mini ghost {...props} />
-);
+const AttachmentAction: FC<ComponentProps<typeof IconButton> & { icon: string }> = (props) => <IconButton mi='x2' mini {...props} />;
 
 export default AttachmentAction;
diff --git a/apps/meteor/client/sidebar/header/actions/Login.tsx b/apps/meteor/client/sidebar/header/actions/Login.tsx
index c3ad754e918e..a2014d392a9b 100644
--- a/apps/meteor/client/sidebar/header/actions/Login.tsx
+++ b/apps/meteor/client/sidebar/header/actions/Login.tsx
@@ -10,7 +10,6 @@ const Login: VFC<Omit<HTMLAttributes<HTMLElement>, 'is'>> = (props) => {
 		<Sidebar.TopBar.Action
 			{...props}
 			primary
-			ghost={false}
 			icon='login'
 			title={t('Sign_in_to_start_talking')}
 			onClick={(): void => setForceLogin(true)}
diff --git a/apps/meteor/ee/client/omnichannel/components/CannedResponse/TextEditor/IconButton.tsx b/apps/meteor/ee/client/omnichannel/components/CannedResponse/TextEditor/IconButton.tsx
index 2d3ea90c0261..38ef16caa46b 100644
--- a/apps/meteor/ee/client/omnichannel/components/CannedResponse/TextEditor/IconButton.tsx
+++ b/apps/meteor/ee/client/omnichannel/components/CannedResponse/TextEditor/IconButton.tsx
@@ -1,15 +1,17 @@
-import { Button, Icon } from '@rocket.chat/fuselage';
-import React, { ComponentProps, FC, memo } from 'react';
+import { IconButton as Icon } from '@rocket.chat/fuselage';
+import React, { ComponentProps, memo, ReactElement } from 'react';
 
 type IconButtonProps = {
-	name: ComponentProps<typeof Icon>['name'];
+	name: ComponentProps<typeof Icon>['icon'];
 	action: () => void;
 	title?: string;
 };
 
-const IconButton: FC<IconButtonProps> = ({ name, action, title }) => (
-	<Button
-		nude
+const IconButton = ({ name, action, title }: IconButtonProps): ReactElement => (
+	<Icon
+		icon={name}
+		size='24px'
+		color='neutral-700'
 		small
 		square
 		display='flex'
@@ -23,8 +25,6 @@ const IconButton: FC<IconButtonProps> = ({ name, action, title }) => (
 			e.preventDefault();
 			action();
 		}}
-	>
-		<Icon name={name} size='24px' color='neutral-700' />
-	</Button>
+	/>
 );
 export default memo(IconButton);
diff --git a/apps/meteor/ee/client/omnichannel/components/CannedResponse/TextEditor/TextButton.tsx b/apps/meteor/ee/client/omnichannel/components/CannedResponse/TextEditor/TextButton.tsx
index d3ea4c4fb7cc..280dd87bc0f5 100644
--- a/apps/meteor/ee/client/omnichannel/components/CannedResponse/TextEditor/TextButton.tsx
+++ b/apps/meteor/ee/client/omnichannel/components/CannedResponse/TextEditor/TextButton.tsx
@@ -12,7 +12,6 @@ const TextButton = forwardRef<HTMLElement, TextButtonProps>(function TextButton(
 
 	return (
 		<Button
-			nude
 			small
 			display='flex'
 			justifyContent='center'

From 846169cd955081a07ca3d0d8963f1d1f05ca1769 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 20 Jun 2022 13:58:26 -0300
Subject: [PATCH 14/22] upgrade fuselage and fuselage-tokens

---
 apps/meteor/package.json |   6 +-
 package.json             |   3 +-
 yarn.lock                | 173 ++++++++++++++++++++++++++-------------
 3 files changed, 120 insertions(+), 62 deletions(-)

diff --git a/apps/meteor/package.json b/apps/meteor/package.json
index 86b949e9d06d..ee76141870a6 100644
--- a/apps/meteor/package.json
+++ b/apps/meteor/package.json
@@ -195,11 +195,11 @@
 		"@rocket.chat/emitter": "~0.31.12",
 		"@rocket.chat/forked-matrix-appservice-bridge": "^4.0.1",
 		"@rocket.chat/forked-matrix-bot-sdk": "^0.6.0-beta.2",
-		"@rocket.chat/fuselage": "0.32.0-dev.49",
+		"@rocket.chat/fuselage": "^0.32.0-dev.55",
 		"@rocket.chat/fuselage-hooks": "~0.31.14-dev.7",
-		"@rocket.chat/fuselage-polyfills": "~0.31.12",
+		"@rocket.chat/fuselage-polyfills": "~0.31.12", 
 		"@rocket.chat/fuselage-toastbar": "^0.32.0-dev.22",
-		"@rocket.chat/fuselage-tokens": "next",
+		"@rocket.chat/fuselage-tokens": "^0.32.0-dev.5",
 		"@rocket.chat/fuselage-ui-kit": "~0.31.14-dev.1",
 		"@rocket.chat/icons": "~0.31.12",
 		"@rocket.chat/logo": "~0.31.12",
diff --git a/package.json b/package.json
index b1b19ff5cf1a..aab99d298d67 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,12 @@
 		"build:services": "turbo run build --filter=rocketchat-services...",
 		"build:ci": "turbo run build:ci",
 		"testunit": "turbo run testunit",
-		"dev": "turbo run dev --filter=@rocket.chat/meteor...",
+		"dev": "turbo run dev --parallel --filter=@rocket.chat/meteor...",
 		"lint": "turbo run lint",
 		"storybook": "yarn workspace @rocket.chat/meteor run storybook"
 	},
 	"devDependencies": {
+		"@types/chart.js": "^2.9.37",
 		"@types/js-yaml": "^4.0.5",
 		"husky": "^7.0.4",
 		"turbo": "1.2.5"
diff --git a/yarn.lock b/yarn.lock
index cb78adb8faf4..0cf90e94773e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3331,16 +3331,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/css-in-js@npm:~0.31.14-dev.3":
-  version: 0.31.14-dev.3
-  resolution: "@rocket.chat/css-in-js@npm:0.31.14-dev.3"
+"@rocket.chat/css-in-js@npm:~0.31.14-dev.8":
+  version: 0.31.14-dev.8
+  resolution: "@rocket.chat/css-in-js@npm:0.31.14-dev.8"
   dependencies:
     "@emotion/hash": ^0.8.0
-    "@rocket.chat/css-supports": ~0.31.14-dev.3
-    "@rocket.chat/memo": ~0.31.14-dev.3
-    "@rocket.chat/stylis-logical-props-middleware": ~0.31.14-dev.3
+    "@rocket.chat/css-supports": ~0.31.14-dev.8
+    "@rocket.chat/memo": ~0.31.14-dev.8
+    "@rocket.chat/stylis-logical-props-middleware": ~0.31.14-dev.8
     stylis: ~4.0.13
-  checksum: 9d0755d3fe23f091fa7e19863a069c540b424f021e58bfbdc3200f89f3c8f07df8088f60b617a0488386a933718d94dfa131ed1c65f4a01cc9dd8eeddc85d564
+  checksum: 66d77a1129ce90ad9905c3f4a0d13e81bc645cb954d0eb0dabb9bdc35b81586b70da7f756b3a180319cf902cef68b4a3c989c1dec0214f58955be5f759a4b553
   languageName: node
   linkType: hard
 
@@ -3362,12 +3362,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/css-supports@npm:~0.31.14-dev.3":
-  version: 0.31.14-dev.3
-  resolution: "@rocket.chat/css-supports@npm:0.31.14-dev.3"
+"@rocket.chat/css-supports@npm:~0.31.14-dev.8":
+  version: 0.31.14-dev.8
+  resolution: "@rocket.chat/css-supports@npm:0.31.14-dev.8"
   dependencies:
-    "@rocket.chat/memo": ~0.31.14-dev.3
-  checksum: d2e01fd77afcdd11f77f23bae053a425b9204fed134e19b112e35a6d7fee08f8dc12cdd6c51404d4c2b50bc4b2cbd20d2112e98d97c7c3f5a3e00053afed63de
+    "@rocket.chat/memo": ~0.31.14-dev.8
+  checksum: 03c3ec93a77301de00666d5b02cc5af6fc8beca29c0f91f0305c4c32733d64dbd08f7134eb284a03f0758e6029245fe21507bae82c244ac27f3f56c7fe692eb7
   languageName: node
   linkType: hard
 
@@ -3503,7 +3503,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage-hooks@npm:^0.31.11, @rocket.chat/fuselage-hooks@npm:^0.31.13, @rocket.chat/fuselage-hooks@npm:~0.31.12":
+"@rocket.chat/fuselage-hooks@npm:^0.31.13":
   version: 0.31.13
   resolution: "@rocket.chat/fuselage-hooks@npm:0.31.13"
   dependencies:
@@ -3529,6 +3529,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rocket.chat/fuselage-hooks@npm:~0.31.14-dev.7":
+  version: 0.31.14-dev.8
+  resolution: "@rocket.chat/fuselage-hooks@npm:0.31.14-dev.8"
+  dependencies:
+    use-sync-external-store: ~1.2.0
+  peerDependencies:
+    "@rocket.chat/fuselage-tokens": "*"
+    react: ^17.0.2
+  checksum: 79a36274d0f35769853ca706a766cd485f17d9204fc2839d47ba954d24e6727e0bdc9744adcf2a90c0f32a9ef70af7564eb67d193afa606507914a5dd2978c95
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/fuselage-polyfills@npm:~0.31.12":
   version: 0.31.13
   resolution: "@rocket.chat/fuselage-polyfills@npm:0.31.13"
@@ -3565,10 +3577,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage-tokens@npm:next, @rocket.chat/fuselage-tokens@npm:~0.32.0-dev.0":
-  version: 0.32.0-dev.0
-  resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.0"
-  checksum: 739017b8c2ae063d82f52241e04ec5c0c53cde9908658dfa88ddf03e3454925f6e4c417370278345867801e10a1b0933e06415b1ec2cff93751b27ad7973f2a9
+"@rocket.chat/fuselage-tokens@npm:^0.32.0-dev.5, @rocket.chat/fuselage-tokens@npm:~0.32.0-dev.5":
+  version: 0.32.0-dev.5
+  resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.5"
+  checksum: b5a9ce0c90c2b41483b35704d6b80e92e184459d5ee3d7018dd6242dde2c2aeda6b5d2866a8038def3c54eeb91124d3d9aa06293f256ef0f8f6cfb72c8eaf476
   languageName: node
   linkType: hard
 
@@ -3612,15 +3624,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage@npm:next":
-  version: 0.32.0-dev.50
-  resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.50"
+"@rocket.chat/fuselage@npm:^0.32.0-dev.55":
+  version: 0.32.0-dev.55
+  resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.55"
   dependencies:
-    "@rocket.chat/css-in-js": ~0.31.14-dev.3
-    "@rocket.chat/css-supports": ~0.31.14-dev.3
-    "@rocket.chat/fuselage-tokens": ~0.32.0-dev.0
-    "@rocket.chat/memo": ~0.31.14-dev.3
-    "@rocket.chat/styled": ~0.31.14-dev.3
+    "@rocket.chat/css-in-js": ~0.31.14-dev.8
+    "@rocket.chat/css-supports": ~0.31.14-dev.8
+    "@rocket.chat/fuselage-tokens": ~0.32.0-dev.5
+    "@rocket.chat/memo": ~0.31.14-dev.8
+    "@rocket.chat/styled": ~0.31.14-dev.8
     invariant: ^2.2.4
     react-keyed-flatten-children: ^1.3.0
   peerDependencies:
@@ -3630,7 +3642,7 @@ __metadata:
     react: ^17.0.2
     react-dom: ^17.0.2
     react-virtuoso: 1.2.4
-  checksum: 231478e7229a0d29abd6dca125fabfd02164d5551d8e563cddbc30179f88d9ab9637aecb91636bd487accb51cd7209c3eeda335f10c9a39e620bf3c6f8f59d26
+  checksum: 56020af5476fa118308eac84f347f86b5d4e864a91eab30ac34aa1ee427514ebdae1f3534959e8d08e54bb2d6dc71564ee5d494c77cf0716b5f94b50f5d83464
   languageName: node
   linkType: hard
 
@@ -3750,10 +3762,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/memo@npm:~0.31.14-dev.3":
-  version: 0.31.14-dev.3
-  resolution: "@rocket.chat/memo@npm:0.31.14-dev.3"
-  checksum: deb06562ed9d8b01c1cd0c8d12296388c1dd26cc5d36fa69edaaa4206373e4bad422c759fc7caad3a432f67e53be3e528cf3ce6f7686996057843080c6c1fc2e
+"@rocket.chat/memo@npm:~0.31.14-dev.8":
+  version: 0.31.14-dev.8
+  resolution: "@rocket.chat/memo@npm:0.31.14-dev.8"
+  checksum: 2b1201098e15a8745d68cc0000f59624bd9fc5f5e3aaf5279037f5c17979382dcf4146fd1bb1f6620a5aa699a18f1e0114407e821ab17f9e0d37ece7b6c91ab8
   languageName: node
   linkType: hard
 
@@ -3799,11 +3811,11 @@ __metadata:
     "@rocket.chat/eslint-config": "workspace:^"
     "@rocket.chat/forked-matrix-appservice-bridge": ^4.0.1
     "@rocket.chat/forked-matrix-bot-sdk": ^0.6.0-beta.2
-    "@rocket.chat/fuselage": next
-    "@rocket.chat/fuselage-hooks": ~0.31.12
+    "@rocket.chat/fuselage": ^0.32.0-dev.55
+    "@rocket.chat/fuselage-hooks": ~0.31.14-dev.7
     "@rocket.chat/fuselage-polyfills": ~0.31.12
     "@rocket.chat/fuselage-toastbar": ^0.32.0-dev.22
-    "@rocket.chat/fuselage-tokens": next
+    "@rocket.chat/fuselage-tokens": ^0.32.0-dev.5
     "@rocket.chat/fuselage-ui-kit": ~0.31.14-dev.1
     "@rocket.chat/icons": ~0.31.12
     "@rocket.chat/livechat": "workspace:^"
@@ -3832,6 +3844,7 @@ __metadata:
     "@types/bad-words": ^3.0.1
     "@types/bcrypt": ^5.0.0
     "@types/body-parser": ^1.19.0
+    "@types/busboy": ^1.5.0
     "@types/chai": ^4.2.22
     "@types/chai-datetime": 0.0.37
     "@types/chai-dom": 0.0.12
@@ -3840,9 +3853,11 @@ __metadata:
     "@types/codemirror": ^5
     "@types/cookie": ^0.5.1
     "@types/cookie-parser": ^1.4.2
+    "@types/cors": ^2.8.5
     "@types/dompurify": ^2.2.2
     "@types/ejson": ^2.2.0
     "@types/express": ^4.17.12
+    "@types/express-rate-limit": ^5.1.3
     "@types/fibers": ^3.1.1
     "@types/google-libphonenumber": ^7.4.21
     "@types/imap": ^0.8.35
@@ -3884,7 +3899,7 @@ __metadata:
     "@types/supertest": ^2.0.11
     "@types/ua-parser-js": ^0.7.36
     "@types/underscore.string": 0.0.38
-    "@types/use-subscription": ^1.0.0
+    "@types/use-sync-external-store": ^0.0.3
     "@types/uuid": ^8.3.4
     "@types/xml-crypto": ^1.4.1
     "@types/xmldom": ^0.1.30
@@ -4061,7 +4076,7 @@ __metadata:
     underscore.string: ^3.3.6
     universal-perf-hooks: ^1.0.1
     url-polyfill: ^1.1.12
-    use-subscription: ~1.6.0
+    use-sync-external-store: ^1.2.0
     uuid: ^8.3.2
     vm2: ^3.9.9
     webdav: ^4.9.0
@@ -4165,13 +4180,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/styled@npm:~0.31.14-dev.3":
-  version: 0.31.14-dev.3
-  resolution: "@rocket.chat/styled@npm:0.31.14-dev.3"
+"@rocket.chat/styled@npm:~0.31.14-dev.8":
+  version: 0.31.14-dev.8
+  resolution: "@rocket.chat/styled@npm:0.31.14-dev.8"
   dependencies:
-    "@rocket.chat/css-in-js": ~0.31.14-dev.3
+    "@rocket.chat/css-in-js": ~0.31.14-dev.8
     tslib: ^2.3.1
-  checksum: b246103092fae9bc9e32b011e25d30195a8a6a3e830adddc975a8cf4403d30f0954a817c33808e00009f179ca64c1cc2399e2c8ef67d2cd27876376543ff4c9d
+  checksum: 9bb43fee8decc93e2c33bd1021e20f8d3daa00e0027338448fd9a07f6a4c2e47c03ee07bfdf70e7e89c39ee593a84c4de1962e0b86f655fc5b7968479965b33c
   languageName: node
   linkType: hard
 
@@ -4199,15 +4214,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/stylis-logical-props-middleware@npm:~0.31.14-dev.3":
-  version: 0.31.14-dev.3
-  resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.14-dev.3"
+"@rocket.chat/stylis-logical-props-middleware@npm:~0.31.14-dev.8":
+  version: 0.31.14-dev.8
+  resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.14-dev.8"
   dependencies:
-    "@rocket.chat/css-supports": ~0.31.14-dev.3
+    "@rocket.chat/css-supports": ~0.31.14-dev.8
     tslib: ^2.3.1
   peerDependencies:
     stylis: 4.0.10
-  checksum: 6fd3434b2a6ce072a55be70d1afdd5dca37968efc7694831fe50cd075f94e228c61bd5b440153936790c88b705853cd2ccec1ef0e3a0e7bf37fb314005612d90
+  checksum: 0590e84c67df727065abc33663521daffc69bcefa319fb8fb4e797902f3cfbfb75f04673a483d5be4de657db4b053a57027bb92f5377716a451da31334320c32
   languageName: node
   linkType: hard
 
@@ -4217,25 +4232,25 @@ __metadata:
   dependencies:
     "@rocket.chat/core-typings": "workspace:^"
     "@rocket.chat/emitter": ^0.31.11
-    "@rocket.chat/fuselage-hooks": ^0.31.11
+    "@rocket.chat/fuselage-hooks": ~0.31.14-dev.7
     "@rocket.chat/rest-typings": "workspace:^"
     "@types/jest": ^27.4.1
     "@types/mongodb": ~3.6.10
     "@types/react": ^17
-    "@types/use-subscription": ^1
+    "@types/use-sync-external-store": ^0.0.3
     eslint: ^8.12.0
     jest: ^27.5.1
     react: ~17.0.2
     ts-jest: ^27.1.4
     typescript: ~4.3.5
-    use-subscription: ~1.6.0
+    use-sync-external-store: ^1.2.0
   peerDependencies:
     "@rocket.chat/core-typings": "workspace:^"
     "@rocket.chat/emitter": "*"
     "@rocket.chat/fuselage-hooks": "*"
     "@rocket.chat/rest-typings": "workspace:^"
     react: ~17.0.2
-    use-subscription: "*"
+    use-sync-external-store: ^1.2.0
   languageName: unknown
   linkType: soft
 
@@ -5820,6 +5835,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/busboy@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "@types/busboy@npm:1.5.0"
+  dependencies:
+    "@types/node": "*"
+  checksum: ffa7bf25c0395f6927526b7d97e70cd2df789e4ca0d231e41855fb08542fa236891ce457d83cc50cac6e5cef6be092ab80597070dcf1413f736462690a23e987
+  languageName: node
+  linkType: hard
+
 "@types/chai-datetime@npm:0.0.37":
   version: 0.0.37
   resolution: "@types/chai-datetime@npm:0.0.37"
@@ -5854,6 +5878,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/chart.js@npm:^2.9.37":
+  version: 2.9.37
+  resolution: "@types/chart.js@npm:2.9.37"
+  dependencies:
+    moment: ^2.10.2
+  checksum: 5626a8cc3b410c9f2668ee7efd5b1b408f7de814608f83f9fdb349f59e3c7f5eb7199e73b41e6634c24b4ccb8d3846b290264df8d4224d184f63b095f82cfb94
+  languageName: node
+  linkType: hard
+
 "@types/clipboard@npm:^2.0.7":
   version: 2.0.7
   resolution: "@types/clipboard@npm:2.0.7"
@@ -5904,6 +5937,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cors@npm:^2.8.5":
+  version: 2.8.12
+  resolution: "@types/cors@npm:2.8.12"
+  checksum: 8c45f112c7d1d2d831b4b266f2e6ed33a1887a35dcbfe2a18b28370751fababb7cd045e745ef84a523c33a25932678097bf79afaa367c6cb3fa0daa7a6438257
+  languageName: node
+  linkType: hard
+
 "@types/dompurify@npm:^2.2.2":
   version: 2.3.3
   resolution: "@types/dompurify@npm:2.3.3"
@@ -5961,6 +6001,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/express-rate-limit@npm:^5.1.3":
+  version: 5.1.3
+  resolution: "@types/express-rate-limit@npm:5.1.3"
+  dependencies:
+    "@types/express": "*"
+  checksum: 44c0b79e48a9416309459e4aad7dbac6bdf0e1777ed2d9620d1512eecfacbd32d7d1b86789c116ced32e926b595ea55d212076b46ea934676ab352e260233686
+  languageName: node
+  linkType: hard
+
 "@types/express-serve-static-core@npm:^4.17.18":
   version: 4.17.28
   resolution: "@types/express-serve-static-core@npm:4.17.28"
@@ -6797,10 +6846,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/use-subscription@npm:^1, @types/use-subscription@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "@types/use-subscription@npm:1.0.0"
-  checksum: 47fff868682692ecda7110bd04ba4c5b1324854c0bcccc765606a42d4bd9be475207413c8829a883b98e7edd801100df53876da0ff89ac21a8f964e440636ef2
+"@types/use-sync-external-store@npm:^0.0.3":
+  version: 0.0.3
+  resolution: "@types/use-sync-external-store@npm:0.0.3"
+  checksum: 161ddb8eec5dbe7279ac971531217e9af6b99f7783213566d2b502e2e2378ea19cf5e5ea4595039d730aa79d3d35c6567d48599f69773a02ffcff1776ec2a44e
   languageName: node
   linkType: hard
 
@@ -21829,6 +21878,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"moment@npm:^2.10.2":
+  version: 2.29.3
+  resolution: "moment@npm:2.29.3"
+  checksum: 2e780e36d9a1823c08a1b6313cbb08bd01ecbb2a9062095820a34f42c878991ccba53abaa6abb103fd5c01e763724f295162a8c50b7e95b4f1c992ef0772d3f0
+  languageName: node
+  linkType: hard
+
 "mongodb-connection-string-url@npm:^2.5.2":
   version: 2.5.2
   resolution: "mongodb-connection-string-url@npm:2.5.2"
@@ -27198,6 +27254,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "rocket.chat@workspace:."
   dependencies:
+    "@types/chart.js": ^2.9.37
     "@types/js-yaml": ^4.0.5
     husky: ^7.0.4
     turbo: 1.2.5
@@ -31168,12 +31225,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-subscription@npm:~1.6.0":
-  version: 1.6.0
-  resolution: "use-subscription@npm:1.6.0"
+"use-sync-external-store@npm:^1.2.0, use-sync-external-store@npm:~1.2.0":
+  version: 1.2.0
+  resolution: "use-sync-external-store@npm:1.2.0"
   peerDependencies:
-    react: ^18.0.0
-  checksum: 0ce15a3ed1f66f78cb2d7a83ff4980e2ac93054b0bcbdc4e492e77fed599233372aaaf9c9fd9b370484c491c5aee0b980859db1108ad63ee4cdba0f468c4f5d1
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 5c639e0f8da3521d605f59ce5be9e094ca772bd44a4ce7322b055a6f58eeed8dda3c94cabd90c7a41fb6fa852210092008afe48f7038792fd47501f33299116a
   languageName: node
   linkType: hard
 

From e509f53400bc6bd4c2e961a4b12c7862ff648144 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 20 Jun 2022 14:24:54 -0300
Subject: [PATCH 15/22] update sidebar colors

---
 .../sidebar/hooks/useSidebarPaletteColor.js   | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/meteor/client/sidebar/hooks/useSidebarPaletteColor.js b/apps/meteor/client/sidebar/hooks/useSidebarPaletteColor.js
index c824c95b5b8a..da0ec9cdfced 100644
--- a/apps/meteor/client/sidebar/hooks/useSidebarPaletteColor.js
+++ b/apps/meteor/client/sidebar/hooks/useSidebarPaletteColor.js
@@ -160,21 +160,21 @@ const getStyle = (
 			--rcx-color-primary-800: ${toVar(colors.b200)};
 			--rcx-color-primary-900: ${toVar(colors.b100)};
 
-			--rcx-button-colors-ghost-active-border-color: ${toVar(colors.n900)};
-			--rcx-button-colors-ghost-active-background-color: ${toVar(colors.n800)};
-			--rcx-button-colors-ghost-color: ${toVar(colors.n600)};
-			--rcx-button-colors-ghost-border-color: ${toVar(colors.sibebarSurface)};
-			--rcx-button-colors-ghost-background-color: ${toVar(colors.sibebarSurface)};
-			--rcx-button-colors-ghost-hover-background-color: ${toVar(colors.n900)};
-			--rcx-button-colors-ghost-hover-border-color: ${toVar(colors.n900)};
-
-			--rcx-button-colors-ghost-success-active-border-color: ${toVar(colors.n900)};
-			--rcx-button-colors-ghost-success-active-background-color: ${toVar(colors.n800)};
-			--rcx-button-colors-ghost-success-color: ${toVar(colors.n600)};
-			--rcx-button-colors-ghost-success-border-color: ${toVar(colors.sibebarSurface)};
-			--rcx-button-colors-ghost-success-background-color: ${toVar(colors.sibebarSurface)};
-			--rcx-button-colors-ghost-success-hover-background-color: ${toVar(colors.n900)};
-			--rcx-button-colors-ghost-success-hover-border-color: ${toVar(colors.n900)};
+			--rcx-button-colors-icon-active-border-color: ${toVar(colors.n900)};
+			--rcx-button-colors-icon-active-background-color: ${toVar(colors.n800)};
+			--rcx-button-colors-icon-color: ${toVar(colors.n600)};
+			--rcx-button-colors-icon-border-color: ${toVar(colors.sibebarSurface)};
+			--rcx-button-colors-icon-background-color: ${toVar(colors.sibebarSurface)};
+			--rcx-button-colors-icon-hover-background-color: ${toVar(colors.n900)};
+			--rcx-button-colors-icon-hover-border-color: ${toVar(colors.n900)};
+
+			--rcx-button-colors-icon-success-active-border-color: ${toVar(colors.n900)};
+			--rcx-button-colors-icon-success-active-background-color: ${toVar(colors.n800)};
+			--rcx-button-colors-icon-success-color: ${toVar(colors.n600)};
+			--rcx-button-colors-icon-success-border-color: ${toVar(colors.sibebarSurface)};
+			--rcx-button-colors-icon-success-background-color: ${toVar(colors.sibebarSurface)};
+			--rcx-button-colors-icon-success-hover-background-color: ${toVar(colors.n900)};
+			--rcx-button-colors-icon-success-hover-border-color: ${toVar(colors.n900)};
 
 
 			--rcx-sidebar-item-background-color-hover: ${toVar(colors.n900)};

From 2ee8dd75f1f6dacfd9cc412519fd8594c60b88ad Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 20 Jun 2022 18:22:18 -0300
Subject: [PATCH 16/22] udate tests ghost selector to icon

---
 apps/meteor/tests/e2e/pageobjects/Departments.ts | 2 +-
 apps/meteor/tests/e2e/pageobjects/Global.ts      | 2 +-
 apps/meteor/tests/e2e/pageobjects/MainContent.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/tests/e2e/pageobjects/Departments.ts b/apps/meteor/tests/e2e/pageobjects/Departments.ts
index 21837bfb563a..b55c20aaf93c 100644
--- a/apps/meteor/tests/e2e/pageobjects/Departments.ts
+++ b/apps/meteor/tests/e2e/pageobjects/Departments.ts
@@ -73,7 +73,7 @@ export class Departments extends BasePage {
 	}
 
 	get btnModalCancelDeleteDepartment(): Locator {
-		return this.page.locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--ghost');
+		return this.page.locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--icon');
 	}
 
 	get btnModalDeleteDepartment(): Locator {
diff --git a/apps/meteor/tests/e2e/pageobjects/Global.ts b/apps/meteor/tests/e2e/pageobjects/Global.ts
index 1b0ee13cd91a..6e1e45e21faf 100644
--- a/apps/meteor/tests/e2e/pageobjects/Global.ts
+++ b/apps/meteor/tests/e2e/pageobjects/Global.ts
@@ -42,7 +42,7 @@ export class Global extends BasePage {
 
 	get btnModalCancel(): Locator {
 		return this.page.locator(
-			'#modal-root div dialog div.rcx-modal__inner div.rcx-modal__footer div div button.rcx-button--ghost.rcx-button',
+			'#modal-root div dialog div.rcx-modal__inner div.rcx-modal__footer div div button.rcx-button--icon.rcx-button',
 		);
 	}
 
diff --git a/apps/meteor/tests/e2e/pageobjects/MainContent.ts b/apps/meteor/tests/e2e/pageobjects/MainContent.ts
index c3b098d0c4fb..a16177da70b8 100644
--- a/apps/meteor/tests/e2e/pageobjects/MainContent.ts
+++ b/apps/meteor/tests/e2e/pageobjects/MainContent.ts
@@ -178,7 +178,7 @@ export class MainContent extends BasePage {
 	}
 
 	get modalCancelButton(): Locator {
-		return this.page.locator('#modal-root .rcx-button-group--align-end .rcx-button--ghost');
+		return this.page.locator('#modal-root .rcx-button-group--align-end .rcx-button--icon');
 	}
 
 	get modalDeleteMessageButton(): Locator {

From 835955681921a6445252cd3275b28950661a9e2b Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Tue, 21 Jun 2022 01:00:35 -0300
Subject: [PATCH 17/22] tests

---
 apps/meteor/tests/e2e/pageobjects/Departments.ts | 2 +-
 apps/meteor/tests/e2e/pageobjects/Global.ts      | 8 ++------
 apps/meteor/tests/e2e/pageobjects/MainContent.ts | 2 +-
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/apps/meteor/tests/e2e/pageobjects/Departments.ts b/apps/meteor/tests/e2e/pageobjects/Departments.ts
index b55c20aaf93c..b3d57ea06f38 100644
--- a/apps/meteor/tests/e2e/pageobjects/Departments.ts
+++ b/apps/meteor/tests/e2e/pageobjects/Departments.ts
@@ -73,7 +73,7 @@ export class Departments extends BasePage {
 	}
 
 	get btnModalCancelDeleteDepartment(): Locator {
-		return this.page.locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--icon');
+		return this.page.locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--secondary');
 	}
 
 	get btnModalDeleteDepartment(): Locator {
diff --git a/apps/meteor/tests/e2e/pageobjects/Global.ts b/apps/meteor/tests/e2e/pageobjects/Global.ts
index 6e1e45e21faf..07312c8cf4cd 100644
--- a/apps/meteor/tests/e2e/pageobjects/Global.ts
+++ b/apps/meteor/tests/e2e/pageobjects/Global.ts
@@ -41,14 +41,10 @@ export class Global extends BasePage {
 	}
 
 	get btnModalCancel(): Locator {
-		return this.page.locator(
-			'#modal-root div dialog div.rcx-modal__inner div.rcx-modal__footer div div button.rcx-button--icon.rcx-button',
-		);
+		return this.page.locator('#modal-root dialog .rcx-modal__inner .rcx-modal__footer .rcx-button--secondary');
 	}
 
 	get btnModalRemove(): Locator {
-		return this.page.locator(
-			'#modal-root div dialog div.rcx-modal__inner div.rcx-modal__footer div div button.rcx-button--primary-danger.rcx-button',
-		);
+		return this.page.locator('#modal-root dialog .rcx-modal__inner .rcx-modal__footer .rcx-button--primary-danger');
 	}
 }
diff --git a/apps/meteor/tests/e2e/pageobjects/MainContent.ts b/apps/meteor/tests/e2e/pageobjects/MainContent.ts
index a16177da70b8..9ab3f48b5abb 100644
--- a/apps/meteor/tests/e2e/pageobjects/MainContent.ts
+++ b/apps/meteor/tests/e2e/pageobjects/MainContent.ts
@@ -178,7 +178,7 @@ export class MainContent extends BasePage {
 	}
 
 	get modalCancelButton(): Locator {
-		return this.page.locator('#modal-root .rcx-button-group--align-end .rcx-button--icon');
+		return this.page.locator('#modal-root .rcx-button-group--align-end .rcx-button--secondary');
 	}
 
 	get modalDeleteMessageButton(): Locator {

From 254ed7bfb7fe0aebeb91281cfbfa7b70ae388cc9 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Tue, 21 Jun 2022 10:16:25 -0300
Subject: [PATCH 18/22] fix generic modal

---
 apps/meteor/client/components/GenericModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/meteor/client/components/GenericModal.tsx b/apps/meteor/client/components/GenericModal.tsx
index dadb4e9e31f5..c88bce66e9d2 100644
--- a/apps/meteor/client/components/GenericModal.tsx
+++ b/apps/meteor/client/components/GenericModal.tsx
@@ -82,7 +82,7 @@ const GenericModal: FC<GenericModalProps> = ({
 					{dontAskAgain}
 					<ButtonGroup align='end' flexGrow={1} maxWidth='full'>
 						{onCancel && (
-							<Button secondary onClick={onCancel}>
+							<Button danger onClick={onCancel}>
 								{cancelText ?? t('Cancel')}
 							</Button>
 						)}

From 78b15be0c74596d94bf81dd338f2a6d6b95eaffa Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Tue, 21 Jun 2022 10:16:25 -0300
Subject: [PATCH 19/22] fix generic modal

---
 apps/meteor/client/components/GenericModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/client/components/GenericModal.tsx b/apps/meteor/client/components/GenericModal.tsx
index dadb4e9e31f5..e55429c4f62e 100644
--- a/apps/meteor/client/components/GenericModal.tsx
+++ b/apps/meteor/client/components/GenericModal.tsx
@@ -29,9 +29,9 @@ const iconMap: Record<string, ComponentProps<typeof Icon>['name']> = {
 const getButtonProps = (variant: VariantType): ComponentProps<typeof Button> => {
 	switch (variant) {
 		case 'danger':
-			return { primary: true, danger: true };
+			return { secondaryDanger: true }; // TODO: secondary danger
 		case 'warning':
-			return { primary: true };
+			return { secondaryWarning: true };
 		default:
 			return {};
 	}

From a5270ca5b01a3f04028b25a61307cad9ea2d737c Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Tue, 21 Jun 2022 14:28:45 -0300
Subject: [PATCH 20/22] update e2e button selectors

---
 apps/meteor/tests/e2e/pageobjects/Departments.ts | 2 +-
 apps/meteor/tests/e2e/pageobjects/Global.ts      | 4 ++--
 apps/meteor/tests/e2e/pageobjects/MainContent.ts | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/meteor/tests/e2e/pageobjects/Departments.ts b/apps/meteor/tests/e2e/pageobjects/Departments.ts
index b3d57ea06f38..210d3247b5b2 100644
--- a/apps/meteor/tests/e2e/pageobjects/Departments.ts
+++ b/apps/meteor/tests/e2e/pageobjects/Departments.ts
@@ -77,7 +77,7 @@ export class Departments extends BasePage {
 	}
 
 	get btnModalDeleteDepartment(): Locator {
-		return this.page.locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--primary-danger');
+		return this.page.locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--danger');
 	}
 
 	get modalDepartment(): Locator {
diff --git a/apps/meteor/tests/e2e/pageobjects/Global.ts b/apps/meteor/tests/e2e/pageobjects/Global.ts
index 07312c8cf4cd..0a19087ff667 100644
--- a/apps/meteor/tests/e2e/pageobjects/Global.ts
+++ b/apps/meteor/tests/e2e/pageobjects/Global.ts
@@ -4,7 +4,7 @@ import { BasePage } from './BasePage';
 
 export class Global extends BasePage {
 	get modalConfirm(): Locator {
-		return this.page.locator('.rcx-modal .rcx-button--primary-danger');
+		return this.page.locator('.rcx-modal .rcx-button--danger');
 	}
 
 	get modalFilePreview(): Locator {
@@ -45,6 +45,6 @@ export class Global extends BasePage {
 	}
 
 	get btnModalRemove(): Locator {
-		return this.page.locator('#modal-root dialog .rcx-modal__inner .rcx-modal__footer .rcx-button--primary-danger');
+		return this.page.locator('#modal-root dialog .rcx-modal__inner .rcx-modal__footer .rcx-button--danger');
 	}
 }
diff --git a/apps/meteor/tests/e2e/pageobjects/MainContent.ts b/apps/meteor/tests/e2e/pageobjects/MainContent.ts
index 9ab3f48b5abb..b800a6519bd6 100644
--- a/apps/meteor/tests/e2e/pageobjects/MainContent.ts
+++ b/apps/meteor/tests/e2e/pageobjects/MainContent.ts
@@ -182,7 +182,7 @@ export class MainContent extends BasePage {
 	}
 
 	get modalDeleteMessageButton(): Locator {
-		return this.page.locator('#modal-root .rcx-button-group--align-end .rcx-button--primary-danger');
+		return this.page.locator('#modal-root .rcx-button-group--align-end .rcx-button--danger');
 	}
 
 	get buttonSend(): Locator {

From 5854c2e8cbc39067b3d64d373e547e8007526c3d Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Tue, 21 Jun 2022 16:21:44 -0300
Subject: [PATCH 21/22] fix e2e selectors

---
 apps/meteor/tests/e2e/pageobjects/Departments.ts | 2 +-
 apps/meteor/tests/e2e/pageobjects/Global.ts      | 2 +-
 apps/meteor/tests/e2e/pageobjects/MainContent.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/tests/e2e/pageobjects/Departments.ts b/apps/meteor/tests/e2e/pageobjects/Departments.ts
index 210d3247b5b2..6a811e43c4d2 100644
--- a/apps/meteor/tests/e2e/pageobjects/Departments.ts
+++ b/apps/meteor/tests/e2e/pageobjects/Departments.ts
@@ -73,7 +73,7 @@ export class Departments extends BasePage {
 	}
 
 	get btnModalCancelDeleteDepartment(): Locator {
-		return this.page.locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--secondary');
+		return this.page.locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--secondaryDanger');
 	}
 
 	get btnModalDeleteDepartment(): Locator {
diff --git a/apps/meteor/tests/e2e/pageobjects/Global.ts b/apps/meteor/tests/e2e/pageobjects/Global.ts
index 0a19087ff667..ca3394b27918 100644
--- a/apps/meteor/tests/e2e/pageobjects/Global.ts
+++ b/apps/meteor/tests/e2e/pageobjects/Global.ts
@@ -41,7 +41,7 @@ export class Global extends BasePage {
 	}
 
 	get btnModalCancel(): Locator {
-		return this.page.locator('#modal-root dialog .rcx-modal__inner .rcx-modal__footer .rcx-button--secondary');
+		return this.page.locator('#modal-root dialog .rcx-modal__inner .rcx-modal__footer .rcx-button--secondaryDanger');
 	}
 
 	get btnModalRemove(): Locator {
diff --git a/apps/meteor/tests/e2e/pageobjects/MainContent.ts b/apps/meteor/tests/e2e/pageobjects/MainContent.ts
index b800a6519bd6..e6fece385500 100644
--- a/apps/meteor/tests/e2e/pageobjects/MainContent.ts
+++ b/apps/meteor/tests/e2e/pageobjects/MainContent.ts
@@ -178,7 +178,7 @@ export class MainContent extends BasePage {
 	}
 
 	get modalCancelButton(): Locator {
-		return this.page.locator('#modal-root .rcx-button-group--align-end .rcx-button--secondary');
+		return this.page.locator('#modal-root .rcx-button-group--align-end .rcx-button--secondaryDanger');
 	}
 
 	get modalDeleteMessageButton(): Locator {

From e2fb48b532bbae940614eac241b7753f3b430330 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Tue, 21 Jun 2022 18:25:11 -0300
Subject: [PATCH 22/22] fix selectors

---
 apps/meteor/client/components/GenericModal.tsx   | 6 +++---
 apps/meteor/tests/e2e/pageobjects/Departments.ts | 2 +-
 apps/meteor/tests/e2e/pageobjects/Global.ts      | 2 +-
 apps/meteor/tests/e2e/pageobjects/MainContent.ts | 2 +-
 yarn.lock                                        | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/meteor/client/components/GenericModal.tsx b/apps/meteor/client/components/GenericModal.tsx
index 61e3033af028..a4ac28e5d819 100644
--- a/apps/meteor/client/components/GenericModal.tsx
+++ b/apps/meteor/client/components/GenericModal.tsx
@@ -29,9 +29,9 @@ const iconMap: Record<string, ComponentProps<typeof Icon>['name']> = {
 const getButtonProps = (variant: VariantType): ComponentProps<typeof Button> => {
 	switch (variant) {
 		case 'danger':
-			return { secondaryDanger: true }; // TODO: secondary danger
+			return { danger: true };
 		case 'warning':
-			return { secondaryWarning: true };
+			return { warning: true };
 		default:
 			return {};
 	}
@@ -82,7 +82,7 @@ const GenericModal: FC<GenericModalProps> = ({
 					{dontAskAgain}
 					<ButtonGroup align='end' flexGrow={1} maxWidth='full'>
 						{onCancel && (
-							<Button danger onClick={onCancel}>
+							<Button secondary onClick={onCancel}>
 								{cancelText ?? t('Cancel')}
 							</Button>
 						)}
diff --git a/apps/meteor/tests/e2e/pageobjects/Departments.ts b/apps/meteor/tests/e2e/pageobjects/Departments.ts
index 6a811e43c4d2..210d3247b5b2 100644
--- a/apps/meteor/tests/e2e/pageobjects/Departments.ts
+++ b/apps/meteor/tests/e2e/pageobjects/Departments.ts
@@ -73,7 +73,7 @@ export class Departments extends BasePage {
 	}
 
 	get btnModalCancelDeleteDepartment(): Locator {
-		return this.page.locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--secondaryDanger');
+		return this.page.locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--secondary');
 	}
 
 	get btnModalDeleteDepartment(): Locator {
diff --git a/apps/meteor/tests/e2e/pageobjects/Global.ts b/apps/meteor/tests/e2e/pageobjects/Global.ts
index ca3394b27918..0a19087ff667 100644
--- a/apps/meteor/tests/e2e/pageobjects/Global.ts
+++ b/apps/meteor/tests/e2e/pageobjects/Global.ts
@@ -41,7 +41,7 @@ export class Global extends BasePage {
 	}
 
 	get btnModalCancel(): Locator {
-		return this.page.locator('#modal-root dialog .rcx-modal__inner .rcx-modal__footer .rcx-button--secondaryDanger');
+		return this.page.locator('#modal-root dialog .rcx-modal__inner .rcx-modal__footer .rcx-button--secondary');
 	}
 
 	get btnModalRemove(): Locator {
diff --git a/apps/meteor/tests/e2e/pageobjects/MainContent.ts b/apps/meteor/tests/e2e/pageobjects/MainContent.ts
index e6fece385500..b800a6519bd6 100644
--- a/apps/meteor/tests/e2e/pageobjects/MainContent.ts
+++ b/apps/meteor/tests/e2e/pageobjects/MainContent.ts
@@ -178,7 +178,7 @@ export class MainContent extends BasePage {
 	}
 
 	get modalCancelButton(): Locator {
-		return this.page.locator('#modal-root .rcx-button-group--align-end .rcx-button--secondaryDanger');
+		return this.page.locator('#modal-root .rcx-button-group--align-end .rcx-button--secondary');
 	}
 
 	get modalDeleteMessageButton(): Locator {
diff --git a/yarn.lock b/yarn.lock
index 37c36855fef3..4067e8a717e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3821,7 +3821,7 @@ __metadata:
     "@rocket.chat/favicon": "workspace:^"
     "@rocket.chat/forked-matrix-appservice-bridge": ^4.0.1
     "@rocket.chat/forked-matrix-bot-sdk": ^0.6.0-beta.2
-    "@rocket.chat/fuselage": 0.32.0-dev.49
+    "@rocket.chat/fuselage": ^0.32.0-dev.55
     "@rocket.chat/fuselage-hooks": ~0.31.14-dev.9
     "@rocket.chat/fuselage-polyfills": ~0.31.12
     "@rocket.chat/fuselage-toastbar": ^0.32.0-dev.22