refactor: Update UploadProgressIndicator styles

apps/meteor/app/theme/client/imports/general/base_old.css

@@ -199,78 +199,6 @@ blockquote {
 	}
 }
 
-.container-bars {
-	position: relative;
-	z-index: 2;
-	display: none;
-	visibility: hidden;
-	overflow: hidden;
-	flex-direction: column;
-	margin: 8px 10px 0;
-	transition: transform 0.4s ease, visibility 0.3s ease, opacity 0.3s ease;
-	transform: translateY(-10px);
-	opacity: 0;
-	border-radius: var(--border-radius);
-	box-shadow: 0 1px 1px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 16%);
-	font-size: 1em;
-	font-weight: bold;
-
-	&.show {
-		display: flex;
-		visibility: visible;
-		transform: translateY(0);
-		opacity: 1;
-	}
-
-	& > div {
-		padding: 0 10px;
-		line-height: 28px;
-	}
-
-	& .upload-progress {
-		position: relative;
-		display: flex;
-		height: 28px;
-
-		& .upload-progress-progress {
-			position: absolute;
-			z-index: 1;
-			left: 0;
-			width: 0%;
-			height: 100%;
-			transition: width, 1s, ease-out;
-		}
-
-		& .upload-progress-text {
-			z-index: 2;
-			right: 0;
-			left: 0;
-			overflow: hidden;
-			width: 50%;
-			height: 100%;
-			padding: 0 10px;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			flex-grow: 1;
-
-			& > a {
-				float: right;
-				cursor: pointer;
-				text-transform: uppercase;
-			}
-		}
-
-		& .upload-progress-close {
-			position: relative;
-			z-index: 3;
-			float: right;
-			height: 100%;
-			text-transform: uppercase;
-			font-weight: bold;
-		}
-	}
-}
-
 .flex-tab-main-content {
 	position: relative;
 	z-index: 1;

apps/meteor/app/theme/client/imports/general/theme_old.css

@@ -25,22 +25,10 @@
 	color: var(--primary-font-color);
 }
 
-.color-primary-action-color {
-	color: var(--primary-action-color);
-}
-
 .secondary-font-color {
 	color: var(--secondary-font-color);
 }
 
-.background-component-color {
-	background-color: var(--component-color);
-}
-
-.upload-progress-progress {
-	background-color: var(--success-background);
-}
-
 input,
 select,
 textarea {

apps/meteor/client/views/room/body/RoomBody.tsx

@@ -30,7 +30,7 @@ import { useMessageListNavigation } from '../hooks/useMessageListNavigation';
 import { useRetentionPolicy } from '../hooks/useRetentionPolicy';
 import RoomForeword from './RoomForeword/RoomForeword';
 import UnreadMessagesIndicator from './UnreadMessagesIndicator';
-import UploadProgressIndicator from './UploadProgressIndicator';
+import { UploadProgressContainer, UploadProgressIndicator } from './UploadProgress';
 import { useFileUpload } from './hooks/useFileUpload';
 import { useGetMore } from './hooks/useGetMore';
 import { useGoToHomeOnRemoved } from './hooks/useGoToHomeOnRemoved';
@@ -239,18 +239,20 @@ const RoomBody = (): ReactElement => {
 										triggerProps={triggerProps}
 									/>
 								) : null}
