From c2cf2d773adb161f331bd3736a1a94e5b21dd035 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?=
<60678893+juliajforesti@users.noreply.github.com>
Date: Mon, 9 Dec 2024 11:05:40 -0300
Subject: [PATCH] chore: add announcement and topic classNames (#34140)
---
.../RoomAnnouncement/AnnouncementComponent.tsx | 2 +-
apps/meteor/client/views/room/body/RoomTopic.tsx | 2 +-
.../src/components/RoomBanner/RoomBanner.tsx | 7 +++++--
.../components/RoomBanner/RoomBannerContent.tsx | 14 ++++++++++++--
4 files changed, 19 insertions(+), 6 deletions(-)
diff --git a/apps/meteor/client/views/room/RoomAnnouncement/AnnouncementComponent.tsx b/apps/meteor/client/views/room/RoomAnnouncement/AnnouncementComponent.tsx
index f9daf3d1481..e58db0f0616 100644
--- a/apps/meteor/client/views/room/RoomAnnouncement/AnnouncementComponent.tsx
+++ b/apps/meteor/client/views/room/RoomAnnouncement/AnnouncementComponent.tsx
@@ -7,7 +7,7 @@ type AnnouncementComponenttParams = {
};
const AnnouncementComponent: FC<AnnouncementComponenttParams> = ({ children, onClickOpen }) => (
- <RoomBanner className='rcx-header-section' onClick={onClickOpen}>
+ <RoomBanner className='rcx-header-section rcx-announcement-section' onClick={onClickOpen}>
<RoomBannerContent data-qa='AnnouncementAnnoucementComponent'>{children}</RoomBannerContent>
</RoomBanner>
);
diff --git a/apps/meteor/client/views/room/body/RoomTopic.tsx b/apps/meteor/client/views/room/body/RoomTopic.tsx
index 0987f39602a..fee06bd087d 100644
--- a/apps/meteor/client/views/room/body/RoomTopic.tsx
+++ b/apps/meteor/client/views/room/body/RoomTopic.tsx
@@ -51,7 +51,7 @@ export const RoomTopic = ({ room, user }: RoomTopicProps) => {
if (!topic && !roomLeader) return null;
return (
- <RoomBanner className='rcx-header-section' role='note'>
+ <RoomBanner className='rcx-header-section rcx-topic-section' role='note'>
<RoomBannerContent>
{roomLeader && !topic && canEdit ? (
<Box is='a' href={href}>
diff --git a/packages/ui-client/src/components/RoomBanner/RoomBanner.tsx b/packages/ui-client/src/components/RoomBanner/RoomBanner.tsx
index e5ab0458031..8b9bda9e402 100644
--- a/packages/ui-client/src/components/RoomBanner/RoomBanner.tsx
+++ b/packages/ui-client/src/components/RoomBanner/RoomBanner.tsx
@@ -10,6 +10,10 @@ const clickable = css`
}
`;
+const style = css`
+ background-color: ${Palette.surface['surface-room']};
+`;
+
export const RoomBanner = ({ onClick, className, ...props }: ComponentProps<typeof Box>) => {
const { isMobile } = useLayout();
@@ -25,8 +29,7 @@ export const RoomBanner = ({ onClick, className, ...props }: ComponentProps<type
alignItems='center'
overflow='hidden'
flexDirection='row'
- bg='room'
- className={[onClick && clickable, ...(Array.isArray(className) ? className : [className])]}
+ className={[style, onClick && clickable, ...(Array.isArray(className) ? className : [className])]}
onClick={onClick}
tabIndex={onClick ? 0 : -1}
role={onClick ? 'button' : 'banner'}
diff --git a/packages/ui-client/src/components/RoomBanner/RoomBannerContent.tsx b/packages/ui-client/src/components/RoomBanner/RoomBannerContent.tsx
index 65c3cd4f38f..36b5d74569e 100644
--- a/packages/ui-client/src/components/RoomBanner/RoomBannerContent.tsx
+++ b/packages/ui-client/src/components/RoomBanner/RoomBannerContent.tsx
@@ -1,6 +1,16 @@
-import { Box } from '@rocket.chat/fuselage';
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Palette } from '@rocket.chat/fuselage';
import { HTMLAttributes } from 'react';
export const RoomBannerContent = (props: Omit<HTMLAttributes<HTMLElement>, 'is'>) => (
- <Box color='hint' fontScale='p2' p={4} flexGrow={1} withTruncatedText {...props} />
+ <Box
+ fontScale='p2'
+ p={4}
+ flexGrow={1}
+ withTruncatedText
+ className={css`
+ color: ${Palette.text['font-hint']};
+ `}
+ {...props}
+ />
);
--
GitLab