fix(ui): minor improvements around fonts and page sizing (#9332)

* fix(ui): minor improvements around fonts and page sizing

* address review comments

* update file name

* Fix: multiple feed api calls at once on my data page

* fix: ui improvements part 2

* fix: update font colors of announcements

Co-authored-by: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Co-authored-by: karanh37 <karanh37@gmail.com>

openmetadata-ui/src/main/resources/ui/src/assets/svg/announcements-yellow.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="#F0AF2C" stroke="#F0AF2C" stroke-width="0.2"/>
+</svg>

openmetadata-ui/src/main/resources/ui/src/assets/svg/vector.svg

@@ -1,3 +1,12 @@
-<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.1251 0.467894C9.42488 0.767576 9.59329 1.17398 9.59329 1.59773C9.59329 2.02148 9.42488 2.42788 9.1251 2.72756L3.85937 7.99001L9.1251 13.2525C9.27783 13.3999 9.39965 13.5762 9.48346 13.7712C9.56726 13.9662 9.61138 14.1759 9.61322 14.388C9.61507 14.6002 9.57461 14.8107 9.4942 15.0071C9.4138 15.2035 9.29507 15.3819 9.14492 15.5319C8.99478 15.682 8.81624 15.8006 8.61972 15.881C8.4232 15.9613 8.21264 16.0018 8.00032 15.9999C7.78799 15.9981 7.57816 15.954 7.38307 15.8703C7.18798 15.7865 7.01153 15.6648 6.86402 15.5121L0.467745 9.11984C0.167966 8.82016 -0.000440012 8.41376 -0.000439993 7.99001C-0.000439975 7.56626 0.167967 7.15986 0.467745 6.86017L6.86402 0.467893C7.16389 0.168302 7.57055 -8.9235e-08 7.99456 -7.07122e-08C8.41858 -5.21895e-08 8.82523 0.168302 9.1251 0.467894Z" fill="#37352F"/>
-</svg>
+<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_1_2)">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M6.38744 0.321677C6.59728 0.527708 6.71517 0.807111 6.71517 1.09844C6.71517 1.38977 6.59728 1.66917 6.38744 1.8752L2.70143 5.49313L6.38744 9.11109C6.49435 9.21243 6.57962 9.33364 6.63829 9.4677C6.69695 9.60176 6.72783 9.74593 6.72912 9.89175C6.73042 10.0376 6.70209 10.1824 6.64581 10.3174C6.58953 10.4524 6.50642 10.5751 6.40131 10.6782C6.29621 10.7814 6.17124 10.8629 6.03367 10.9182C5.89611 10.9734 5.74872 11.0012 5.60009 10.9999C5.45146 10.9987 5.30458 10.9684 5.16802 10.9108C5.03145 10.8532 4.90794 10.7695 4.80468 10.6646L0.327289 6.26989C0.117444 6.06386 -0.000440134 5.78446 -0.000440121 5.49313C-0.000440108 5.2018 0.117445 4.9224 0.327289 4.71637L4.80468 0.321676C5.01459 0.115708 5.29925 -1.27344e-08 5.59606 0C5.89287 1.27344e-08 6.17753 0.115708 6.38744 0.321677Z"
+            fill="#37352F" />
+    </g>
+    <defs>
+        <clipPath id="clip0_1_2">
+            <rect width="7" height="11" fill="white" />
+        </clipPath>
+    </defs>
+</svg>

openmetadata-ui/src/main/resources/ui/src/axiosAPIs/serviceAPI.ts

