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;