upcoming: [M3-7866] - Improve Proxy Account Visibility with Distinct Visual Indicators

packages/manager/.changeset/pr-10277-upcoming-features-1710340806902.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Improve Proxy Account Visibility with Distinct Visual Indicators ([#10277](https://github.com/linode/manager/pull/10277))

packages/manager/src/components/GravatarForProxy.tsx

@@ -0,0 +1,47 @@
+import { styled } from '@mui/material/styles';
+import * as React from 'react';
+
+import ProxyUserIcon from 'src/assets/icons/parent-child.svg';
+import { Box } from 'src/components/Box';
+
+interface Props {
+  height?: number;
+  width?: number;
+}
+
+export const GravatarForProxy = ({ height = 34, width = 34 }: Props) => {
+  return (
+    <Box
+      sx={(theme) => ({
+        background: `linear-gradient(60deg, ${theme.color.blue}, ${theme.color.teal} )`,
+        backgroundSize: '300% 300%',
+        borderRadius: '50%',
+        height,
+        padding: '3px',
+        width,
+      })}
+    >
+      <Box
+        sx={(theme) => ({
+          background: theme.color.white,
+          borderRadius: '50%',
+          color: theme.palette.text.primary,
+          height: `calc(${height}px - 6px)`,
+          overflow: 'hidden',
+          position: 'relative',
+          width: `calc(${width}px - 6px)`,
+        })}
+      >
+        <StyledProxyUserIcon />
+      </Box>
+    </Box>
+  );
+};
+
+const StyledProxyUserIcon = styled(ProxyUserIcon, {
+  label: 'styledProxyUserIcon',
+})(() => ({
+  bottom: 0,
+  left: 0,
+  position: 'absolute',
+}));

packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx

@@ -13,12 +13,12 @@ import { Paper } from 'src/components/Paper';
 import { SingleTextFieldForm } from 'src/components/SingleTextFieldForm/SingleTextFieldForm';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
+import { RESTRICTED_FIELD_TOOLTIP } from 'src/features/Account/constants';
 import { useNotificationsQuery } from 'src/queries/accountNotifications';
 import { useMutateProfile, useProfile } from 'src/queries/profile';
 import { ApplicationState } from 'src/store';
 
 import { TimezoneForm } from './TimezoneForm';
-import { RESTRICTED_FIELD_TOOLTIP } from 'src/features/Account/constants';
 
 export const DisplaySettings = () => {
   const theme = useTheme();
@@ -68,39 +68,48 @@ export const DisplaySettings = () => {
 
   return (
     <Paper>
-      <Box
-        sx={{
-          gap: 2,
-          marginBottom: theme.spacing(4),
-          marginTop: theme.spacing(),
-        }}
-        display="flex"
-      >
-        <GravatarByEmail email={profile?.email ?? ''} height={88} width={88} />
-        <div>
-          <Typography sx={{ fontSize: '1rem' }} variant="h2">
-            Profile photo
-            <StyledTooltipIcon
-              sxTooltipIcon={{
-                marginLeft: '6px',
-                marginTop: '-2px',
-                padding: 0,
-              }}
-              interactive
-              status="help"
-              text={tooltipIconText}
+      {!isProxyUser && (
+        <>
+          <Box
+            sx={{
+              gap: 2,
+              marginBottom: theme.spacing(4),
+              marginTop: theme.spacing(),
+            }}
+            display="flex"
+          >
+            <GravatarByEmail
+              email={profile?.email ?? ''}
+              height={88}
+              width={88}
             />
-          </Typography>
-          <StyledProfileCopy variant="body1">
-            Create, upload, and manage your globally recognized avatar from a
-            single place with Gravatar.
-          </StyledProfileCopy>
-          <StyledAddImageLink external to="https://en.gravatar.com/">
-            Manage photo
-          </StyledAddImageLink>
-        </div>
-      </Box>
-      <Divider />
+            <div>
+              <Typography sx={{ fontSize: '1rem' }} variant="h2">
+                Profile photo
+                <StyledTooltipIcon
+                  sxTooltipIcon={{
+                    marginLeft: '6px',
+                    marginTop: '-2px',
+                    padding: 0,
+                  }}
+                  interactive
+                  status="help"
+                  text={tooltipIconText}
+                />
+              </Typography>
+              <StyledProfileCopy variant="body1">
+                Create, upload, and manage your globally recognized avatar from
+                a single place with Gravatar.
+              </StyledProfileCopy>
+              <StyledAddImageLink external to="https://en.gravatar.com/">
+                Manage photo
+              </StyledAddImageLink>
+            </div>
+          </Box>
+          <Divider />
+        </>
+      )}
+
       <SingleTextFieldForm
         tooltipText={
           profile?.restricted

packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx

@@ -11,6 +11,7 @@ import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { Divider } from 'src/components/Divider';
 import { GravatarByEmail } from 'src/components/GravatarByEmail';
+import { GravatarForProxy } from 'src/components/GravatarForProxy';
 import { Hidden } from 'src/components/Hidden';
 import { Link } from 'src/components/Link';
 import { Stack } from 'src/components/Stack';
@@ -213,6 +214,13 @@ export const UserMenu = React.memo(() => {
         title="Profile & Account"
       >
         <Button
+          startIcon={
+            isProxyUser ? (
+              <GravatarForProxy />
+            ) : (
+              <GravatarByEmail email={profile?.email ?? ''} />
+            )
+          }
           sx={(theme) => ({
             backgroundColor: open ? theme.bg.app : undefined,
             height: '50px',
@@ -224,7 +232,6 @@ export const UserMenu = React.memo(() => {
           disableRipple
           endIcon={getEndIcon()}
           onClick={handleClick}
-          startIcon={<GravatarByEmail email={profile?.email ?? ''} />}
         >
           <Hidden mdDown>
             <Stack alignItems={'flex-start'}>