diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/announcements-purple.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/announcements-purple.svg new file mode 100644 index 00000000000..9306ce8e9ee --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/announcements-purple.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/AnnouncementBadge.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/AnnouncementBadge.tsx index 81f7e56b576..4d994894849 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/AnnouncementBadge.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/AnnouncementBadge.tsx @@ -17,14 +17,14 @@ import './Badge.less'; const AnnouncementBadge = () => { return ( - +
- + Announcement +
); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/Badge.less b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/Badge.less index b77a8005a97..4b9260f2ea2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/Badge.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/Badge.less @@ -1,10 +1,31 @@ +@background: #fcf6fc; +@border: #dea4dc; +@text: #b02aac; + +.announcement-badge-container { + position: absolute; + top: -11px; + left: 10px; + background: @background; + border-radius: 4px; + border: 1px solid @border; + padding: 2px 8px; + display: flex; + align-items: center; + justify-content: center; +} + .announcement-badge { - width: 24px; - height: 24px; - background: #ffc143; - border: 1px solid #ffc143; - border-radius: 50%; - padding: 4px; + width: 12px; + height: 12px; + background: @background; +} + +.announcement-content { + font-size: 10px; + margin-left: 5px; + color: @text; + font-weight: 600; } .task-badge { @@ -12,6 +33,6 @@ border: 1px solid #c6b5f6; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06); border-radius: 2px; - color: #7147e8; + color: @text; font-size: 12px; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/AnnouncementCard/AnnouncementCard.less b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/AnnouncementCard/AnnouncementCard.less index 628430fd1c8..1f42d191883 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/AnnouncementCard/AnnouncementCard.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/AnnouncementCard/AnnouncementCard.less @@ -11,8 +11,8 @@ * limitations under the License. */ -@background: #fffbf3; -@border: #ffc143; +@background: #fdfbfd; +@border: #dea4dc; .announcement-card { width: 340px; diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/feed.constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/feed.constants.ts index 53dd36bbc0b..e80d6ac269f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/feed.constants.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/feed.constants.ts @@ -76,6 +76,6 @@ export enum EntityField { TASKS = 'tasks', } -export const ANNOUNCEMENT_BG = '#fffbf3'; -export const ANNOUNCEMENT_BORDER = '#FFC143'; +export const ANNOUNCEMENT_BG = '#FCF6FC'; +export const ANNOUNCEMENT_BORDER = 'rgba(176, 42, 172, 0.6)'; export const TASK_BORDER = '#C6B5F6'; diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css index 50cae34636d..032a62462b1 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css +++ b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css @@ -1323,6 +1323,10 @@ div.ant-typography-ellipsis-custom { } /* Feed text pre tag CSS */ +.activity-feed-card-text { + padding-top: 6px; +} + .activity-feed-card-text pre { white-space: pre-wrap; /* Since CSS 2.1 */ } diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx index 86f6525bf35..6007f1ec70d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx @@ -24,6 +24,7 @@ import IconAddReaction from '../assets/svg/add-reaction-emoji.svg'; import IconAlertBell from '../assets/svg/alert-bell.svg'; import IconAllActivity from '../assets/svg/all-activity.svg'; import IconAnnouncementsBlack from '../assets/svg/announcements-black.svg'; +import IconAnnouncementsPurple from '../assets/svg/announcements-purple.svg'; import IconAnnouncements from '../assets/svg/announcements.svg'; import IconAPI from '../assets/svg/api.svg'; import IconArrowDownPrimary from '../assets/svg/arrow-down-primary.svg'; @@ -307,6 +308,7 @@ export const Icons = { ARROW_DOWN_PRIMARY: 'icon-arrow-down-primary', ANNOUNCEMENT: 'icon-announcement', ANNOUNCEMENT_BLACK: 'icon-announcement-black', + ANNOUNCEMENT_PURPLE: 'icon-announcement-purple', CHEVRON_DOWN: 'icon-chevron-down', ICON_UP: 'icon-up', ICON_DOWN: 'icon-down', @@ -836,6 +838,10 @@ const SVGIcons: FunctionComponent = ({ case Icons.ANNOUNCEMENT: IconComponent = IconAnnouncements; + break; + case Icons.ANNOUNCEMENT_PURPLE: + IconComponent = IconAnnouncementsPurple; + break; case Icons.ANNOUNCEMENT_BLACK: IconComponent = IconAnnouncementsBlack;