[Permissions][FE] Design followup 5 (#12793)

## Context
- We now display workspace member full name and email in role assignment
picker
- Replaced Forbidden by "Not shared" with lock icon
- Fix Disabled for Danger accent
- Fix avatar URL

<img width="575" alt="Screenshot 2025-06-23 at 16 38 56"
src="https://github.com/user-attachments/assets/08430bfe-29c4-4ac4-821c-9062dfad7150"
/>
<img width="756" alt="Screenshot 2025-06-23 at 16 21 36"
src="https://github.com/user-attachments/assets/c19f31bd-fe9d-415d-aa55-62fa3e228c49"
/>
<img width="373" alt="Screenshot 2025-06-23 at 17 13 08"
src="https://github.com/user-attachments/assets/e2f7878c-7c5a-40b4-a482-8e99292257c3"
/>
<img width="342" alt="Screenshot 2025-06-23 at 17 37 49"
src="https://github.com/user-attachments/assets/04169e85-14dd-4aed-bd71-7aefd601a894"
/>
<img width="434" alt="Screenshot 2025-06-23 at 17 37 35"
src="https://github.com/user-attachments/assets/7caf0967-c4dd-4d0f-90c8-259a85182b19"
/>

packages/twenty-ui/src/input/button/components/Button/Button.tsx

@@ -293,7 +293,9 @@ const StyledButton = styled('button', {
                   }`
                 : 'none'};
               color: ${!inverted
-                ? theme.font.color.danger
+                ? !disabled
+                  ? theme.font.color.danger
+                  : theme.color.red20
                 : theme.font.color.inverted};
               &:hover {
                 background: ${!inverted

packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx

@@ -1,19 +1,15 @@
 import { useTheme } from '@emotion/react';
-import {
-  Avatar,
-  AvatarProps,
-  IconChevronRight,
-  OverflowingTextWithTooltip,
-} from '@ui/display';
+import { Avatar, AvatarProps, IconChevronRight } from '@ui/display';
 import { LightIconButtonGroup } from '@ui/input';
 import { MenuItemIconButton } from '@ui/navigation/menu-item/components/MenuItem';
-import { MouseEvent } from 'react';
+import { MenuItemLeftContent } from '@ui/navigation/menu-item/internals/components/MenuItemLeftContent';
+import { MouseEvent, ReactNode } from 'react';
+import { isDefined } from 'twenty-shared/utils';
 import {
   StyledHoverableMenuItemBase,
   StyledMenuItemLeftContent,
 } from '../internals/components/StyledMenuItemBase';
 import { MenuItemAccent } from '../types/MenuItemAccent';
-import { isDefined } from 'twenty-shared/utils';
 
 export type MenuItemAvatarProps = {
   accent?: MenuItemAccent;
@@ -31,6 +27,7 @@ export type MenuItemAvatarProps = {
   testId?: string;
   text: string;
   hasSubMenu?: boolean;
+  contextualText?: ReactNode;
 };
 
 // TODO: merge with MenuItem
@@ -46,6 +43,7 @@ export const MenuItemAvatar = ({
   avatar,
   hasSubMenu = false,
   text,
+  contextualText,
 }: MenuItemAvatarProps) => {
   const theme = useTheme();
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
@@ -69,16 +67,22 @@ export const MenuItemAvatar = ({
       onMouseLeave={onMouseLeave}
     >
       <StyledMenuItemLeftContent>
-        {isDefined(avatar) && (
-          <Avatar
-            placeholder={avatar.placeholder}
-            avatarUrl={avatar.avatarUrl}
-            placeholderColorSeed={avatar.placeholderColorSeed}
-            size={avatar.size}
-            type={avatar.type}
-          />
-        )}
-        <OverflowingTextWithTooltip text={text ?? ''} />
+        <MenuItemLeftContent
+          LeftIcon={undefined}
+          LeftComponent={
+            isDefined(avatar) ? (
+              <Avatar
+                placeholder={avatar.placeholder}
+                avatarUrl={avatar.avatarUrl}
+                placeholderColorSeed={avatar.placeholderColorSeed}
+                size={avatar.size}
+                type={avatar.type}
+              />
+            ) : undefined
+          }
+          text={text}
+          contextualText={contextualText}
+        />
       </StyledMenuItemLeftContent>
       <div className="hoverable-buttons">
         {showIconButtons && (