Fix: #2643 0.8 UI Improvements (#2658)

* Fix:  #2643 0.8 UI Improvements

* Aliging text to the top.

* Covering point 12th of #2643

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

@@ -1,3 +1,3 @@
-<svg width="14" height="15" viewBox="0 0 14 15" fill="#6B7280" xmlns="http://www.w3.org/2000/svg">
+<svg width="14" height="15" viewBox="0 0 14 15" fill="#37352f" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.8086 12.1051L11.0824 9.37891C10.9594 9.25586 10.7926 9.1875 10.6176 9.1875H10.1719C10.9266 8.22227 11.375 7.0082 11.375 5.6875C11.375 2.5457 8.8293 0 5.6875 0C2.5457 0 0 2.5457 0 5.6875C0 8.8293 2.5457 11.375 5.6875 11.375C7.0082 11.375 8.22227 10.9266 9.1875 10.1719V10.6176C9.1875 10.7926 9.25586 10.9594 9.37891 11.0824L12.1051 13.8086C12.3621 14.0656 12.7777 14.0656 13.032 13.8086L13.8059 13.0348C14.0629 12.7777 14.0629 12.3621 13.8086 12.1051ZM5.6875 9.1875C3.7543 9.1875 2.1875 7.62344 2.1875 5.6875C2.1875 3.7543 3.75156 2.1875 5.6875 2.1875C7.6207 2.1875 9.1875 3.75156 9.1875 5.6875C9.1875 7.6207 7.62344 9.1875 5.6875 9.1875Z" fill="#6B7280"/>
+<path d="M13.8086 12.1051L11.0824 9.37891C10.9594 9.25586 10.7926 9.1875 10.6176 9.1875H10.1719C10.9266 8.22227 11.375 7.0082 11.375 5.6875C11.375 2.5457 8.8293 0 5.6875 0C2.5457 0 0 2.5457 0 5.6875C0 8.8293 2.5457 11.375 5.6875 11.375C7.0082 11.375 8.22227 10.9266 9.1875 10.1719V10.6176C9.1875 10.7926 9.25586 10.9594 9.37891 11.0824L12.1051 13.8086C12.3621 14.0656 12.7777 14.0656 13.032 13.8086L13.8059 13.0348C14.0629 12.7777 14.0629 12.3621 13.8086 12.1051ZM5.6875 9.1875C3.7543 9.1875 2.1875 7.62344 2.1875 5.6875C2.1875 3.7543 3.75156 2.1875 5.6875 2.1875C7.6207 2.1875 9.1875 3.75156 9.1875 5.6875C9.1875 7.6207 7.62344 9.1875 5.6875 9.1875Z" fill="#37352f"/>
 </svg>

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

