feat: `ConnectionStatusBar` redesign (#32055)

.changeset/two-suns-marry.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+feat: `ConnectionStatusBar` redesign

apps/meteor/client/components/connectionStatus/ConnectionStatusBar.tsx

@@ -1,11 +1,37 @@
-import { Box, Icon } from '@rocket.chat/fuselage';
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Button, Icon, Palette } from '@rocket.chat/fuselage';
 import { useConnectionStatus } from '@rocket.chat/ui-contexts';
-import type { MouseEvent } from 'react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useReconnectCountdown } from './useReconnectCountdown';
 
+const connectionStatusBarStyle = css`
+	color: ${Palette.statusColor['status-font-on-warning']};
+	background-color: ${Palette.surface['surface-tint']};
+	border-color: ${Palette.statusColor['status-font-on-warning']};
+
+	position: fixed;
+	z-index: 1000000;
+
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.rcx-connection-status-bar--wrapper {
+		display: flex;
+		align-items: center;
+		column-gap: 8px;
+	}
+	.rcx-connection-status-bar--content {
+		display: flex;
+		align-items: center;
+		column-gap: 8px;
+	}
+	.rcx-connection-status-bar--info {
+		color: ${Palette.text['font-default']};
+	}
+`;
 function ConnectionStatusBar() {
 	const { connected, retryTime, status, reconnect } = useConnectionStatus();
 	const reconnectCountdown = useReconnectCountdown(retryTime, status);
@@ -15,37 +41,32 @@ function ConnectionStatusBar() {
 		return null;
 	}
 
-	const handleRetryClick = (event: MouseEvent<HTMLAnchorElement>) => {
-		event.preventDefault();
-		reconnect?.();
-	};
-
 	return (
 		<Box
-			color='status-font-on-warning'
-			bg='status-background-warning'
-			position='fixed'
-			zIndex={1000000}
+			className={connectionStatusBarStyle}
+			rcx-connection-status-bar
 			insetBlockStart={0}
-			p={2}
+			pb={4}
+			pi={12}
 			width='100%'
-			textAlign='center'
-			borderBlockEndWidth={1}
+			borderBlockEndWidth={2}
 			role='alert'
+			fontScale='p2'
 		>
-			<Icon name='warning' />{' '}
-			<Box is='span' withRichContent>
-				<strong>{t('meteor_status', { context: status })}</strong>
-				{status === 'waiting' && <> {t('meteor_status_reconnect_in', { count: reconnectCountdown })}</>}
-				{['waiting', 'offline'].includes(status) && (
-					<>
-						{' '}
-						<a href='#' onClick={handleRetryClick} role='button'>
-							{t('meteor_status_try_now', { context: status })}
-						</a>
-					</>
-				)}
-			</Box>
+			<span className='rcx-connection-status-bar--wrapper'>
+				<Icon name='warning' />
+				<span className='rcx-connection-status-bar--content'>
+					<strong>{t('meteor_status', { context: status })}</strong>
+					{['waiting', 'failed', 'offline'].includes(status) && (
+						<span className='rcx-connection-status-bar--info'>
+							{status === 'waiting' ? t('meteor_status_reconnect_in', { count: reconnectCountdown }) : t('meteor_status_try_again_later')}
+						</span>
+					)}
+				</span>
+			</span>
+			<Button primary onClick={reconnect} small disabled={['connected', 'connecting'].includes(status)}>
+				{t('Connect')}
+			</Button>
 		</Box>
 	);
 }

packages/i18n/src/locales/en.i18n.json

@@ -3592,13 +3592,14 @@
   "Meta_robots": "Robots",
   "meteor_status_connected": "Connected",
   "meteor_status_connecting": "Connecting...",
-  "meteor_status_failed": "The server connection failed",
-  "meteor_status_offline": "Offline mode.",
-  "meteor_status_reconnect_in_one": "trying again in 1 second...",
-  "meteor_status_reconnect_in_other": "trying again in {{count}} seconds...",
+  "meteor_status_failed": "Connection attempt failed",
+  "meteor_status_offline": "You’re offline",
+  "meteor_status_reconnect_in_one": "Trying to reconnect in 1 second",
+  "meteor_status_reconnect_in_other": "Trying to reconnect in {{count}} seconds",
+  "meteor_status_try_again_later": "Please try again later or ask your workspace admin for assistance",
   "meteor_status_try_now_offline": "Connect again",
   "meteor_status_try_now_waiting": "Try now",
-  "meteor_status_waiting": "Waiting for server connection,",
+  "meteor_status_waiting": "You’re offline",
   "Method": "Method",
   "Mic_on": "Mic On",
   "Microphone": "Microphone",