chore: RoomForewordList tag a11y improvement

RocketChat · Oct 13, 2023 · 5398a98 · 5398a98
1 parent 45a2a7b
commit 5398a98
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 29 deletions.
diff --git a/apps/meteor/client/views/room/body/RoomForeword/RoomForewordUsernameList.tsx b/apps/meteor/client/views/room/body/RoomForeword/RoomForewordUsernameList.tsx
@@ -1,4 +1,5 @@
 import type { IUser } from '@rocket.chat/core-typings';
+import { Margins } from '@rocket.chat/fuselage';
 import { useSetting } from '@rocket.chat/ui-contexts';
 import type { VFC } from 'react';
 import React from 'react';
@@ -11,7 +12,7 @@ type RoomForewordUsernameListProps = { usernames: Array<NonNullable<IUser['usern
 const RoomForewordUsernameList: VFC<RoomForewordUsernameListProps> = ({ usernames }) => {
 	const useRealName = Boolean(useSetting('UI_Use_Real_Name'));
 	return (
-		<>
+		<Margins inline={4}>
 			{usernames.map((username) => (
 				<RoomForewordUsernameListItem
 					username={username}
@@ -20,7 +21,7 @@ const RoomForewordUsernameList: VFC<RoomForewordUsernameListProps> = ({ username
 					useRealName={useRealName}
 				/>
 			))}
-		</>
+		</Margins>
 	);
 };
 

diff --git a/apps/meteor/client/views/room/body/RoomForeword/RoomForewordUsernameListItem.tsx b/apps/meteor/client/views/room/body/RoomForeword/RoomForewordUsernameListItem.tsx
@@ -1,5 +1,5 @@
 import type { IUser } from '@rocket.chat/core-typings';
-import { Box, Icon, Tag, Skeleton } from '@rocket.chat/fuselage';
+import { Icon, Tag, Skeleton } from '@rocket.chat/fuselage';
 import type { VFC } from 'react';
 import React from 'react';
 
@@ -16,13 +16,11 @@ const RoomForewordUsernameListItem: VFC<RoomForewordUsernameListItemProps> = ({
 	const { data, isLoading, isError } = useUserInfoQuery({ username });
 
 	return (
-		<Box mi={4}>
-			<Tag icon={<Icon name='user' size='x20' />} className='mention-link' data-username={username} large href={href}>
-				{isLoading && <Skeleton variant='rect' />}
-				{!isLoading && isError && username}
-				{!isLoading && !isError && getUserDisplayName(data?.user?.name, username, useRealName)}
-			</Tag>
-		</Box>
+		<Tag icon={<Icon name='user' size='x20' />} data-username={username} large href={href}>
+			{isLoading && <Skeleton variant='rect' />}
+			{!isLoading && isError && username}
+			{!isLoading && !isError && getUserDisplayName(data?.user?.name, username, useRealName)}
+		</Tag>
 	);
 };
 

diff --git a/ee/packages/ui-theming/src/palette.ts b/ee/packages/ui-theming/src/palette.ts
@@ -46,8 +46,8 @@ export const palette = [
 			{ name: 'font-white', token: 'white', color: '#FFFFFF' },
 			{ name: 'font-disabled', token: 'N500', color: '#CBCED1' },
 			{ name: 'font-annotation', token: 'N600', color: '#9EA2A8' },
-			{ name: 'font-hint', token: 'N700', color: '#6C727A' },
-			{ name: 'font-secondary-info', token: 'N700', color: '#6C727A' },
+			{ name: 'font-hint', token: 'N700', color: '#6C737A' },
+			{ name: 'font-secondary-info', token: 'N700', color: '#6C737A' },
 			{ name: 'font-default', token: 'N800', color: '#2F343D' },
 			{ name: 'font-titles-labels', token: 'N900', color: '#1F2329' },
 			{ name: 'font-info', token: 'P600', color: '#095AD2' },
@@ -76,7 +76,7 @@ export const palette = [
 			{ name: 'status-font-on-info', token: 'P600', color: '#095AD2' },
 			{ name: 'status-font-on-success', token: 'S800', color: '#148660' },
 			{ name: 'status-font-on-danger', token: 'D800', color: '#9B1325' },
-			{ name: 'status-font-on-warning', token: 'W900', color: '#B88D00' },
+			{ name: 'status-font-on-warning', token: 'W900', color: '#8E6300' },
 			{ name: 'status-font-on-warning-2', token: 'N800', color: '#2F343D' },
 			{ name: 'status-font-on-service-1', token: 'S1-800', color: '#974809' },
 			{ name: 'status-font-on-service-2 ', token: 'S2-600', color: '#7F1B9F' },
@@ -88,22 +88,22 @@ export const palette = [
 		description: 'Badge Background',
 		list: [
 			{ name: 'badge-background-level-0', token: '', color: '#E4E7EA' },
-			{ name: 'badge-background-level-1', token: 'N700', color: '#6C727A' },
-			{ name: 'badge-background-level-2', token: '', color: '#1D74F5' },
+			{ name: 'badge-background-level-1', token: 'N700', color: '#6C737A' },
+			{ name: 'badge-background-level-2', token: '', color: '#156FF5' },
 			{ name: 'badge-background-level-3', token: '', color: '#F38C39' },
-			{ name: 'badge-background-level-4', token: '', color: '#F5455C' },
+			{ name: 'badge-background-level-4', token: '', color: '#EC0D2A' },
 		],
 	},
 	{
 		category: 'Status Bullet',
 		description: 'Used to show user status',
 		list: [
-			{ name: 'status-bullet-online', token: '', color: '#158D65' },
+			{ name: 'status-bullet-online', token: '', color: '#148660' },
 			{ name: 'status-bullet-away', token: '', color: '#AC892F' },
-			{ name: 'status-bullet-busy', token: '', color: '#DA1F37' },
+			{ name: 'status-bullet-busy', token: '', color: '#D40C26' },
 			{ name: 'status-bullet-disabled', token: '', color: '#F38C39' },
-			{ name: 'status-bullet-offline', token: '', color: '#AC892F' },
-			{ name: 'status-bullet-loading', token: '', color: '#9ea2a8' },
+			{ name: 'status-bullet-offline', token: '', color: '#6C737A' },
+			{ name: 'status-bullet-loading', token: '', color: '#6C737A' },
 		],
 	},
 	{
@@ -122,7 +122,7 @@ export const palette = [
 		list: [
 			{ name: 'button-background-primary-default', token: 'P500', color: '#156FF5' },
 			{ name: 'button-background-primary-hover', token: 'P600', color: '#095AD2' },
-			{ name: 'button-background-primary-press', token: 'P700', color: '#095AD2' },
+			{ name: 'button-background-primary-press', token: 'P700', color: '#10529E' },
 			{ name: 'button-background-primary-focus', token: 'P500', color: '#156FF5' },
 			{ name: 'button-background-primary-keyfocus', token: 'P500', color: '#156FF5' },
 			{ name: 'button-background-primary-disabled', token: 'P200', color: '#D1EBFE' },
@@ -133,7 +133,7 @@ export const palette = [
 		list: [
 			{ name: 'button-background-secondary-default', token: 'N400', color: '#E4E7EA' },
 			{ name: 'button-background-secondary-hover', token: 'N500', color: '#CBCED1' },
-			{ name: 'button-background-secondary-press', token: 'N600', color: '#CBCED1' },
+			{ name: 'button-background-secondary-press', token: 'N600', color: '#9EA2A8' },
 			{ name: 'button-background-secondary-focus', token: 'N400', color: '#E4E7EA' },
 			{ name: 'button-background-secondary-keyfocus', token: 'N400', color: '#E4E7EA' },
 			{ name: 'button-background-secondary-disabled', token: 'N300', color: '#EEEFF1' },
@@ -144,7 +144,7 @@ export const palette = [
 		list: [
 			{ name: 'button-background-secondary-danger-default', token: 'N400', color: '#E4E7EA' },
 			{ name: 'button-background-secondary-danger-hover', token: 'N500', color: '#CBCED1' },
-			{ name: 'button-background-secondary-danger-press', token: 'N600', color: '#CBCED1' },
+			{ name: 'button-background-secondary-danger-press', token: 'N600', color: '#9EA2A8' },
 			{ name: 'button-background-secondary-danger-focus', token: 'N400', color: '#E4E7EA' },
 			{ name: 'button-background-secondary-danger-keyfocus', token: 'N400', color: '#E4E7EA' },
 			{ name: 'button-background-secondary-danger-disabled', token: 'N300', color: '#EEEFF1' },
@@ -164,11 +164,11 @@ export const palette = [
 	{
 		description: 'Success Background',
 		list: [
-			{ name: 'button-background-success-default', token: '', color: '#158D65' },
+			{ name: 'button-background-success-default', token: '', color: '#148660' },
 			{ name: 'button-background-success-hover', token: 'S900', color: '#106D4F' },
 			{ name: 'button-background-success-press', token: 'S1000', color: '#0D5940' },
-			{ name: 'button-background-success-focus', token: '', color: '#158D65' },
-			{ name: 'button-background-success-keyfocus', token: '', color: '#158D65' },
+			{ name: 'button-background-success-focus', token: '', color: '#148660' },
+			{ name: 'button-background-success-keyfocus', token: '', color: '#148660' },
 			{ name: 'button-background-success-disabled', token: 'S200', color: '#C0F6E4' },
 		],
 	},
@@ -179,15 +179,15 @@ export const palette = [
 			{ name: 'button-font-on-primary-disabled', token: 'white', color: '#FFFFFF' },
 			{ name: 'button-font-on-secondary', token: 'N900', color: '#1F2329' },
 			{ name: 'button-font-on-secondary-disabled', token: 'N600', color: '#CBCED1' },
-			{ name: 'button-font-on-secondary-danger', token: 'D900', color: '#BB0B21' },
+			{ name: 'button-font-on-secondary-danger', token: '', color: '#BB0B21' },
 			{
 				name: 'button-font-on-secondary-danger-disabled',
 				token: 'D300',
 				color: '#F98F9D',
 			},
 			{ name: 'button-font-on-danger', token: 'white', color: '#FFFFFF' },
 			{ name: 'button-font-on-danger-disabled', token: 'white', color: '#FFFFFF' },
-			{ name: 'button-font-on-success', token: '', color: '#EBECEF' },
+			{ name: 'button-font-on-success', token: '', color: '#FFFFFF' },
 			{ name: 'button-font-on-success-disabled', token: 'white', color: '#FFFFFF' },
 		],
 	},

diff --git a/ee/packages/ui-theming/src/paletteDark.ts b/ee/packages/ui-theming/src/paletteDark.ts
@@ -9,7 +9,7 @@ export const palette = [
 			{ name: 'stroke-dark', token: 'N600', color: '#9EA2A8' },
 			{ name: 'stroke-extra-dark', token: 'N400', color: '#CBCED1' },
 			{ name: 'stroke-extra-light-highlight', token: '', color: '#87CBFC' },
-			{ name: 'stroke-highlight', token: '', color: '#3976D1' },
+			{ name: 'stroke-highlight', token: '', color: '#6292DA' },
 			{ name: 'stroke-extra-light-error', token: '', color: '#F49AA6' },
 			{ name: 'stroke-error', token: '', color: '#BB3E4E' },
 		],