UI :- Fix announcement card, overflow, no search placeholder (#7323)

* Fix announcement card, overflow, no search placeholder

* announcement badge left alignment as per task

* decrease opacity of noData in search filter

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx

@@ -164,7 +164,7 @@ const ActivityFeedCard: FC<ActivityFeedCardProp> = ({
       <div
         className={classNames(
           className,
-          'hover:tw-bg-gray-100 tw--mx-2.5 tw-px-2.5 tw--mt-1 tw-py-1 tw-mb-1 tw-rounded',
+          'hover:tw-bg-gray-100 tw--mx-2.5 tw-px-2.5 tw--mt-1 tw-py-2 tw-mb-1 tw-rounded',
           {
             'tw-bg-gray-100': visible,
           }

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListBody.tsx

@@ -136,7 +136,7 @@ const FeedListBody: FC<FeedListBodyProp> = ({
               style={{
                 ...leftPanelAntCardStyle,
                 marginTop: '20px',
-                paddingTop: isTask ? '8px' : '',
+                paddingTop: isTask || isAnnouncement ? '8px' : '',
                 border: isTask
                   ? `1px solid ${TASK_BORDER}`
                   : isAnnouncement

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/AnnouncementThreads.tsx

@@ -98,6 +98,7 @@ const AnnouncementThreads: FC<ActivityThreadListProp> = ({
             style={{
               ...leftPanelAntCardStyle,
               marginTop: '20px',
+              paddingTop: '8px',
               border: `1px solid ${ANNOUNCEMENT_BORDER}`,
               background: `${ANNOUNCEMENT_BG}`,
             }}>

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/Badge.less

@@ -1,38 +1,39 @@
 @background: #fcf6fc;
 @border: #b02aac99;
 @text: #b02aac;
+@primary: #7147e8;
 
 .announcement-badge-container {
   position: absolute;
-  top: -11px;
-  left: 10px;
+  top: -12px;
+  left: 16px;
   background: @background;
   border-radius: 4px;
   border: 1px solid @border;
-  padding: 2px 8px;
+  padding: 0 8px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .announcement-badge {
-  width: 12px;
-  height: 12px;
+  width: 14px;
+  height: 14px;
   background: @background;
 }
 
 .announcement-content {
-  font-size: 10px;
+  font-size: 12px;
   margin-left: 5px;
   color: @text;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .task-badge {
   background: #f1edfd;
   border: 1px solid #c6b5f6;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06);
-  border-radius: 2px;
-  color: @text;
+  border-radius: 4px;
+  color: @primary;
   font-size: 12px;
 }

openmetadata-ui/src/main/resources/ui/src/components/GlobalSearchProvider/GlobalSearchSuggestions/GlobalSearchSuggestions.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Empty, Select } from 'antd';
+import { Select, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { isEmpty } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
@@ -27,6 +27,7 @@ import SVGIcons, { Icons } from '../../../utils/SvgUtils';
 import { getEntityLink } from '../../../utils/TableUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
 import CmdKIcon from '../../common/CmdKIcon/CmdKIcon.component';
+import ErrorPlaceHolder from '../../common/error-with-placeholder/ErrorPlaceHolder';
 import Loader from '../../Loader/Loader';
 import {
   DashboardSource,
@@ -319,7 +320,15 @@ const GlobalSearchSuggestions = ({
         listHeight={220}
         notFoundContent={
           <div className="tw-flex tw-flex-col tw-w-full tw-h-56 tw-items-center tw-justify-center tw-pb-9">
-            {isSuggestionsLoading ? <Loader size="small" /> : <Empty />}
+            {isSuggestionsLoading ? (
+              <Loader size="small" />
+            ) : (
+              <ErrorPlaceHolder classes="tw-mt-0 opacity-60">
+                <Typography.Text className="tw-text-sm tw-grey-body ">
+                  No Data Available
+                </Typography.Text>
+              </ErrorPlaceHolder>
+            )}
           </div>
         }
         open={!isEmpty(value)}

openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolder.tsx

@@ -70,7 +70,7 @@ const ErrorPlaceHolder = ({
       </div>
     </>
   ) : (
-    <div className={`${classes} flex-center flex-col mt-24 w-full`}>
+    <div className={`${classes} flex-center flex-col w-full mt-24`}>
       <div data-testid="error">
         <img
           data-testid="no-data-image"

openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx

@@ -226,7 +226,7 @@ const NavBar = ({
   return (
     <>
       <div className="tw-h-16 tw-py-3 tw-border-b-2 tw-border-separator">
-        <div className="tw-flex tw-items-center tw-flex-row tw-justify-between tw-flex-nowrap tw-px-6 centered-layout">
+        <div className="tw-flex tw-items-center tw-flex-row tw-justify-between tw-flex-nowrap tw-px-6">
           <div className="tw-flex tw-items-center tw-flex-row tw-justify-between tw-flex-nowrap">
             <NavLink className="tw-flex-shrink-0" id="openmetadata_logo" to="/">
               <SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="90" />

openmetadata-ui/src/main/resources/ui/src/styles/app.less

@@ -63,3 +63,7 @@
 .mt-24 {
   margin-top: 6rem;
 }
+
+.opacity-60 {
+  opacity: 0.6;
+}