[NEW] Colors Palette - Buttons

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 { danger: true };
 		case 'warning':
-			return { primary: true };
+			return { warning: true };
 		default:
 			return {};
 	}
@@ -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>
 						)}

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;

apps/meteor/client/components/Header/ToolBoxAction.tsx

@@ -1,16 +1,15 @@
-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}
 		data-toolbox={index}
 		key={id}
 		icon={icon}
 		position='relative'
-		ghost
 		tiny
 		overflow='visible'
 		color={!!color && color}

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>
 					) : (

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>

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>

apps/meteor/client/components/Sidebar/Header.tsx

@@ -1,4 +1,4 @@
-import { Box, ActionButton } from '@rocket.chat/fuselage';
+import { Box, IconButton } from '@rocket.chat/fuselage';
 import React, { FC, ReactNode } from 'react';
 
 type HeaderProps = {
@@ -15,7 +15,7 @@ const Header: FC<HeaderProps> = ({ title, onClose, children, ...props }) => (
 						{title}
 					</Box>
 				)}
-				{onClose && <ActionButton ghost small icon='cross' onClick={onClose} />}
+				{onClose && <IconButton small icon='cross' onClick={onClose} />}
 			</Box>
 		)}
 		{children}

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>

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>

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;

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}>

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);

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);

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}

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;

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>

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 info small icon={name} />;
 
 export default MetricsFollowing;

apps/meteor/client/components/voip/modal/WrapUpCallModal.tsx

@@ -62,7 +62,7 @@ export const WrapUpCallModal = ({ closeRoom }: WrapUpCallModalProps): ReactEleme
 			</Modal.Content>
 			<Modal.Footer>
 				<ButtonGroup align='end'>
-					<Button ghost onClick={onCancel}>
+					<Button secondary onClick={onCancel}>
 						{t('Cancel')}
 					</Button>
 					<Button type='submit' primary>

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>

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' />
 		</>
 	),
 };

apps/meteor/client/sidebar/Item/Condensed.tsx

@@ -1,4 +1,4 @@
-import { Sidebar, ActionButton, IconProps } from '@rocket.chat/fuselage';
+import { IconButton, Sidebar, IconProps } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import React, { FC, memo, ReactElement, useState } from 'react';
 
@@ -42,7 +42,7 @@ const Condensed: FC<CondensedProps> = ({ icon, title = '', avatar, actions, href
 				{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>

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' />
 		</>
 	),
 };

apps/meteor/client/sidebar/Item/Extended.tsx

@@ -1,4 +1,4 @@
-import { Sidebar, ActionButton, IconProps } from '@rocket.chat/fuselage';
+import { Sidebar, IconButton, IconProps } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import React, { memo, useState, VFC } from 'react';
 
@@ -70,7 +70,7 @@ const Extended: VFC<ExtendedProps> = ({
 						<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>

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' />
 		</>
 	),
 };

apps/meteor/client/sidebar/Item/Medium.tsx

@@ -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, VFC } from 'react';
 
@@ -41,7 +41,7 @@ const Medium: VFC<MediumProps> = ({ icon, title = '', avatar, actions, href, bad
 				{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>

apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx

@@ -80,7 +80,7 @@ export const VoipFooter = ({
 								title={tooltips.mute}
 								small
 								square
-								nude
+								secondary
 								onClick={(e): void => {
 									e.stopPropagation();
 									toggleMic(!muted);
@@ -92,7 +92,7 @@ export const VoipFooter = ({
 								title={tooltips.holdCall}
 								small
 								square
-								nude
+								secondary
 								onClick={(e): void => {
 									e.stopPropagation();
 									if (paused) {
@@ -142,7 +142,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>
 						)}