Fix #3682: Replace remove icon for Users card on Teams page (#3741)

openmetadata-ui/src/main/resources/ui/.prettierignore

@@ -22,6 +22,9 @@ dist/
 # mockups
 mock-api/
 
+# coverage
+src/test/unit/coverage
+
 # Ignore files (Prettier has trouble parsing files without extension)
 .gitignore
 .prettierignore

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

@@ -237,7 +237,7 @@ const GlossaryDetails = ({ isHasAccess, glossary, updateGlossary }: props) => {
             <Avatar
               name={glossary.owner?.displayName || glossary.owner?.name || ''}
               textClass="tw-text-xs"
-              width="22"
+              width="20"
             />
           </div>
         )}

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

@@ -165,7 +165,7 @@ const EntityPageInfo = ({
               <div className="tw-flex" key={index}>
                 <Avatar
                   name={(follower?.displayName || follower?.name) as string}
-                  width="30"
+                  width="20"
                 />
                 <span className="tw-self-center tw-ml-2">
                   {follower?.displayName || follower?.name}

openmetadata-ui/src/main/resources/ui/src/components/common/glossary-data-card/GlossaryDataCard.tsx

@@ -53,7 +53,7 @@ const GlossaryDataCard: FunctionComponent<Props> = ({
       <div className="tw-mb-3 tw-flex tw-items-center">
         {owner && (
           <div className="tw-inline-block tw-mr-2">
-            <Avatar name={owner} textClass="tw-text-xs" width="22" />
+            <Avatar name={owner} textClass="tw-text-xs" width="20" />
           </div>
         )}
         <span className="tw-text-grey-muted">{owner || 'No owner'}</span>

openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { capitalize } from 'lodash';
 import React from 'react';
@@ -193,12 +194,9 @@ const UserCard = ({
                 })}
                 data-testid="remove"
                 onClick={() => onRemove?.(item.id as string)}>
-                <SVGIcons
-                  alt="delete"
-                  className="tw-text-gray-500 tw-cursor-pointer tw-opacity-0 hover:tw-text-gray-700 group-hover:tw-opacity-100"
-                  icon="icon-delete"
-                  title="Remove"
-                  width="12px"
+                <FontAwesomeIcon
+                  className="tw-cursor-pointer tw-opacity-0 group-hover:tw-opacity-100"
+                  icon="remove"
                 />
               </span>
             </NonAdminAction>

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

@@ -394,7 +394,7 @@ export const getInfoElements = (data: ExtraInfo) => {
           displayVal && displayVal !== '--' ? (
             isString(displayVal) ? (
               <div className="tw-inline-block tw-mr-2">
-                <Avatar name={displayVal} textClass="tw-text-xs" width="22" />
+                <Avatar name={displayVal} textClass="tw-text-xs" width="20" />
               </div>
             ) : (
               <></>