From 62229f0bcbba24b94a93a1d4ab35c586e6544b32 Mon Sep 17 00:00:00 2001
From: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:14:09 -0400
Subject: [PATCH] upcoming: [M3-7866] - Improve Proxy Account Visibility with
 Distinct Visual Indicators (#10277)

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
---
 ...r-10277-upcoming-features-1710340806902.md |  5 ++
 .../manager/src/assets/icons/parent-child.svg |  1 +
 .../src/components/GravatarForProxy.tsx       | 47 ++++++++++++
 .../DisplaySettings/DisplaySettings.tsx       | 75 +++++++++++--------
 .../features/TopMenu/UserMenu/UserMenu.tsx    |  9 ++-
 5 files changed, 103 insertions(+), 34 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10277-upcoming-features-1710340806902.md
 create mode 100644 packages/manager/src/assets/icons/parent-child.svg
 create mode 100644 packages/manager/src/components/GravatarForProxy.tsx

diff --git a/packages/manager/.changeset/pr-10277-upcoming-features-1710340806902.md b/packages/manager/.changeset/pr-10277-upcoming-features-1710340806902.md
new file mode 100644
index 00000000000..cfd85b7cacd
--- /dev/null
+++ b/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))
diff --git a/packages/manager/src/assets/icons/parent-child.svg b/packages/manager/src/assets/icons/parent-child.svg
new file mode 100644
index 00000000000..4edbab05ed4
--- /dev/null
+++ b/packages/manager/src/assets/icons/parent-child.svg
@@ -0,0 +1 @@
+<svg version="1.1" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg"><path d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2h61.4C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/packages/manager/src/components/GravatarForProxy.tsx b/packages/manager/src/components/GravatarForProxy.tsx
new file mode 100644
index 00000000000..5bbef1d15b1
--- /dev/null
+++ b/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',
+}));
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index d86f9f66760..bff3afe0926 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/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
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index 8c01df5b72d..ff626948db6 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/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';
@@ -212,6 +213,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',
@@ -223,7 +231,6 @@ export const UserMenu = React.memo(() => {
           disableRipple
           endIcon={getEndIcon()}
           onClick={handleClick}
-          startIcon={<GravatarByEmail email={profile?.email ?? ''} />}
         >
           <Hidden mdDown>
             <Stack alignItems={'flex-start'}>