Update Inherited owner style for all the Avatars and minor css fixes (#20696)

* inherited owner style changes

* minor fix

* delete icon fix

* update avatar styles

* address pr comments

* minor fix

openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/task-tab-new.less

@@ -45,7 +45,7 @@
     &:last-child {
       border-left: none;
     }
-    &.ant-btn.ant-btn-default:not(:hover) {
+    &.ant-btn.ant-btn-default:not(:hover):not(:disabled) {
       border-color: @blue-12;
     }
   }

openmetadata-ui/src/main/resources/ui/src/components/ProfileCard/ProfileSectionUserDetailsCard.component.tsx

@@ -20,6 +20,7 @@ import { ReactComponent as DeleteIcon } from '../../assets/svg/ic-trash.svg';
 import { User } from '../../generated/entity/teams/user';
 import { isMaskedEmail } from '../../utils/Users.util';
 
+import Icon from '@ant-design/icons';
 import { AxiosError } from 'axios';
 import { ICON_DIMENSION_USER_PAGE } from '../../constants/constants';
 import { EntityType } from '../../enums/entity.enum';
@@ -294,7 +295,11 @@ const ProfileSectionUserDetailsCard = ({
         <span
           className="user-profile-deleted-badge"
           data-testid="deleted-badge">
-          <DeleteIcon className="m-r-xss font-medium text-xs" />
+          <Icon
+            className="m-r-xss font-medium text-md ant-icon"
+            component={DeleteIcon}
+          />
+
           {t('label.deleted')}
         </span>
       )}

openmetadata-ui/src/main/resources/ui/src/components/common/OwnerAvtar/OwnerAvatar.tsx

@@ -57,10 +57,10 @@ export const OwnerAvatar: React.FC<OwnerAvatarProps> = ({
         key="profile-picture"
         name={owner.name ?? ''}
         type="circle"
-        width={isCompactView ? '18' : `${avatarSize}`}
+        width={isCompactView ? '24' : `${avatarSize}`}
       />
 
-      {inheritedIcon && !isCompactView && (
+      {inheritedIcon && (
         <div className="inherited-icon-styling flex-center">
           {inheritedIcon}
         </div>

openmetadata-ui/src/main/resources/ui/src/components/common/OwnerAvtar/owner-avtar.less

@@ -16,38 +16,55 @@
   color: @grey-700;
 }
 
+.avatar-group {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+
+  .owner-avatar-container {
+    margin-right: -4px;
+    transition: transform 0.2s;
+
+    &:not(.is-compact-view) {
+      &:hover {
+        transform: translateY(-2px);
+        z-index: 20 !important;
+      }
+    }
+
+    &:first-child {
+      z-index: 1;
+    }
+
+    &:last-child {
+      margin-right: 0;
+      z-index: 4;
+    }
+  }
+}
+
 .owner-avatar-icon {
   position: relative;
 
   .inherited-icon-styling {
     position: absolute;
-    bottom: -4px;
-    right: -4px;
+    bottom: -2px;
+    right: -2px;
     background-color: white;
     border-radius: 50%;
-
-    width: 16px;
-    height: 16px;
-    z-index: 1;
+    width: 12px;
+    height: 12px;
+    z-index: 5;
     border: 1px solid @blue-9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+
     svg {
       color: @blue-9;
-    }
-  }
-}
-
-// Styling for the avatar group layout (for the overlapping effect)
-.avatar-group {
-  display: flex;
-
-  .owner-avatar-icon {
-    margin-right: -8px;
-
-    border-radius: 50%;
-    overflow: hidden;
-
-    &:hover {
-      z-index: 2;
+      width: 8px;
+      height: 8px;
     }
   }
 }

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

@@ -10,10 +10,8 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Tooltip } from 'antd';
 import classNames from 'classnames';
 import React, { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { ReactComponent as InheritIcon } from '../../../assets/svg/ic-inherit.svg';
 import { EntityReference } from '../../../generated/entity/data/table';
@@ -38,24 +36,21 @@ export const OwnerItem: React.FC<OwnerItemProps> = ({
   ownerDisplayName,
   avatarSize = 32,
 }) => {
-  const { t } = useTranslation();
   const displayName = getEntityName(owner);
   const ownerPath = getOwnerPath(owner);
 
   const inheritedIcon = owner?.inherited ? (
-    <Tooltip
-      title={t('label.inherited-entity', {
-        entity: t('label.owner-plural'),
-      })}>
-      <InheritIcon className="inherit-icon cursor-pointer" width={8} />
-    </Tooltip>
+    <InheritIcon className="inherit-icon cursor-pointer" width={8} />
   ) : null;
 
   return (
     <div
-      className="d-inline-flex items-center owner-avatar-container gap-1"
+      className={classNames('owner-avatar-container', {
+        'is-compact-view': isCompactView,
+        'stacked-view': !isCompactView,
+      })}
       style={{
-        marginLeft: index === 0 || isCompactView ? 0 : '-4px',
+        zIndex: !isCompactView ? index + 1 : undefined, // Lower index items will be underneath
       }}>
       {!isCompactView ? (
         <UserPopOverCard userName={owner.name ?? ''}>
@@ -76,6 +71,7 @@ export const OwnerItem: React.FC<OwnerItemProps> = ({
           <div className="owner-avatar-icon d-flex">
             <OwnerAvatar
               avatarSize={avatarSize}
+              inheritedIcon={inheritedIcon}
               isCompactView={isCompactView}
               owner={owner}
             />
@@ -91,7 +87,6 @@ export const OwnerItem: React.FC<OwnerItemProps> = ({
               {ownerDisplayName ?? displayName}
             </span>
           </Link>
-          {inheritedIcon && <div className="d-flex">{inheritedIcon}</div>}
         </>
       )}
     </div>

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

@@ -114,48 +114,73 @@ export const OwnerLabel = ({
     return (
       <div
         className={classNames({
-          'owner-label-container': !isCompactView,
+          'owner-label-container d-flex flex-col items-start flex-start':
+            !isCompactView,
           'd-flex owner-label-heading gap-2 items-center': isCompactView,
         })}
         data-testid="owner-label">
-        {/* Owner avatars list */}
         {ownerElementsNonCompactView}
-        <div
-          className={classNames(
-            'd-flex items-center w-full flex-wrap',
-            {
-              'gap-2': isCompactView,
-              inherited: Boolean(owners.some((owner) => owner?.inherited)),
-            },
-            className
-          )}>
-          {visibleOwners.map((owner, index) => (
-            <OwnerItem
-              avatarSize={avatarSize}
-              className={className}
-              index={index}
-              isCompactView={isCompactView}
-              key={owner.id}
-              owner={owner}
-              ownerDisplayName={ownerDisplayName?.[index]}
-            />
-          ))}
+        <div className="d-flex items-center flex-center">
+          <div
+            className={classNames(
+              'avatar-group w-full  d-flex relative items-center',
+              {
+                'gap-2 flex-wrap': isCompactView,
+                inherited: Boolean(owners.some((owner) => owner?.inherited)),
+              },
+              className
+            )}>
+            {visibleOwners.map((owner, index) => (
+              <div
+                key={owner.id}
+                style={
+                  !isCompactView
+                    ? {
+                        zIndex: visibleOwners.length - index,
+                        marginRight: '-4px',
+                        position: 'relative',
+                      }
+                    : {}
+                }>
+                <OwnerItem
+                  avatarSize={avatarSize}
+                  className={className}
+                  index={index}
+                  isCompactView={isCompactView}
+                  owner={owner}
+                  ownerDisplayName={ownerDisplayName?.[index]}
+                />
+              </div>
+            ))}
+            {showMoreButton && isCompactView && (
+              <OwnerReveal
+                avatarSize={isCompactView ? 24 : avatarSize}
+                isCompactView={isCompactView}
+                isDropdownOpen={isDropdownOpen}
+                owners={owners.slice(maxVisibleOwners)}
+                remainingCount={remainingOwnersCount}
+                setIsDropdownOpen={setIsDropdownOpen}
+                setShowAllOwners={setShowAllOwners}
+                showAllOwners={showAllOwners}
+              />
+            )}
+          </div>
 
-          {/* Show more button/dropdown */}
-          {showMoreButton && (
-            <OwnerReveal
-              avatarSize={isCompactView ? 24 : avatarSize}
-              isCompactView={isCompactView}
-              isDropdownOpen={isDropdownOpen}
-              owners={owners.slice(maxVisibleOwners)}
-              remainingCount={remainingOwnersCount}
-              setIsDropdownOpen={setIsDropdownOpen}
-              setShowAllOwners={setShowAllOwners}
-              showAllOwners={showAllOwners}
-            />
+          {showMoreButton && !isCompactView && (
+            <div className="m-l-sm">
+              <OwnerReveal
+                avatarSize={isCompactView ? 24 : avatarSize}
+                isCompactView={isCompactView}
+                isDropdownOpen={isDropdownOpen}
+                owners={owners.slice(maxVisibleOwners)}
+                remainingCount={remainingOwnersCount}
+                setIsDropdownOpen={setIsDropdownOpen}
+                setShowAllOwners={setShowAllOwners}
+                showAllOwners={showAllOwners}
+              />
+            </div>
           )}
         </div>
-
         {isCompactView && onUpdate && (
           <UserTeamSelectableList
             hasPermission={Boolean(hasPermission)}

openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/owner-label.less

@@ -61,6 +61,17 @@
       z-index: 1;
     }
   }
+
+  &.stacked-view {
+    position: relative;
+  }
+
+  &.is-compact-view {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+  }
 }
 
 .owner-dropdown-container {