Style : Adding Some style changes according to the feedback in #1710 (#1725)

openmetadata-ui/src/main/resources/ui/src/assets/svg/version-black.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.02649 3.375C9.02649 2.33906 8.18496 1.5 7.14597 1.5C6.10698 1.5 5.26545 2.33906 5.26545 3.375C5.26545 4.22813 5.83666 4.94766 6.61707 5.175C6.60297 5.55234 6.51835 5.84297 6.3585 6.03984C5.9965 6.48984 5.19963 6.56484 4.35575 6.64219C3.69287 6.70312 3.00648 6.76875 2.44467 7.03828V3.66328C3.20863 3.42422 3.76104 2.71406 3.76104 1.875C3.76104 0.839062 2.91951 0 1.88052 0C0.841532 0 0 0.839062 0 1.875C0 2.71406 0.552402 3.42422 1.31636 3.66328V8.33438C0.552402 8.57578 0 9.28594 0 10.125C0 11.1609 0.841532 12 1.88052 12C2.91951 12 3.76104 11.1609 3.76104 10.125C3.76104 9.32812 3.2627 8.64609 2.55751 8.37656C2.63038 8.25469 2.74086 8.14688 2.90775 8.0625C3.28856 7.87031 3.85741 7.81875 4.46153 7.7625C5.4535 7.67109 6.57711 7.56562 7.24 6.74531C7.56909 6.3375 7.73598 5.8125 7.74774 5.15391C8.49054 4.90078 9.02649 4.2 9.02649 3.375ZM1.88052 1.5C2.08738 1.5 2.25662 1.66875 2.25662 1.875C2.25662 2.08125 2.08738 2.25 1.88052 2.25C1.67366 2.25 1.50441 2.08125 1.50441 1.875C1.50441 1.66875 1.67366 1.5 1.88052 1.5ZM1.88052 10.5C1.67366 10.5 1.50441 10.3313 1.50441 10.125C1.50441 9.91875 1.67366 9.75 1.88052 9.75C2.08738 9.75 2.25662 9.91875 2.25662 10.125C2.25662 10.3313 2.08738 10.5 1.88052 10.5ZM7.14597 3C7.35283 3 7.52207 3.16875 7.52207 3.375C7.52207 3.58125 7.35283 3.75 7.14597 3.75C6.93911 3.75 6.76987 3.58125 6.76987 3.375C6.76987 3.16875 6.93911 3 7.14597 3Z" fill="#6B7280"/>
+</svg>

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

@@ -184,7 +184,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
           );
 
           return {
-            name: getPartialNameFromFQN(tableFQN, ['database', 'table']),
+            name: getPartialNameFromFQN(tableFQN, ['database', 'table'], '.'),
             fullyQualifiedName: tableFQN,
             joinCount: joinedCol.joinCount,
           };

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

@@ -652,7 +652,8 @@ const EntityTable = ({
                                         )}>
                                         {getPartialNameFromFQN(
                                           columnJoin?.fullyQualifiedName as string,
-                                          ['database', 'table', 'column']
+                                          ['database', 'table', 'column'],
+                                          '.'
                                         )}
                                       </Link>
                                     </Fragment>

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