@@ -172,7 +172,7 @@ const EntityInfoDrawer = ({
           </svg>
         </div>
       </header>
-      <hr className="tw-mt-3 tw-border-primary-hover-lite" />
+      <hr className="tw-mt-3 tw-border-separator" />
       {isLoading ? (
         <Loader />
       ) : (
@@ -209,7 +209,7 @@ const EntityInfoDrawer = ({
               })}
             </div>
           </section>
-          <hr className="tw-mt-3 tw-border-primary-hover-lite" />
+          <hr className="tw-mt-3 tw-border-separator" />
           <section className="tw-mt-1">
             <span className="tw-text-grey-muted">Tags</span>
             <div className="tw-flex tw-flex-wrap tw-pt-1.5">
@@ -222,7 +222,7 @@ const EntityInfoDrawer = ({
               )}
             </div>
           </section>
-          <hr className="tw-mt-3 tw-border-primary-hover-lite" />
+          <hr className="tw-mt-3 tw-border-separator" />
           <section className="tw-mt-1">
             <span className="tw-text-grey-muted">Description</span>
             <div>

openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.style.css

@@ -19,12 +19,11 @@
   right: 0;
   width: 325px;
   z-index: 200;
-  margin-right: -16px;
   overflow-y: auto;
   padding: 16px;
   transform: translateX(100%);
   display: none;
-  border-left: 1px solid #d9ceee;
+  border-left: 1px solid #dce3ec;
   transition: transform 0.3s ease-out;
 }
 

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

@@ -624,7 +624,10 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
   return (
     <Fragment>
       {!deleted ? (
-        <div className="tw-relative tw-h-full tw--mx-4 tw--mt-4">
+        <div
+          className={classNames(
+            'tw-relative tw-h-full tw--ml-4 tw--mr-7 tw--mt-4'
+          )}>
           <div className="tw-w-full tw-h-full" ref={reactFlowWrapper}>
             <ReactFlowProvider>
               <ReactFlow
@@ -660,7 +663,7 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
                 onNodeMouseLeave={onNodeMouseLeave}
                 onNodeMouseMove={onNodeMouseMove}>
                 <CustomControls
-                  className="tw-absolute tw-top-1 tw-right-1 tw-bottom-full tw-ml-4 tw-mt-4"
+                  className="tw-absolute tw-top-1 tw-right-3 tw-bottom-full tw-ml-4 tw-mt-4"
                   fitViewParams={{ minZoom: 0.5, maxZoom: 2.5 }}>
                   {!deleted && (
                     <NonAdminAction

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

@@ -344,7 +344,7 @@ const EntityTable = ({
                   return (
                     <td
                       className={classNames(
-                        'tableBody-cell tw-group tw-relative'
+                        'tableBody-cell tw-group tw-relative tw-align-baseline'
                       )}
                       key={index}
                       {...cell.getCellProps()}>
@@ -353,7 +353,7 @@ const EntityTable = ({
                           {...row.getToggleRowExpandedProps({})}
                           className="tw-mr-2 tw-cursor-pointer"
                           style={{
-                            marginLeft: `${row.depth * 25}px`,
+                            marginLeft: `${row.depth * 35}px`,
                           }}>
                           {row.isExpanded ? (
                             <i className="fas fa-caret-down" />
@@ -614,7 +614,7 @@ const EntityTable = ({
                             <span
                               style={{
                                 paddingLeft: `${
-                                  row.canExpand ? '0px' : `${row.depth * 25}px`
+                                  row.canExpand ? '0px' : `${row.depth * 35}px`
                                 }`,
                               }}>
                               {getConstraintIcon(row.original.constraint)}

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

@@ -126,7 +126,14 @@ const EntityVersionTimeLine: React.FC<Props> = ({
                     </span>
                   ) : null}
                 </p>
-                <div className="tw-text-xs tw-font-normal tw-break-all">
+                <div
+                  className={classNames(
+                    'tw-text-xs tw-font-normal tw-break-all',
+                    {
+                      'diff-description':
+                        toString(currV?.version) === currentVersion,
+                    }
+                  )}>
                   {getSummary(currV?.changeDescription)}
                 </div>
                 <p className="tw-text-xs tw-italic">

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

@@ -61,7 +61,6 @@ import { formatDataResponse } from '../../utils/APIUtils';
 import { getCountBadge } from '../../utils/CommonUtils';
 import { getFilterCount, getFilterString } from '../../utils/FilterUtils';
 import { dropdownIcon as DropDownIcon } from '../../utils/svgconstant';
-import SVGIcons from '../../utils/SvgUtils';
 import PageLayout from '../containers/PageLayout';
 import { ExploreProps } from './explore.interface';
 
@@ -317,7 +316,7 @@ const Explore: React.FC<ExploreProps> = ({
           <span className="tw-mr-2">Sort by:</span>
           <span className="tw-relative">
             <Button
-              className="tw-underline"
+              className="hover:tw-no-underline focus:tw-no-underline"
               data-testid="sortBy"
               size="custom"
               theme="primary"
@@ -427,15 +426,6 @@ const Explore: React.FC<ExploreProps> = ({
                   onClick={() => {
                     onTabChange(tabDetail.tab);
                   }}>
-                  <SVGIcons
-                    alt="icon"
-                    className="tw-h-4 tw-w-4 tw-mr-2"
-                    icon={
-                      tabDetail.tab === currentTab
-                        ? tabDetail.selectedIcon
-                        : tabDetail.icon
-                    }
-                  />
                   {tabDetail.label}
                   <span className="tw-pl-2">
                     {getTabCount(tabDetail.index, tabDetail.tab === currentTab)}

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

@@ -66,7 +66,7 @@ const MyData: React.FC<MyDataProps> = ({
       <Fragment>
         <div className="tw-relative tw-mt-5">
           <Button
-            className="tw-underline"
+            className="hover:tw-no-underline focus:tw-no-underline"
             data-testid="feeds"
             size="custom"
             tag="button"

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

@@ -54,7 +54,7 @@ const SchemaTab: FunctionComponent<Props> = ({
           <Searchbar
             placeholder="Find in table..."
             searchValue={searchText}
-            typingInterval={1500}
+            typingInterval={500}
             onSearch={handleSearchAction}
           />
         </div>

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

@@ -127,6 +127,14 @@ const Appbar: React.FC = (): JSX.Element => {
     },
   ];
 
+  const getUserName = () => {
+    const currentUser = isAuthDisabled
+      ? appState.users[0]
+      : appState.userDetails;
+
+    return currentUser?.displayName || currentUser?.name || 'User';
+  };
+
   const getUserData = () => {
     const currentUser = isAuthDisabled
       ? appState.users[0]
@@ -244,6 +252,7 @@ const Appbar: React.FC = (): JSX.Element => {
           searchValue={searchValue || ''}
           settingDropdown={navLinkSettings}
           supportDropdown={supportLinks}
+          username={getUserName()}
         />
       ) : null}
     </>

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

@@ -256,15 +256,15 @@ const Suggestions = ({ searchText, isOpen, setIsOpen }: SuggestionProp) => {
       {options.length > 0 && isOpen ? (
         <>
           <button
-            className="tw-z-10 tw-fixed tw-inset-0 tw-h-full tw-w-full tw-bg-black tw-opacity-0"
+            className="tw-z-10 tw-fixed tw-inset-0 tw-h-full tw-w-full tw-bg-black tw-opacity-0 "
             onClick={() => setIsOpen(false)}
           />
           <div
             aria-labelledby="menu-button"
             aria-orientation="vertical"
             className="tw-origin-top-right tw-absolute tw-z-20
-          tw-w-full tw-mt-1 tw-rounded-md tw-shadow-lg
+          tw-w-600 tw-mt-1 tw-rounded-md tw-shadow-lg
-        tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 focus:tw-outline-none"
+        tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 focus:tw-outline-none tw-ml-4"
             role="menu">
             {getEntitiesSuggestions()}
           </div>

openmetadata-ui/src/main/resources/ui/src/components/common/searchbar/Searchbar.tsx

@@ -36,6 +36,7 @@ const Searchbar = ({
   removeMargin = false,
 }: Props) => {
   const [userSearch, setUserSearch] = useState('');
+  const [searchIcon, setSearchIcon] = useState<string>('icon-searchv1');
   // const typingTimer = useRef<ReturnType<typeof setInterval>>();
 
   useEffect(() => {
@@ -75,7 +76,7 @@ const Searchbar = ({
         <SVGIcons
           alt="icon-search"
           className="tw-absolute tw-block tw-z-10 tw-w-4 tw-h-4 tw-top-2 tw-left-2 tw-text-center tw-pointer-events-none"
-          icon="icon-searchv1"
+          icon={searchIcon}
         />
         <input
           className="tw-form-inputs tw-relative tw-px-3 tw-py-1 tw-pl-8"
@@ -83,7 +84,9 @@ const Searchbar = ({
           placeholder={placeholder}
           type="text"
           value={userSearch}
+          onBlur={() => setSearchIcon('icon-searchv1')}
           onChange={handleChange}
+          onFocus={() => setSearchIcon('icon-searchv1color')}
         />
       </div>
     </div>

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

@@ -22,6 +22,7 @@ export interface NavBarProps {
   isFeatureModalOpen: boolean;
   pathname: string;
   isSearchBoxOpen: boolean;
+  username: string;
   handleSearchBoxOpen: (value: boolean) => void;
   handleFeatureModal: (value: boolean) => void;
   handleSearchChange: (value: string) => void;

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

@@ -23,10 +23,10 @@ import { activeLink, normalLink } from '../../utils/styleconstant';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import SearchOptions from '../app-bar/SearchOptions';
 import Suggestions from '../app-bar/Suggestions';
+import Avatar from '../common/avatar/Avatar';
 import PopOver from '../common/popover/PopOver';
 import DropDown from '../dropdown/DropDown';
 import { WhatsNewModal } from '../Modals/WhatsNewModal';
-import { ReactComponent as IconDefaultUserProfile } from './../../assets/svg/ic-default-profile.svg';
 import { NavBarProps } from './NavBar.interface';
 
 const NavBar = ({
@@ -37,6 +37,7 @@ const NavBar = ({
   isFeatureModalOpen,
   isTourRoute = false,
   pathname,
+  username,
   isSearchBoxOpen,
   handleSearchBoxOpen,
   handleFeatureModal,
@@ -86,7 +87,7 @@ const NavBar = ({
             />
             <input
               autoComplete="off"
-              className="tw-relative search-grey tw-rounded tw-border tw-border-main focus:tw-outline-none tw-pl-2 tw-pt-2 tw-pb-1.5 tw-form-inputs"
+              className="tw-relative search-grey tw-rounded tw-border tw-border-main focus:tw-outline-none tw-pl-2 tw-pt-2 tw-pb-1.5 tw-form-inputs tw-ml-4"
               data-testid="searchBox"
               id="searchBox"
               placeholder="Search for Table, Topics, Dashboards and Pipeline"
@@ -190,14 +191,7 @@ const NavBar = ({
                         />
                       </div>
                     ) : (
-                      <IconDefaultUserProfile
+                      <Avatar name={username} width="30" />
-                        className="tw--mr-2"
-                        style={{
-                          height: '22px',
-                          width: '22px',
-                          borderRadius: '50%',
-                        }}
-                      />
                     )}
                   </PopOver>
                 </>

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

@@ -376,7 +376,7 @@ const ServicesPage = () => {
 
               {getCountBadge(
                 servicesCount[tab.name],
-                '',
+                'tw-self-center',
                 tab.name === serviceName
               )}
             </div>

openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx

@@ -224,6 +224,7 @@ const TourPage = () => {
         searchValue={searchValue}
         settingDropdown={[]}
         supportDropdown={[]}
+        username="User"
       />
       <Tour steps={getSteps(TOUR_SEARCH_TERM, clearSearchTerm)} />
       {getCurrentPage(currentPage)}

openmetadata-ui/src/main/resources/ui/src/styles/temp.css

@@ -707,6 +707,9 @@ body .list-option.rdw-option-active {
   text-decoration: line-through;
   width: fit-content;
 }
+.diff-description {
+  color: #008376;
+}
 
 /* status style */
 .tw-bg-status-success {

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

@@ -455,7 +455,7 @@ export const getInfoElements = (data: ExtraInfo) => {
               {data.key === 'Owner' ? (
                 <span
                   className={classNames(
-                    'tw-mr-1 tw-inline-block tw-truncate tw-align-text-bottom',
+                    'tw-mr-1 tw-inline-block tw-truncate tw-align-middle',
                     { 'tw-w-52': (displayVal as string).length > 32 }
                   )}
                   title={displayVal as string}>

openmetadata-ui/src/main/resources/ui/tailwind.config.js

@@ -136,6 +136,7 @@ module.exports = {
         'screen-lg': '992px',
         'screen-xl': '1200px',
         'screen-xxl': '1440px',
+        600: '600px',
       },
       minWidth: {
         badgeCount: '30px',