UI :- Change the Announcement card style as per new mocs (#7070)

* Change the Announcement Card style as per new moc

* Remove unwanted code in Announcement Card

* revert removed files

* minor changes

* Change the Announcement card colors as per new figma

* use less varaiable for colors

openmetadata-ui/src/main/resources/ui/src/assets/svg/announcements-purple.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1724 4.33329V1.33327C10.1724 1.199 10.0952 1.07789 9.97659 1.02596C9.85798 0.974003 9.72103 1.00147 9.62926 1.09554C9.60418 1.12123 7.09297 3.66662 4.70116 3.66662H2.46581C1.40933 3.66662 0.549805 4.56383 0.549805 5.66663C0.549805 6.65828 1.24485 7.48356 2.1531 7.63987C2.22033 9.23932 2.78261 10.7242 2.80799 10.7905C2.85649 10.917 2.9739 11 3.10448 11H4.70116C4.81612 11 4.92216 10.9354 4.97887 10.831C5.03558 10.7266 5.03411 10.5984 4.9751 10.4954C4.96938 10.4854 4.61121 9.85306 4.34535 8.99977H5.24922C5.46464 9.00023 5.61943 8.78063 5.55337 8.56507C5.46134 8.26485 5.39899 7.98494 5.36644 7.72818C7.53663 8.11643 9.60652 10.2144 9.62919 10.2376C9.72044 10.3313 9.85724 10.3596 9.97654 10.3074C10.0952 10.2555 10.1725 10.1343 10.1725 9.99999V6.99997C10.8768 6.99997 11.4498 6.40184 11.4498 5.66663C11.4498 4.93143 10.8767 4.33329 10.1724 4.33329ZM1.18847 5.66663C1.18847 4.93143 1.76149 4.33329 2.46581 4.33329H4.38182V6.99997H2.46581C1.76149 6.99997 1.18847 6.40184 1.18847 5.66663ZM3.32727 10.3333C3.17831 9.88913 2.85099 8.80065 2.79385 7.66665H3.43516C3.5068 8.73665 3.90167 9.75075 4.17149 10.3333H3.32727ZM4.17189 8.33332C4.12714 8.11596 4.09333 7.89207 4.07586 7.66665C4.07586 7.66665 4.71184 7.66689 4.71719 7.66691C4.73645 7.87762 4.77305 8.10007 4.82736 8.33332H4.17189ZM9.53375 9.25859C8.32039 8.20636 6.70573 7.18404 5.13573 7.02271C5.09994 7.00822 5.06117 6.99997 5.02049 6.99997V4.32096C6.63273 4.19785 8.29571 3.14831 9.53375 2.07465V9.25859ZM10.1724 6.3333V4.99996C10.5246 4.99996 10.8111 5.29903 10.8111 5.66663C10.8111 6.03424 10.5246 6.3333 10.1724 6.3333Z" fill="#B02AAC" stroke="#B02AAC" stroke-width="0.2"/>
+</svg>

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/AnnouncementBadge.tsx

@@ -17,14 +17,14 @@ import './Badge.less';
 
 const AnnouncementBadge = () => {
   return (
-    <span className="tw-absolute tw--left-3 tw--top-3 tw-flex">
+    <div className="announcement-badge-container">
       <SVGIcons
         alt="announcement"
         className="announcement-badge"
-        icon={Icons.ANNOUNCEMENT_BLACK}
-        width="32px"
+        icon={Icons.ANNOUNCEMENT_PURPLE}
       />
-    </span>
+      <span className="announcement-content">Announcement</span>
+    </div>
   );
 };
 

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;
 }

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;

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';

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 */
 }

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<Props> = ({
     case Icons.ANNOUNCEMENT:
       IconComponent = IconAnnouncements;
 
+      break;
+    case Icons.ANNOUNCEMENT_PURPLE:
+      IconComponent = IconAnnouncementsPurple;
+
       break;
     case Icons.ANNOUNCEMENT_BLACK:
       IconComponent = IconAnnouncementsBlack;