@@ -15,6 +15,7 @@ import React, { FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
 import { getExplorePathWithSearch } from '../../constants/constants';
 import { getRecentlySearchedData } from '../../utils/CommonUtils';
+import PopOver from '../common/popover/PopOver';
 
 const RecentSearchedTerms: FunctionComponent = () => {
   const recentlySearchedTerms = getRecentlySearchedData();
@@ -32,12 +33,26 @@ const RecentSearchedTerms: FunctionComponent = () => {
               data-testid={`Recently-Search-${item.term}`}
               key={index}>
               <div className="tw-flex">
+                <i className="fa fa-search tw-text-grey-muted tw-pr-2 tw-self-center" />
                 <Link
                   className="tw-font-medium"
                   to={getExplorePathWithSearch(item.term)}>
                   <button className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline">
-                    <i className="fa fa-search tw-text-grey-muted tw-pr-2" />
+                    {item.term.length > 20 ? (
+                      <PopOver
+                        html={
+                          <div className="tw-flex tw-flex-nowrap">
                             {item.term}
+                          </div>
+                        }
+                        position="top"
+                        size="regular"
+                        trigger="mouseenter">
+                        {item.term.slice(0, 20)}...
+                      </PopOver>
+                    ) : (
+                      item.term
+                    )}
                   </button>
                 </Link>
               </div>

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

@@ -76,8 +76,10 @@ const SchemaTab: FunctionComponent<Props> = ({
 
   const getToggleButtonClasses = (type: string): string => {
     return (
-      'tw-flex-1 tw-text-primary tw-font-medium tw-border tw-border-transparent tw-rounded tw-py-1 tw-px-2 focus:tw-outline-none' +
+      'tw-flex-1 tw-font-medium tw-border tw-border-transparent tw-rounded tw-py-1 tw-px-2 focus:tw-outline-none' +
-      (type === checkedValue ? ' tw-bg-primary-hover-lite tw-border-main' : '')
+      (type === checkedValue
+        ? ' tw-bg-primary tw-text-white tw-border-main'
+        : '')
     );
   };
 

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

@@ -77,6 +77,25 @@ const Appbar: React.FC = (): JSX.Element => {
   };
 
   const supportLinks = [
+    {
+      name: (
+        <span>
+          <SVGIcons
+            alt="API icon"
+            className="tw-align-middle tw--mt-0.5 tw-mr-0.5"
+            icon={Icons.VERSION_BLACK}
+            width="12"
+          />{' '}
+          <span className="tw-text-grey-muted">{`Version ${
+            (version ? version : '?').split('-')[0]
+          }`}</span>
+        </span>
+      ),
+      to: '',
+      disabled: false,
+      icon: <></>,
+      isText: true,
+    },
     {
       name: `Docs`,
       to: urlGitbookDocs,
@@ -130,7 +149,6 @@ const Appbar: React.FC = (): JSX.Element => {
     return (
       <span data-testid="greeting-text">
         <span className="tw-font-medium">{name}</span>
-        <hr className="tw--mr-2 tw--ml-2 tw-mt-1.5" />
       </span>
     );
   };
@@ -296,24 +314,7 @@ const Appbar: React.FC = (): JSX.Element => {
               <DropDown
                 dropDownList={[
                   {
-                    name: (
+                    name: getUserDisplayName(),
-                      <p className="tw-flex tw-flex-col">
-                        <span>Signed in as</span>
-                        {getUserDisplayName()}
-                      </p>
-                    ),
-                    to: '',
-                    disabled: false,
-                    icon: <></>,
-                    isText: true,
-                  },
-                  {
-                    name: (
-                      <span className="tw-text-grey-muted tw-cursor-text tw-text-xs">
-                        {`Version ${(version ? version : '?').split('-')[0]}`}
-                        <hr className="tw--mr-2 tw--ml-2 tw-mt-2" />
-                      </span>
-                    ),
                     to: '',
                     disabled: false,
                     icon: <></>,
@@ -347,6 +348,7 @@ const Appbar: React.FC = (): JSX.Element => {
                     )}
                   </>
                 }
+                isDropDownIconVisible={false}
                 type="link"
               />
             </div>

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

@@ -31,7 +31,7 @@ const AnchorDropDownList = ({ dropDownList, setIsOpen }: DropDownListProp) => {
         aria-labelledby="menu-button"
         aria-orientation="vertical"
         className="tw-origin-top-right tw-absolute tw-z-10
-              tw-right-0 tw-mt-2 tw-w-32 tw-rounded-md tw-shadow-lg
+              tw-right-0 tw-mt-2 tw-w-36 tw-rounded-md tw-shadow-lg
               tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 focus:tw-outline-none"
         role="menu">
         <div className="py-1" role="none">

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

@@ -88,6 +88,7 @@ import IconTier from '../assets/svg/tier.svg';
 import IconTopicGrey from '../assets/svg/topic-grey.svg';
 import IconTopic from '../assets/svg/topic.svg';
 import IconUser from '../assets/svg/user.svg';
+import IconVersionBlack from '../assets/svg/version-black.svg';
 import IconVersionWhite from '../assets/svg/version-white.svg';
 import IconVersion from '../assets/svg/version.svg';
 import IconWarning from '../assets/svg/warning.svg';
@@ -173,6 +174,7 @@ export const Icons = {
   DBTMODEL: 'dbtmodel',
   VERSION: 'icon-version',
   VERSION_WHITE: 'icon-version-white',
+  VERSION_BLACK: 'icon-version-black',
   ICON_DEPLOY: 'icon-deploy',
   ICON_PLUS: 'icon-plus',
   ICON_MINUS: 'icon-minus',
@@ -472,6 +474,10 @@ const SVGIcons: FunctionComponent<Props> = ({
     case Icons.VERSION_WHITE:
       IconComponent = IconVersionWhite;
 
+      break;
+    case Icons.VERSION_BLACK:
+      IconComponent = IconVersionBlack;
+
       break;
     case Icons.ICON_DEPLOY:
       IconComponent = IconDeploy;