-								<div className={['container-bars', uploads.length && 'show'].filter(isTruthy).join(' ')}>
-									{uploads.map((upload) => (
-										<UploadProgressIndicator
-											key={upload.id}
-											id={upload.id}
-											name={upload.name}
-											percentage={upload.percentage}
-											error={upload.error instanceof Error ? upload.error.message : undefined}
-											onClose={handleUploadProgressClose}
-										/>
-									))}
-								</div>
+								{uploads.length > 0 && (
+									<UploadProgressContainer>
+										{uploads.map((upload) => (
+											<UploadProgressIndicator
+												key={upload.id}
+												id={upload.id}
+												name={upload.name}
+												percentage={upload.percentage}
+												error={upload.error instanceof Error ? upload.error.message : undefined}
+												onClose={handleUploadProgressClose}
+											/>
+										))}
+									</UploadProgressContainer>
+								)}
 								{Boolean(unread) && (
 									<UnreadMessagesIndicator
 										count={unread}

apps/meteor/client/views/room/body/RoomBodyV2.tsx

@@ -27,7 +27,7 @@ import { useRetentionPolicy } from '../hooks/useRetentionPolicy';
 import RoomForeword from './RoomForeword/RoomForeword';
 import { RoomTopic } from './RoomTopic';
 import UnreadMessagesIndicator from './UnreadMessagesIndicator';
-import UploadProgressIndicator from './UploadProgressIndicator';
+import { UploadProgressContainer, UploadProgressIndicator } from './UploadProgress';
 import { useBannerSection } from './hooks/useBannerSection';
 import { useFileUpload } from './hooks/useFileUpload';
 import { useGetMore } from './hooks/useGetMore';
@@ -211,18 +211,20 @@ const RoomBody = (): ReactElement => {
 						<div className='messages-container-main' ref={wrapperBoxRefs} {...fileUploadTriggerProps}>
 							<DropTargetOverlay {...fileUploadOverlayProps} />
 							<Box position='absolute' w='full'>
-								<div className={['container-bars', uploads.length && 'show'].filter(isTruthy).join(' ')}>
-									{uploads.map((upload) => (
-										<UploadProgressIndicator
-											key={upload.id}
-											id={upload.id}
-											name={upload.name}
-											percentage={upload.percentage}
-											error={upload.error instanceof Error ? upload.error.message : undefined}
-											onClose={handleUploadProgressClose}
-										/>
-									))}
-								</div>
+								{uploads.length > 0 && (
+									<UploadProgressContainer>
+										{uploads.map((upload) => (
+											<UploadProgressIndicator
+												key={upload.id}
+												id={upload.id}
+												name={upload.name}
+												percentage={upload.percentage}
+												error={upload.error instanceof Error ? upload.error.message : undefined}
+												onClose={handleUploadProgressClose}
+											/>
+										))}
+									</UploadProgressContainer>
+								)}
 								{Boolean(unread) && (
 									<UnreadMessagesIndicator
 										count={unread}

apps/meteor/client/views/room/body/UploadProgress/UploadProgressContainer.tsx

@@ -0,0 +1,8 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+
+const UploadProgressContainer = (props: ComponentProps<typeof Box>) => {
+	return <Box position='relative' display='flex' flexDirection='column' overflow='hidden' mi={24} mbs={8} zIndex={2} {...props} />;
+};
+
+export default UploadProgressContainer;

apps/meteor/client/views/room/body/UploadProgress/UploadProgressIndicator.tsx

@@ -0,0 +1,65 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Button, Palette } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { Upload } from '../../../../lib/chats/Upload';
+
+type UploadProgressIndicatorProps = {
+	id: Upload['id'];
+	name: string;
+	percentage: number;
+	error?: string;
+	onClose?: (id: Upload['id']) => void;
+};
+
+const UploadProgressIndicator = ({ id, name, percentage, error, onClose }: UploadProgressIndicatorProps): ReactElement | null => {
+	const { t } = useTranslation();
+
+	const customClass = css`
+		&::after {
+			content: '';
+			position: absolute;
+			z-index: 1;
+			left: 0;
+			width: ${percentage}%;
+			height: 100%;
+			transition: width, 1s, ease-out;
+			background-color: ${Palette.surface['surface-neutral']};
+		}
+	`;
+
+	const handleCloseClick = useCallback(() => {
+		onClose?.(id);
+	}, [id, onClose]);
+
+	return (
+		<Box
+			pb={4}
+			pi={8}
+			mbe={4}
+			borderRadius={4}
+			borderWidth={1}
+			border='1px solid'
+			color={error ? 'danger' : 'info'}
+			overflow='hidden'
+			position='relative'
+			display='flex'
+			elevation='1'
+			alignItems='center'
+			justifyContent='space-between'
+			bg='surface-tint'
+			className={customClass}
+		>
+			<Box withTruncatedText zIndex={2} borderRadius={4}>
+				[{percentage}%] {name}
+			</Box>
+			<Button zIndex={3} small onClick={handleCloseClick}>
+				{t('Cancel')}
+			</Button>
+		</Box>
+	);
+};
+
+export default UploadProgressIndicator;

apps/meteor/client/views/room/body/UploadProgress/index.ts

@@ -0,0 +1,2 @@
+export { default as UploadProgressIndicator } from './UploadProgressIndicator';
+export { default as UploadProgressContainer } from './UploadProgressContainer';