@@ -35,11 +35,13 @@ export const getServices = async (serviceName: string, limit?: number) => {
   const searchParams = new URLSearchParams();
 
   if (!isNil(limit)) {
-    searchParams.set('limit', `${limit}`);
+    searchParams.append('limit', `${limit}`);
   }
 
-  const strSearchParams = searchParams.toString();
-  url += strSearchParams ? `?${strSearchParams}` : '';
+  const isPaging =
+    serviceName.includes('after') || serviceName.includes('before');
+
+  url += isPaging ? `&${searchParams}` : `?${searchParams}`;
 
   const response = await APIClient.get<ServiceResponse>(url);
 

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

@@ -67,12 +67,13 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
   );
   const [fieldListVisible, setFieldListVisible] = useState<boolean>(false);
   const [showThreadTypeList, setShowThreadTypeList] = useState<boolean>(false);
-  const [feedFilter, setFeedFilter] = useState<FeedFilter>(FeedFilter.ALL);
+  const [feedFilter, setFeedFilter] = useState<FeedFilter>(FeedFilter.OWNER);
   const [threadType, setThreadType] = useState<ThreadType>();
 
   const handleDropDown = useCallback(
     (_e: React.MouseEvent<HTMLElement, MouseEvent>, value?: string) => {
-      const feedType = (value as FeedFilter) || FeedFilter.ALL;
+      const feedType = (value as FeedFilter) || FeedFilter.OWNER;
+
       setFeedFilter(feedType);
       setFieldListVisible(false);
       onFeedFiltersUpdate && onFeedFiltersUpdate(feedType, threadType);
@@ -166,7 +167,7 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
                 icon={getFeedFilterDropdownIcon(feedFilter)}
                 type="link"
                 onClick={() => setFieldListVisible((visible) => !visible)}>
-                <Typography.Text className="font-normal text-primary m-x-xss">
+                <Typography.Text className="font-medium text-primary m-x-xss">
                   {feedFilterList.find((f) => f.value === feedFilter)?.name}
                 </Typography.Text>
                 <DropDownIcon className="dropdown-icon" />
@@ -191,7 +192,7 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
                 icon={getThreadFilterDropdownIcon(threadType ?? 'ALL')}
                 type="link"
                 onClick={() => setShowThreadTypeList((visible) => !visible)}>
-                <Typography.Text className="font-normal text-primary m-x-xss">
+                <Typography.Text className="font-medium text-primary m-x-xss">
                   {
                     threadFilterList.find(
                       (f) => f.value === (threadType ?? 'ALL')
@@ -235,7 +236,7 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
   return (
     <div className={classNames(className, 'feed-list-container')} id="feedData">
       <div className={stickyFilter ? 'filters-wrapper' : ''}>
-        {feedList.length === 0 && feedFilter === FeedFilter.ALL && !threadType
+        {feedList.length === 0 && feedFilter === FeedFilter.OWNER && !threadType
           ? null
           : getFilterDropDown()}
       </div>

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

@@ -12,8 +12,8 @@
  */
 
 @task-card-border: #c6b5f6;
-@announcement-card-border: #b02aac99;
-@announcement-background-color: #fcf6fc;
+@announcement-card-border: #ffc143;
+@announcement-background-color: #fffdf8;
 @feed-card-border-color: #dde3ea;
 @feed-card-shadow-color: #0000000f;
 

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

@@ -21,7 +21,7 @@ const AnnouncementBadge = () => {
       <SVGIcons
         alt="announcement"
         className="announcement-badge"
-        icon={Icons.ANNOUNCEMENT_PURPLE}
+        icon={Icons.ANNOUNCEMENT_YELLOW}
       />
       <span className="announcement-content">Announcement</span>
     </div>

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

@@ -1,6 +1,6 @@
-@background: #fcf6fc;
-@border: #b02aac99;
-@text: #b02aac;
+@background: #fffdf8;
+@border: #ffc143;
+@text: #37352f;
 @primary: #7147e8;
 
 .announcement-badge-container {

openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx

@@ -44,7 +44,7 @@ const EntityList: FunctionComponent<Prop> = ({
 }: Prop) => {
   return (
     <Fragment>
-      <Text className="text-600" type="secondary">
+      <Text className="font-semibold" type="secondary">
         {headerText}
       </Text>
       {entityList.length

openmetadata-ui/src/main/resources/ui/src/components/Execution/TreeView/TreeViewTab.component.tsx

@@ -59,10 +59,10 @@ const TreeViewTab = ({
           <ArrowSvg className="cursor-pointer" />
         </Col>
         <Col>
-          <Typography.Title className="p-b-0 m-b-0" level={5}>
+          <Typography.Text className="p-b-0 m-b-0 font-medium">
             {formatDateTimeFromSeconds(startTime)} to{' '}
             {formatDateTimeFromSeconds(endTime)}
-          </Typography.Title>
+          </Typography.Text>
         </Col>
         <Col>
           <ArrowSvg className=" cursor-pointer transform-180" />

openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.component.tsx

@@ -136,7 +136,7 @@ const GlossaryDetails = ({ permissions, glossary, updateGlossary }: props) => {
       searchFormattedUsersAndTeams(searchQuery, from)
         .then((res) => {
           const { users, teams } = res;
-          setListOwners(getOwnerList(users, teams));
+          setListOwners(getOwnerList(users, teams, false, searchQuery));
         })
         .catch(() => {
           setListOwners([]);
@@ -154,7 +154,7 @@ const GlossaryDetails = ({ permissions, glossary, updateGlossary }: props) => {
       suggestFormattedUsersAndTeams(qSearchText)
         .then((res) => {
           const { users, teams } = res;
-          setListOwners(getOwnerList(users, teams));
+          setListOwners(getOwnerList(users, teams, false, qSearchText));
         })
         .catch(() => {
           setListOwners([]);

openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx

@@ -86,6 +86,7 @@ const GlossaryTermsV1 = ({
       name: 'Assets',
       isProtected: false,
       position: 2,
+      count: assetData.total,
     },
   ];
 

openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/SourceList.component.tsx

@@ -38,7 +38,7 @@ const SourceList = ({ feature }: { feature: MlFeature }) => {
             icon={isActive ? 'chevron-down' : 'chevron-right'}
           />
         </span>
-        <Typography.Text className="text-semi-bold m-y-0">
+        <Typography.Text className="font-medium m-y-0">
           {t('label.source-plural')}
         </Typography.Text>
       </Space>

openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx

@@ -63,7 +63,7 @@ const MyData: React.FC<MyDataProps> = ({
 }: MyDataProps): React.ReactElement => {
   const isMounted = useRef(false);
   const [elementRef, isInView] = useInfiniteScroll(observerOptions);
-  const [feedFilter, setFeedFilter] = useState(FeedFilter.ALL);
+  const [feedFilter, setFeedFilter] = useState(FeedFilter.OWNER);
   const [threadType, setThreadType] = useState<ThreadType>();
 
   const getLeftPanel = () => {
@@ -175,10 +175,6 @@ const MyData: React.FC<MyDataProps> = ({
     );
   }, [ownedData, followedData, pendingTaskCount]);
 
-  const getLoader = () => {
-    return isFeedLoading ? <Loader /> : null;
-  };
-
   const fetchMoreFeed = (
     isElementInView: boolean,
     pagingObj: Paging,
@@ -195,7 +191,7 @@ const MyData: React.FC<MyDataProps> = ({
   };
 
   useEffect(() => {
-    fetchMoreFeed(isInView as boolean, paging, isFeedLoading);
+    fetchMoreFeed(Boolean(isInView), paging, isFeedLoading);
   }, [isInView, paging, isFeedLoading]);
 
   useEffect(() => {
@@ -215,7 +211,7 @@ const MyData: React.FC<MyDataProps> = ({
 
   // Check if feedFilter or ThreadType filter is applied or not
   const filtersApplied = useMemo(
-    () => feedFilter === FeedFilter.ALL && !threadType,
+    () => feedFilter === FeedFilter.OWNER && !threadType,
     [feedFilter, threadType]
   );
 
@@ -243,12 +239,12 @@ const MyData: React.FC<MyDataProps> = ({
           ) : (
             !isFeedLoading && <Onboarding />
           )}
+          {isFeedLoading ? <Loader /> : null}
           <div
             data-testid="observer-element"
             id="observer-element"
-            ref={elementRef as RefObject<HTMLDivElement>}>
-            {getLoader()}
-          </div>
+            ref={elementRef as RefObject<HTMLDivElement>}
+          />
           {/* Add spacer to work infinite scroll smoothly */}
           <div className="tw-p-4" />
         </Fragment>

openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.tsx

@@ -201,6 +201,7 @@ const SearchDropdown: FC<SearchDropdownProps> = ({
           !isUndefined(onGetInitialOptions) &&
           onGetInitialOptions(searchKey);
         setIsDropDownOpen(visible);
+        setSearchText('');
       }}>
       <Button className="quick-filter-dropdown-trigger-btn">
         <Space data-testid="search-dropdown" size={4}>

openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx

@@ -16,7 +16,10 @@ import { isEmpty } from 'lodash';
 import React, { Fragment, useMemo } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
-import { getServiceDetailsPath, PAGE_SIZE } from '../../constants/constants';
+import {
+  getServiceDetailsPath,
+  SERVICE_VIEW_CAP,
+} from '../../constants/constants';
 import { CONNECTORS_DOCS } from '../../constants/docs.constants';
 import { NO_PERMISSION_FOR_ACTION } from '../../constants/HelperTextUtil';
 import { servicesDisplayName } from '../../constants/Services.constant';
@@ -170,7 +173,7 @@ const Services = ({
           {showPagination(paging) && (
             <NextPrevious
               currentPage={currentPage}
-              pageSize={PAGE_SIZE}
+              pageSize={SERVICE_VIEW_CAP}
               paging={paging}
               pagingHandler={onPageChange}
               totalCount={paging.total}

openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx

@@ -599,7 +599,7 @@ const TeamDetailsV1 = ({
   }, [currentTeam, AppState.userDetails, AppState.nonSecureUserDetails]);
 
   useEffect(() => {
-    isGroupType && setCurrentTab(2);
+    setCurrentTab(isGroupType ? 2 : 1);
   }, [isGroupType]);
 
   useEffect(() => {

openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx

@@ -12,7 +12,14 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Card, Image, Space, Switch, Typography } from 'antd';
+import {
+  Button as AntDButton,
+  Card,
+  Image,
+  Space,
+  Switch,
+  Typography,
+} from 'antd';
 import { AxiosError } from 'axios';
 import { capitalize, isEmpty, isEqual, isNil, toLower } from 'lodash';
 import { observer } from 'mobx-react';
@@ -33,7 +40,7 @@ import { getRoles } from '../../axiosAPIs/rolesAPIV1';
 import { getTeams } from '../../axiosAPIs/teamsAPI';
 import {
   getUserPath,
-  LIST_SIZE,
+  PAGE_SIZE,
   PAGE_SIZE_LARGE,
   TERM_ADMIN,
 } from '../../constants/constants';
@@ -69,7 +76,10 @@ import { dropdownIcon as DropDownIcon } from '../../utils/svgconstant';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import ActivityFeedList from '../ActivityFeed/ActivityFeedList/ActivityFeedList';
-import { filterListTasks } from '../ActivityFeed/ActivityFeedList/ActivityFeedList.util';
+import {
+  filterListTasks,
+  getFeedFilterDropdownIcon,
+} from '../ActivityFeed/ActivityFeedList/ActivityFeedList.util';
 import { Button } from '../buttons/Button/Button';
 import Description from '../common/description/Description';
 import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
@@ -767,12 +777,11 @@ const Users = ({
       <Fragment>
         <div className="tw--mt-4 tw-px-1.5 tw-flex tw-justify-between">
           <div className="tw-relative">
-            <Button
-              className="hover:tw-no-underline focus:tw-no-underline"
+            <AntDButton
+              className="flex items-center"
               data-testid="feeds"
-              size="custom"
-              tag="button"
-              variant="link"
+              icon={getFeedFilterDropdownIcon(feedFilter)}
+              type="link"
               onClick={() => setShowFilterList((visible) => !visible)}>
               <span className="tw-font-medium tw-text-grey">
                 {(activeTab === 1 ? userPageFilterList : filterListTasks).find(
@@ -780,7 +789,7 @@ const Users = ({
                 )?.name || capitalize(feedFilter)}
               </span>
               <DropDownIcon />
-            </Button>
+            </AntDButton>
             {showFilterList && (
               <DropDownList
                 dropDownList={
@@ -924,11 +933,11 @@ const Users = ({
                   />
                 </div>
               ))}
-              {entityData.total > LIST_SIZE && entityData.data.length > 0 && (
+              {entityData.total > PAGE_SIZE && entityData.data.length > 0 && (
                 <NextPrevious
                   isNumberBased
                   currentPage={entityData.currPage}
-                  pageSize={LIST_SIZE}
+                  pageSize={PAGE_SIZE}
                   paging={{} as Paging}
                   pagingHandler={
                     tabNumber === 3

openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx

@@ -190,7 +190,7 @@ const Appbar: React.FC = (): JSX.Element => {
         <div className="tw-text-grey-muted tw-text-xs">{name}</div>
         {userRoleArr.map((userRole, i) => (
           <Typography.Paragraph
-            className="ant-typography-ellipsis-custom font-medium"
+            className="ant-typography-ellipsis-custom font-normal"
             ellipsis={{ tooltip: true }}
             key={i}>
             {userRole}
@@ -246,7 +246,7 @@ const Appbar: React.FC = (): JSX.Element => {
             <span className="tw-text-grey-muted tw-text-xs">Teams</span>
             {teams.map((t, i) => (
               <Typography.Paragraph
-                className="ant-typography-ellipsis-custom text-xs"
+                className="ant-typography-ellipsis-custom text-sm"
                 ellipsis={{ tooltip: true }}
                 key={i}>
                 <Link to={getTeamAndUserDetailsPath(t.name as string)}>

openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx

@@ -198,7 +198,7 @@ const EntitySummaryDetails = ({
             {data.key
               ? displayVal
                 ? data.showLabel
-                  ? `${t(`label.${toLower(data.key)}`)} : `
+                  ? `${t(`label.${toLower(data.key)}`)} - `
                   : null
                 : `${t('label.no-entity', {
                     entity: t(`label.${toLower(data.key)}`),

openmetadata-ui/src/main/resources/ui/src/components/common/OwnerWidget/OwnerWidgetWrapper.component.tsx

@@ -101,7 +101,7 @@ const OwnerWidgetWrapper = ({
           // set team and user count for admin user
           setTotalTeamsCount(teamsTotal ?? 0);
           setTotalUsersCount(usersTotal ?? 0);
-          setListOwners(getOwnerList(users, teams));
+          setListOwners(getOwnerList(users, teams, false, searchQuery));
         })
         .catch(() => {
           setListOwners([]);

openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/AnnouncementCard/AnnouncementCard.less

@@ -11,8 +11,8 @@
  *  limitations under the License.
  */
 
-@background: #fdfbfd;
-@border: #dea4dc;
+@background: #fffdf8;
+@border: #ffc143;
 
 .announcement-card {
   width: 340px;

openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/AnnouncementCard/AnnouncementCard.tsx

@@ -35,7 +35,7 @@ const AnnouncementCard: FC<Props> = ({ onClick, announcement }) => {
       <Space align="start" size={12}>
         <SVGIcons
           alt="announcement"
-          icon={Icons.ANNOUNCEMENT_BLACK}
+          icon={Icons.ANNOUNCEMENT_YELLOW}
           width="24px"
         />
         <div>

openmetadata-ui/src/main/resources/ui/src/components/dropdown/AnchorDropDownList.style.less

@@ -0,0 +1,29 @@
+/*
+ *  Copyright 2021 Collate
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+.anchor-drop-down {
+  --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  position: absolute;
+  transform-origin: top right;
+  z-index: 9999;
+  right: 0px;
+  margin-top: 0.5rem;
+  min-width: max-content;
+  border-radius: 0.375rem;
+  width: 10rem;
+  padding: 0.3rem;
+  background-color: #ffffff;
+  box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, var(--shadow);
+  outline: 0.09rem solid #0000000d;
+}

openmetadata-ui/src/main/resources/ui/src/components/dropdown/AnchorDropDownList.tsx

@@ -17,6 +17,7 @@ import { Link } from 'react-router-dom';
 import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
 import { useAuth } from '../../hooks/authHooks';
 import SVGIcons from '../../utils/SvgUtils';
+import './AnchorDropDownList.style.less';
 import { DropDownListItem, DropDownListProp } from './types';
 
 const AnchorDropDownList = ({ dropDownList, setIsOpen }: DropDownListProp) => {
@@ -33,9 +34,7 @@ const AnchorDropDownList = ({ dropDownList, setIsOpen }: DropDownListProp) => {
       <div
         aria-labelledby="menu-button"
         aria-orientation="vertical"
-        className="tw-origin-top-right tw-absolute tw-z-9998
-              tw-right-0 tw-mt-2 tw-min-w-max tw-rounded-md tw-shadow-lg
-              tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 focus:tw-outline-none"
+        className="anchor-drop-down"
         role="menu">
         <div className="py-1" role="none">
           {dropDownList.map((item: DropDownListItem, index: number) =>

openmetadata-ui/src/main/resources/ui/src/constants/Feeds.constants.ts

@@ -62,6 +62,6 @@ export enum EntityField {
   TASKS = 'tasks',
 }
 
-export const ANNOUNCEMENT_BG = '#FCF6FC';
-export const ANNOUNCEMENT_BORDER = 'rgba(176, 42, 172, 0.6)';
+export const ANNOUNCEMENT_BG = '#FFFDF8';
+export const ANNOUNCEMENT_BORDER = '#FFC143';
 export const TASK_BORDER = '#C6B5F6';

openmetadata-ui/src/main/resources/ui/src/constants/constants.ts

@@ -41,6 +41,7 @@ export const JSON_TAB_SIZE = 2;
 export const PAGE_SIZE = 10;
 export const PAGE_SIZE_BASE = 12;
 export const PAGE_SIZE_MEDIUM = 15;
+export const SERVICE_VIEW_CAP = 20;
 export const PAGE_SIZE_LARGE = 100;
 export const API_RES_MAX_SIZE = 100000;
 export const LIST_SIZE = 5;

openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.component.tsx

@@ -35,7 +35,7 @@ import PageContainerV1 from '../../components/containers/PageContainerV1';
 import Loader from '../../components/Loader/Loader';
 import Users from '../../components/Users/Users.component';
 import { UserDetails } from '../../components/Users/Users.interface';
-import { LIST_SIZE } from '../../constants/constants';
+import { PAGE_SIZE } from '../../constants/constants';
 import { myDataSearchIndex } from '../../constants/Mydata.constants';
 import { getUserCurrentTab } from '../../constants/usersprofile.constants';
 import { FeedFilter } from '../../enums/mydata.enum';
@@ -123,7 +123,7 @@ const UserPage = () => {
         ? `owner.id:${userData.id}`
         : `followers:${userData.id}`,
       entity.currPage,
-      LIST_SIZE,
+      PAGE_SIZE,
       ``,
       '',
       '',

openmetadata-ui/src/main/resources/ui/src/pages/forgot-password/forgot-password.component.tsx

@@ -45,7 +45,7 @@ const ForgotPassword = () => {
             <SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="152" />
           </Col>
           <Col className="flex-center text-center mt-8" span={24}>
-            <Typography.Text className="text-xl text-semi-bold text-grey-muted">
+            <Typography.Text className="text-xl font-medium text-grey-muted">
               Enter your registered email to receive password reset link
             </Typography.Text>
           </Col>

openmetadata-ui/src/main/resources/ui/src/pages/login/index.tsx

@@ -189,7 +189,7 @@ const SigninPage = () => {
               'sso-container': !isAuthProviderBasic,
             })}>
             <SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="152" />
-            <Typography.Text className="mt-8 w-80 text-xl text-semi-bold text-grey-muted">
+            <Typography.Text className="mt-8 w-80 text-xl font-medium text-grey-muted">
               {t('label.om-description')}{' '}
             </Typography.Text>
 

openmetadata-ui/src/main/resources/ui/src/pages/reset-password/reset-password.component.tsx

@@ -104,7 +104,7 @@ const ResetPassword = () => {
             </Col>
 
             <Col className="mt-12 text-center" span={24}>
-              <Typography.Text className="tw-text-xl text-semi-bold tw-text-grey-muted">
+              <Typography.Text className="tw-text-xl font-medium tw-text-grey-muted">
                 Reset your Password
               </Typography.Text>
             </Col>

openmetadata-ui/src/main/resources/ui/src/pages/services/ServicesPage.tsx

@@ -22,7 +22,7 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
 import Loader from '../../components/Loader/Loader';
 import { usePermissionProvider } from '../../components/PermissionProvider/PermissionProvider';
 import Services from '../../components/Services/Services';
-import { pagingObject } from '../../constants/constants';
+import { pagingObject, SERVICE_VIEW_CAP } from '../../constants/constants';
 import { NO_PERMISSION_TO_VIEW } from '../../constants/HelperTextUtil';
 import { SERVICE_CATEGORY } from '../../constants/Services.constant';
 import { ServiceCategory as Category } from '../../enums/service.enum';
@@ -59,7 +59,7 @@ const ServicesPage = () => {
   const getServiceDetails = async (type: string) => {
     setIsLoading(true);
     try {
-      const { data, paging } = await getServices(type);
+      const { data, paging } = await getServices(type, SERVICE_VIEW_CAP);
       setServiceDetails(data);
       setPaging(paging);
     } catch (error) {

openmetadata-ui/src/main/resources/ui/src/pages/signup/basic-signup.component.tsx

@@ -76,7 +76,7 @@ const BasicSignUp = () => {
         <div className="tw-w-5/12">
           <div className="mt-4 tw-text-center flex-center flex-col">
             <SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="152" />
-            <Typography.Text className="mt-8 w-80 tw-text-xl text-semi-bold tw-text-grey-muted">
+            <Typography.Text className="mt-8 w-80 tw-text-xl font-medium tw-text-grey-muted">
               Centralized Metadata Store, Discover, Collaborate and get your
               Data Right
             </Typography.Text>

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

@@ -177,9 +177,6 @@
   margin-right: auto;
   margin-left: auto;
 }
-.text-semi-bold {
-  font-weight: 500;
-}
 .bg-body-main {
   background: @body-bg-color;
 }

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

@@ -0,0 +1,50 @@
+/*
+ *  Copyright 2022 Collate
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+//font weight
+.font-normal {
+  font-weight: 400;
+}
+.font-medium {
+  font-weight: 500;
+}
+.font-semibold {
+  font-weight: 600;
+}
+.font-bold {
+  font-weight: 700;
+}
+
+// font size
+.text-xs {
+  font-size: 12px;
+}
+.text-lg {
+  font-size: 18px;
+}
+.text-sm {
+  font-size: 14px;
+}
+.text-base {
+  font-size: 1rem /* 16px */;
+  line-height: 1.5rem /* 24px */;
+}
+.text-xl {
+  font-size: 1.25rem /* 20px */;
+  line-height: 1.75rem /* 28px */;
+}
+
+.text-2xl {
+  font-size: 1.5rem /* 24px */;
+  line-height: 2rem /* 32px */;
+}

openmetadata-ui/src/main/resources/ui/src/styles/index.js

@@ -26,6 +26,7 @@ import './components/react-awesome-query.less';
 import './components/size.less';
 import './components/step.less';
 import './fonts.css';
+import './fonts.less';
 import './modal.less';
 import './myDataDetailsTemp.css';
 import './slick-carousel.scss';

openmetadata-ui/src/main/resources/ui/src/utils/ManageUtils.ts

@@ -11,7 +11,9 @@
  *  limitations under the License.
  */
 
+import { toString } from 'lodash';
 import AppState from '../AppState';
+import { WILD_CARD_CHAR } from '../constants/char.constants';
 import { Team } from '../generated/entity/teams/team';
 import { User } from '../generated/entity/teams/user';
 import { EntityReference } from '../generated/type/entityUsage';
@@ -21,15 +23,23 @@ import { getEntityName } from './CommonUtils';
  * @param listUsers - List of users
  * @param listTeams - List of teams
  * @param excludeCurrentUser - Wether to exclude current user to be on list. Needed when calls from searching
+ * @param searchQuery - search query for user or team
  * @returns List of user or team
  */
 export const getOwnerList = (
   listUsers?: User[],
   listTeams?: Team[],
-  excludeCurrentUser?: boolean
+  excludeCurrentUser?: boolean,
+  searchQuery?: string
 ) => {
   const userDetails = AppState.getCurrentUserDetails();
 
+  const isAdminIncludeInQuery =
+    getEntityName(userDetails).includes(toString(searchQuery)) ||
+    searchQuery === WILD_CARD_CHAR
+      ? true
+      : false;
+
   if (userDetails?.isAdmin) {
     const users = (listUsers || [])
       .map((user) => ({
@@ -47,7 +57,7 @@ export const getOwnerList = (
     }));
 
     return [
-      ...(!excludeCurrentUser
+      ...(!excludeCurrentUser && isAdminIncludeInQuery
         ? [
             {
               name: getEntityName(userDetails),

openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx

@@ -30,6 +30,7 @@ import IconAnnouncementsBasicPrimary from '../assets/svg/announcements-basic-pri
 import IconAnnouncementsBlack from '../assets/svg/announcements-black.svg';
 import IconAnnouncementsPrimary from '../assets/svg/announcements-primary.svg';
 import IconAnnouncementsPurple from '../assets/svg/announcements-purple.svg';
+import IconAnnouncementsYellow from '../assets/svg/announcements-yellow.svg';
 import IconAnnouncements from '../assets/svg/announcements.svg';
 import IconAPI from '../assets/svg/api.svg';
 import IconArrowDownLight from '../assets/svg/arrow-down-light.svg';
@@ -340,6 +341,7 @@ export const Icons = {
   ANNOUNCEMENT_BLACK: 'icon-announcement-black',
   ANNOUNCEMENT_PURPLE: 'icon-announcement-purple',
   ANNOUNCEMENT_PRIMARY: 'icon-announcement-primary',
+  ANNOUNCEMENT_YELLOW: 'icon-announcement-yellow',
   ANNOUNCEMENT_BASIC_PRIMARY: 'icon-announcement-basic-primary',
   CHEVRON_DOWN: 'icon-chevron-down',
   ICON_UP: 'icon-up',
@@ -910,6 +912,10 @@ const SVGIcons: FunctionComponent<Props> = ({ icon, ...props }: Props) => {
     case Icons.ANNOUNCEMENT_PURPLE:
       IconComponent = IconAnnouncementsPurple;
 
+      break;
+    case Icons.ANNOUNCEMENT_YELLOW:
+      IconComponent = IconAnnouncementsYellow;
+
       break;
     case Icons.ANNOUNCEMENT_BLACK:
       IconComponent = IconAnnouncementsBlack;