From 0115e51c36d2ade9bd33716346465a9f80a80e48 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Mon, 19 Aug 2024 15:24:34 -0700
Subject: [PATCH 01/46] Swap out gravatar for colored avatar on Profile >
 Display

---
 packages/manager/src/components/Avatar.tsx    | 39 +++++++++++
 .../manager/src/components/ColorPicker.tsx    | 42 ++++++++++++
 .../AvatarColorPickerDialog.tsx               | 68 +++++++++++++++++++
 .../DisplaySettings/DisplaySettings.tsx       | 52 +++++++++++---
 .../manager/src/types/ManagerPreferences.ts   |  1 +
 5 files changed, 192 insertions(+), 10 deletions(-)
 create mode 100644 packages/manager/src/components/Avatar.tsx
 create mode 100644 packages/manager/src/components/ColorPicker.tsx
 create mode 100644 packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx

diff --git a/packages/manager/src/components/Avatar.tsx b/packages/manager/src/components/Avatar.tsx
new file mode 100644
index 00000000000..9d6635555e3
--- /dev/null
+++ b/packages/manager/src/components/Avatar.tsx
@@ -0,0 +1,39 @@
+import { Typography, useTheme } from '@mui/material';
+import { default as _Avatar } from '@mui/material/Avatar';
+import * as React from 'react';
+
+import { usePreferences } from 'src/queries/profile/preferences';
+import { useProfile } from 'src/queries/profile/profile';
+
+export const DEFAULT_AVATAR_SIZE = 28;
+
+interface Props {
+  className?: string;
+  height?: number;
+  width?: number;
+}
+
+export const Avatar = (props: Props) => {
+  const {
+    className,
+    height = DEFAULT_AVATAR_SIZE,
+    width = DEFAULT_AVATAR_SIZE,
+  } = props;
+
+  const theme = useTheme();
+  const { data: preferences } = usePreferences();
+  const { data: profile } = useProfile();
+
+  const avatarLetter = profile?.username[0].toUpperCase();
+  const avatarColor = preferences?.avatarColor ?? theme.color.blue;
+
+  return (
+    <_Avatar
+      alt={`Avatar for user ${profile?.email ?? profile?.username ?? ''}`}
+      className={className}
+      sx={{ bgcolor: avatarColor, height, width }}
+    >
+      <Typography sx={{ fontSize: '3rem' }}>{avatarLetter}</Typography>
+    </_Avatar>
+  );
+};
diff --git a/packages/manager/src/components/ColorPicker.tsx b/packages/manager/src/components/ColorPicker.tsx
new file mode 100644
index 00000000000..71b16aeda2c
--- /dev/null
+++ b/packages/manager/src/components/ColorPicker.tsx
@@ -0,0 +1,42 @@
+import { useTheme } from '@mui/material';
+import React, { useState } from 'react';
+
+import { usePreferences } from 'src/queries/profile/preferences';
+
+import type { SxProps } from '@mui/material';
+
+interface Props {
+  handleColorChange: (color: string) => void;
+  hideLabel?: boolean; // TODO: visually hidden
+  label: string;
+  sx?: SxProps;
+}
+
+export const ColorPicker = (props: Props) => {
+  const { handleColorChange, label } = props;
+
+  const { data: preferences } = usePreferences();
+  const theme = useTheme();
+
+  // TODO: figure out why default isn't working
+  const [color, setColor] = useState(
+    preferences?.avatarColor ?? theme.color.blue
+  );
+
+  return (
+    <>
+      <label htmlFor="color-picker" style={{ marginRight: '10px' }}>
+        {label}
+      </label>
+      <input
+        onChange={(e) => {
+          setColor(e.target.value);
+          handleColorChange(e.target.value);
+        }}
+        color={color}
+        id="color-picker"
+        type="color"
+      />
+    </>
+  );
+};
diff --git a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
new file mode 100644
index 00000000000..60b474ac4ec
--- /dev/null
+++ b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
@@ -0,0 +1,68 @@
+import { Typography } from '@mui/material';
+import React from 'react';
+import { useState } from 'react';
+import { debounce } from 'throttle-debounce';
+
+import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { ColorPicker } from 'src/components/ColorPicker';
+import { Dialog } from 'src/components/Dialog/Dialog';
+import { useMutatePreferences } from 'src/queries/profile/preferences';
+
+interface Props {
+  handleClose: () => void;
+  open: boolean;
+}
+
+export const AvatarColorPickerDialog = (props: Props) => {
+  const { handleClose, open } = props;
+
+  const [avatarColor, setAvatarColor] = useState();
+
+  const { mutateAsync: updatePreferences } = useMutatePreferences();
+
+  const debouncedSetAvatarColor = React.useCallback(
+    debounce(250, false, (color) => setAvatarColor(color)),
+    [setAvatarColor]
+  );
+
+  return (
+    <Dialog onClose={handleClose} open={open} title="Change Avatar Color">
+      <Typography>Select a custom color for your avatar.</Typography>
+      <ColorPicker
+        handleColorChange={(color: string) => debouncedSetAvatarColor(color)}
+        // sxProps={{ marginTop: '12px' }} //TODO: get working
+        label="" // TODO: visually hidden
+      />
+
+      <ActionsPanel
+        primaryButtonProps={{
+          label: 'Save',
+          onClick: () => {
+            if (avatarColor) {
+              updatePreferences({
+                avatarColor,
+              }).catch(
+                () =>
+                  /** swallow the error */
+                  null
+              );
+            }
+            handleClose();
+          },
+        }}
+        secondaryButtonProps={{
+          compactX: true,
+          'data-testid': 'close-button',
+          label: 'Close',
+          onClick: handleClose,
+        }}
+        sx={{
+          display: 'flex',
+          marginTop: '18px !important',
+          paddingBottom: 0,
+          paddingTop: 0,
+        }}
+      />
+    </Dialog>
+  );
+};
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index 1a1ba9ae96b..d4e05288b95 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -5,7 +5,9 @@ import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { v4 } from 'uuid';
 
+import { Avatar } from 'src/components/Avatar';
 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 { Link } from 'src/components/Link';
@@ -16,7 +18,9 @@ import { Typography } from 'src/components/Typography';
 import { RESTRICTED_FIELD_TOOLTIP } from 'src/features/Account/constants';
 import { useNotificationsQuery } from 'src/queries/account/notifications';
 import { useMutateProfile, useProfile } from 'src/queries/profile/profile';
+import { getGravatarUrl } from 'src/utilities/gravatar';
 
+import { AvatarColorPickerDialog } from './AvatarColorPickerDialog';
 import { TimezoneForm } from './TimezoneForm';
 
 import type { ApplicationState } from 'src/store';
@@ -34,6 +38,15 @@ export const DisplaySettings = () => {
 
   const isProxyUser = profile?.user_type === 'proxy';
 
+  const hasGravatar = getGravatarUrl(profile?.email ?? '').includes('?d=404')
+    ? false
+    : true;
+
+  const [
+    isColorPickerDialogOpen,
+    setAvatarColorPickerDialogOpen,
+  ] = React.useState(false);
+
   React.useEffect(() => {
     if (location.state?.focusEmail && emailRef.current) {
       emailRef.current.focus();
@@ -89,11 +102,15 @@ export const DisplaySettings = () => {
             }}
             display="flex"
           >
-            <GravatarByEmail
-              email={profile?.email ?? ''}
-              height={88}
-              width={88}
-            />
+            {hasGravatar ? (
+              <GravatarByEmail
+                email={profile?.email ?? ''}
+                height={88}
+                width={88}
+              />
+            ) : (
+              <Avatar height={88} width={88} />
+            )}
             <div>
               <Typography sx={{ fontSize: '1rem' }} variant="h2">
                 Profile photo
@@ -108,12 +125,23 @@ export const DisplaySettings = () => {
                 />
               </Typography>
               <StyledProfileCopy variant="body1">
-                Create, upload, and manage your globally recognized avatar from
-                a single place with Gravatar.
+                {hasGravatar
+                  ? 'Create, upload, and manage your globally recognized avatar from a single place with Gravatar.'
+                  : 'Your profile photo is automatically generated using the first character of your username.'}
               </StyledProfileCopy>
-              <StyledAddImageLink external to="https://en.gravatar.com/">
-                Manage photo
-              </StyledAddImageLink>
+              {!hasGravatar && (
+                <Button
+                  buttonType="outlined"
+                  onClick={() => setAvatarColorPickerDialogOpen(true)}
+                >
+                  Change Avatar Color
+                </Button>
+              )}
+              {hasGravatar && (
+                <StyledAddImageLink external to="https://en.gravatar.com/">
+                  Manage photo
+                </StyledAddImageLink>
+              )}
             </div>
           </Box>
           <Divider />
@@ -155,6 +183,10 @@ export const DisplaySettings = () => {
       />
       <Divider spacingBottom={8} spacingTop={24} />
       <TimezoneForm loggedInAsCustomer={loggedInAsCustomer} />
+      <AvatarColorPickerDialog
+        handleClose={() => setAvatarColorPickerDialogOpen(false)}
+        open={isColorPickerDialogOpen}
+      />
     </Paper>
   );
 };
diff --git a/packages/manager/src/types/ManagerPreferences.ts b/packages/manager/src/types/ManagerPreferences.ts
index 1db40f73035..3b97d993996 100644
--- a/packages/manager/src/types/ManagerPreferences.ts
+++ b/packages/manager/src/types/ManagerPreferences.ts
@@ -15,6 +15,7 @@ export interface DismissedNotification {
 }
 
 export interface ManagerPreferences extends UserPreferences {
+  avatarColor?: string;
   backups_cta_dismissed?: boolean;
   desktop_sidebar_open?: boolean;
   dismissed_notifications?: Record<string, DismissedNotification>;

From 36cc621613ca7f49f71d62090cd7170306b0529b Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Mon, 19 Aug 2024 16:15:18 -0700
Subject: [PATCH 02/46] Add utils to determine letter color

---
 .../src/components/{ => Avatar}/Avatar.tsx    | 16 +++--
 .../manager/src/components/Avatar/utils.ts    | 64 +++++++++++++++++++
 .../DisplaySettings/DisplaySettings.tsx       |  2 +-
 3 files changed, 77 insertions(+), 5 deletions(-)
 rename packages/manager/src/components/{ => Avatar}/Avatar.tsx (60%)
 create mode 100644 packages/manager/src/components/Avatar/utils.ts

diff --git a/packages/manager/src/components/Avatar.tsx b/packages/manager/src/components/Avatar/Avatar.tsx
similarity index 60%
rename from packages/manager/src/components/Avatar.tsx
rename to packages/manager/src/components/Avatar/Avatar.tsx
index 9d6635555e3..d8baea9180f 100644
--- a/packages/manager/src/components/Avatar.tsx
+++ b/packages/manager/src/components/Avatar/Avatar.tsx
@@ -5,6 +5,8 @@ import * as React from 'react';
 import { usePreferences } from 'src/queries/profile/preferences';
 import { useProfile } from 'src/queries/profile/profile';
 
+import { getFontColor, hexToHSL } from './utils';
+
 export const DEFAULT_AVATAR_SIZE = 28;
 
 interface Props {
@@ -24,16 +26,22 @@ export const Avatar = (props: Props) => {
   const { data: preferences } = usePreferences();
   const { data: profile } = useProfile();
 
-  const avatarLetter = profile?.username[0].toUpperCase();
-  const avatarColor = preferences?.avatarColor ?? theme.color.blue;
+  const avatarLetter = profile?.username[0].toUpperCase() ?? '';
+  const avatarHexColor = preferences?.avatarColor ?? theme.color.blue;
+  const avatarHslColor = hexToHSL(avatarHexColor);
+  const avatarLetterColor = avatarHslColor
+    ? `theme.color.${getFontColor(avatarHslColor)}`
+    : theme.color.white;
 
   return (
     <_Avatar
       alt={`Avatar for user ${profile?.email ?? profile?.username ?? ''}`}
       className={className}
-      sx={{ bgcolor: avatarColor, height, width }}
+      sx={{ bgcolor: avatarHexColor, height, width }}
     >
-      <Typography sx={{ fontSize: '3rem' }}>{avatarLetter}</Typography>
+      <Typography sx={{ color: avatarLetterColor, fontSize: '3rem' }}>
+        {avatarLetter}
+      </Typography>
     </_Avatar>
   );
 };
diff --git a/packages/manager/src/components/Avatar/utils.ts b/packages/manager/src/components/Avatar/utils.ts
new file mode 100644
index 00000000000..ce70e04fb5c
--- /dev/null
+++ b/packages/manager/src/components/Avatar/utils.ts
@@ -0,0 +1,64 @@
+export type HSL = { h: number; l: number; s: number };
+export type AvatarFontColor = 'black' | 'white';
+
+export function getFontColor(hslColor: HSL): AvatarFontColor {
+  if (hslColor.l <= 25 || hslColor.s <= 50) {
+    return 'white';
+  } else {
+    return 'black';
+  }
+}
+
+// Credit to https://www.jameslmilner.com/posts/converting-rgb-hex-hsl-colors/.
+export function hexToHSL(
+  hex: string
+): { h: number; l: number; s: number } | undefined {
+  const _hex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+  if (!_hex) {
+    return;
+  }
+
+  const rHex = parseInt(_hex[1], 16);
+  const gHex = parseInt(_hex[2], 16);
+  const bHex = parseInt(_hex[3], 16);
+
+  const r = rHex / 255;
+  const g = gHex / 255;
+  const b = bHex / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+
+  let h = (max + min) / 2;
+  let s = h;
+  let l = h;
+
+  if (max === min) {
+    // Achromatic
+    return { h: 0, l, s: 0 };
+  }
+
+  const d = max - min;
+  s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  switch (max) {
+    case r:
+      h = (g - b) / d + (g < b ? 6 : 0);
+      break;
+    case g:
+      h = (b - r) / d + 2;
+      break;
+    case b:
+      h = (r - g) / d + 4;
+      break;
+  }
+  h /= 6;
+
+  s = s * 100;
+  s = Math.round(s);
+  l = l * 100;
+  l = Math.round(l);
+  h = Math.round(360 * h);
+
+  return { h, l, s };
+}
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index d4e05288b95..c4afe0389f3 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { v4 } from 'uuid';
 
-import { Avatar } from 'src/components/Avatar';
+import { Avatar } from 'src/components/Avatar/Avatar';
 import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { Divider } from 'src/components/Divider';

From 24296cac8fbe569da86b4301aa73570acaef1e92 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 28 Aug 2024 13:17:33 -0700
Subject: [PATCH 03/46] Bring back checkForGravatar event and fix hasGravatar
 boolean

---
 .../DisplaySettings/DisplaySettings.tsx       | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index c4afe0389f3..7b9ee57f061 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -1,5 +1,6 @@
 import { updateUser } from '@linode/api-v4/lib/account';
 import { styled, useTheme } from '@mui/material/styles';
+import { useState } from 'react';
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
@@ -38,9 +39,21 @@ export const DisplaySettings = () => {
 
   const isProxyUser = profile?.user_type === 'proxy';
 
-  const hasGravatar = getGravatarUrl(profile?.email ?? '').includes('?d=404')
-    ? false
-    : true;
+  const [hasGravatar, setHasGravatar] = useState(false);
+  const checkForGravatar = async (url: string) => {
+    try {
+      const response = await fetch(url);
+
+      if (response.status === 200) {
+        setHasGravatar(true);
+      }
+      if (response.status === 404) {
+        setHasGravatar(false);
+      }
+    } catch (error) {
+      // The fetch to Gravatar failed. Event won't be logged.
+    }
+  };
 
   const [
     isColorPickerDialogOpen,
@@ -54,6 +67,11 @@ export const DisplaySettings = () => {
     }
   }, [emailRef, location.state]);
 
+  React.useEffect(() => {
+    const url = getGravatarUrl(profile?.email ?? '');
+    checkForGravatar(url);
+  }, [profile]);
+
   // Used as React keys to force-rerender forms.
   const [emailResetToken, setEmailResetToken] = React.useState(v4());
   const [usernameResetToken, setUsernameResetToken] = React.useState(v4());

From c2bd8c74ffdc880bb02fb8161e8cadd25b4d8e11 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 28 Aug 2024 13:20:35 -0700
Subject: [PATCH 04/46] Hide tooltip if user unless user hasGravatar

---
 .../DisplaySettings/DisplaySettings.tsx       | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index 7b9ee57f061..e0ce92782de 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -132,15 +132,17 @@ export const DisplaySettings = () => {
             <div>
               <Typography sx={{ fontSize: '1rem' }} variant="h2">
                 Profile photo
-                <StyledTooltipIcon
-                  sxTooltipIcon={{
-                    marginLeft: '6px',
-                    marginTop: '-2px',
-                    padding: 0,
-                  }}
-                  status="help"
-                  text={tooltipIconText}
-                />
+                {hasGravatar && (
+                  <StyledTooltipIcon
+                    sxTooltipIcon={{
+                      marginLeft: '6px',
+                      marginTop: '-2px',
+                      padding: 0,
+                    }}
+                    status="help"
+                    text={tooltipIconText}
+                  />
+                )}
               </Typography>
               <StyledProfileCopy variant="body1">
                 {hasGravatar

From e99f755d7023c76a66659bf8fc30435185f5e5ff Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 28 Aug 2024 14:37:43 -0700
Subject: [PATCH 05/46] Add GravatarSunsetBanner.tsx

---
 .../GlobalNotifications/GlobalNotifications.tsx  |  2 ++
 .../GlobalNotifications/GravatarSunsetBanner.tsx | 16 ++++++++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx

diff --git a/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx b/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
index 2d600740b1b..6b89efc6b72 100644
--- a/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
+++ b/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
@@ -15,6 +15,7 @@ import { APIMaintenanceBanner } from './APIMaintenanceBanner';
 import { ComplianceBanner } from './ComplianceBanner';
 import { ComplianceUpdateModal } from './ComplianceUpdateModal';
 import { EmailBounceNotificationSection } from './EmailBounce';
+import { GravatarSunsetBanner } from './GravatarSunsetBanner';
 import { RegionStatusBanner } from './RegionStatusBanner';
 import { TaxCollectionBanner } from './TaxCollectionBanner';
 import { DesignUpdateBanner } from './TokensUpdateBanner';
@@ -86,6 +87,7 @@ export const GlobalNotifications = () => {
       Object.keys(flags.taxCollectionBanner).length > 0 ? (
         <TaxCollectionBanner />
       ) : null}
+      <GravatarSunsetBanner />
     </>
   );
 };
diff --git a/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx b/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx
new file mode 100644
index 00000000000..69d6d8bd5fe
--- /dev/null
+++ b/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner';
+import { Typography } from 'src/components/Typography';
+
+export const GravatarSunsetBanner = () => {
+  const GRAVATAR_DEPRECATION_DATE = 'September 16th, 2024';
+
+  return (
+    <DismissibleBanner preferenceKey="gravatar-sunset" variant="info">
+      <Typography variant="body1">
+        {`Support for using Gravatar as your profile photo will be deprecated on ${GRAVATAR_DEPRECATION_DATE}. Your profile photo will automatically be changed to your username initial.`}
+      </Typography>
+    </DismissibleBanner>
+  );
+};

From c9044968d68219b1196e40bece9f037a89b79ad2 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 28 Aug 2024 15:56:03 -0700
Subject: [PATCH 06/46] Use util for banner and profile page

---
 .../GlobalNotifications.tsx                   |  2 +-
 .../GravatarSunsetBanner.tsx                  | 15 +++++++++++-
 .../DisplaySettings/DisplaySettings.tsx       | 24 ++++---------------
 packages/manager/src/utilities/gravatar.ts    | 16 +++++++++++++
 4 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx b/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
index 6b89efc6b72..8654d0858ad 100644
--- a/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
+++ b/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
@@ -87,7 +87,7 @@ export const GlobalNotifications = () => {
       Object.keys(flags.taxCollectionBanner).length > 0 ? (
         <TaxCollectionBanner />
       ) : null}
-      <GravatarSunsetBanner />
+      <GravatarSunsetBanner email={profile?.email ?? ''} />
     </>
   );
 };
diff --git a/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx b/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx
index 69d6d8bd5fe..0f1a7b468f7 100644
--- a/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx
+++ b/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx
@@ -1,11 +1,24 @@
 import React from 'react';
+import { useState } from 'react';
 
 import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner';
 import { Typography } from 'src/components/Typography';
+import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 
-export const GravatarSunsetBanner = () => {
+interface Props {
+  email: string;
+}
+
+export const GravatarSunsetBanner = (props: Props) => {
+  const { email } = props;
   const GRAVATAR_DEPRECATION_DATE = 'September 16th, 2024';
+  const [hasGravatar, setHasGravatar] = useState(false);
+
+  checkForGravatar(getGravatarUrl(email)).then((res) => setHasGravatar(res));
 
+  if (!hasGravatar) {
+    return;
+  }
   return (
     <DismissibleBanner preferenceKey="gravatar-sunset" variant="info">
       <Typography variant="body1">
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index e0ce92782de..580ba25ee09 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -19,7 +19,7 @@ import { Typography } from 'src/components/Typography';
 import { RESTRICTED_FIELD_TOOLTIP } from 'src/features/Account/constants';
 import { useNotificationsQuery } from 'src/queries/account/notifications';
 import { useMutateProfile, useProfile } from 'src/queries/profile/profile';
-import { getGravatarUrl } from 'src/utilities/gravatar';
+import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 
 import { AvatarColorPickerDialog } from './AvatarColorPickerDialog';
 import { TimezoneForm } from './TimezoneForm';
@@ -40,20 +40,9 @@ export const DisplaySettings = () => {
   const isProxyUser = profile?.user_type === 'proxy';
 
   const [hasGravatar, setHasGravatar] = useState(false);
-  const checkForGravatar = async (url: string) => {
-    try {
-      const response = await fetch(url);
-
-      if (response.status === 200) {
-        setHasGravatar(true);
-      }
-      if (response.status === 404) {
-        setHasGravatar(false);
-      }
-    } catch (error) {
-      // The fetch to Gravatar failed. Event won't be logged.
-    }
-  };
+  checkForGravatar(getGravatarUrl(profile?.email ?? '')).then((res: boolean) =>
+    setHasGravatar(res)
+  );
 
   const [
     isColorPickerDialogOpen,
@@ -67,11 +56,6 @@ export const DisplaySettings = () => {
     }
   }, [emailRef, location.state]);
 
-  React.useEffect(() => {
-    const url = getGravatarUrl(profile?.email ?? '');
-    checkForGravatar(url);
-  }, [profile]);
-
   // Used as React keys to force-rerender forms.
   const [emailResetToken, setEmailResetToken] = React.useState(v4());
   const [usernameResetToken, setUsernameResetToken] = React.useState(v4());
diff --git a/packages/manager/src/utilities/gravatar.ts b/packages/manager/src/utilities/gravatar.ts
index 1740e2c4372..989631cc7fd 100644
--- a/packages/manager/src/utilities/gravatar.ts
+++ b/packages/manager/src/utilities/gravatar.ts
@@ -11,3 +11,19 @@ export const getGravatarUrlFromHash = (hash: string): string => {
 export const getGravatarUrl = (email: string): string => {
   return getGravatarUrlFromHash(getEmailHash(email));
 };
+
+export const checkForGravatar = async (url: string) => {
+  try {
+    const response = await fetch(url);
+
+    if (response.status === 200) {
+      return true;
+    }
+    if (response.status === 404) {
+      return false;
+    }
+  } catch (error) {
+    // The fetch to Gravatar failed. Event won't be logged.
+  }
+  return false;
+};

From c76b89bca989eed95ea8283a082b770a912dc2af Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 28 Aug 2024 22:41:41 -0700
Subject: [PATCH 07/46] Add Akamai wave icon for Akamai-generated user events

---
 packages/manager/src/assets/logo/akamai-wave.svg | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 packages/manager/src/assets/logo/akamai-wave.svg

diff --git a/packages/manager/src/assets/logo/akamai-wave.svg b/packages/manager/src/assets/logo/akamai-wave.svg
new file mode 100644
index 00000000000..88cd5af9759
--- /dev/null
+++ b/packages/manager/src/assets/logo/akamai-wave.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1744 23.4627C13.7477 23.6418 13.7248 24 13.0826 24C6.24801 24 0.674805 18.6269 0.674805 12C0.674805 5.37313 6.22507 0 13.0826 0C13.7248 0 13.8624 0.335821 13.3349 0.492537C8.19748 1.92537 4.43614 6.53731 4.43614 12C4.43614 17.3955 8.10574 21.9627 13.1744 23.4627ZM6.77551 14.7985C6.75258 14.4851 6.72964 14.1493 6.72964 13.8134C6.72964 8.55224 11.1102 4.27612 16.4999 4.27612C21.5915 4.27612 23.1282 6.49254 23.3116 6.35821C23.5181 6.20149 21.4539 1.79104 15.4679 1.79104C10.0781 1.79104 5.69757 6.06716 5.69757 11.3284C5.69757 12.5373 5.92692 13.7015 6.36268 14.7761C6.54616 15.2239 6.82138 15.2463 6.77551 14.7985ZM10.8809 7.92537C13.4267 6.85075 16.6146 6.80597 19.7338 7.8806C21.8438 8.59701 23.0594 9.62687 23.1511 9.58209C23.3116 9.51493 21.9355 7.36567 19.4127 6.42537C16.3623 5.30597 13.1056 5.88806 10.7203 7.72388C10.468 7.92537 10.5598 8.0597 10.8809 7.92537Z" fill="white"/>
+</svg>

From 86bf9fcd7b3bce0ce0c06429d46232a639c74d06 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 28 Aug 2024 22:42:38 -0700
Subject: [PATCH 08/46] Clean up of theme colors and conditional rendering

---
 packages/manager/src/components/Avatar/Avatar.tsx     |  7 ++++---
 .../Profile/DisplaySettings/DisplaySettings.tsx       | 11 +++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/manager/src/components/Avatar/Avatar.tsx b/packages/manager/src/components/Avatar/Avatar.tsx
index d8baea9180f..995f4de45be 100644
--- a/packages/manager/src/components/Avatar/Avatar.tsx
+++ b/packages/manager/src/components/Avatar/Avatar.tsx
@@ -23,15 +23,16 @@ export const Avatar = (props: Props) => {
   } = props;
 
   const theme = useTheme();
+
   const { data: preferences } = usePreferences();
   const { data: profile } = useProfile();
 
   const avatarLetter = profile?.username[0].toUpperCase() ?? '';
-  const avatarHexColor = preferences?.avatarColor ?? theme.color.blue;
+  const avatarHexColor = preferences?.avatarColor ?? theme.palette.primary.dark;
   const avatarHslColor = hexToHSL(avatarHexColor);
   const avatarLetterColor = avatarHslColor
-    ? `theme.color.${getFontColor(avatarHslColor)}`
-    : theme.color.white;
+    ? `theme.palette.common.${getFontColor(avatarHslColor)}`
+    : theme.palette.common.white;
 
   return (
     <_Avatar
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index 580ba25ee09..d8b90800a12 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -133,7 +133,11 @@ export const DisplaySettings = () => {
                   ? 'Create, upload, and manage your globally recognized avatar from a single place with Gravatar.'
                   : 'Your profile photo is automatically generated using the first character of your username.'}
               </StyledProfileCopy>
-              {!hasGravatar && (
+              {hasGravatar ? (
+                <StyledAddImageLink external to="https://en.gravatar.com/">
+                  Manage photo
+                </StyledAddImageLink>
+              ) : (
                 <Button
                   buttonType="outlined"
                   onClick={() => setAvatarColorPickerDialogOpen(true)}
@@ -141,11 +145,6 @@ export const DisplaySettings = () => {
                   Change Avatar Color
                 </Button>
               )}
-              {hasGravatar && (
-                <StyledAddImageLink external to="https://en.gravatar.com/">
-                  Manage photo
-                </StyledAddImageLink>
-              )}
             </div>
           </Box>
           <Divider />

From 242f570ca6593205f844c41020d6acd8f789435f Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 28 Aug 2024 23:53:02 -0700
Subject: [PATCH 09/46] Style ColorPicker

---
 .../manager/src/components/ColorPicker.tsx    | 31 ++++++++++++-------
 .../AvatarColorPickerDialog.tsx               | 24 +++++++-------
 2 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/packages/manager/src/components/ColorPicker.tsx b/packages/manager/src/components/ColorPicker.tsx
index 71b16aeda2c..b65bd5d0c76 100644
--- a/packages/manager/src/components/ColorPicker.tsx
+++ b/packages/manager/src/components/ColorPicker.tsx
@@ -1,31 +1,38 @@
 import { useTheme } from '@mui/material';
 import React, { useState } from 'react';
 
-import { usePreferences } from 'src/queries/profile/preferences';
-
-import type { SxProps } from '@mui/material';
+import type { CSSProperties } from 'react';
 
 interface Props {
+  defaultColor?: string;
   handleColorChange: (color: string) => void;
   hideLabel?: boolean; // TODO: visually hidden
+  inputStyles?: CSSProperties;
   label: string;
-  sx?: SxProps;
+  labelStyles?: CSSProperties;
 }
 
 export const ColorPicker = (props: Props) => {
-  const { handleColorChange, label } = props;
+  const {
+    defaultColor,
+    handleColorChange,
+    inputStyles,
+    label,
+    labelStyles,
+  } = props;
 
-  const { data: preferences } = usePreferences();
   const theme = useTheme();
-
-  // TODO: figure out why default isn't working
-  const [color, setColor] = useState(
-    preferences?.avatarColor ?? theme.color.blue
+  const [color, setColor] = useState<string>(
+    defaultColor ?? theme.palette.primary.dark
   );
 
   return (
     <>
-      <label htmlFor="color-picker" style={{ marginRight: '10px' }}>
+      <label
+        className="visually-hidden"
+        htmlFor="color-picker"
+        style={labelStyles}
+      >
         {label}
       </label>
       <input
@@ -35,7 +42,9 @@ export const ColorPicker = (props: Props) => {
         }}
         color={color}
         id="color-picker"
+        style={inputStyles}
         type="color"
+        value={color}
       />
     </>
   );
diff --git a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
index 60b474ac4ec..79534f2c00e 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
@@ -6,7 +6,10 @@ import { debounce } from 'throttle-debounce';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ColorPicker } from 'src/components/ColorPicker';
 import { Dialog } from 'src/components/Dialog/Dialog';
-import { useMutatePreferences } from 'src/queries/profile/preferences';
+import {
+  useMutatePreferences,
+  usePreferences,
+} from 'src/queries/profile/preferences';
 
 interface Props {
   handleClose: () => void;
@@ -18,6 +21,7 @@ export const AvatarColorPickerDialog = (props: Props) => {
 
   const [avatarColor, setAvatarColor] = useState();
 
+  const { data: preferences } = usePreferences();
   const { mutateAsync: updatePreferences } = useMutatePreferences();
 
   const debouncedSetAvatarColor = React.useCallback(
@@ -27,11 +31,13 @@ export const AvatarColorPickerDialog = (props: Props) => {
 
   return (
     <Dialog onClose={handleClose} open={open} title="Change Avatar Color">
-      <Typography>Select a custom color for your avatar.</Typography>
+      <Typography>Select a custom background color for your avatar.</Typography>
       <ColorPicker
+        defaultColor={preferences?.avatarColor}
         handleColorChange={(color: string) => debouncedSetAvatarColor(color)}
-        // sxProps={{ marginTop: '12px' }} //TODO: get working
-        label="" // TODO: visually hidden
+        inputStyles={{ marginTop: '12px' }}
+        label="Avatar background color picker"
+        labelStyles={{ marginLeft: 0 }}
       />
 
       <ActionsPanel
@@ -41,26 +47,18 @@ export const AvatarColorPickerDialog = (props: Props) => {
             if (avatarColor) {
               updatePreferences({
                 avatarColor,
-              }).catch(
-                () =>
-                  /** swallow the error */
-                  null
-              );
+              }).catch(() => {});
             }
             handleClose();
           },
         }}
         secondaryButtonProps={{
-          compactX: true,
           'data-testid': 'close-button',
           label: 'Close',
           onClick: handleClose,
         }}
         sx={{
           display: 'flex',
-          marginTop: '18px !important',
-          paddingBottom: 0,
-          paddingTop: 0,
         }}
       />
     </Dialog>

From 0885902b0ee2642ee0d582121da2fa93de21fe21 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Thu, 29 Aug 2024 10:54:23 -0700
Subject: [PATCH 10/46] Try to handle constrast ratio

---
 .../manager/src/components/Avatar/Avatar.tsx  |  8 +-
 .../manager/src/components/Avatar/utils.ts    | 90 +++++++------------
 2 files changed, 37 insertions(+), 61 deletions(-)

diff --git a/packages/manager/src/components/Avatar/Avatar.tsx b/packages/manager/src/components/Avatar/Avatar.tsx
index 995f4de45be..a5c5c901257 100644
--- a/packages/manager/src/components/Avatar/Avatar.tsx
+++ b/packages/manager/src/components/Avatar/Avatar.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { usePreferences } from 'src/queries/profile/preferences';
 import { useProfile } from 'src/queries/profile/profile';
 
-import { getFontColor, hexToHSL } from './utils';
+import { getFontColor, hexToRGB } from './utils';
 
 export const DEFAULT_AVATAR_SIZE = 28;
 
@@ -29,9 +29,9 @@ export const Avatar = (props: Props) => {
 
   const avatarLetter = profile?.username[0].toUpperCase() ?? '';
   const avatarHexColor = preferences?.avatarColor ?? theme.palette.primary.dark;
-  const avatarHslColor = hexToHSL(avatarHexColor);
-  const avatarLetterColor = avatarHslColor
-    ? `theme.palette.common.${getFontColor(avatarHslColor)}`
+  const avatarRGBColor = hexToRGB(avatarHexColor);
+  const avatarLetterColor = avatarRGBColor
+    ? getFontColor(avatarRGBColor)
     : theme.palette.common.white;
 
   return (
diff --git a/packages/manager/src/components/Avatar/utils.ts b/packages/manager/src/components/Avatar/utils.ts
index ce70e04fb5c..b2a8c2c3989 100644
--- a/packages/manager/src/components/Avatar/utils.ts
+++ b/packages/manager/src/components/Avatar/utils.ts
@@ -1,64 +1,40 @@
-export type HSL = { h: number; l: number; s: number };
-export type AvatarFontColor = 'black' | 'white';
+export type RGB = { b: number; g: number; r: number };
 
-export function getFontColor(hslColor: HSL): AvatarFontColor {
-  if (hslColor.l <= 25 || hslColor.s <= 50) {
-    return 'white';
+export function getFontColor(rgbColor: RGB): string {
+  const whiteHex = '#000000';
+  const blackHex = '#FFFFFF';
+  const blackTextContrastRatio = getContrastRatio(hexToRGB(whiteHex), rgbColor);
+  const whiteTextContrastRatio = getContrastRatio(hexToRGB(blackHex), rgbColor);
+
+  if (whiteTextContrastRatio > blackTextContrastRatio) {
+    return blackHex;
   } else {
-    return 'black';
+    return whiteHex;
   }
 }
 
-// Credit to https://www.jameslmilner.com/posts/converting-rgb-hex-hsl-colors/.
-export function hexToHSL(
-  hex: string
-): { h: number; l: number; s: number } | undefined {
-  const _hex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-
-  if (!_hex) {
-    return;
-  }
-
-  const rHex = parseInt(_hex[1], 16);
-  const gHex = parseInt(_hex[2], 16);
-  const bHex = parseInt(_hex[3], 16);
-
-  const r = rHex / 255;
-  const g = gHex / 255;
-  const b = bHex / 255;
-
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-
-  let h = (max + min) / 2;
-  let s = h;
-  let l = h;
-
-  if (max === min) {
-    // Achromatic
-    return { h: 0, l, s: 0 };
-  }
+function getContrastRatio(color1: RGB, color2: RGB): number {
+  const luminance1 = 0.2126 * color1.r + 0.7152 * color1.g + 0.0722 * color1.b;
+  const luminance2 = 0.2126 * color2.r + 0.7152 * color2.g + 0.0722 * color2.b;
+  return (
+    (Math.max(luminance1, luminance2) + 0.05) /
+    (Math.min(luminance1, luminance2) + 0.05)
+  );
+}
 
-  const d = max - min;
-  s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-  switch (max) {
-    case r:
-      h = (g - b) / d + (g < b ? 6 : 0);
-      break;
-    case g:
-      h = (b - r) / d + 2;
-      break;
-    case b:
-      h = (r - g) / d + 4;
-      break;
+// https://decipher.dev/30-seconds-of-typescript/docs/hexToRGB/
+export const hexToRGB = (hex: string) => {
+  hex = hex.startsWith('#') ? hex.slice(1) : hex;
+  if (hex.length === 3) {
+    hex = Array.from(hex).reduce((str, x) => str + x + x, '');
   }
-  h /= 6;
-
-  s = s * 100;
-  s = Math.round(s);
-  l = l * 100;
-  l = Math.round(l);
-  h = Math.round(360 * h);
-
-  return { h, l, s };
-}
+  const values = hex
+    .split(/([a-z0-9]{2,2})/)
+    .filter(Boolean)
+    .map((x) => parseInt(x, 16));
+  return {
+    b: values[2],
+    g: values[1],
+    r: values[0],
+  };
+};

From 1136b91b2ec51b87769a2c0b6055cb65b3f4ff61 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Thu, 29 Aug 2024 13:44:08 -0700
Subject: [PATCH 11/46] Address UX feedback: show avatar preview in dialog

---
 .../manager/src/components/Avatar/Avatar.tsx  |  4 ++-
 .../AvatarColorPickerDialog.tsx               | 36 +++++++++++--------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/manager/src/components/Avatar/Avatar.tsx b/packages/manager/src/components/Avatar/Avatar.tsx
index a5c5c901257..2d0ff0b9aa1 100644
--- a/packages/manager/src/components/Avatar/Avatar.tsx
+++ b/packages/manager/src/components/Avatar/Avatar.tsx
@@ -11,6 +11,7 @@ export const DEFAULT_AVATAR_SIZE = 28;
 
 interface Props {
   className?: string;
+  color?: string;
   height?: number;
   width?: number;
 }
@@ -18,6 +19,7 @@ interface Props {
 export const Avatar = (props: Props) => {
   const {
     className,
+    color,
     height = DEFAULT_AVATAR_SIZE,
     width = DEFAULT_AVATAR_SIZE,
   } = props;
@@ -38,7 +40,7 @@ export const Avatar = (props: Props) => {
     <_Avatar
       alt={`Avatar for user ${profile?.email ?? profile?.username ?? ''}`}
       className={className}
-      sx={{ bgcolor: avatarHexColor, height, width }}
+      sx={{ bgcolor: color ?? avatarHexColor, height, width }}
     >
       <Typography sx={{ color: avatarLetterColor, fontSize: '3rem' }}>
         {avatarLetter}
diff --git a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
index 79534f2c00e..0cef160187c 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
@@ -1,11 +1,12 @@
 import { Typography } from '@mui/material';
 import React from 'react';
 import { useState } from 'react';
-import { debounce } from 'throttle-debounce';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { Avatar } from 'src/components/Avatar/Avatar';
 import { ColorPicker } from 'src/components/ColorPicker';
 import { Dialog } from 'src/components/Dialog/Dialog';
+import { Stack } from 'src/components/Stack';
 import {
   useMutatePreferences,
   usePreferences,
@@ -19,26 +20,31 @@ interface Props {
 export const AvatarColorPickerDialog = (props: Props) => {
   const { handleClose, open } = props;
 
-  const [avatarColor, setAvatarColor] = useState();
+  const [avatarColor, setAvatarColor] = useState<string>();
 
   const { data: preferences } = usePreferences();
   const { mutateAsync: updatePreferences } = useMutatePreferences();
 
-  const debouncedSetAvatarColor = React.useCallback(
-    debounce(250, false, (color) => setAvatarColor(color)),
-    [setAvatarColor]
-  );
-
   return (
     <Dialog onClose={handleClose} open={open} title="Change Avatar Color">
-      <Typography>Select a custom background color for your avatar.</Typography>
-      <ColorPicker
-        defaultColor={preferences?.avatarColor}
-        handleColorChange={(color: string) => debouncedSetAvatarColor(color)}
-        inputStyles={{ marginTop: '12px' }}
-        label="Avatar background color picker"
-        labelStyles={{ marginLeft: 0 }}
-      />
+      <Stack alignItems={'baseline'} display={'flex'} flexDirection={'row'}>
+        <Typography sx={{ paddingRight: 1 }}>
+          Select a background color for your avatar:
+        </Typography>
+        <ColorPicker
+          defaultColor={preferences?.avatarColor}
+          handleColorChange={(color: string) => setAvatarColor(color)}
+          label="Avatar background color picker"
+        />
+      </Stack>
+      <Stack
+        display={'flex'}
+        flexDirection={'row'}
+        justifyContent={'center'}
+        sx={{ paddingY: 2 }}
+      >
+        <Avatar color={avatarColor} height={88} width={88} />
+      </Stack>
 
       <ActionsPanel
         primaryButtonProps={{

From 2b9df005c0788ecbbf86838287a0905edb1ecac7 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 4 Sep 2024 07:47:45 -0700
Subject: [PATCH 12/46] Add new avatar to EventRow on Event Landing page

---
 .../manager/src/components/Avatar/Avatar.tsx  | 46 ++++++++++++++-----
 .../manager/src/components/Avatar/utils.ts    | 14 ++++--
 .../src/features/Events/EventRow.styles.ts    | 11 +++--
 .../manager/src/features/Events/EventRow.tsx  |  4 +-
 4 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/packages/manager/src/components/Avatar/Avatar.tsx b/packages/manager/src/components/Avatar/Avatar.tsx
index 2d0ff0b9aa1..c8e1b787783 100644
--- a/packages/manager/src/components/Avatar/Avatar.tsx
+++ b/packages/manager/src/components/Avatar/Avatar.tsx
@@ -2,10 +2,11 @@ import { Typography, useTheme } from '@mui/material';
 import { default as _Avatar } from '@mui/material/Avatar';
 import * as React from 'react';
 
+import AkamaiWave from 'src/assets/logo/akamai-wave.svg';
 import { usePreferences } from 'src/queries/profile/preferences';
 import { useProfile } from 'src/queries/profile/profile';
 
-import { getFontColor, hexToRGB } from './utils';
+import { getContrastingFontColor } from './utils';
 
 export const DEFAULT_AVATAR_SIZE = 28;
 
@@ -13,6 +14,7 @@ interface Props {
   className?: string;
   color?: string;
   height?: number;
+  username?: string;
   width?: number;
 }
 
@@ -21,6 +23,7 @@ export const Avatar = (props: Props) => {
     className,
     color,
     height = DEFAULT_AVATAR_SIZE,
+    username,
     width = DEFAULT_AVATAR_SIZE,
   } = props;
 
@@ -29,22 +32,41 @@ export const Avatar = (props: Props) => {
   const { data: preferences } = usePreferences();
   const { data: profile } = useProfile();
 
-  const avatarLetter = profile?.username[0].toUpperCase() ?? '';
-  const avatarHexColor = preferences?.avatarColor ?? theme.palette.primary.dark;
-  const avatarRGBColor = hexToRGB(avatarHexColor);
-  const avatarLetterColor = avatarRGBColor
-    ? getFontColor(avatarRGBColor)
-    : theme.palette.common.white;
+  const _username = username ?? profile?.username ?? '';
+  const isAkamai = /^Linode$|^lke-service-account*/.test(_username);
+
+  const avatarHexColor =
+    isAkamai || !preferences?.avatarColor
+      ? theme.palette.primary.light
+      : preferences?.avatarColor;
+  const avatarLetter = _username[0]?.toUpperCase() ?? '';
 
   return (
     <_Avatar
-      alt={`Avatar for user ${profile?.email ?? profile?.username ?? ''}`}
+      sx={{
+        '& svg': {
+          height: '2vh',
+          width: '2vw',
+        },
+        bgcolor: color ?? avatarHexColor,
+        height,
+        width,
+      }}
+      alt={`Avatar for user ${username ?? profile?.email ?? ''}`}
       className={className}
-      sx={{ bgcolor: color ?? avatarHexColor, height, width }}
     >
-      <Typography sx={{ color: avatarLetterColor, fontSize: '3rem' }}>
-        {avatarLetter}
-      </Typography>
+      {isAkamai ? (
+        <AkamaiWave />
+      ) : (
+        <Typography
+          sx={{
+            color: getContrastingFontColor(avatarHexColor),
+            fontSize: width / 2,
+          }}
+        >
+          {avatarLetter}
+        </Typography>
+      )}
     </_Avatar>
   );
 };
diff --git a/packages/manager/src/components/Avatar/utils.ts b/packages/manager/src/components/Avatar/utils.ts
index b2a8c2c3989..c4ce0281d9b 100644
--- a/packages/manager/src/components/Avatar/utils.ts
+++ b/packages/manager/src/components/Avatar/utils.ts
@@ -1,10 +1,18 @@
 export type RGB = { b: number; g: number; r: number };
 
-export function getFontColor(rgbColor: RGB): string {
+export function getContrastingFontColor(backgroundHexColor: string): string {
   const whiteHex = '#000000';
   const blackHex = '#FFFFFF';
-  const blackTextContrastRatio = getContrastRatio(hexToRGB(whiteHex), rgbColor);
-  const whiteTextContrastRatio = getContrastRatio(hexToRGB(blackHex), rgbColor);
+  const backgroundRBG = hexToRGB(backgroundHexColor);
+
+  const blackTextContrastRatio = getContrastRatio(
+    hexToRGB(whiteHex),
+    backgroundRBG
+  );
+  const whiteTextContrastRatio = getContrastRatio(
+    hexToRGB(blackHex),
+    backgroundRBG
+  );
 
   if (whiteTextContrastRatio > blackTextContrastRatio) {
     return blackHex;
diff --git a/packages/manager/src/features/Events/EventRow.styles.ts b/packages/manager/src/features/Events/EventRow.styles.ts
index 08624554348..63870d2a2e6 100644
--- a/packages/manager/src/features/Events/EventRow.styles.ts
+++ b/packages/manager/src/features/Events/EventRow.styles.ts
@@ -1,10 +1,15 @@
 import { styled } from '@mui/material/styles';
 
-import { GravatarByUsername } from '../../components/GravatarByUsername';
+import { Avatar } from 'src/components/Avatar/Avatar';
 
-export const StyledGravatar = styled(GravatarByUsername, {
-  label: 'StyledGravatar',
+// @TODO: delete file
+export const StyledAvatar = styled(Avatar, {
+  label: 'StyledAvatar',
 })(({ theme }) => ({
+  '& svg': {
+    height: '2vh',
+    width: '2vw',
+  },
   height: theme.spacing(3),
   width: theme.spacing(3),
 }));
diff --git a/packages/manager/src/features/Events/EventRow.tsx b/packages/manager/src/features/Events/EventRow.tsx
index 9fab05311cb..40d3171cd58 100644
--- a/packages/manager/src/features/Events/EventRow.tsx
+++ b/packages/manager/src/features/Events/EventRow.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { Avatar } from 'src/components/Avatar/Avatar';
 import { BarPercent } from 'src/components/BarPercent';
 import { Box } from 'src/components/Box';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
@@ -8,7 +9,6 @@ import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { getEventTimestamp } from 'src/utilities/eventUtils';
 
-import { StyledGravatar } from './EventRow.styles';
 import {
   formatProgressEvent,
   getEventMessage,
@@ -54,7 +54,7 @@ export const EventRow = (props: EventRowProps) => {
       <Hidden smDown>
         <TableCell data-qa-event-username-cell parentColumn="Username">
           <Box alignItems="center" display="flex" gap={1}>
-            <StyledGravatar username={username === 'Linode' ? '' : username} />
+            <Avatar username={username} />
             {username}
           </Box>
         </TableCell>

From 9c520d4b16b8b14bb6d7a641886b6708bc295f31 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 4 Sep 2024 08:25:02 -0700
Subject: [PATCH 13/46] Conditionally render Gravatar in EventRow until sunset

---
 .../src/features/Events/EventRow.styles.ts      | 12 ++++--------
 .../manager/src/features/Events/EventRow.tsx    | 17 ++++++++++++++++-
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/manager/src/features/Events/EventRow.styles.ts b/packages/manager/src/features/Events/EventRow.styles.ts
index 63870d2a2e6..52151c77803 100644
--- a/packages/manager/src/features/Events/EventRow.styles.ts
+++ b/packages/manager/src/features/Events/EventRow.styles.ts
@@ -1,15 +1,11 @@
+// @TODO: delete file once Gravatar is sunset
 import { styled } from '@mui/material/styles';
 
-import { Avatar } from 'src/components/Avatar/Avatar';
+import { GravatarByUsername } from 'src/components/GravatarByUsername';
 
-// @TODO: delete file
-export const StyledAvatar = styled(Avatar, {
-  label: 'StyledAvatar',
+export const StyledGravatar = styled(GravatarByUsername, {
+  label: 'StyledGravatar',
 })(({ theme }) => ({
-  '& svg': {
-    height: '2vh',
-    width: '2vw',
-  },
   height: theme.spacing(3),
   width: theme.spacing(3),
 }));
diff --git a/packages/manager/src/features/Events/EventRow.tsx b/packages/manager/src/features/Events/EventRow.tsx
index 40d3171cd58..a67b52a28bf 100644
--- a/packages/manager/src/features/Events/EventRow.tsx
+++ b/packages/manager/src/features/Events/EventRow.tsx
@@ -7,8 +7,11 @@ import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { Hidden } from 'src/components/Hidden';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
+import { useAccountUser } from 'src/queries/account/users';
 import { getEventTimestamp } from 'src/utilities/eventUtils';
+import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 
+import { StyledGravatar } from './EventRow.styles';
 import {
   formatProgressEvent,
   getEventMessage,
@@ -30,6 +33,8 @@ export const EventRow = (props: EventRowProps) => {
     message: getEventMessage(event),
     username: getEventUsername(event),
   };
+  const { data: user } = useAccountUser(username);
+  const [hasGravatar, setHasGravatar] = React.useState(false);
 
   if (!message) {
     return null;
@@ -37,6 +42,10 @@ export const EventRow = (props: EventRowProps) => {
 
   const { progressEventDisplay, showProgress } = formatProgressEvent(event);
 
+  checkForGravatar(getGravatarUrl(user?.email ?? '')).then((res) =>
+    setHasGravatar(res)
+  );
+
   return (
     <TableRow data-qa-event-row data-test-id={action}>
       <TableCell data-qa-event-message-cell parentColumn="Event">
@@ -54,7 +63,13 @@ export const EventRow = (props: EventRowProps) => {
       <Hidden smDown>
         <TableCell data-qa-event-username-cell parentColumn="Username">
           <Box alignItems="center" display="flex" gap={1}>
-            <Avatar username={username} />
+            {hasGravatar ? (
+              <StyledGravatar
+                username={username === 'Linode' ? '' : username}
+              />
+            ) : (
+              <Avatar height={24} username={username} width={24} />
+            )}
             {username}
           </Box>
         </TableCell>

From 5d65177fe2e3126df74e959d6861a79d444a7009 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 4 Sep 2024 08:38:42 -0700
Subject: [PATCH 14/46] Replace gravatar conditionally in UserRow of Users
 Landing

---
 packages/manager/src/features/Users/UserRow.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/manager/src/features/Users/UserRow.tsx b/packages/manager/src/features/Users/UserRow.tsx
index 51745389d36..9e5a6185482 100644
--- a/packages/manager/src/features/Users/UserRow.tsx
+++ b/packages/manager/src/features/Users/UserRow.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { Avatar } from 'src/components/Avatar/Avatar';
 import { Box } from 'src/components/Box';
 import { Chip } from 'src/components/Chip';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
@@ -13,6 +14,7 @@ import { Typography } from 'src/components/Typography';
 import { useAccountUserGrants } from 'src/queries/account/users';
 import { useProfile } from 'src/queries/profile/profile';
 import { capitalize } from 'src/utilities/capitalize';
+import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 
 import { UsersActionMenu } from './UsersActionMenu';
 
@@ -26,15 +28,20 @@ interface Props {
 export const UserRow = ({ onDelete, user }: Props) => {
   const { data: grants } = useAccountUserGrants(user.username);
   const { data: profile } = useProfile();
+  const [hasGravatar, setHasGravatar] = React.useState(false);
 
   const isProxyUser = Boolean(user.user_type === 'proxy');
   const showChildAccountAccessCol = profile?.user_type === 'parent';
 
+  checkForGravatar(getGravatarUrl(user?.email ?? '')).then((res) =>
+    setHasGravatar(res)
+  );
+
   return (
     <TableRow data-qa-table-row={user.username} key={user.username}>
       <TableCell>
         <Stack alignItems="center" direction="row" spacing={1.5}>
-          <GravatarByEmail email={user.email} />
+          {hasGravatar ? <GravatarByEmail email={user.email} /> : <Avatar />}
           <Typography>{user.username}</Typography>
           <Box display="flex" flexGrow={1} />
           {user.tfa_enabled && <Chip color="success" label="2FA" />}

From a708fb6d9a57ffcf67f20fc6af023c73b9297f95 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 4 Sep 2024 08:55:35 -0700
Subject: [PATCH 15/46] Conditionally render styled Avatar in UserSSHKeyPanel

---
 .../AccessPanel/UserSSHKeyPanel.tsx           | 31 +++++++++++++++----
 .../manager/src/components/Avatar/Avatar.tsx  |  5 +++
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
index c3c8d41ebf4..f46bf8d9d51 100644
--- a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
+++ b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -16,12 +15,16 @@ import { CreateSSHKeyDrawer } from 'src/features/Profile/SSHKeys/CreateSSHKeyDra
 import { usePagination } from 'src/hooks/usePagination';
 import { useAccountUsers } from 'src/queries/account/users';
 import { useProfile, useSSHKeysQuery } from 'src/queries/profile/profile';
+import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 import { truncateAndJoinList } from 'src/utilities/stringUtils';
 
+import { Avatar } from '../Avatar/Avatar';
 import { GravatarByEmail } from '../GravatarByEmail';
 import { PaginationFooter } from '../PaginationFooter/PaginationFooter';
 import { TableRowLoading } from '../TableRowLoading/TableRowLoading';
 
+import type { Theme } from '@mui/material/styles';
+
 export const MAX_SSH_KEYS_DISPLAY = 25;
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -67,6 +70,11 @@ const UserSSHKeyPanel = (props: Props) => {
 
   const { data: profile } = useProfile();
 
+  const [hasGravatar, setHasGravatar] = React.useState(false);
+  checkForGravatar(getGravatarUrl(profile?.email ?? '')).then((res) =>
+    setHasGravatar(res)
+  );
+
   const isRestricted = profile?.restricted ?? false;
 
   // For non-restricted users, this query data will be used to render options
@@ -145,10 +153,14 @@ const UserSSHKeyPanel = (props: Props) => {
           </TableCell>
           <TableCell className={classes.cellUser}>
             <div className={classes.userWrapper}>
-              <GravatarByEmail
-                className={classes.gravatar}
-                email={profile.email}
-              />
+              {hasGravatar ? (
+                <GravatarByEmail
+                  className={classes.gravatar}
+                  email={profile.email}
+                />
+              ) : (
+                <Avatar sx={{ borderRadius: '50%', marginRight: 1 }} />
+              )}
               {profile.username}
             </div>
           </TableCell>
@@ -177,7 +189,14 @@ const UserSSHKeyPanel = (props: Props) => {
         </TableCell>
         <TableCell className={classes.cellUser}>
           <div className={classes.userWrapper}>
-            <GravatarByEmail className={classes.gravatar} email={user.email} />
+            {hasGravatar ? (
+              <GravatarByEmail
+                className={classes.gravatar}
+                email={user.email}
+              />
+            ) : (
+              <Avatar sx={{ borderRadius: '50%', marginRight: 1 }} />
+            )}
             {user.username}
           </div>
         </TableCell>
diff --git a/packages/manager/src/components/Avatar/Avatar.tsx b/packages/manager/src/components/Avatar/Avatar.tsx
index c8e1b787783..ebca28168dc 100644
--- a/packages/manager/src/components/Avatar/Avatar.tsx
+++ b/packages/manager/src/components/Avatar/Avatar.tsx
@@ -8,12 +8,15 @@ import { useProfile } from 'src/queries/profile/profile';
 
 import { getContrastingFontColor } from './utils';
 
+import type { SxProps } from '@mui/material';
+
 export const DEFAULT_AVATAR_SIZE = 28;
 
 interface Props {
   className?: string;
   color?: string;
   height?: number;
+  sx?: SxProps;
   username?: string;
   width?: number;
 }
@@ -23,6 +26,7 @@ export const Avatar = (props: Props) => {
     className,
     color,
     height = DEFAULT_AVATAR_SIZE,
+    sx,
     username,
     width = DEFAULT_AVATAR_SIZE,
   } = props;
@@ -51,6 +55,7 @@ export const Avatar = (props: Props) => {
         bgcolor: color ?? avatarHexColor,
         height,
         width,
+        ...sx,
       }}
       alt={`Avatar for user ${username ?? profile?.email ?? ''}`}
       className={className}

From 33a9b94e4f0f0c774084b28aa7276e5dc52611b1 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 4 Sep 2024 09:20:37 -0700
Subject: [PATCH 16/46] Conditionally render Avatar in TopMenu; rename
 GravatarForProxy

---
 ...ravatarForProxy.tsx => AvatarForProxy.tsx} |  2 +-
 .../features/TopMenu/UserMenu/UserMenu.tsx    | 21 ++++++++++++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)
 rename packages/manager/src/components/{GravatarForProxy.tsx => AvatarForProxy.tsx} (93%)

diff --git a/packages/manager/src/components/GravatarForProxy.tsx b/packages/manager/src/components/AvatarForProxy.tsx
similarity index 93%
rename from packages/manager/src/components/GravatarForProxy.tsx
rename to packages/manager/src/components/AvatarForProxy.tsx
index 5bbef1d15b1..16840219df4 100644
--- a/packages/manager/src/components/GravatarForProxy.tsx
+++ b/packages/manager/src/components/AvatarForProxy.tsx
@@ -9,7 +9,7 @@ interface Props {
   width?: number;
 }
 
-export const GravatarForProxy = ({ height = 34, width = 34 }: Props) => {
+export const AvatarForProxy = ({ height = 34, width = 34 }: Props) => {
   return (
     <Box
       sx={(theme) => ({
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index f6d9ee4c6b2..194c6cc19a9 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -1,17 +1,17 @@
-import { GlobalGrantTypes } from '@linode/api-v4/lib/account';
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp';
-import { Theme, styled, useMediaQuery } from '@mui/material';
+import { styled, useMediaQuery } from '@mui/material';
 import Popover from '@mui/material/Popover';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
+import { Avatar } from 'src/components/Avatar/Avatar';
+import { AvatarForProxy } from 'src/components/AvatarForProxy';
 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';
@@ -25,10 +25,14 @@ import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGran
 import { useAccount } from 'src/queries/account/account';
 import { useGrants, useProfile } from 'src/queries/profile/profile';
 import { sendSwitchAccountEvent } from 'src/utilities/analytics/customEventAnalytics';
+import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 import { getStorage, setStorage } from 'src/utilities/storage';
 
 import { getCompanyNameOrEmail } from './utils';
 
+import type { GlobalGrantTypes } from '@linode/api-v4/lib/account';
+import type { Theme } from '@mui/material';
+
 interface MenuLink {
   display: string;
   hide?: boolean;
@@ -102,6 +106,11 @@ export const UserMenu = React.memo(() => {
     theme.breakpoints.down('sm')
   );
 
+  const [hasGravatar, setHasGravatar] = React.useState(false);
+  checkForGravatar(getGravatarUrl(profile?.email ?? '')).then((res) =>
+    setHasGravatar(res)
+  );
+
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -207,9 +216,11 @@ export const UserMenu = React.memo(() => {
         <Button
           startIcon={
             isProxyUser ? (
-              <GravatarForProxy />
-            ) : (
+              <AvatarForProxy />
+            ) : hasGravatar ? (
               <GravatarByEmail email={profile?.email ?? ''} />
+            ) : (
+              <Avatar />
             )
           }
           sx={(theme) => ({

From 9e7ed75a776502760ac05e0a89bb0cf664b05afb Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 4 Sep 2024 09:36:24 -0700
Subject: [PATCH 17/46] Conditionally render styled Avatar in
 NotificationCenterEvent

---
 .../Events/NotificationCenterEvent.tsx            | 15 ++++++++++++++-
 .../NotificationCenter.styles.ts                  | 10 ++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
index 446bffb1c48..ddc517bd2ef 100644
--- a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
+++ b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
@@ -8,8 +8,11 @@ import {
   getEventMessage,
   getEventUsername,
 } from 'src/features/Events/utils';
+import { useAccountUser } from 'src/queries/account/users';
+import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 
 import {
+  NotificationEventAvatar,
   NotificationEventGravatar,
   NotificationEventStyledBox,
   notificationEventStyles,
@@ -30,6 +33,12 @@ export const NotificationCenterEvent = React.memo(
     const message = getEventMessage(event);
     const username = getEventUsername(event);
 
+    const { data: user } = useAccountUser(username);
+    const [hasGravatar, setHasGravatar] = React.useState(false);
+    checkForGravatar(getGravatarUrl(user?.email ?? '')).then((res) =>
+      setHasGravatar(res)
+    );
+
     /**
      * Some event types may not be handled by our system (or new types or new ones may be added that we haven't caught yet).
      * Filter these out so we don't display blank messages to the user.
@@ -46,7 +55,11 @@ export const NotificationCenterEvent = React.memo(
         className={unseenEventClass}
         data-testid={event.action}
       >
-        <NotificationEventGravatar username={event.username} />
+        {hasGravatar ? (
+          <NotificationEventGravatar username={event.username} />
+        ) : (
+          <NotificationEventAvatar username={event.username ?? ''} />
+        )}
         <Box sx={{ marginTop: '-2px', paddingRight: 1, width: '100%' }}>
           {message}
           {showProgress && (
diff --git a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
index 2761e4d27f5..12546a3369f 100644
--- a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
+++ b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
@@ -10,6 +10,7 @@ import { omittedProps } from 'src/utilities/omittedProps';
 
 import type { NotificationCenterNotificationMessageProps } from './types';
 import type { Theme } from '@mui/material/styles';
+import { Avatar } from 'src/components/Avatar/Avatar';
 
 export const useStyles = makeStyles()((theme: Theme) => ({
   inverted: {
@@ -127,6 +128,15 @@ export const NotificationEventGravatar = styled(GravatarByUsername, {
   width: 32,
 }));
 
+export const NotificationEventAvatar = styled(Avatar, {
+  label: 'StyledAvatarByUsername',
+})(() => ({
+  height: 32,
+  marginTop: 2,
+  minWidth: 32,
+  width: 32,
+}));
+
 export const notificationEventStyles = makeStyles()((theme: Theme) => ({
   bar: {
     marginTop: theme.spacing(),

From 357bd7e2cd68bee33ce3aecda009c4762f78206c Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 4 Sep 2024 09:41:18 -0700
Subject: [PATCH 18/46] Fix sunset date

---
 .../src/features/GlobalNotifications/GravatarSunsetBanner.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx b/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx
index 0f1a7b468f7..f3ada15a27b 100644
--- a/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx
+++ b/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx
@@ -11,7 +11,7 @@ interface Props {
 
 export const GravatarSunsetBanner = (props: Props) => {
   const { email } = props;
-  const GRAVATAR_DEPRECATION_DATE = 'September 16th, 2024';
+  const GRAVATAR_DEPRECATION_DATE = 'September 28th, 2024';
   const [hasGravatar, setHasGravatar] = useState(false);
 
   checkForGravatar(getGravatarUrl(email)).then((res) => setHasGravatar(res));

From b3c0fe71a74300872b2a4b728e865c1ca1a95f86 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 4 Sep 2024 13:33:01 -0700
Subject: [PATCH 19/46] Use MUI theme function to get contrasting text color

---
 .../manager/src/components/Avatar/Avatar.tsx  |  4 +-
 .../manager/src/components/Avatar/utils.ts    | 48 -------------------
 2 files changed, 1 insertion(+), 51 deletions(-)
 delete mode 100644 packages/manager/src/components/Avatar/utils.ts

diff --git a/packages/manager/src/components/Avatar/Avatar.tsx b/packages/manager/src/components/Avatar/Avatar.tsx
index ebca28168dc..0da225f94bc 100644
--- a/packages/manager/src/components/Avatar/Avatar.tsx
+++ b/packages/manager/src/components/Avatar/Avatar.tsx
@@ -6,8 +6,6 @@ import AkamaiWave from 'src/assets/logo/akamai-wave.svg';
 import { usePreferences } from 'src/queries/profile/preferences';
 import { useProfile } from 'src/queries/profile/profile';
 
-import { getContrastingFontColor } from './utils';
-
 import type { SxProps } from '@mui/material';
 
 export const DEFAULT_AVATAR_SIZE = 28;
@@ -65,7 +63,7 @@ export const Avatar = (props: Props) => {
       ) : (
         <Typography
           sx={{
-            color: getContrastingFontColor(avatarHexColor),
+            color: theme.palette.getContrastText(color ?? avatarHexColor),
             fontSize: width / 2,
           }}
         >
diff --git a/packages/manager/src/components/Avatar/utils.ts b/packages/manager/src/components/Avatar/utils.ts
deleted file mode 100644
index c4ce0281d9b..00000000000
--- a/packages/manager/src/components/Avatar/utils.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-export type RGB = { b: number; g: number; r: number };
-
-export function getContrastingFontColor(backgroundHexColor: string): string {
-  const whiteHex = '#000000';
-  const blackHex = '#FFFFFF';
-  const backgroundRBG = hexToRGB(backgroundHexColor);
-
-  const blackTextContrastRatio = getContrastRatio(
-    hexToRGB(whiteHex),
-    backgroundRBG
-  );
-  const whiteTextContrastRatio = getContrastRatio(
-    hexToRGB(blackHex),
-    backgroundRBG
-  );
-
-  if (whiteTextContrastRatio > blackTextContrastRatio) {
-    return blackHex;
-  } else {
-    return whiteHex;
-  }
-}
-
-function getContrastRatio(color1: RGB, color2: RGB): number {
-  const luminance1 = 0.2126 * color1.r + 0.7152 * color1.g + 0.0722 * color1.b;
-  const luminance2 = 0.2126 * color2.r + 0.7152 * color2.g + 0.0722 * color2.b;
-  return (
-    (Math.max(luminance1, luminance2) + 0.05) /
-    (Math.min(luminance1, luminance2) + 0.05)
-  );
-}
-
-// https://decipher.dev/30-seconds-of-typescript/docs/hexToRGB/
-export const hexToRGB = (hex: string) => {
-  hex = hex.startsWith('#') ? hex.slice(1) : hex;
-  if (hex.length === 3) {
-    hex = Array.from(hex).reduce((str, x) => str + x + x, '');
-  }
-  const values = hex
-    .split(/([a-z0-9]{2,2})/)
-    .filter(Boolean)
-    .map((x) => parseInt(x, 16));
-  return {
-    b: values[2],
-    g: values[1],
-    r: values[0],
-  };
-};

From d460d599e94a4acd8c1c0d64d489c8f488ed6a4d Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 4 Sep 2024 13:50:54 -0700
Subject: [PATCH 20/46] Clean up; change color default to darker color

---
 packages/manager/src/components/Avatar/Avatar.tsx       | 9 +++------
 packages/manager/src/features/Events/EventRow.styles.ts | 2 +-
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/manager/src/components/Avatar/Avatar.tsx b/packages/manager/src/components/Avatar/Avatar.tsx
index 0da225f94bc..3346e221f56 100644
--- a/packages/manager/src/components/Avatar/Avatar.tsx
+++ b/packages/manager/src/components/Avatar/Avatar.tsx
@@ -37,10 +37,7 @@ export const Avatar = (props: Props) => {
   const _username = username ?? profile?.username ?? '';
   const isAkamai = /^Linode$|^lke-service-account*/.test(_username);
 
-  const avatarHexColor =
-    isAkamai || !preferences?.avatarColor
-      ? theme.palette.primary.light
-      : preferences?.avatarColor;
+  const avatarColor = preferences?.avatarColor ?? theme.palette.primary.dark;
   const avatarLetter = _username[0]?.toUpperCase() ?? '';
 
   return (
@@ -50,7 +47,7 @@ export const Avatar = (props: Props) => {
           height: '2vh',
           width: '2vw',
         },
-        bgcolor: color ?? avatarHexColor,
+        bgcolor: color ?? avatarColor,
         height,
         width,
         ...sx,
@@ -63,7 +60,7 @@ export const Avatar = (props: Props) => {
       ) : (
         <Typography
           sx={{
-            color: theme.palette.getContrastText(color ?? avatarHexColor),
+            color: theme.palette.getContrastText(color ?? avatarColor),
             fontSize: width / 2,
           }}
         >
diff --git a/packages/manager/src/features/Events/EventRow.styles.ts b/packages/manager/src/features/Events/EventRow.styles.ts
index 52151c77803..5730b45e5d6 100644
--- a/packages/manager/src/features/Events/EventRow.styles.ts
+++ b/packages/manager/src/features/Events/EventRow.styles.ts
@@ -1,7 +1,7 @@
 // @TODO: delete file once Gravatar is sunset
 import { styled } from '@mui/material/styles';
 
-import { GravatarByUsername } from 'src/components/GravatarByUsername';
+import { GravatarByUsername } from '../../components/GravatarByUsername';
 
 export const StyledGravatar = styled(GravatarByUsername, {
   label: 'StyledGravatar',

From b26814d3806fa494392952c9bd733bb7fa12e312 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Wed, 4 Sep 2024 19:01:10 -0700
Subject: [PATCH 21/46] Clean up Avatar, ColorPicker; add stories

---
 .../src/components/Avatar/Avatar.stories.tsx  | 27 ++++++++++
 .../manager/src/components/Avatar/Avatar.tsx  | 39 ++++++++++----
 .../manager/src/components/ColorPicker.tsx    | 51 ------------------
 .../ColorPicker/ColorPicker.stories.tsx       | 24 +++++++++
 .../components/ColorPicker/ColorPicker.tsx    | 54 +++++++++++++++++++
 .../AvatarColorPickerDialog.tsx               | 13 ++---
 .../Support/ExpandableTicketPanel.tsx         |  2 +-
 7 files changed, 142 insertions(+), 68 deletions(-)
 create mode 100644 packages/manager/src/components/Avatar/Avatar.stories.tsx
 delete mode 100644 packages/manager/src/components/ColorPicker.tsx
 create mode 100644 packages/manager/src/components/ColorPicker/ColorPicker.stories.tsx
 create mode 100644 packages/manager/src/components/ColorPicker/ColorPicker.tsx

diff --git a/packages/manager/src/components/Avatar/Avatar.stories.tsx b/packages/manager/src/components/Avatar/Avatar.stories.tsx
new file mode 100644
index 00000000000..9817951902b
--- /dev/null
+++ b/packages/manager/src/components/Avatar/Avatar.stories.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { Avatar } from 'src/components/Avatar/Avatar';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import type { AvatarProps } from 'src/components/Avatar/Avatar';
+
+export const Default: StoryObj<AvatarProps> = {
+  render: (args) => <Avatar {...args} />,
+};
+
+export const System: StoryObj<AvatarProps> = {
+  render: (args) => <Avatar {...args} username="Linode" />,
+};
+
+const meta: Meta<AvatarProps> = {
+  args: {
+    color: '#0174bc',
+    height: 88,
+    sx: {},
+    username: 'MyUsername',
+    width: 88,
+  },
+  component: Avatar,
+  title: 'Components/Avatar',
+};
+export default meta;
diff --git a/packages/manager/src/components/Avatar/Avatar.tsx b/packages/manager/src/components/Avatar/Avatar.tsx
index 3346e221f56..78175fa1fa6 100644
--- a/packages/manager/src/components/Avatar/Avatar.tsx
+++ b/packages/manager/src/components/Avatar/Avatar.tsx
@@ -10,18 +10,37 @@ import type { SxProps } from '@mui/material';
 
 export const DEFAULT_AVATAR_SIZE = 28;
 
-interface Props {
-  className?: string;
+export interface AvatarProps {
+  /**
+   * Optional background color to override the color set in user preferences
+   * */
   color?: string;
+  /**
+   * Optional height
+   * @default 28px
+   * */
   height?: number;
+  /**
+   * Optional styles
+   * */
   sx?: SxProps;
+  /**
+   * Optional username to override the profile username; will display the first letter
+   * */
   username?: string;
+  /**
+   * Optional width
+   * @default 28px
+   * */
   width?: number;
 }
 
-export const Avatar = (props: Props) => {
+/**
+ * The Avatar component displays the first letter of a username on a solid background color.
+ * For system avatars associated with Akamai-generated events, an Akamai logo is displayed in place of a letter.
+ */
+export const Avatar = (props: AvatarProps) => {
   const {
-    className,
     color,
     height = DEFAULT_AVATAR_SIZE,
     sx,
@@ -37,30 +56,30 @@ export const Avatar = (props: Props) => {
   const _username = username ?? profile?.username ?? '';
   const isAkamai = /^Linode$|^lke-service-account*/.test(_username);
 
-  const avatarColor = preferences?.avatarColor ?? theme.palette.primary.dark;
+  const savedAvatarColor =
+    preferences?.avatarColor ?? theme.palette.primary.dark;
   const avatarLetter = _username[0]?.toUpperCase() ?? '';
 
   return (
     <_Avatar
       sx={{
         '& svg': {
-          height: '2vh',
-          width: '2vw',
+          height: width / 2,
+          width: width / 2,
         },
-        bgcolor: color ?? avatarColor,
+        bgcolor: color ?? savedAvatarColor,
         height,
         width,
         ...sx,
       }}
       alt={`Avatar for user ${username ?? profile?.email ?? ''}`}
-      className={className}
     >
       {isAkamai ? (
         <AkamaiWave />
       ) : (
         <Typography
           sx={{
-            color: theme.palette.getContrastText(color ?? avatarColor),
+            color: theme.palette.getContrastText(color ?? savedAvatarColor),
             fontSize: width / 2,
           }}
         >
diff --git a/packages/manager/src/components/ColorPicker.tsx b/packages/manager/src/components/ColorPicker.tsx
deleted file mode 100644
index b65bd5d0c76..00000000000
--- a/packages/manager/src/components/ColorPicker.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useTheme } from '@mui/material';
-import React, { useState } from 'react';
-
-import type { CSSProperties } from 'react';
-
-interface Props {
-  defaultColor?: string;
-  handleColorChange: (color: string) => void;
-  hideLabel?: boolean; // TODO: visually hidden
-  inputStyles?: CSSProperties;
-  label: string;
-  labelStyles?: CSSProperties;
-}
-
-export const ColorPicker = (props: Props) => {
-  const {
-    defaultColor,
-    handleColorChange,
-    inputStyles,
-    label,
-    labelStyles,
-  } = props;
-
-  const theme = useTheme();
-  const [color, setColor] = useState<string>(
-    defaultColor ?? theme.palette.primary.dark
-  );
-
-  return (
-    <>
-      <label
-        className="visually-hidden"
-        htmlFor="color-picker"
-        style={labelStyles}
-      >
-        {label}
-      </label>
-      <input
-        onChange={(e) => {
-          setColor(e.target.value);
-          handleColorChange(e.target.value);
-        }}
-        color={color}
-        id="color-picker"
-        style={inputStyles}
-        type="color"
-        value={color}
-      />
-    </>
-  );
-};
diff --git a/packages/manager/src/components/ColorPicker/ColorPicker.stories.tsx b/packages/manager/src/components/ColorPicker/ColorPicker.stories.tsx
new file mode 100644
index 00000000000..aba8758b071
--- /dev/null
+++ b/packages/manager/src/components/ColorPicker/ColorPicker.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { ColorPicker } from 'src/components/ColorPicker/ColorPicker';
+
+import type { ColorPickerProps } from './ColorPicker';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<ColorPickerProps> = {
+  args: {
+    defaultColor: '#0174bc',
+    label: 'Label for color picker',
+    onChange: () => undefined,
+  },
+  component: ColorPicker,
+  title: 'Components/ColorPicker',
+};
+
+export const Default: StoryObj<ColorPickerProps> = {
+  render: (args) => {
+    return <ColorPicker {...args} />;
+  },
+};
+
+export default meta;
diff --git a/packages/manager/src/components/ColorPicker/ColorPicker.tsx b/packages/manager/src/components/ColorPicker/ColorPicker.tsx
new file mode 100644
index 00000000000..6b611c91ee7
--- /dev/null
+++ b/packages/manager/src/components/ColorPicker/ColorPicker.tsx
@@ -0,0 +1,54 @@
+import { useTheme } from '@mui/material';
+import React, { useState } from 'react';
+
+import type { CSSProperties } from 'react';
+
+export interface ColorPickerProps {
+  /**
+   * Optional color to specify as a default
+   * */
+  defaultColor?: string;
+  /**
+   * Optional styles for the input element
+   * */
+  inputStyles?: CSSProperties;
+  /**
+   * Visually hidden label to semantically describe the color picker for accessibility
+   * */
+  label: string;
+  /**
+   * Function to update the color based on user selection
+   * */
+  onChange: (color: string) => void;
+}
+
+/**
+ * The ColorPicker component serves as a wrapper for the native HTML input color picker.
+ */
+export const ColorPicker = (props: ColorPickerProps) => {
+  const { defaultColor, inputStyles, label, onChange } = props;
+
+  const theme = useTheme();
+  const [color, setColor] = useState<string>(
+    defaultColor ?? theme.palette.primary.dark
+  );
+
+  return (
+    <>
+      <label className="visually-hidden" htmlFor="color-picker">
+        {label}
+      </label>
+      <input
+        onChange={(e) => {
+          setColor(e.target.value);
+          onChange(e.target.value);
+        }}
+        color={color}
+        id="color-picker"
+        style={inputStyles}
+        type="color"
+        value={color}
+      />
+    </>
+  );
+};
diff --git a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
index 0cef160187c..cd10edd15c1 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Avatar } from 'src/components/Avatar/Avatar';
-import { ColorPicker } from 'src/components/ColorPicker';
+import { ColorPicker } from 'src/components/ColorPicker/ColorPicker';
 import { Dialog } from 'src/components/Dialog/Dialog';
 import { Stack } from 'src/components/Stack';
 import {
@@ -27,20 +27,21 @@ export const AvatarColorPickerDialog = (props: Props) => {
 
   return (
     <Dialog onClose={handleClose} open={open} title="Change Avatar Color">
-      <Stack alignItems={'baseline'} display={'flex'} flexDirection={'row'}>
+      <Stack alignItems="baseline" display="flex" flexDirection="row">
         <Typography sx={{ paddingRight: 1 }}>
           Select a background color for your avatar:
         </Typography>
         <ColorPicker
           defaultColor={preferences?.avatarColor}
-          handleColorChange={(color: string) => setAvatarColor(color)}
+          inputStyles={{ height: 30, width: 30 }}
           label="Avatar background color picker"
+          onChange={(color: string) => setAvatarColor(color)}
         />
       </Stack>
       <Stack
-        display={'flex'}
-        flexDirection={'row'}
-        justifyContent={'center'}
+        display="flex"
+        flexDirection="row"
+        justifyContent="center"
         sx={{ paddingY: 2 }}
       >
         <Avatar color={avatarColor} height={88} width={88} />
diff --git a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
index 5cbdf6960ff..7d51de74bdd 100644
--- a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
+++ b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
@@ -137,7 +137,7 @@ export const ExpandableTicketPanel = React.memo((props: Props) => {
   const renderAvatar = (id: string) => {
     return (
       <div className={classes.userWrapper}>
-        <Avatar
+        <Avatar // TODO: switch to component Avatar
           alt="Gravatar"
           className={classes.leftIcon}
           src={`https://gravatar.com/avatar/${id}?d=404`}

From f093384a0311a4972fdb592b66445fbf7286668f Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Thu, 5 Sep 2024 00:09:38 -0700
Subject: [PATCH 22/46] Clean up and add unit tests

---
 .../manager/src/assets/logo/akamai-wave.svg   |  2 +-
 .../src/components/Avatar/Avatar.test.tsx     | 74 +++++++++++++++++++
 .../manager/src/components/Avatar/Avatar.tsx  |  2 +
 .../AvatarColorPickerDialog.test.tsx          | 43 +++++++++++
 .../AvatarColorPickerDialog.tsx               | 10 ++-
 5 files changed, 126 insertions(+), 5 deletions(-)
 create mode 100644 packages/manager/src/components/Avatar/Avatar.test.tsx
 create mode 100644 packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.test.tsx

diff --git a/packages/manager/src/assets/logo/akamai-wave.svg b/packages/manager/src/assets/logo/akamai-wave.svg
index 88cd5af9759..423f77081c8 100644
--- a/packages/manager/src/assets/logo/akamai-wave.svg
+++ b/packages/manager/src/assets/logo/akamai-wave.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img">
 <path d="M13.1744 23.4627C13.7477 23.6418 13.7248 24 13.0826 24C6.24801 24 0.674805 18.6269 0.674805 12C0.674805 5.37313 6.22507 0 13.0826 0C13.7248 0 13.8624 0.335821 13.3349 0.492537C8.19748 1.92537 4.43614 6.53731 4.43614 12C4.43614 17.3955 8.10574 21.9627 13.1744 23.4627ZM6.77551 14.7985C6.75258 14.4851 6.72964 14.1493 6.72964 13.8134C6.72964 8.55224 11.1102 4.27612 16.4999 4.27612C21.5915 4.27612 23.1282 6.49254 23.3116 6.35821C23.5181 6.20149 21.4539 1.79104 15.4679 1.79104C10.0781 1.79104 5.69757 6.06716 5.69757 11.3284C5.69757 12.5373 5.92692 13.7015 6.36268 14.7761C6.54616 15.2239 6.82138 15.2463 6.77551 14.7985ZM10.8809 7.92537C13.4267 6.85075 16.6146 6.80597 19.7338 7.8806C21.8438 8.59701 23.0594 9.62687 23.1511 9.58209C23.3116 9.51493 21.9355 7.36567 19.4127 6.42537C16.3623 5.30597 13.1056 5.88806 10.7203 7.72388C10.468 7.92537 10.5598 8.0597 10.8809 7.92537Z" fill="white"/>
 </svg>
diff --git a/packages/manager/src/components/Avatar/Avatar.test.tsx b/packages/manager/src/components/Avatar/Avatar.test.tsx
new file mode 100644
index 00000000000..e1c553d2c15
--- /dev/null
+++ b/packages/manager/src/components/Avatar/Avatar.test.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+
+import { profileFactory } from 'src/factories/profile';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { Avatar } from './Avatar';
+
+import type { AvatarProps } from './Avatar';
+
+const mockProps: AvatarProps = {};
+
+const queryMocks = vi.hoisted(() => ({
+  useProfile: vi.fn().mockReturnValue({}),
+}));
+
+vi.mock('src/queries/profile/profile', async () => {
+  const actual = await vi.importActual('src/queries/profile/profile');
+  return {
+    ...actual,
+    useProfile: queryMocks.useProfile,
+  };
+});
+
+describe('Avatar', () => {
+  it('should render the first letter of a username from /profile with default background color', () => {
+    queryMocks.useProfile.mockReturnValue({
+      data: profileFactory.build({ username: 'my-user' }),
+    });
+    const { getByTestId } = renderWithTheme(<Avatar {...mockProps} />);
+    const avatar = getByTestId('avatar');
+    const avatarStyles = getComputedStyle(avatar);
+
+    expect(getByTestId('avatar-letter')).toHaveTextContent('M');
+    expect(avatarStyles.backgroundColor).toBe('rgb(1, 116, 188)'); // theme.color.primary.dark (#0174bc)
+  });
+
+  it('should render a background color from props', () => {
+    queryMocks.useProfile.mockReturnValue({
+      data: profileFactory.build({ username: 'my-user' }),
+    });
+
+    const { getByTestId } = renderWithTheme(
+      <Avatar {...mockProps} color="#000000" />
+    );
+    const avatar = getByTestId('avatar');
+    const avatarText = getByTestId('avatar-letter');
+    const avatarStyles = getComputedStyle(avatar);
+    const avatarTextStyles = getComputedStyle(avatarText);
+
+    // Confirm background color contrasts with text color.
+    expect(avatarStyles.backgroundColor).toBe('rgb(0, 0, 0)'); // black
+    expect(avatarTextStyles.color).toBe('rgb(255, 255, 255)'); // white
+  });
+
+  it('should render the first letter of username from props', async () => {
+    const { getByTestId } = renderWithTheme(
+      <Avatar {...mockProps} username="test" />
+    );
+
+    expect(getByTestId('avatar-letter')).toHaveTextContent('T');
+  });
+
+  it('should render an svg instead of first letter for system users', async () => {
+    const systemUsernames = ['Linode', 'lke-service-account-123'];
+
+    systemUsernames.forEach((username, i) => {
+      const { getAllByRole, queryByTestId } = renderWithTheme(
+        <Avatar {...mockProps} username={username} />
+      );
+      expect(getAllByRole('img')[i]).toBeVisible();
+      expect(queryByTestId('avatar-letter')).toBe(null);
+    });
+  });
+});
diff --git a/packages/manager/src/components/Avatar/Avatar.tsx b/packages/manager/src/components/Avatar/Avatar.tsx
index 78175fa1fa6..339e7db6ded 100644
--- a/packages/manager/src/components/Avatar/Avatar.tsx
+++ b/packages/manager/src/components/Avatar/Avatar.tsx
@@ -73,6 +73,7 @@ export const Avatar = (props: AvatarProps) => {
         ...sx,
       }}
       alt={`Avatar for user ${username ?? profile?.email ?? ''}`}
+      data-testid="avatar"
     >
       {isAkamai ? (
         <AkamaiWave />
@@ -82,6 +83,7 @@ export const Avatar = (props: AvatarProps) => {
             color: theme.palette.getContrastText(color ?? savedAvatarColor),
             fontSize: width / 2,
           }}
+          data-testid="avatar-letter"
         >
           {avatarLetter}
         </Typography>
diff --git a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.test.tsx b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.test.tsx
new file mode 100644
index 00000000000..2ffa6b05a86
--- /dev/null
+++ b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.test.tsx
@@ -0,0 +1,43 @@
+import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { AvatarColorPickerDialog } from './AvatarColorPickerDialog';
+
+import type { AvatarColorPickerDialogProps } from './AvatarColorPickerDialog';
+
+const mockProps: AvatarColorPickerDialogProps = {
+  handleClose: vi.fn(),
+  open: true,
+};
+
+describe('AvatarColorPicker', () => {
+  it('should render a dialog with a title, color picker, and avatar components', () => {
+    const { getByLabelText, getByTestId, getByTitle } = renderWithTheme(
+      <AvatarColorPickerDialog {...mockProps} />
+    );
+
+    expect(getByTitle('Change Avatar Color')).toBeVisible();
+    expect(getByLabelText('Avatar color picker')).toBeVisible();
+    expect(getByTestId('avatar')).toBeVisible();
+  });
+
+  it('calls onClose when Close button is clicked', async () => {
+    const { getByText } = renderWithTheme(
+      <AvatarColorPickerDialog {...mockProps} />
+    );
+
+    await fireEvent.click(getByText('Close'));
+    expect(mockProps.handleClose).toHaveBeenCalledOnce();
+  });
+
+  it.skip('closes when Save button is clicked', async () => {
+    const { getByText, queryByTitle } = renderWithTheme(
+      <AvatarColorPickerDialog {...mockProps} />
+    );
+
+    await fireEvent.click(getByText('Save'));
+    expect(queryByTitle('Change Avatar Color')).toBe(null);
+  });
+});
diff --git a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
index cd10edd15c1..dd0cca24ccf 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
@@ -12,12 +12,14 @@ import {
   usePreferences,
 } from 'src/queries/profile/preferences';
 
-interface Props {
+export interface AvatarColorPickerDialogProps {
   handleClose: () => void;
   open: boolean;
 }
 
-export const AvatarColorPickerDialog = (props: Props) => {
+export const AvatarColorPickerDialog = (
+  props: AvatarColorPickerDialogProps
+) => {
   const { handleClose, open } = props;
 
   const [avatarColor, setAvatarColor] = useState<string>();
@@ -27,14 +29,14 @@ export const AvatarColorPickerDialog = (props: Props) => {
 
   return (
     <Dialog onClose={handleClose} open={open} title="Change Avatar Color">
-      <Stack alignItems="baseline" display="flex" flexDirection="row">
+      <Stack alignItems="center" display="flex" flexDirection="row">
         <Typography sx={{ paddingRight: 1 }}>
           Select a background color for your avatar:
         </Typography>
         <ColorPicker
           defaultColor={preferences?.avatarColor}
           inputStyles={{ height: 30, width: 30 }}
-          label="Avatar background color picker"
+          label="Avatar color picker"
           onChange={(color: string) => setAvatarColor(color)}
         />
       </Stack>

From ccea1bd5d34133fd1285a9c0e500df02f91f2287 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Thu, 5 Sep 2024 07:12:53 -0700
Subject: [PATCH 23/46] Clean up; fix test

---
 packages/manager/src/features/Events/EventRow.test.tsx          | 2 +-
 .../features/NotificationCenter/NotificationCenter.styles.ts    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/features/Events/EventRow.test.tsx b/packages/manager/src/features/Events/EventRow.test.tsx
index 825e4d7c09f..311b12b1a74 100644
--- a/packages/manager/src/features/Events/EventRow.test.tsx
+++ b/packages/manager/src/features/Events/EventRow.test.tsx
@@ -29,6 +29,6 @@ describe('EventRow', () => {
         name: /Two-factor authentication has been enabled./i,
       })
     ).toBeInTheDocument();
-    expect(getByRole('cell', { name: 'test_user' })).toBeInTheDocument();
+    expect(getByRole('cell', { name: /test_user/i })).toBeInTheDocument();
   });
 });
diff --git a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
index 12546a3369f..069b784e94f 100644
--- a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
+++ b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
@@ -129,7 +129,7 @@ export const NotificationEventGravatar = styled(GravatarByUsername, {
 }));
 
 export const NotificationEventAvatar = styled(Avatar, {
-  label: 'StyledAvatarByUsername',
+  label: 'StyledAvatar',
 })(() => ({
   height: 32,
   marginTop: 2,

From edb2fb1c8dfe0efbb69ab7a2918fb2725ea2ed51 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Thu, 5 Sep 2024 08:40:44 -0700
Subject: [PATCH 24/46] Forgot to push last changes for Support; default color
 fix

---
 .../manager/src/components/Avatar/Avatar.tsx  |  4 +-
 .../Support/ExpandableTicketPanel.tsx         | 45 +++++++++++++++----
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/packages/manager/src/components/Avatar/Avatar.tsx b/packages/manager/src/components/Avatar/Avatar.tsx
index 339e7db6ded..35987f23c40 100644
--- a/packages/manager/src/components/Avatar/Avatar.tsx
+++ b/packages/manager/src/components/Avatar/Avatar.tsx
@@ -57,7 +57,9 @@ export const Avatar = (props: AvatarProps) => {
   const isAkamai = /^Linode$|^lke-service-account*/.test(_username);
 
   const savedAvatarColor =
-    preferences?.avatarColor ?? theme.palette.primary.dark;
+    isAkamai || !preferences?.avatarColor
+      ? theme.palette.primary.dark
+      : preferences.avatarColor;
   const avatarLetter = _username[0]?.toUpperCase() ?? '';
 
   return (
diff --git a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
index 7d51de74bdd..c0716e9f996 100644
--- a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
+++ b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
@@ -1,18 +1,23 @@
-import { SupportReply, SupportTicket } from '@linode/api-v4';
 import Avatar from '@mui/material/Avatar';
-import { Theme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import UserIcon from 'src/assets/icons/account.svg';
+import { Avatar as NewAvatar } from 'src/components/Avatar/Avatar';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { Typography } from 'src/components/Typography';
+import { useProfile } from 'src/queries/profile/profile';
+import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 
 import { Hively, shouldRenderHively } from './Hively';
 import { TicketDetailText } from './TicketDetailText';
 import { OFFICIAL_USERNAMES } from './ticketUtils';
 
+import type { SupportReply, SupportTicket } from '@linode/api-v4';
+import type { Theme } from '@mui/material/styles';
+
 const useStyles = makeStyles()((theme: Theme) => ({
   '@keyframes fadeIn': {
     from: {
@@ -99,10 +104,20 @@ interface Data {
 export const ExpandableTicketPanel = React.memo((props: Props) => {
   const { classes } = useStyles();
 
+  const theme = useTheme();
+
   const { open, parentTicket, reply, ticket, ticketUpdated } = props;
 
   const [data, setData] = React.useState<Data | undefined>(undefined);
 
+  const { data: profile } = useProfile();
+
+  const [hasGravatar, setHasGravatar] = React.useState(false);
+
+  checkForGravatar(getGravatarUrl(reply?.created_by ?? '')).then((res) =>
+    setHasGravatar(res)
+  );
+
   React.useEffect(() => {
     if (!ticket && !reply) {
       return;
@@ -137,13 +152,25 @@ export const ExpandableTicketPanel = React.memo((props: Props) => {
   const renderAvatar = (id: string) => {
     return (
       <div className={classes.userWrapper}>
-        <Avatar // TODO: switch to component Avatar
-          alt="Gravatar"
-          className={classes.leftIcon}
-          src={`https://gravatar.com/avatar/${id}?d=404`}
-        >
-          <UserIcon />
-        </Avatar>
+        {hasGravatar ? (
+          <Avatar
+            alt="Gravatar"
+            className={classes.leftIcon}
+            src={`https://gravatar.com/avatar/${id}?d=404`}
+          >
+            <UserIcon />
+          </Avatar>
+        ) : (
+          <NewAvatar
+            color={
+              reply?.created_by !== profile?.username
+                ? theme.palette.primary.dark
+                : undefined
+            }
+            sx={{ marginTop: 1 }}
+            username={reply?.created_by}
+          />
+        )}
       </div>
     );
   };

From 65f9271c47a5afae81a07f107f627c75cc24113c Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Thu, 5 Sep 2024 08:41:33 -0700
Subject: [PATCH 25/46] Add changesets

---
 packages/manager/.changeset/pr-10859-added-1725550540714.md  | 5 +++++
 .../manager/.changeset/pr-10859-changed-1725550568902.md     | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-10859-added-1725550540714.md
 create mode 100644 packages/manager/.changeset/pr-10859-changed-1725550568902.md

diff --git a/packages/manager/.changeset/pr-10859-added-1725550540714.md b/packages/manager/.changeset/pr-10859-added-1725550540714.md
new file mode 100644
index 00000000000..c56813e96f2
--- /dev/null
+++ b/packages/manager/.changeset/pr-10859-added-1725550540714.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Gravatar sunset banner for existing Gravatar users ([#10859](https://github.com/linode/manager/pull/10859))
diff --git a/packages/manager/.changeset/pr-10859-changed-1725550568902.md b/packages/manager/.changeset/pr-10859-changed-1725550568902.md
new file mode 100644
index 00000000000..f7be9157e66
--- /dev/null
+++ b/packages/manager/.changeset/pr-10859-changed-1725550568902.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Avatars for users without Gravatars ([#10859](https://github.com/linode/manager/pull/10859))

From a1c35ce4fd94552301fbdfe33cf56b6467e45d7c Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Thu, 5 Sep 2024 13:11:35 -0700
Subject: [PATCH 26/46] Fix an accidentally skipped test

---
 .../DisplaySettings/AvatarColorPickerDialog.test.tsx      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.test.tsx b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.test.tsx
index 2ffa6b05a86..19b8557ac5d 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.test.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.test.tsx
@@ -29,15 +29,15 @@ describe('AvatarColorPicker', () => {
     );
 
     await fireEvent.click(getByText('Close'));
-    expect(mockProps.handleClose).toHaveBeenCalledOnce();
+    expect(mockProps.handleClose).toHaveBeenCalled();
   });
 
-  it.skip('closes when Save button is clicked', async () => {
-    const { getByText, queryByTitle } = renderWithTheme(
+  it('closes when Save button is clicked', async () => {
+    const { getByText } = renderWithTheme(
       <AvatarColorPickerDialog {...mockProps} />
     );
 
     await fireEvent.click(getByText('Save'));
-    expect(queryByTitle('Change Avatar Color')).toBe(null);
+    expect(mockProps.handleClose).toHaveBeenCalled();
   });
 });

From bef60881e42faab15c8c098430a2456a7e1544bb Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Fri, 6 Sep 2024 09:53:04 -0700
Subject: [PATCH 27/46] Address UX feedback: use 'Avatar' over 'Profile photo'

---
 .../src/features/Profile/DisplaySettings/DisplaySettings.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index d8b90800a12..79bd5cf4d8c 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -115,7 +115,7 @@ export const DisplaySettings = () => {
             )}
             <div>
               <Typography sx={{ fontSize: '1rem' }} variant="h2">
-                Profile photo
+                {hasGravatar ? 'Profile photo' : 'Avatar'}
                 {hasGravatar && (
                   <StyledTooltipIcon
                     sxTooltipIcon={{
@@ -131,7 +131,7 @@ export const DisplaySettings = () => {
               <StyledProfileCopy variant="body1">
                 {hasGravatar
                   ? 'Create, upload, and manage your globally recognized avatar from a single place with Gravatar.'
-                  : 'Your profile photo is automatically generated using the first character of your username.'}
+                  : 'Your avatar is automatically generated using the first character of your username.'}
               </StyledProfileCopy>
               {hasGravatar ? (
                 <StyledAddImageLink external to="https://en.gravatar.com/">

From bb98f35612e882f943283749496aeb72782a4cee Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Fri, 6 Sep 2024 09:54:41 -0700
Subject: [PATCH 28/46] Address feedback: avoid regex

---
 packages/manager/src/components/Avatar/Avatar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/manager/src/components/Avatar/Avatar.tsx b/packages/manager/src/components/Avatar/Avatar.tsx
index 35987f23c40..968ec8b5834 100644
--- a/packages/manager/src/components/Avatar/Avatar.tsx
+++ b/packages/manager/src/components/Avatar/Avatar.tsx
@@ -54,7 +54,8 @@ export const Avatar = (props: AvatarProps) => {
   const { data: profile } = useProfile();
 
   const _username = username ?? profile?.username ?? '';
-  const isAkamai = /^Linode$|^lke-service-account*/.test(_username);
+  const isAkamai =
+    _username === 'Linode' || _username.startsWith('lke-service-account');
 
   const savedAvatarColor =
     isAkamai || !preferences?.avatarColor

From 10f07423d801dc2bc0a4e2cb2f7b1834a15ae3a0 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Fri, 6 Sep 2024 10:18:39 -0700
Subject: [PATCH 29/46] Fix bug: NotificationCenterEvent missing Linode system
 avatar

---
 .../Events/NotificationCenterEvent.tsx        |  2 +-
 .../NotificationCenter.styles.ts              |  2 +-
 packages/manager/src/hooks/useGravatar.ts     | 19 +++++++++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 packages/manager/src/hooks/useGravatar.ts

diff --git a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
index ddc517bd2ef..d80b85da6f7 100644
--- a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
+++ b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
@@ -58,7 +58,7 @@ export const NotificationCenterEvent = React.memo(
         {hasGravatar ? (
           <NotificationEventGravatar username={event.username} />
         ) : (
-          <NotificationEventAvatar username={event.username ?? ''} />
+          <NotificationEventAvatar username={event.username ?? 'Linode'} />
         )}
         <Box sx={{ marginTop: '-2px', paddingRight: 1, width: '100%' }}>
           {message}
diff --git a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
index 069b784e94f..3c9fc6285ab 100644
--- a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
+++ b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
@@ -2,6 +2,7 @@ import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 import { styled } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 
+import { Avatar } from 'src/components/Avatar/Avatar';
 import { Box } from 'src/components/Box';
 import { GravatarByUsername } from 'src/components/GravatarByUsername';
 import { Link } from 'src/components/Link';
@@ -10,7 +11,6 @@ import { omittedProps } from 'src/utilities/omittedProps';
 
 import type { NotificationCenterNotificationMessageProps } from './types';
 import type { Theme } from '@mui/material/styles';
-import { Avatar } from 'src/components/Avatar/Avatar';
 
 export const useStyles = makeStyles()((theme: Theme) => ({
   inverted: {
diff --git a/packages/manager/src/hooks/useGravatar.ts b/packages/manager/src/hooks/useGravatar.ts
new file mode 100644
index 00000000000..977a8097189
--- /dev/null
+++ b/packages/manager/src/hooks/useGravatar.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
+
+export function useGravatar(email: string | undefined) {
+  const [hasGravatar, setHasGravatar] = useState(true);
+
+  useEffect(() => {
+    if (email) {
+      checkForGravatar(getGravatarUrl(email)).then((res) =>
+        setHasGravatar(res)
+      );
+    } else {
+      setHasGravatar(false);
+    }
+  }, [email]);
+
+  return hasGravatar;
+}

From 95e2a76b4f32e21bd04235fddf076d8f2a1fcadc Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Fri, 6 Sep 2024 10:50:39 -0700
Subject: [PATCH 30/46] Use hook throughout gravatar replacement

---
 .../src/components/AccessPanel/UserSSHKeyPanel.tsx       | 7 ++-----
 packages/manager/src/features/Events/EventRow.tsx        | 9 +++------
 .../GlobalNotifications/GravatarSunsetBanner.tsx         | 6 ++----
 .../Events/NotificationCenterEvent.tsx                   | 7 ++-----
 .../features/Profile/DisplaySettings/DisplaySettings.tsx | 8 ++------
 .../src/features/Support/ExpandableTicketPanel.tsx       | 8 ++------
 .../manager/src/features/TopMenu/UserMenu/UserMenu.tsx   | 7 ++-----
 packages/manager/src/features/Users/UserRow.tsx          | 7 ++-----
 packages/manager/src/hooks/useGravatar.ts                | 2 +-
 9 files changed, 18 insertions(+), 43 deletions(-)

diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
index f46bf8d9d51..838e13ac1e5 100644
--- a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
+++ b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
@@ -12,10 +12,10 @@ import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { Typography } from 'src/components/Typography';
 import { CreateSSHKeyDrawer } from 'src/features/Profile/SSHKeys/CreateSSHKeyDrawer';
+import { useGravatar } from 'src/hooks/useGravatar';
 import { usePagination } from 'src/hooks/usePagination';
 import { useAccountUsers } from 'src/queries/account/users';
 import { useProfile, useSSHKeysQuery } from 'src/queries/profile/profile';
-import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 import { truncateAndJoinList } from 'src/utilities/stringUtils';
 
 import { Avatar } from '../Avatar/Avatar';
@@ -70,10 +70,7 @@ const UserSSHKeyPanel = (props: Props) => {
 
   const { data: profile } = useProfile();
 
-  const [hasGravatar, setHasGravatar] = React.useState(false);
-  checkForGravatar(getGravatarUrl(profile?.email ?? '')).then((res) =>
-    setHasGravatar(res)
-  );
+  const hasGravatar = useGravatar(profile?.email);
 
   const isRestricted = profile?.restricted ?? false;
 
diff --git a/packages/manager/src/features/Events/EventRow.tsx b/packages/manager/src/features/Events/EventRow.tsx
index a67b52a28bf..e3ea931d648 100644
--- a/packages/manager/src/features/Events/EventRow.tsx
+++ b/packages/manager/src/features/Events/EventRow.tsx
@@ -7,9 +7,9 @@ import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { Hidden } from 'src/components/Hidden';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
+import { useGravatar } from 'src/hooks/useGravatar';
 import { useAccountUser } from 'src/queries/account/users';
 import { getEventTimestamp } from 'src/utilities/eventUtils';
-import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 
 import { StyledGravatar } from './EventRow.styles';
 import {
@@ -34,7 +34,8 @@ export const EventRow = (props: EventRowProps) => {
     username: getEventUsername(event),
   };
   const { data: user } = useAccountUser(username);
-  const [hasGravatar, setHasGravatar] = React.useState(false);
+
+  const hasGravatar = useGravatar(user?.email);
 
   if (!message) {
     return null;
@@ -42,10 +43,6 @@ export const EventRow = (props: EventRowProps) => {
 
   const { progressEventDisplay, showProgress } = formatProgressEvent(event);
 
-  checkForGravatar(getGravatarUrl(user?.email ?? '')).then((res) =>
-    setHasGravatar(res)
-  );
-
   return (
     <TableRow data-qa-event-row data-test-id={action}>
       <TableCell data-qa-event-message-cell parentColumn="Event">
diff --git a/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx b/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx
index f3ada15a27b..50055637fc3 100644
--- a/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx
+++ b/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { useState } from 'react';
 
 import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner';
 import { Typography } from 'src/components/Typography';
-import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
+import { useGravatar } from 'src/hooks/useGravatar';
 
 interface Props {
   email: string;
@@ -12,9 +11,8 @@ interface Props {
 export const GravatarSunsetBanner = (props: Props) => {
   const { email } = props;
   const GRAVATAR_DEPRECATION_DATE = 'September 28th, 2024';
-  const [hasGravatar, setHasGravatar] = useState(false);
 
-  checkForGravatar(getGravatarUrl(email)).then((res) => setHasGravatar(res));
+  const hasGravatar = useGravatar(email);
 
   if (!hasGravatar) {
     return;
diff --git a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
index d80b85da6f7..71be382a4cc 100644
--- a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
+++ b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
@@ -8,8 +8,8 @@ import {
   getEventMessage,
   getEventUsername,
 } from 'src/features/Events/utils';
+import { useGravatar } from 'src/hooks/useGravatar';
 import { useAccountUser } from 'src/queries/account/users';
-import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 
 import {
   NotificationEventAvatar,
@@ -34,10 +34,7 @@ export const NotificationCenterEvent = React.memo(
     const username = getEventUsername(event);
 
     const { data: user } = useAccountUser(username);
-    const [hasGravatar, setHasGravatar] = React.useState(false);
-    checkForGravatar(getGravatarUrl(user?.email ?? '')).then((res) =>
-      setHasGravatar(res)
-    );
+    const hasGravatar = useGravatar(user?.email);
 
     /**
      * Some event types may not be handled by our system (or new types or new ones may be added that we haven't caught yet).
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index 79bd5cf4d8c..a36899e2c0f 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -1,6 +1,5 @@
 import { updateUser } from '@linode/api-v4/lib/account';
 import { styled, useTheme } from '@mui/material/styles';
-import { useState } from 'react';
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
@@ -17,9 +16,9 @@ import { SingleTextFieldForm } from 'src/components/SingleTextFieldForm/SingleTe
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { RESTRICTED_FIELD_TOOLTIP } from 'src/features/Account/constants';
+import { useGravatar } from 'src/hooks/useGravatar';
 import { useNotificationsQuery } from 'src/queries/account/notifications';
 import { useMutateProfile, useProfile } from 'src/queries/profile/profile';
-import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 
 import { AvatarColorPickerDialog } from './AvatarColorPickerDialog';
 import { TimezoneForm } from './TimezoneForm';
@@ -39,10 +38,7 @@ export const DisplaySettings = () => {
 
   const isProxyUser = profile?.user_type === 'proxy';
 
-  const [hasGravatar, setHasGravatar] = useState(false);
-  checkForGravatar(getGravatarUrl(profile?.email ?? '')).then((res: boolean) =>
-    setHasGravatar(res)
-  );
+  const hasGravatar = useGravatar(profile?.email);
 
   const [
     isColorPickerDialogOpen,
diff --git a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
index c0716e9f996..cd896d4ee93 100644
--- a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
+++ b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
@@ -8,8 +8,8 @@ import UserIcon from 'src/assets/icons/account.svg';
 import { Avatar as NewAvatar } from 'src/components/Avatar/Avatar';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { Typography } from 'src/components/Typography';
+import { useGravatar } from 'src/hooks/useGravatar';
 import { useProfile } from 'src/queries/profile/profile';
-import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 
 import { Hively, shouldRenderHively } from './Hively';
 import { TicketDetailText } from './TicketDetailText';
@@ -112,11 +112,7 @@ export const ExpandableTicketPanel = React.memo((props: Props) => {
 
   const { data: profile } = useProfile();
 
-  const [hasGravatar, setHasGravatar] = React.useState(false);
-
-  checkForGravatar(getGravatarUrl(reply?.created_by ?? '')).then((res) =>
-    setHasGravatar(res)
-  );
+  const hasGravatar = useGravatar(reply?.created_by);
 
   React.useEffect(() => {
     if (!ticket && !reply) {
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index 194c6cc19a9..1a59d722428 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -21,11 +21,11 @@ import { switchAccountSessionContext } from 'src/context/switchAccountSessionCon
 import { SwitchAccountButton } from 'src/features/Account/SwitchAccountButton';
 import { SwitchAccountDrawer } from 'src/features/Account/SwitchAccountDrawer';
 import { useIsParentTokenExpired } from 'src/features/Account/SwitchAccounts/useIsParentTokenExpired';
+import { useGravatar } from 'src/hooks/useGravatar';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useAccount } from 'src/queries/account/account';
 import { useGrants, useProfile } from 'src/queries/profile/profile';
 import { sendSwitchAccountEvent } from 'src/utilities/analytics/customEventAnalytics';
-import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 import { getStorage, setStorage } from 'src/utilities/storage';
 
 import { getCompanyNameOrEmail } from './utils';
@@ -106,10 +106,7 @@ export const UserMenu = React.memo(() => {
     theme.breakpoints.down('sm')
   );
 
-  const [hasGravatar, setHasGravatar] = React.useState(false);
-  checkForGravatar(getGravatarUrl(profile?.email ?? '')).then((res) =>
-    setHasGravatar(res)
-  );
+  const hasGravatar = useGravatar(profile?.email);
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
diff --git a/packages/manager/src/features/Users/UserRow.tsx b/packages/manager/src/features/Users/UserRow.tsx
index 9e5a6185482..952ba1c37e3 100644
--- a/packages/manager/src/features/Users/UserRow.tsx
+++ b/packages/manager/src/features/Users/UserRow.tsx
@@ -11,10 +11,10 @@ import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { Typography } from 'src/components/Typography';
+import { useGravatar } from 'src/hooks/useGravatar';
 import { useAccountUserGrants } from 'src/queries/account/users';
 import { useProfile } from 'src/queries/profile/profile';
 import { capitalize } from 'src/utilities/capitalize';
-import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 
 import { UsersActionMenu } from './UsersActionMenu';
 
@@ -28,14 +28,11 @@ interface Props {
 export const UserRow = ({ onDelete, user }: Props) => {
   const { data: grants } = useAccountUserGrants(user.username);
   const { data: profile } = useProfile();
-  const [hasGravatar, setHasGravatar] = React.useState(false);
 
   const isProxyUser = Boolean(user.user_type === 'proxy');
   const showChildAccountAccessCol = profile?.user_type === 'parent';
 
-  checkForGravatar(getGravatarUrl(user?.email ?? '')).then((res) =>
-    setHasGravatar(res)
-  );
+  const hasGravatar = useGravatar(user?.email);
 
   return (
     <TableRow data-qa-table-row={user.username} key={user.username}>
diff --git a/packages/manager/src/hooks/useGravatar.ts b/packages/manager/src/hooks/useGravatar.ts
index 977a8097189..7e670d219bd 100644
--- a/packages/manager/src/hooks/useGravatar.ts
+++ b/packages/manager/src/hooks/useGravatar.ts
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 
 export function useGravatar(email: string | undefined) {
-  const [hasGravatar, setHasGravatar] = useState(true);
+  const [hasGravatar, setHasGravatar] = useState(false);
 
   useEffect(() => {
     if (email) {

From 702cab44f1c6b45a9966263f1b38f593dd26ae65 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Fri, 6 Sep 2024 14:09:13 -0400
Subject: [PATCH 31/46] improve useGravatar hook

---
 packages/manager/src/hooks/useGravatar.ts | 34 ++++++++++++++++++-----
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/packages/manager/src/hooks/useGravatar.ts b/packages/manager/src/hooks/useGravatar.ts
index 7e670d219bd..855225c6a7e 100644
--- a/packages/manager/src/hooks/useGravatar.ts
+++ b/packages/manager/src/hooks/useGravatar.ts
@@ -2,18 +2,38 @@ import { useEffect, useState } from 'react';
 
 import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 
-export function useGravatar(email: string | undefined) {
+// set a cache to prevent duplicate requests
+const gravatarCache: Record<string, boolean> = {};
+
+/**
+ * useGravatar
+ *
+ * @description
+ * This hook checks if a user has a Gravatar associated with their email.
+ * It uses a cache to prevent duplicate requests.
+ *
+ * @param email - The email address to check for a Gravatar.
+ * @returns - A boolean indicating whether the user has a Gravatar.
+ */
+export const useGravatar = (email: string | undefined) => {
   const [hasGravatar, setHasGravatar] = useState(false);
 
   useEffect(() => {
-    if (email) {
-      checkForGravatar(getGravatarUrl(email)).then((res) =>
-        setHasGravatar(res)
-      );
-    } else {
+    if (!email) {
       setHasGravatar(false);
+
+      return;
+    }
+
+    if (gravatarCache.hasOwnProperty(email)) {
+      setHasGravatar(gravatarCache[email]);
+    } else {
+      checkForGravatar(getGravatarUrl(email)).then((result) => {
+        gravatarCache[email] = result;
+        setHasGravatar(result);
+      });
     }
   }, [email]);
 
   return hasGravatar;
-}
+};

From a62cc2d7b44f8c0e3136c573fae6358ca0a1beef Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Fri, 6 Sep 2024 12:39:40 -0700
Subject: [PATCH 32/46] Fix: showing new system/support avatars when user has
 Gravatar enabled

---
 packages/manager/src/features/Events/EventRow.tsx          | 6 +++---
 .../NotificationCenter/Events/NotificationCenterEvent.tsx  | 7 ++++---
 .../manager/src/features/Support/ExpandableTicketPanel.tsx | 2 +-
 packages/manager/src/features/Users/UserRow.tsx            | 2 +-
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/manager/src/features/Events/EventRow.tsx b/packages/manager/src/features/Events/EventRow.tsx
index e3ea931d648..4685ff1fca1 100644
--- a/packages/manager/src/features/Events/EventRow.tsx
+++ b/packages/manager/src/features/Events/EventRow.tsx
@@ -8,7 +8,7 @@ import { Hidden } from 'src/components/Hidden';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { useGravatar } from 'src/hooks/useGravatar';
-import { useAccountUser } from 'src/queries/account/users';
+import { useProfile } from 'src/queries/profile/profile';
 import { getEventTimestamp } from 'src/utilities/eventUtils';
 
 import { StyledGravatar } from './EventRow.styles';
@@ -33,9 +33,9 @@ export const EventRow = (props: EventRowProps) => {
     message: getEventMessage(event),
     username: getEventUsername(event),
   };
-  const { data: user } = useAccountUser(username);
+  const { data: profile } = useProfile();
 
-  const hasGravatar = useGravatar(user?.email);
+  const hasGravatar = useGravatar(profile?.email);
 
   if (!message) {
     return null;
diff --git a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
index 71be382a4cc..60bcb9d8484 100644
--- a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
+++ b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
@@ -9,7 +9,7 @@ import {
   getEventUsername,
 } from 'src/features/Events/utils';
 import { useGravatar } from 'src/hooks/useGravatar';
-import { useAccountUser } from 'src/queries/account/users';
+import { useProfile } from 'src/queries/profile/profile';
 
 import {
   NotificationEventAvatar,
@@ -33,8 +33,9 @@ export const NotificationCenterEvent = React.memo(
     const message = getEventMessage(event);
     const username = getEventUsername(event);
 
-    const { data: user } = useAccountUser(username);
-    const hasGravatar = useGravatar(user?.email);
+    const { data: profile } = useProfile();
+
+    const hasGravatar = useGravatar(profile?.email);
 
     /**
      * Some event types may not be handled by our system (or new types or new ones may be added that we haven't caught yet).
diff --git a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
index cd896d4ee93..40e6d18ca8f 100644
--- a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
+++ b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
@@ -112,7 +112,7 @@ export const ExpandableTicketPanel = React.memo((props: Props) => {
 
   const { data: profile } = useProfile();
 
-  const hasGravatar = useGravatar(reply?.created_by);
+  const hasGravatar = useGravatar(profile?.email);
 
   React.useEffect(() => {
     if (!ticket && !reply) {
diff --git a/packages/manager/src/features/Users/UserRow.tsx b/packages/manager/src/features/Users/UserRow.tsx
index 952ba1c37e3..36a3d636407 100644
--- a/packages/manager/src/features/Users/UserRow.tsx
+++ b/packages/manager/src/features/Users/UserRow.tsx
@@ -32,7 +32,7 @@ export const UserRow = ({ onDelete, user }: Props) => {
   const isProxyUser = Boolean(user.user_type === 'proxy');
   const showChildAccountAccessCol = profile?.user_type === 'parent';
 
-  const hasGravatar = useGravatar(user?.email);
+  const hasGravatar = useGravatar(profile?.email);
 
   return (
     <TableRow data-qa-table-row={user.username} key={user.username}>

From 148c471b2e2aafb41795c685da02ddba1549a891 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Sun, 8 Sep 2024 22:32:32 -0700
Subject: [PATCH 33/46] Experiment with component for loading/gravatar/avatar

---
 .../src/components/GravatarOrAvatar.tsx       | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 packages/manager/src/components/GravatarOrAvatar.tsx

diff --git a/packages/manager/src/components/GravatarOrAvatar.tsx b/packages/manager/src/components/GravatarOrAvatar.tsx
new file mode 100644
index 00000000000..7155b9a12be
--- /dev/null
+++ b/packages/manager/src/components/GravatarOrAvatar.tsx
@@ -0,0 +1,75 @@
+// TODO: refactor or delete
+
+import React from 'react';
+import { makeStyles } from 'tss-react/mui';
+
+import { useGravatar } from 'src/hooks/useGravatar';
+import { useProfile } from 'src/queries/profile/profile';
+import { fadeIn } from 'src/styles/keyframes';
+
+import { Avatar } from './Avatar/Avatar';
+import { Box } from './Box';
+import { GravatarByEmail } from './GravatarByEmail';
+import { GravatarByUsername } from './GravatarByUsername';
+
+import type { AvatarProps } from './Avatar/Avatar';
+import type { GravatarByEmailProps } from './GravatarByEmail';
+import type { GravatarByUsernameProps } from './GravatarByUsername';
+
+interface Props {
+  avatarProps?: AvatarProps;
+  gravatarProps?: GravatarByEmailProps | GravatarByUsernameProps;
+  height?: number;
+  width?: number;
+}
+
+const useStyles = makeStyles()(() => ({
+  root: {
+    animation: `${fadeIn} 1.75 ease-out forwards`,
+  },
+}));
+
+export const GravatarOrAvatar = (props: Props) => {
+  const { avatarProps, gravatarProps, height, width } = props;
+  const { data: profile } = useProfile();
+  const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
+  const { classes } = useStyles();
+  const Gravatar =
+    gravatarProps && 'email' in gravatarProps ? (
+      <GravatarByEmail
+        className={classes.root}
+        email={gravatarProps?.email}
+        height={height}
+        width={width}
+      />
+    ) : (
+      <GravatarByUsername
+        className={classes.root}
+        username={gravatarProps?.username ?? ''}
+      />
+    );
+
+  return isLoadingGravatar ? (
+    <Box
+      height={height}
+      //   sx={{ animation: `${fadeIn} .2s ease-in forwards` }}
+      width={width}
+    />
+  ) : (
+    <Box
+      height={height}
+      //   sx={{ animation: `${fadeIn} .2s ease-out forwards` }}
+      width={width}
+    >
+      {hasGravatar ? (
+        Gravatar
+      ) : (
+        <Avatar
+          height={height}
+          username={avatarProps?.username}
+          width={width}
+        />
+      )}
+    </Box>
+  );
+};

From 665915c281054acef293de110b6c902aaf68fc4c Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Sun, 8 Sep 2024 22:34:46 -0700
Subject: [PATCH 34/46] Handle loading state and fade per-component to fix
 flickering

---
 .../AccessPanel/UserSSHKeyPanel.tsx           | 21 ++++++--
 .../src/components/GravatarByEmail.tsx        |  4 +-
 .../src/components/GravatarByUsername.tsx     |  5 +-
 .../src/features/Events/EventRow.styles.ts    |  3 ++
 .../manager/src/features/Events/EventRow.tsx  |  7 ++-
 .../Events/NotificationCenterEvent.tsx        |  6 ++-
 .../NotificationCenter.styles.ts              |  2 +
 .../DisplaySettings/DisplaySettings.tsx       | 15 ++++--
 .../Support/ExpandableTicketPanel.tsx         |  2 +-
 .../features/TopMenu/UserMenu/UserMenu.tsx    | 13 ++++-
 .../manager/src/features/Users/UserRow.tsx    | 27 ++++++++++-
 packages/manager/src/hooks/useGravatar.ts     | 48 ++++++++++++++++++-
 12 files changed, 133 insertions(+), 20 deletions(-)

diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
index 838e13ac1e5..07c51a5fd13 100644
--- a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
+++ b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -16,9 +17,11 @@ import { useGravatar } from 'src/hooks/useGravatar';
 import { usePagination } from 'src/hooks/usePagination';
 import { useAccountUsers } from 'src/queries/account/users';
 import { useProfile, useSSHKeysQuery } from 'src/queries/profile/profile';
+import { fadeIn } from 'src/styles/keyframes';
 import { truncateAndJoinList } from 'src/utilities/stringUtils';
 
 import { Avatar } from '../Avatar/Avatar';
+import { Box } from '../Box';
 import { GravatarByEmail } from '../GravatarByEmail';
 import { PaginationFooter } from '../PaginationFooter/PaginationFooter';
 import { TableRowLoading } from '../TableRowLoading/TableRowLoading';
@@ -37,6 +40,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     width: '30%',
   },
   gravatar: {
+    animation: `${fadeIn} .2s ease-out forwards`,
     borderRadius: '50%',
     height: 24,
     marginRight: theme.spacing(1),
@@ -60,6 +64,7 @@ interface Props {
 
 const UserSSHKeyPanel = (props: Props) => {
   const { classes } = useStyles();
+  const theme = useTheme();
   const { authorizedUsers, disabled, setAuthorizedUsers } = props;
 
   const [isCreateDrawerOpen, setIsCreateDrawerOpen] = React.useState<boolean>(
@@ -70,7 +75,7 @@ const UserSSHKeyPanel = (props: Props) => {
 
   const { data: profile } = useProfile();
 
-  const hasGravatar = useGravatar(profile?.email);
+  const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
 
   const isRestricted = profile?.restricted ?? false;
 
@@ -150,7 +155,9 @@ const UserSSHKeyPanel = (props: Props) => {
           </TableCell>
           <TableCell className={classes.cellUser}>
             <div className={classes.userWrapper}>
-              {hasGravatar ? (
+              {isLoadingGravatar ? (
+                <Box height={28} width={28} />
+              ) : hasGravatar ? (
                 <GravatarByEmail
                   className={classes.gravatar}
                   email={profile.email}
@@ -192,7 +199,15 @@ const UserSSHKeyPanel = (props: Props) => {
                 email={user.email}
               />
             ) : (
-              <Avatar sx={{ borderRadius: '50%', marginRight: 1 }} />
+              <Avatar
+                color={
+                  user.username !== profile?.username
+                    ? theme.palette.primary.dark
+                    : undefined
+                }
+                sx={{ borderRadius: '50%', marginRight: 1 }}
+                username={user.username}
+              />
             )}
             {user.username}
           </div>
diff --git a/packages/manager/src/components/GravatarByEmail.tsx b/packages/manager/src/components/GravatarByEmail.tsx
index ea345f14cc2..4ff64876d93 100644
--- a/packages/manager/src/components/GravatarByEmail.tsx
+++ b/packages/manager/src/components/GravatarByEmail.tsx
@@ -6,14 +6,14 @@ import { getGravatarUrl } from 'src/utilities/gravatar';
 
 export const DEFAULT_AVATAR_SIZE = 28;
 
-interface Props {
+export interface GravatarByEmailProps {
   className?: string;
   email: string;
   height?: number;
   width?: number;
 }
 
-export const GravatarByEmail = (props: Props) => {
+export const GravatarByEmail = (props: GravatarByEmailProps) => {
   const {
     className,
     email,
diff --git a/packages/manager/src/components/GravatarByUsername.tsx b/packages/manager/src/components/GravatarByUsername.tsx
index 509a78eabc4..de124ae2198 100644
--- a/packages/manager/src/components/GravatarByUsername.tsx
+++ b/packages/manager/src/components/GravatarByUsername.tsx
@@ -7,15 +7,16 @@ import { getGravatarUrl } from 'src/utilities/gravatar';
 
 import { DEFAULT_AVATAR_SIZE } from './GravatarByEmail';
 
-interface Props {
+export interface GravatarByUsernameProps {
   className?: string;
   username: null | string;
 }
 
-export const GravatarByUsername = (props: Props) => {
+export const GravatarByUsername = (props: GravatarByUsernameProps) => {
   const { className, username } = props;
   const { data: user } = useAccountUser(username ?? '');
   const url = user?.email ? getGravatarUrl(user.email) : undefined;
+  // console.log('rendering gravatar', {url})
 
   return (
     <Avatar
diff --git a/packages/manager/src/features/Events/EventRow.styles.ts b/packages/manager/src/features/Events/EventRow.styles.ts
index 5730b45e5d6..968b58bd1c9 100644
--- a/packages/manager/src/features/Events/EventRow.styles.ts
+++ b/packages/manager/src/features/Events/EventRow.styles.ts
@@ -1,11 +1,14 @@
 // @TODO: delete file once Gravatar is sunset
 import { styled } from '@mui/material/styles';
 
+import { fadeIn } from 'src/styles/keyframes';
+
 import { GravatarByUsername } from '../../components/GravatarByUsername';
 
 export const StyledGravatar = styled(GravatarByUsername, {
   label: 'StyledGravatar',
 })(({ theme }) => ({
+  animation: `${fadeIn} 1.75s ease-out forwards`,
   height: theme.spacing(3),
   width: theme.spacing(3),
 }));
diff --git a/packages/manager/src/features/Events/EventRow.tsx b/packages/manager/src/features/Events/EventRow.tsx
index 4685ff1fca1..9f2d547d6f1 100644
--- a/packages/manager/src/features/Events/EventRow.tsx
+++ b/packages/manager/src/features/Events/EventRow.tsx
@@ -35,7 +35,8 @@ export const EventRow = (props: EventRowProps) => {
   };
   const { data: profile } = useProfile();
 
-  const hasGravatar = useGravatar(profile?.email);
+  const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
+  // console.log({ isLoadingGravatar }, { hasGravatar });
 
   if (!message) {
     return null;
@@ -60,7 +61,9 @@ export const EventRow = (props: EventRowProps) => {
       <Hidden smDown>
         <TableCell data-qa-event-username-cell parentColumn="Username">
           <Box alignItems="center" display="flex" gap={1}>
-            {hasGravatar ? (
+            {isLoadingGravatar ? (
+              <Box height={24} width={24} />
+            ) : hasGravatar ? (
               <StyledGravatar
                 username={username === 'Linode' ? '' : username}
               />
diff --git a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
index 60bcb9d8484..7bee6bdfdfc 100644
--- a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
+++ b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
@@ -35,7 +35,7 @@ export const NotificationCenterEvent = React.memo(
 
     const { data: profile } = useProfile();
 
-    const hasGravatar = useGravatar(profile?.email);
+    const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
 
     /**
      * Some event types may not be handled by our system (or new types or new ones may be added that we haven't caught yet).
@@ -53,7 +53,9 @@ export const NotificationCenterEvent = React.memo(
         className={unseenEventClass}
         data-testid={event.action}
       >
-        {hasGravatar ? (
+        {isLoadingGravatar ? (
+          <Box height={32} width={32} />
+        ) : hasGravatar ? (
           <NotificationEventGravatar username={event.username} />
         ) : (
           <NotificationEventAvatar username={event.username ?? 'Linode'} />
diff --git a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
index 3c9fc6285ab..a59176a1344 100644
--- a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
+++ b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
@@ -7,6 +7,7 @@ import { Box } from 'src/components/Box';
 import { GravatarByUsername } from 'src/components/GravatarByUsername';
 import { Link } from 'src/components/Link';
 import { Typography } from 'src/components/Typography';
+import { fadeIn } from 'src/styles/keyframes';
 import { omittedProps } from 'src/utilities/omittedProps';
 
 import type { NotificationCenterNotificationMessageProps } from './types';
@@ -122,6 +123,7 @@ export const NotificationEventStyledBox = styled(Box, {
 export const NotificationEventGravatar = styled(GravatarByUsername, {
   label: 'StyledGravatarByUsername',
 })(() => ({
+  animation: `${fadeIn} 1s ease-out forwards`,
   height: 32,
   marginTop: 2,
   minWidth: 32,
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index a36899e2c0f..d3eeb9097ef 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -19,6 +19,7 @@ import { RESTRICTED_FIELD_TOOLTIP } from 'src/features/Account/constants';
 import { useGravatar } from 'src/hooks/useGravatar';
 import { useNotificationsQuery } from 'src/queries/account/notifications';
 import { useMutateProfile, useProfile } from 'src/queries/profile/profile';
+import { fadeIn } from 'src/styles/keyframes';
 
 import { AvatarColorPickerDialog } from './AvatarColorPickerDialog';
 import { TimezoneForm } from './TimezoneForm';
@@ -38,7 +39,7 @@ export const DisplaySettings = () => {
 
   const isProxyUser = profile?.user_type === 'proxy';
 
-  const hasGravatar = useGravatar(profile?.email);
+  const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
 
   const [
     isColorPickerDialogOpen,
@@ -100,8 +101,10 @@ export const DisplaySettings = () => {
             }}
             display="flex"
           >
-            {hasGravatar ? (
-              <GravatarByEmail
+            {isLoadingGravatar ? (
+              <Box height={88} width={88} />
+            ) : hasGravatar ? (
+              <StyledGravatar
                 email={profile?.email ?? ''}
                 height={88}
                 width={88}
@@ -219,3 +222,9 @@ const StyledTooltipIcon = styled(TooltipIcon, {
     minWidth: 350,
   },
 }));
+
+const StyledGravatar = styled(GravatarByEmail, {
+  label: 'StyledGravatarByEmail',
+})(() => ({
+  animation: `${fadeIn} .3s ease-out forwards`,
+}));
diff --git a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
index 40e6d18ca8f..7ba4dd2264c 100644
--- a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
+++ b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
@@ -112,7 +112,7 @@ export const ExpandableTicketPanel = React.memo((props: Props) => {
 
   const { data: profile } = useProfile();
 
-  const hasGravatar = useGravatar(profile?.email);
+  const { hasGravatar } = useGravatar(profile?.email);
 
   React.useEffect(() => {
     if (!ticket && !reply) {
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index 1a59d722428..11e2c7ecd94 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -25,6 +25,7 @@ import { useGravatar } from 'src/hooks/useGravatar';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useAccount } from 'src/queries/account/account';
 import { useGrants, useProfile } from 'src/queries/profile/profile';
+import { fadeIn } from 'src/styles/keyframes';
 import { sendSwitchAccountEvent } from 'src/utilities/analytics/customEventAnalytics';
 import { getStorage, setStorage } from 'src/utilities/storage';
 
@@ -106,7 +107,7 @@ export const UserMenu = React.memo(() => {
     theme.breakpoints.down('sm')
   );
 
-  const hasGravatar = useGravatar(profile?.email);
+  const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
@@ -214,8 +215,10 @@ export const UserMenu = React.memo(() => {
           startIcon={
             isProxyUser ? (
               <AvatarForProxy />
+            ) : isLoadingGravatar ? (
+              <Box height={28} width={28} />
             ) : hasGravatar ? (
-              <GravatarByEmail email={profile?.email ?? ''} />
+              <StyledGravatar email={profile?.email ?? ''} />
             ) : (
               <Avatar />
             )
@@ -351,3 +354,9 @@ const Heading = styled(Typography)(({ theme }) => ({
   letterSpacing: 1.875,
   textTransform: 'uppercase',
 }));
+
+const StyledGravatar = styled(GravatarByEmail, {
+  label: 'StyledGravatarByEmail',
+})(() => ({
+  animation: `${fadeIn} .2s ease-out forwards`,
+}));
diff --git a/packages/manager/src/features/Users/UserRow.tsx b/packages/manager/src/features/Users/UserRow.tsx
index 36a3d636407..6272c87eae7 100644
--- a/packages/manager/src/features/Users/UserRow.tsx
+++ b/packages/manager/src/features/Users/UserRow.tsx
@@ -1,3 +1,5 @@
+import { useTheme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import React from 'react';
 
 import { Avatar } from 'src/components/Avatar/Avatar';
@@ -14,6 +16,7 @@ import { Typography } from 'src/components/Typography';
 import { useGravatar } from 'src/hooks/useGravatar';
 import { useAccountUserGrants } from 'src/queries/account/users';
 import { useProfile } from 'src/queries/profile/profile';
+import { fadeIn } from 'src/styles/keyframes';
 import { capitalize } from 'src/utilities/capitalize';
 
 import { UsersActionMenu } from './UsersActionMenu';
@@ -26,19 +29,33 @@ interface Props {
 }
 
 export const UserRow = ({ onDelete, user }: Props) => {
+  const theme = useTheme();
   const { data: grants } = useAccountUserGrants(user.username);
   const { data: profile } = useProfile();
 
   const isProxyUser = Boolean(user.user_type === 'proxy');
   const showChildAccountAccessCol = profile?.user_type === 'parent';
 
-  const hasGravatar = useGravatar(profile?.email);
+  const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
 
   return (
     <TableRow data-qa-table-row={user.username} key={user.username}>
       <TableCell>
         <Stack alignItems="center" direction="row" spacing={1.5}>
-          {hasGravatar ? <GravatarByEmail email={user.email} /> : <Avatar />}
+          {isLoadingGravatar ? (
+            <Box height={28} width={28} />
+          ) : hasGravatar ? (
+            <StyledGravatar email={user.email} />
+          ) : (
+            <Avatar
+              color={
+                user.username !== profile?.username
+                  ? theme.palette.primary.dark
+                  : undefined
+              }
+              username={user.username}
+            />
+          )}
           <Typography>{user.username}</Typography>
           <Box display="flex" flexGrow={1} />
           {user.tfa_enabled && <Chip color="success" label="2FA" />}
@@ -102,3 +119,9 @@ const LastLogin = (props: Pick<User, 'last_login'>) => {
     </Stack>
   );
 };
+
+const StyledGravatar = styled(GravatarByEmail, {
+  label: 'StyledGravatarByEmail',
+})(() => ({
+  animation: `${fadeIn} .3s ease-out forwards`,
+}));
diff --git a/packages/manager/src/hooks/useGravatar.ts b/packages/manager/src/hooks/useGravatar.ts
index 855225c6a7e..9d06c38450b 100644
--- a/packages/manager/src/hooks/useGravatar.ts
+++ b/packages/manager/src/hooks/useGravatar.ts
@@ -17,23 +17,69 @@ const gravatarCache: Record<string, boolean> = {};
  */
 export const useGravatar = (email: string | undefined) => {
   const [hasGravatar, setHasGravatar] = useState(false);
+  const [isLoadingGravatar, setIsLoadingGravatar] = useState<boolean>(true);
 
   useEffect(() => {
     if (!email) {
       setHasGravatar(false);
+      setIsLoadingGravatar(false);
 
       return;
     }
 
     if (gravatarCache.hasOwnProperty(email)) {
       setHasGravatar(gravatarCache[email]);
+      setIsLoadingGravatar(false);
     } else {
       checkForGravatar(getGravatarUrl(email)).then((result) => {
         gravatarCache[email] = result;
         setHasGravatar(result);
+        setIsLoadingGravatar(false);
       });
     }
   }, [email]);
 
-  return hasGravatar;
+  return { hasGravatar, isLoadingGravatar };
 };
+
+// // set a cache to prevent duplicate requests
+// const gravatarCache = new Map<string, boolean>();
+
+// /**
+//  * useGravatar
+//  *
+//  * @description
+//  * This hook checks if a user has a Gravatar associated with their email.
+//  * It uses a cache to prevent duplicate requests.
+//  *
+//  * @param email - The email address to check for a Gravatar.
+//  * @returns - A boolean indicating whether the user has a Gravatar.
+//  */
+
+// export const useGravatar = (email: string | undefined) => {
+//   const [hasGravatar, setHasGravatar] = useState(
+//     email && gravatarCache.has(email) ? gravatarCache.get(email) : false
+//   );
+//   const [isLoadingGravatar, setIsLoadingGravatar] = useState<boolean>(true);
+
+//   useEffect(() => {
+//     if (!email) {
+//       setHasGravatar(false);
+//       setIsLoadingGravatar(false);
+//       return;
+//     }
+
+//     if (gravatarCache.has(email)) {
+//       setHasGravatar(gravatarCache.get(email));
+//       setIsLoadingGravatar(false);
+//     } else {
+//       checkForGravatar(getGravatarUrl(email)).then((result) => {
+//         gravatarCache.set(email, result);
+//         setHasGravatar(result);
+//         setIsLoadingGravatar(false);
+//       });
+//     }
+//   }, [email]);
+
+//   return { hasGravatar, isLoadingGravatar };
+// };

From 0d3f0ef0ab61d45f01f170295c8717b7ed246e58 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Sun, 8 Sep 2024 22:36:48 -0700
Subject: [PATCH 35/46] Fix username for support tickets; clean up

---
 packages/manager/src/components/GravatarByUsername.tsx        | 1 -
 packages/manager/src/features/Events/EventRow.tsx             | 1 -
 .../manager/src/features/Support/ExpandableTicketPanel.tsx    | 4 ++--
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/manager/src/components/GravatarByUsername.tsx b/packages/manager/src/components/GravatarByUsername.tsx
index de124ae2198..9f3cf39c029 100644
--- a/packages/manager/src/components/GravatarByUsername.tsx
+++ b/packages/manager/src/components/GravatarByUsername.tsx
@@ -16,7 +16,6 @@ export const GravatarByUsername = (props: GravatarByUsernameProps) => {
   const { className, username } = props;
   const { data: user } = useAccountUser(username ?? '');
   const url = user?.email ? getGravatarUrl(user.email) : undefined;
-  // console.log('rendering gravatar', {url})
 
   return (
     <Avatar
diff --git a/packages/manager/src/features/Events/EventRow.tsx b/packages/manager/src/features/Events/EventRow.tsx
index 9f2d547d6f1..acd32d32609 100644
--- a/packages/manager/src/features/Events/EventRow.tsx
+++ b/packages/manager/src/features/Events/EventRow.tsx
@@ -36,7 +36,6 @@ export const EventRow = (props: EventRowProps) => {
   const { data: profile } = useProfile();
 
   const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
-  // console.log({ isLoadingGravatar }, { hasGravatar });
 
   if (!message) {
     return null;
diff --git a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
index 7ba4dd2264c..ea8474844ee 100644
--- a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
+++ b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
@@ -159,12 +159,12 @@ export const ExpandableTicketPanel = React.memo((props: Props) => {
         ) : (
           <NewAvatar
             color={
-              reply?.created_by !== profile?.username
+              data?.username !== profile?.username
                 ? theme.palette.primary.dark
                 : undefined
             }
             sx={{ marginTop: 1 }}
-            username={reply?.created_by}
+            username={data?.username}
           />
         )}
       </div>

From b0f7a7db0ac9d54eac619cd2f0445cee668e9e70 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Sun, 8 Sep 2024 22:49:11 -0700
Subject: [PATCH 36/46] Fix avatar color for additional account users

---
 packages/manager/src/features/Events/EventRow.tsx   | 13 ++++++++++++-
 .../Events/NotificationCenterEvent.tsx              | 11 ++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/features/Events/EventRow.tsx b/packages/manager/src/features/Events/EventRow.tsx
index acd32d32609..0f07388d406 100644
--- a/packages/manager/src/features/Events/EventRow.tsx
+++ b/packages/manager/src/features/Events/EventRow.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 
 import { Avatar } from 'src/components/Avatar/Avatar';
@@ -27,6 +28,7 @@ interface EventRowProps {
 
 export const EventRow = (props: EventRowProps) => {
   const { event } = props;
+  const theme = useTheme();
   const timestamp = getEventTimestamp(event);
   const { action, message, username } = {
     action: event.action,
@@ -67,7 +69,16 @@ export const EventRow = (props: EventRowProps) => {
                 username={username === 'Linode' ? '' : username}
               />
             ) : (
-              <Avatar height={24} username={username} width={24} />
+              <Avatar
+                color={
+                  username !== profile?.username
+                    ? theme.palette.primary.dark
+                    : undefined
+                }
+                height={24}
+                username={username}
+                width={24}
+              />
             )}
             {username}
           </Box>
diff --git a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
index 7bee6bdfdfc..5da8ad8c6ec 100644
--- a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
+++ b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 
 import { BarPercent } from 'src/components/BarPercent';
@@ -28,6 +29,7 @@ interface NotificationEventProps {
 export const NotificationCenterEvent = React.memo(
   (props: NotificationEventProps) => {
     const { event } = props;
+    const theme = useTheme();
     const { classes, cx } = notificationEventStyles();
     const unseenEventClass = cx({ [classes.unseenEvent]: !event.seen });
     const message = getEventMessage(event);
@@ -58,7 +60,14 @@ export const NotificationCenterEvent = React.memo(
         ) : hasGravatar ? (
           <NotificationEventGravatar username={event.username} />
         ) : (
-          <NotificationEventAvatar username={event.username ?? 'Linode'} />
+          <NotificationEventAvatar
+            color={
+              username !== profile?.username
+                ? theme.palette.primary.dark
+                : undefined
+            }
+            username={event.username ?? 'Linode'}
+          />
         )}
         <Box sx={{ marginTop: '-2px', paddingRight: 1, width: '100%' }}>
           {message}

From 130aec79bf314adfb14209ad78d34452b811dd6c Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Mon, 9 Sep 2024 07:47:24 -0700
Subject: [PATCH 37/46] Switch over to single GravatarOrAvatar component for
 rendering

---
 .../AccessPanel/UserSSHKeyPanel.tsx           | 89 +++++++++++++------
 .../src/components/GravatarOrAvatar.tsx       | 62 ++-----------
 .../manager/src/features/Events/EventRow.tsx  | 30 ++++++-
 .../Events/NotificationCenterEvent.tsx        | 24 ++++-
 .../DisplaySettings/DisplaySettings.tsx       | 19 +++-
 .../Support/ExpandableTicketPanel.tsx         | 31 ++++++-
 .../features/TopMenu/UserMenu/UserMenu.tsx    | 22 +++--
 .../manager/src/features/Users/UserRow.tsx    | 22 ++++-
 8 files changed, 189 insertions(+), 110 deletions(-)

diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
index 07c51a5fd13..14fb1789aa7 100644
--- a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
+++ b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
@@ -13,7 +13,7 @@ import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { Typography } from 'src/components/Typography';
 import { CreateSSHKeyDrawer } from 'src/features/Profile/SSHKeys/CreateSSHKeyDrawer';
-import { useGravatar } from 'src/hooks/useGravatar';
+// import { useGravatar } from 'src/hooks/useGravatar';
 import { usePagination } from 'src/hooks/usePagination';
 import { useAccountUsers } from 'src/queries/account/users';
 import { useProfile, useSSHKeysQuery } from 'src/queries/profile/profile';
@@ -21,8 +21,9 @@ import { fadeIn } from 'src/styles/keyframes';
 import { truncateAndJoinList } from 'src/utilities/stringUtils';
 
 import { Avatar } from '../Avatar/Avatar';
-import { Box } from '../Box';
+// import { Box } from '../Box';
 import { GravatarByEmail } from '../GravatarByEmail';
+import { GravatarOrAvatar } from '../GravatarOrAvatar';
 import { PaginationFooter } from '../PaginationFooter/PaginationFooter';
 import { TableRowLoading } from '../TableRowLoading/TableRowLoading';
 
@@ -75,7 +76,7 @@ const UserSSHKeyPanel = (props: Props) => {
 
   const { data: profile } = useProfile();
 
-  const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
+  // const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
 
   const isRestricted = profile?.restricted ?? false;
 
@@ -155,16 +156,27 @@ const UserSSHKeyPanel = (props: Props) => {
           </TableCell>
           <TableCell className={classes.cellUser}>
             <div className={classes.userWrapper}>
-              {isLoadingGravatar ? (
-                <Box height={28} width={28} />
-              ) : hasGravatar ? (
-                <GravatarByEmail
-                  className={classes.gravatar}
-                  email={profile.email}
-                />
-              ) : (
-                <Avatar sx={{ borderRadius: '50%', marginRight: 1 }} />
-              )}
+              <GravatarOrAvatar
+                gravatar={
+                  <GravatarByEmail
+                    className={classes.gravatar}
+                    email={profile.email}
+                  />
+                }
+                avatar={<Avatar sx={{ borderRadius: '50%', marginRight: 1 }} />}
+                height={28}
+                width={28}
+              />
+              {/* // {isLoadingGravatar ? (
+              //   <Box height={28} width={28} />
+              // ) : hasGravatar ? (
+              //   <GravatarByEmail
+              //     className={classes.gravatar}
+              //     email={profile.email}
+              //   />
+              // ) : (
+              //   <Avatar sx={{ borderRadius: '50%', marginRight: 1 }} />
+              // )} */}
               {profile.username}
             </div>
           </TableCell>
@@ -193,22 +205,41 @@ const UserSSHKeyPanel = (props: Props) => {
         </TableCell>
         <TableCell className={classes.cellUser}>
           <div className={classes.userWrapper}>
-            {hasGravatar ? (
-              <GravatarByEmail
-                className={classes.gravatar}
-                email={user.email}
-              />
-            ) : (
-              <Avatar
-                color={
-                  user.username !== profile?.username
-                    ? theme.palette.primary.dark
-                    : undefined
-                }
-                sx={{ borderRadius: '50%', marginRight: 1 }}
-                username={user.username}
-              />
-            )}
+            <GravatarOrAvatar
+              avatar={
+                <Avatar
+                  color={
+                    user.username !== profile?.username
+                      ? theme.palette.primary.dark
+                      : undefined
+                  }
+                  sx={{ borderRadius: '50%', marginRight: 1 }}
+                  username={user.username}
+                />
+              }
+              gravatar={
+                <GravatarByEmail
+                  className={classes.gravatar}
+                  email={user.email}
+                />
+              }
+            />
+            {/* // {hasGravatar ? (
+            //   <GravatarByEmail
+            //     className={classes.gravatar}
+            //     email={user.email}
+            //   />
+            // ) : (
+            //   <Avatar
+            //     color={
+            //       user.username !== profile?.username
+            //         ? theme.palette.primary.dark
+            //         : undefined
+            //     }
+            //     sx={{ borderRadius: '50%', marginRight: 1 }}
+            //     username={user.username}
+            //   />
+            // )} */}
             {user.username}
           </div>
         </TableCell>
diff --git a/packages/manager/src/components/GravatarOrAvatar.tsx b/packages/manager/src/components/GravatarOrAvatar.tsx
index 7155b9a12be..ed47cdc608d 100644
--- a/packages/manager/src/components/GravatarOrAvatar.tsx
+++ b/packages/manager/src/components/GravatarOrAvatar.tsx
@@ -1,75 +1,27 @@
-// TODO: refactor or delete
-
 import React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { useGravatar } from 'src/hooks/useGravatar';
 import { useProfile } from 'src/queries/profile/profile';
-import { fadeIn } from 'src/styles/keyframes';
 
-import { Avatar } from './Avatar/Avatar';
 import { Box } from './Box';
-import { GravatarByEmail } from './GravatarByEmail';
-import { GravatarByUsername } from './GravatarByUsername';
-
-import type { AvatarProps } from './Avatar/Avatar';
-import type { GravatarByEmailProps } from './GravatarByEmail';
-import type { GravatarByUsernameProps } from './GravatarByUsername';
 
 interface Props {
-  avatarProps?: AvatarProps;
-  gravatarProps?: GravatarByEmailProps | GravatarByUsernameProps;
+  avatar: JSX.Element;
+  gravatar: JSX.Element;
   height?: number;
   width?: number;
 }
 
-const useStyles = makeStyles()(() => ({
-  root: {
-    animation: `${fadeIn} 1.75 ease-out forwards`,
-  },
-}));
-
 export const GravatarOrAvatar = (props: Props) => {
-  const { avatarProps, gravatarProps, height, width } = props;
+  const { avatar, gravatar, height = 28, width = 28 } = props;
   const { data: profile } = useProfile();
   const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
-  const { classes } = useStyles();
-  const Gravatar =
-    gravatarProps && 'email' in gravatarProps ? (
-      <GravatarByEmail
-        className={classes.root}
-        email={gravatarProps?.email}
-        height={height}
-        width={width}
-      />
-    ) : (
-      <GravatarByUsername
-        className={classes.root}
-        username={gravatarProps?.username ?? ''}
-      />
-    );
 
   return isLoadingGravatar ? (
-    <Box
-      height={height}
-      //   sx={{ animation: `${fadeIn} .2s ease-in forwards` }}
-      width={width}
-    />
+    <Box height={height} width={width} />
+  ) : hasGravatar ? (
+    gravatar
   ) : (
-    <Box
-      height={height}
-      //   sx={{ animation: `${fadeIn} .2s ease-out forwards` }}
-      width={width}
-    >
-      {hasGravatar ? (
-        Gravatar
-      ) : (
-        <Avatar
-          height={height}
-          username={avatarProps?.username}
-          width={width}
-        />
-      )}
-    </Box>
+    avatar
   );
 };
diff --git a/packages/manager/src/features/Events/EventRow.tsx b/packages/manager/src/features/Events/EventRow.tsx
index 0f07388d406..cdef15bb4d0 100644
--- a/packages/manager/src/features/Events/EventRow.tsx
+++ b/packages/manager/src/features/Events/EventRow.tsx
@@ -5,10 +5,11 @@ import { Avatar } from 'src/components/Avatar/Avatar';
 import { BarPercent } from 'src/components/BarPercent';
 import { Box } from 'src/components/Box';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
+import { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Hidden } from 'src/components/Hidden';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
-import { useGravatar } from 'src/hooks/useGravatar';
+// import { useGravatar } from 'src/hooks/useGravatar';
 import { useProfile } from 'src/queries/profile/profile';
 import { getEventTimestamp } from 'src/utilities/eventUtils';
 
@@ -37,7 +38,7 @@ export const EventRow = (props: EventRowProps) => {
   };
   const { data: profile } = useProfile();
 
-  const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
+  // const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
 
   if (!message) {
     return null;
@@ -62,7 +63,28 @@ export const EventRow = (props: EventRowProps) => {
       <Hidden smDown>
         <TableCell data-qa-event-username-cell parentColumn="Username">
           <Box alignItems="center" display="flex" gap={1}>
-            {isLoadingGravatar ? (
+            <GravatarOrAvatar
+              avatar={
+                <Avatar
+                  color={
+                    username !== profile?.username
+                      ? theme.palette.primary.dark
+                      : undefined
+                  }
+                  height={24}
+                  username={username}
+                  width={24}
+                />
+              }
+              gravatar={
+                <StyledGravatar
+                  username={username === 'Linode' ? '' : username}
+                />
+              }
+              height={24}
+              width={24}
+            />
+            {/* {isLoadingGravatar ? (
               <Box height={24} width={24} />
             ) : hasGravatar ? (
               <StyledGravatar
@@ -79,7 +101,7 @@ export const EventRow = (props: EventRowProps) => {
                 username={username}
                 width={24}
               />
-            )}
+            )} */}
             {username}
           </Box>
         </TableCell>
diff --git a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
index 5da8ad8c6ec..ad1bfaddd30 100644
--- a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
+++ b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
@@ -3,13 +3,14 @@ import * as React from 'react';
 
 import { BarPercent } from 'src/components/BarPercent';
 import { Box } from 'src/components/Box';
+import { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Typography } from 'src/components/Typography';
 import {
   formatProgressEvent,
   getEventMessage,
   getEventUsername,
 } from 'src/features/Events/utils';
-import { useGravatar } from 'src/hooks/useGravatar';
+// import { useGravatar } from 'src/hooks/useGravatar';
 import { useProfile } from 'src/queries/profile/profile';
 
 import {
@@ -37,7 +38,7 @@ export const NotificationCenterEvent = React.memo(
 
     const { data: profile } = useProfile();
 
-    const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
+    // const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
 
     /**
      * Some event types may not be handled by our system (or new types or new ones may be added that we haven't caught yet).
@@ -55,7 +56,7 @@ export const NotificationCenterEvent = React.memo(
         className={unseenEventClass}
         data-testid={event.action}
       >
-        {isLoadingGravatar ? (
+        {/* {isLoadingGravatar ? (
           <Box height={32} width={32} />
         ) : hasGravatar ? (
           <NotificationEventGravatar username={event.username} />
@@ -68,7 +69,22 @@ export const NotificationCenterEvent = React.memo(
             }
             username={event.username ?? 'Linode'}
           />
-        )}
+        )} */}
+        <GravatarOrAvatar
+          avatar={
+            <NotificationEventAvatar
+              color={
+                username !== profile?.username
+                  ? theme.palette.primary.dark
+                  : undefined
+              }
+              username={event.username ?? 'Linode'}
+            />
+          }
+          gravatar={<NotificationEventGravatar username={event.username} />}
+          height={32}
+          width={32}
+        />
         <Box sx={{ marginTop: '-2px', paddingRight: 1, width: '100%' }}>
           {message}
           {showProgress && (
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index d3eeb9097ef..34bb988c548 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -10,6 +10,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 { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Link } from 'src/components/Link';
 import { Paper } from 'src/components/Paper';
 import { SingleTextFieldForm } from 'src/components/SingleTextFieldForm/SingleTextFieldForm';
@@ -39,7 +40,7 @@ export const DisplaySettings = () => {
 
   const isProxyUser = profile?.user_type === 'proxy';
 
-  const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
+  const { hasGravatar } = useGravatar(profile?.email);
 
   const [
     isColorPickerDialogOpen,
@@ -101,7 +102,7 @@ export const DisplaySettings = () => {
             }}
             display="flex"
           >
-            {isLoadingGravatar ? (
+            {/* {isLoadingGravatar ? (
               <Box height={88} width={88} />
             ) : hasGravatar ? (
               <StyledGravatar
@@ -111,7 +112,19 @@ export const DisplaySettings = () => {
               />
             ) : (
               <Avatar height={88} width={88} />
-            )}
+            )} */}
+            <GravatarOrAvatar
+              gravatar={
+                <StyledGravatar
+                  email={profile?.email ?? ''}
+                  height={88}
+                  width={88}
+                />
+              }
+              avatar={<Avatar height={88} width={88} />}
+              height={88}
+              width={88}
+            />
             <div>
               <Typography sx={{ fontSize: '1rem' }} variant="h2">
                 {hasGravatar ? 'Profile photo' : 'Avatar'}
diff --git a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
index ea8474844ee..42444fd47d4 100644
--- a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
+++ b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
@@ -7,8 +7,9 @@ import { makeStyles } from 'tss-react/mui';
 import UserIcon from 'src/assets/icons/account.svg';
 import { Avatar as NewAvatar } from 'src/components/Avatar/Avatar';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
+import { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Typography } from 'src/components/Typography';
-import { useGravatar } from 'src/hooks/useGravatar';
+// import { useGravatar } from 'src/hooks/useGravatar';
 import { useProfile } from 'src/queries/profile/profile';
 
 import { Hively, shouldRenderHively } from './Hively';
@@ -112,7 +113,7 @@ export const ExpandableTicketPanel = React.memo((props: Props) => {
 
   const { data: profile } = useProfile();
 
-  const { hasGravatar } = useGravatar(profile?.email);
+  // const { hasGravatar } = useGravatar(profile?.email);
 
   React.useEffect(() => {
     if (!ticket && !reply) {
@@ -148,7 +149,7 @@ export const ExpandableTicketPanel = React.memo((props: Props) => {
   const renderAvatar = (id: string) => {
     return (
       <div className={classes.userWrapper}>
-        {hasGravatar ? (
+        {/* {hasGravatar ? (
           <Avatar
             alt="Gravatar"
             className={classes.leftIcon}
@@ -166,7 +167,29 @@ export const ExpandableTicketPanel = React.memo((props: Props) => {
             sx={{ marginTop: 1 }}
             username={data?.username}
           />
-        )}
+        )} */}
+        <GravatarOrAvatar
+          avatar={
+            <NewAvatar
+              color={
+                data?.username !== profile?.username
+                  ? theme.palette.primary.dark
+                  : undefined
+              }
+              sx={{ marginTop: 1 }}
+              username={data?.username}
+            />
+          }
+          gravatar={
+            <Avatar
+              alt="Gravatar"
+              className={classes.leftIcon}
+              src={`https://gravatar.com/avatar/${id}?d=404`}
+            >
+              <UserIcon />
+            </Avatar>
+          }
+        />
       </div>
     );
   };
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index 11e2c7ecd94..6e9ff09e617 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -12,6 +12,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 { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Hidden } from 'src/components/Hidden';
 import { Link } from 'src/components/Link';
 import { Stack } from 'src/components/Stack';
@@ -21,7 +22,7 @@ import { switchAccountSessionContext } from 'src/context/switchAccountSessionCon
 import { SwitchAccountButton } from 'src/features/Account/SwitchAccountButton';
 import { SwitchAccountDrawer } from 'src/features/Account/SwitchAccountDrawer';
 import { useIsParentTokenExpired } from 'src/features/Account/SwitchAccounts/useIsParentTokenExpired';
-import { useGravatar } from 'src/hooks/useGravatar';
+// import { useGravatar } from 'src/hooks/useGravatar';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useAccount } from 'src/queries/account/account';
 import { useGrants, useProfile } from 'src/queries/profile/profile';
@@ -107,7 +108,7 @@ export const UserMenu = React.memo(() => {
     theme.breakpoints.down('sm')
   );
 
-  const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
+  // const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
@@ -215,14 +216,21 @@ export const UserMenu = React.memo(() => {
           startIcon={
             isProxyUser ? (
               <AvatarForProxy />
-            ) : isLoadingGravatar ? (
-              <Box height={28} width={28} />
-            ) : hasGravatar ? (
-              <StyledGravatar email={profile?.email ?? ''} />
             ) : (
-              <Avatar />
+              <GravatarOrAvatar
+                avatar={<Avatar />}
+                gravatar={<StyledGravatar email={profile?.email ?? ''} />}
+              />
             )
           }
+          //   isLoadingGravatar ? (
+          //     <Box height={28} width={28} />
+          //   ) : hasGravatar ? (
+          //     <StyledGravatar email={profile?.email ?? ''} />
+          //   ) : (
+          //     <Avatar />
+          //   )
+          // }
           sx={(theme) => ({
             backgroundColor: open ? theme.bg.app : undefined,
             height: '50px',
diff --git a/packages/manager/src/features/Users/UserRow.tsx b/packages/manager/src/features/Users/UserRow.tsx
index 6272c87eae7..21c93a8e0db 100644
--- a/packages/manager/src/features/Users/UserRow.tsx
+++ b/packages/manager/src/features/Users/UserRow.tsx
@@ -7,13 +7,14 @@ import { Box } from 'src/components/Box';
 import { Chip } from 'src/components/Chip';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { GravatarByEmail } from 'src/components/GravatarByEmail';
+import { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Hidden } from 'src/components/Hidden';
 import { Stack } from 'src/components/Stack';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { Typography } from 'src/components/Typography';
-import { useGravatar } from 'src/hooks/useGravatar';
+// import { useGravatar } from 'src/hooks/useGravatar';
 import { useAccountUserGrants } from 'src/queries/account/users';
 import { useProfile } from 'src/queries/profile/profile';
 import { fadeIn } from 'src/styles/keyframes';
@@ -36,13 +37,26 @@ export const UserRow = ({ onDelete, user }: Props) => {
   const isProxyUser = Boolean(user.user_type === 'proxy');
   const showChildAccountAccessCol = profile?.user_type === 'parent';
 
-  const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
+  // const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
 
   return (
     <TableRow data-qa-table-row={user.username} key={user.username}>
       <TableCell>
         <Stack alignItems="center" direction="row" spacing={1.5}>
-          {isLoadingGravatar ? (
+          <GravatarOrAvatar
+            avatar={
+              <Avatar
+                color={
+                  user.username !== profile?.username
+                    ? theme.palette.primary.dark
+                    : undefined
+                }
+                username={user.username}
+              />
+            }
+            gravatar={<StyledGravatar email={user.email} />}
+          />
+          {/* {isLoadingGravatar ? (
             <Box height={28} width={28} />
           ) : hasGravatar ? (
             <StyledGravatar email={user.email} />
@@ -55,7 +69,7 @@ export const UserRow = ({ onDelete, user }: Props) => {
               }
               username={user.username}
             />
-          )}
+          )} */}
           <Typography>{user.username}</Typography>
           <Box display="flex" flexGrow={1} />
           {user.tfa_enabled && <Chip color="success" label="2FA" />}

From d48352b1cbfc42ac075a6b397981d788bc64c3fd Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Mon, 9 Sep 2024 07:51:05 -0700
Subject: [PATCH 38/46] Clean up commented code

---
 .../AccessPanel/UserSSHKeyPanel.tsx           | 32 --------------
 .../manager/src/features/Events/EventRow.tsx  | 21 ----------
 .../Events/NotificationCenterEvent.tsx        | 17 --------
 .../DisplaySettings/DisplaySettings.tsx       | 11 -----
 .../Support/ExpandableTicketPanel.tsx         | 22 ----------
 .../features/TopMenu/UserMenu/UserMenu.tsx    | 11 -----
 .../manager/src/features/Users/UserRow.tsx    | 17 --------
 packages/manager/src/hooks/useGravatar.ts     | 42 -------------------
 8 files changed, 173 deletions(-)

diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
index 14fb1789aa7..8051823b640 100644
--- a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
+++ b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
@@ -13,7 +13,6 @@ import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { Typography } from 'src/components/Typography';
 import { CreateSSHKeyDrawer } from 'src/features/Profile/SSHKeys/CreateSSHKeyDrawer';
-// import { useGravatar } from 'src/hooks/useGravatar';
 import { usePagination } from 'src/hooks/usePagination';
 import { useAccountUsers } from 'src/queries/account/users';
 import { useProfile, useSSHKeysQuery } from 'src/queries/profile/profile';
@@ -21,7 +20,6 @@ import { fadeIn } from 'src/styles/keyframes';
 import { truncateAndJoinList } from 'src/utilities/stringUtils';
 
 import { Avatar } from '../Avatar/Avatar';
-// import { Box } from '../Box';
 import { GravatarByEmail } from '../GravatarByEmail';
 import { GravatarOrAvatar } from '../GravatarOrAvatar';
 import { PaginationFooter } from '../PaginationFooter/PaginationFooter';
@@ -76,8 +74,6 @@ const UserSSHKeyPanel = (props: Props) => {
 
   const { data: profile } = useProfile();
 
-  // const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
-
   const isRestricted = profile?.restricted ?? false;
 
   // For non-restricted users, this query data will be used to render options
@@ -164,19 +160,7 @@ const UserSSHKeyPanel = (props: Props) => {
                   />
                 }
                 avatar={<Avatar sx={{ borderRadius: '50%', marginRight: 1 }} />}
-                height={28}
-                width={28}
               />
-              {/* // {isLoadingGravatar ? (
-              //   <Box height={28} width={28} />
-              // ) : hasGravatar ? (
-              //   <GravatarByEmail
-              //     className={classes.gravatar}
-              //     email={profile.email}
-              //   />
-              // ) : (
-              //   <Avatar sx={{ borderRadius: '50%', marginRight: 1 }} />
-              // )} */}
               {profile.username}
             </div>
           </TableCell>
@@ -224,22 +208,6 @@ const UserSSHKeyPanel = (props: Props) => {
                 />
               }
             />
-            {/* // {hasGravatar ? (
-            //   <GravatarByEmail
-            //     className={classes.gravatar}
-            //     email={user.email}
-            //   />
-            // ) : (
-            //   <Avatar
-            //     color={
-            //       user.username !== profile?.username
-            //         ? theme.palette.primary.dark
-            //         : undefined
-            //     }
-            //     sx={{ borderRadius: '50%', marginRight: 1 }}
-            //     username={user.username}
-            //   />
-            // )} */}
             {user.username}
           </div>
         </TableCell>
diff --git a/packages/manager/src/features/Events/EventRow.tsx b/packages/manager/src/features/Events/EventRow.tsx
index cdef15bb4d0..40acfd1a063 100644
--- a/packages/manager/src/features/Events/EventRow.tsx
+++ b/packages/manager/src/features/Events/EventRow.tsx
@@ -9,7 +9,6 @@ import { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Hidden } from 'src/components/Hidden';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
-// import { useGravatar } from 'src/hooks/useGravatar';
 import { useProfile } from 'src/queries/profile/profile';
 import { getEventTimestamp } from 'src/utilities/eventUtils';
 
@@ -38,8 +37,6 @@ export const EventRow = (props: EventRowProps) => {
   };
   const { data: profile } = useProfile();
 
-  // const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
-
   if (!message) {
     return null;
   }
@@ -84,24 +81,6 @@ export const EventRow = (props: EventRowProps) => {
               height={24}
               width={24}
             />
-            {/* {isLoadingGravatar ? (
-              <Box height={24} width={24} />
-            ) : hasGravatar ? (
-              <StyledGravatar
-                username={username === 'Linode' ? '' : username}
-              />
-            ) : (
-              <Avatar
-                color={
-                  username !== profile?.username
-                    ? theme.palette.primary.dark
-                    : undefined
-                }
-                height={24}
-                username={username}
-                width={24}
-              />
-            )} */}
             {username}
           </Box>
         </TableCell>
diff --git a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
index ad1bfaddd30..25ab2a7ba4b 100644
--- a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
+++ b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
@@ -10,7 +10,6 @@ import {
   getEventMessage,
   getEventUsername,
 } from 'src/features/Events/utils';
-// import { useGravatar } from 'src/hooks/useGravatar';
 import { useProfile } from 'src/queries/profile/profile';
 
 import {
@@ -38,8 +37,6 @@ export const NotificationCenterEvent = React.memo(
 
     const { data: profile } = useProfile();
 
-    // const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
-
     /**
      * Some event types may not be handled by our system (or new types or new ones may be added that we haven't caught yet).
      * Filter these out so we don't display blank messages to the user.
@@ -56,20 +53,6 @@ export const NotificationCenterEvent = React.memo(
         className={unseenEventClass}
         data-testid={event.action}
       >
-        {/* {isLoadingGravatar ? (
-          <Box height={32} width={32} />
-        ) : hasGravatar ? (
-          <NotificationEventGravatar username={event.username} />
-        ) : (
-          <NotificationEventAvatar
-            color={
-              username !== profile?.username
-                ? theme.palette.primary.dark
-                : undefined
-            }
-            username={event.username ?? 'Linode'}
-          />
-        )} */}
         <GravatarOrAvatar
           avatar={
             <NotificationEventAvatar
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index 34bb988c548..821da8d8cfd 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -102,17 +102,6 @@ export const DisplaySettings = () => {
             }}
             display="flex"
           >
-            {/* {isLoadingGravatar ? (
-              <Box height={88} width={88} />
-            ) : hasGravatar ? (
-              <StyledGravatar
-                email={profile?.email ?? ''}
-                height={88}
-                width={88}
-              />
-            ) : (
-              <Avatar height={88} width={88} />
-            )} */}
             <GravatarOrAvatar
               gravatar={
                 <StyledGravatar
diff --git a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
index 42444fd47d4..80d5ab5cd5a 100644
--- a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
+++ b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
@@ -9,7 +9,6 @@ import { Avatar as NewAvatar } from 'src/components/Avatar/Avatar';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Typography } from 'src/components/Typography';
-// import { useGravatar } from 'src/hooks/useGravatar';
 import { useProfile } from 'src/queries/profile/profile';
 
 import { Hively, shouldRenderHively } from './Hively';
@@ -113,8 +112,6 @@ export const ExpandableTicketPanel = React.memo((props: Props) => {
 
   const { data: profile } = useProfile();
 
-  // const { hasGravatar } = useGravatar(profile?.email);
-
   React.useEffect(() => {
     if (!ticket && !reply) {
       return;
@@ -149,25 +146,6 @@ export const ExpandableTicketPanel = React.memo((props: Props) => {
   const renderAvatar = (id: string) => {
     return (
       <div className={classes.userWrapper}>
-        {/* {hasGravatar ? (
-          <Avatar
-            alt="Gravatar"
-            className={classes.leftIcon}
-            src={`https://gravatar.com/avatar/${id}?d=404`}
-          >
-            <UserIcon />
-          </Avatar>
-        ) : (
-          <NewAvatar
-            color={
-              data?.username !== profile?.username
-                ? theme.palette.primary.dark
-                : undefined
-            }
-            sx={{ marginTop: 1 }}
-            username={data?.username}
-          />
-        )} */}
         <GravatarOrAvatar
           avatar={
             <NewAvatar
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index 6e9ff09e617..f1d8fef35e8 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -22,7 +22,6 @@ import { switchAccountSessionContext } from 'src/context/switchAccountSessionCon
 import { SwitchAccountButton } from 'src/features/Account/SwitchAccountButton';
 import { SwitchAccountDrawer } from 'src/features/Account/SwitchAccountDrawer';
 import { useIsParentTokenExpired } from 'src/features/Account/SwitchAccounts/useIsParentTokenExpired';
-// import { useGravatar } from 'src/hooks/useGravatar';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useAccount } from 'src/queries/account/account';
 import { useGrants, useProfile } from 'src/queries/profile/profile';
@@ -108,8 +107,6 @@ export const UserMenu = React.memo(() => {
     theme.breakpoints.down('sm')
   );
 
-  // const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
-
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -223,14 +220,6 @@ export const UserMenu = React.memo(() => {
               />
             )
           }
-          //   isLoadingGravatar ? (
-          //     <Box height={28} width={28} />
-          //   ) : hasGravatar ? (
-          //     <StyledGravatar email={profile?.email ?? ''} />
-          //   ) : (
-          //     <Avatar />
-          //   )
-          // }
           sx={(theme) => ({
             backgroundColor: open ? theme.bg.app : undefined,
             height: '50px',
diff --git a/packages/manager/src/features/Users/UserRow.tsx b/packages/manager/src/features/Users/UserRow.tsx
index 21c93a8e0db..9c62b8efbf8 100644
--- a/packages/manager/src/features/Users/UserRow.tsx
+++ b/packages/manager/src/features/Users/UserRow.tsx
@@ -14,7 +14,6 @@ import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { Typography } from 'src/components/Typography';
-// import { useGravatar } from 'src/hooks/useGravatar';
 import { useAccountUserGrants } from 'src/queries/account/users';
 import { useProfile } from 'src/queries/profile/profile';
 import { fadeIn } from 'src/styles/keyframes';
@@ -37,8 +36,6 @@ export const UserRow = ({ onDelete, user }: Props) => {
   const isProxyUser = Boolean(user.user_type === 'proxy');
   const showChildAccountAccessCol = profile?.user_type === 'parent';
 
-  // const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
-
   return (
     <TableRow data-qa-table-row={user.username} key={user.username}>
       <TableCell>
@@ -56,20 +53,6 @@ export const UserRow = ({ onDelete, user }: Props) => {
             }
             gravatar={<StyledGravatar email={user.email} />}
           />
-          {/* {isLoadingGravatar ? (
-            <Box height={28} width={28} />
-          ) : hasGravatar ? (
-            <StyledGravatar email={user.email} />
-          ) : (
-            <Avatar
-              color={
-                user.username !== profile?.username
-                  ? theme.palette.primary.dark
-                  : undefined
-              }
-              username={user.username}
-            />
-          )} */}
           <Typography>{user.username}</Typography>
           <Box display="flex" flexGrow={1} />
           {user.tfa_enabled && <Chip color="success" label="2FA" />}
diff --git a/packages/manager/src/hooks/useGravatar.ts b/packages/manager/src/hooks/useGravatar.ts
index 9d06c38450b..4d8bfa8fc8d 100644
--- a/packages/manager/src/hooks/useGravatar.ts
+++ b/packages/manager/src/hooks/useGravatar.ts
@@ -41,45 +41,3 @@ export const useGravatar = (email: string | undefined) => {
 
   return { hasGravatar, isLoadingGravatar };
 };
-
-// // set a cache to prevent duplicate requests
-// const gravatarCache = new Map<string, boolean>();
-
-// /**
-//  * useGravatar
-//  *
-//  * @description
-//  * This hook checks if a user has a Gravatar associated with their email.
-//  * It uses a cache to prevent duplicate requests.
-//  *
-//  * @param email - The email address to check for a Gravatar.
-//  * @returns - A boolean indicating whether the user has a Gravatar.
-//  */
-
-// export const useGravatar = (email: string | undefined) => {
-//   const [hasGravatar, setHasGravatar] = useState(
-//     email && gravatarCache.has(email) ? gravatarCache.get(email) : false
-//   );
-//   const [isLoadingGravatar, setIsLoadingGravatar] = useState<boolean>(true);
-
-//   useEffect(() => {
-//     if (!email) {
-//       setHasGravatar(false);
-//       setIsLoadingGravatar(false);
-//       return;
-//     }
-
-//     if (gravatarCache.has(email)) {
-//       setHasGravatar(gravatarCache.get(email));
-//       setIsLoadingGravatar(false);
-//     } else {
-//       checkForGravatar(getGravatarUrl(email)).then((result) => {
-//         gravatarCache.set(email, result);
-//         setHasGravatar(result);
-//         setIsLoadingGravatar(false);
-//       });
-//     }
-//   }, [email]);
-
-//   return { hasGravatar, isLoadingGravatar };
-// };

From f4d32f37f358c4c858f664e0d990e5e5d1ae9a4e Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Mon, 9 Sep 2024 07:53:35 -0700
Subject: [PATCH 39/46] Use const for default avatar size

---
 packages/manager/src/components/GravatarOrAvatar.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/manager/src/components/GravatarOrAvatar.tsx b/packages/manager/src/components/GravatarOrAvatar.tsx
index ed47cdc608d..6a9ab209775 100644
--- a/packages/manager/src/components/GravatarOrAvatar.tsx
+++ b/packages/manager/src/components/GravatarOrAvatar.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { useGravatar } from 'src/hooks/useGravatar';
 import { useProfile } from 'src/queries/profile/profile';
 
+import { DEFAULT_AVATAR_SIZE } from './Avatar/Avatar';
 import { Box } from './Box';
 
 interface Props {
@@ -13,7 +14,12 @@ interface Props {
 }
 
 export const GravatarOrAvatar = (props: Props) => {
-  const { avatar, gravatar, height = 28, width = 28 } = props;
+  const {
+    avatar,
+    gravatar,
+    height = DEFAULT_AVATAR_SIZE,
+    width = DEFAULT_AVATAR_SIZE,
+  } = props;
   const { data: profile } = useProfile();
   const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
 

From 6a3eca7291d6c6bca3542d0cda51f35db6ae87ba Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Tue, 10 Sep 2024 09:10:57 -0700
Subject: [PATCH 40/46] Address feedback: use Map

---
 packages/manager/src/hooks/useGravatar.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/manager/src/hooks/useGravatar.ts b/packages/manager/src/hooks/useGravatar.ts
index 4d8bfa8fc8d..b2b99cae853 100644
--- a/packages/manager/src/hooks/useGravatar.ts
+++ b/packages/manager/src/hooks/useGravatar.ts
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
 
 // set a cache to prevent duplicate requests
-const gravatarCache: Record<string, boolean> = {};
+const gravatarCache = new Map<string, boolean>();
 
 /**
  * useGravatar
@@ -15,24 +15,26 @@ const gravatarCache: Record<string, boolean> = {};
  * @param email - The email address to check for a Gravatar.
  * @returns - A boolean indicating whether the user has a Gravatar.
  */
+
 export const useGravatar = (email: string | undefined) => {
-  const [hasGravatar, setHasGravatar] = useState(false);
+  const [hasGravatar, setHasGravatar] = useState(
+    email && gravatarCache.has(email) ? gravatarCache.get(email) : false
+  );
   const [isLoadingGravatar, setIsLoadingGravatar] = useState<boolean>(true);
 
   useEffect(() => {
     if (!email) {
       setHasGravatar(false);
       setIsLoadingGravatar(false);
-
       return;
     }
 
-    if (gravatarCache.hasOwnProperty(email)) {
-      setHasGravatar(gravatarCache[email]);
+    if (gravatarCache.has(email)) {
+      setHasGravatar(gravatarCache.get(email));
       setIsLoadingGravatar(false);
     } else {
       checkForGravatar(getGravatarUrl(email)).then((result) => {
-        gravatarCache[email] = result;
+        gravatarCache.set(email, result);
         setHasGravatar(result);
         setIsLoadingGravatar(false);
       });

From c373a53f11d2dcd1f7b735aabce10fc0edd98acb Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Tue, 10 Sep 2024 09:55:38 -0700
Subject: [PATCH 41/46] Does not using the deprecated function fix the unit
 tests in CI?

---
 .../Linodes/LinodeCreatev2/Security.test.tsx  | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Security.test.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Security.test.tsx
index acd014cd307..d7ce47d6599 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Security.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Security.test.tsx
@@ -16,21 +16,17 @@ import { Security } from './Security';
 
 import type { LinodeCreateFormValues } from './utilities';
 
-describe('Security', () => {
-  it(
-    'should render a root password input',
-    async () => {
-      const { findByLabelText } = renderWithThemeAndHookFormContext({
-        component: <Security />,
-      });
-
-      const rootPasswordInput = await findByLabelText('Root Password');
-
-      expect(rootPasswordInput).toBeVisible();
-      expect(rootPasswordInput).toBeEnabled();
-    },
-    { timeout: 5_000 }
-  );
+describe('Security', { timeout: 5_000 }, () => {
+  it('should render a root password input', async () => {
+    const { findByLabelText } = renderWithThemeAndHookFormContext({
+      component: <Security />,
+    });
+
+    const rootPasswordInput = await findByLabelText('Root Password');
+
+    expect(rootPasswordInput).toBeVisible();
+    expect(rootPasswordInput).toBeEnabled();
+  });
 
   it('should render a SSH Keys heading', async () => {
     const { getAllByText } = renderWithThemeAndHookFormContext({

From 2e56cb856adfc315f924b99b843422a01735c022 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Tue, 10 Sep 2024 11:02:50 -0700
Subject: [PATCH 42/46] Revert "Does not using the deprecated function fix the
 unit tests in CI?"

This reverts commit c373a53f11d2dcd1f7b735aabce10fc0edd98acb.
---
 .../Linodes/LinodeCreatev2/Security.test.tsx  | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Security.test.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Security.test.tsx
index d7ce47d6599..acd014cd307 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Security.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Security.test.tsx
@@ -16,17 +16,21 @@ import { Security } from './Security';
 
 import type { LinodeCreateFormValues } from './utilities';
 
-describe('Security', { timeout: 5_000 }, () => {
-  it('should render a root password input', async () => {
-    const { findByLabelText } = renderWithThemeAndHookFormContext({
-      component: <Security />,
-    });
-
-    const rootPasswordInput = await findByLabelText('Root Password');
-
-    expect(rootPasswordInput).toBeVisible();
-    expect(rootPasswordInput).toBeEnabled();
-  });
+describe('Security', () => {
+  it(
+    'should render a root password input',
+    async () => {
+      const { findByLabelText } = renderWithThemeAndHookFormContext({
+        component: <Security />,
+      });
+
+      const rootPasswordInput = await findByLabelText('Root Password');
+
+      expect(rootPasswordInput).toBeVisible();
+      expect(rootPasswordInput).toBeEnabled();
+    },
+    { timeout: 5_000 }
+  );
 
   it('should render a SSH Keys heading', async () => {
     const { getAllByText } = renderWithThemeAndHookFormContext({

From b9d597be21dfb62f6af292be89ef03531e6ae81e Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Tue, 10 Sep 2024 11:46:09 -0700
Subject: [PATCH 43/46] Skip failing test with JSDom issues for now

---
 .../src/features/Linodes/LinodeCreatev2/Security.test.tsx      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Security.test.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Security.test.tsx
index acd014cd307..1d837243fe9 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Security.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Security.test.tsx
@@ -17,7 +17,8 @@ import { Security } from './Security';
 import type { LinodeCreateFormValues } from './utilities';
 
 describe('Security', () => {
-  it(
+  // TODO: Unskip once M3-8559 is addressed.
+  it.skip(
     'should render a root password input',
     async () => {
       const { findByLabelText } = renderWithThemeAndHookFormContext({

From 04c0b6b719309c987f0155ed3715eb2f6fd28fe7 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Tue, 10 Sep 2024 13:45:49 -0700
Subject: [PATCH 44/46] Improve fading behavior

---
 .../src/components/AccessPanel/UserSSHKeyPanel.tsx |  2 +-
 .../manager/src/components/GravatarByEmail.tsx     | 14 ++++++++++++++
 .../manager/src/components/GravatarByUsername.tsx  | 13 +++++++++++++
 .../manager/src/features/Events/EventRow.styles.ts |  2 +-
 .../NotificationCenter.styles.ts                   |  2 +-
 .../Profile/DisplaySettings/DisplaySettings.tsx    |  2 +-
 .../src/features/TopMenu/UserMenu/UserMenu.tsx     |  2 +-
 packages/manager/src/features/Users/UserRow.tsx    |  2 +-
 8 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
index 8051823b640..906097b0fcc 100644
--- a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
+++ b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
@@ -39,7 +39,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     width: '30%',
   },
   gravatar: {
-    animation: `${fadeIn} .2s ease-out forwards`,
+    animation: `${fadeIn} .2s ease-in-out forwards`,
     borderRadius: '50%',
     height: 24,
     marginRight: theme.spacing(1),
diff --git a/packages/manager/src/components/GravatarByEmail.tsx b/packages/manager/src/components/GravatarByEmail.tsx
index 4ff64876d93..95e4bdc183d 100644
--- a/packages/manager/src/components/GravatarByEmail.tsx
+++ b/packages/manager/src/components/GravatarByEmail.tsx
@@ -4,6 +4,8 @@ import * as React from 'react';
 import UserIcon from 'src/assets/icons/account.svg';
 import { getGravatarUrl } from 'src/utilities/gravatar';
 
+import { Box } from './Box';
+
 export const DEFAULT_AVATAR_SIZE = 28;
 
 export interface GravatarByEmailProps {
@@ -23,6 +25,18 @@ export const GravatarByEmail = (props: GravatarByEmailProps) => {
 
   const url = getGravatarUrl(email);
 
+  // Render placeholder instead of flashing default user icon briefly
+  if (!url) {
+    return (
+      <Box
+        sx={{
+          height,
+          width,
+        }}
+      />
+    );
+  }
+
   return (
     <Avatar
       alt={`Avatar for user ${email}`}
diff --git a/packages/manager/src/components/GravatarByUsername.tsx b/packages/manager/src/components/GravatarByUsername.tsx
index 9f3cf39c029..810caebf7c7 100644
--- a/packages/manager/src/components/GravatarByUsername.tsx
+++ b/packages/manager/src/components/GravatarByUsername.tsx
@@ -5,6 +5,7 @@ import UserIcon from 'src/assets/icons/account.svg';
 import { useAccountUser } from 'src/queries/account/users';
 import { getGravatarUrl } from 'src/utilities/gravatar';
 
+import { Box } from './Box';
 import { DEFAULT_AVATAR_SIZE } from './GravatarByEmail';
 
 export interface GravatarByUsernameProps {
@@ -17,6 +18,18 @@ export const GravatarByUsername = (props: GravatarByUsernameProps) => {
   const { data: user } = useAccountUser(username ?? '');
   const url = user?.email ? getGravatarUrl(user.email) : undefined;
 
+  // Render placeholder instead of flashing default user icon briefly
+  if (!url) {
+    return (
+      <Box
+        sx={{
+          height: DEFAULT_AVATAR_SIZE,
+          width: DEFAULT_AVATAR_SIZE,
+        }}
+      />
+    );
+  }
+
   return (
     <Avatar
       alt={`Avatar for user ${username}`}
diff --git a/packages/manager/src/features/Events/EventRow.styles.ts b/packages/manager/src/features/Events/EventRow.styles.ts
index 968b58bd1c9..d290c6469c9 100644
--- a/packages/manager/src/features/Events/EventRow.styles.ts
+++ b/packages/manager/src/features/Events/EventRow.styles.ts
@@ -8,7 +8,7 @@ import { GravatarByUsername } from '../../components/GravatarByUsername';
 export const StyledGravatar = styled(GravatarByUsername, {
   label: 'StyledGravatar',
 })(({ theme }) => ({
-  animation: `${fadeIn} 1.75s ease-out forwards`,
+  animation: `${fadeIn} 0.2s ease-in-out forwards`,
   height: theme.spacing(3),
   width: theme.spacing(3),
 }));
diff --git a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
index a59176a1344..620151a4769 100644
--- a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
+++ b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
@@ -123,7 +123,7 @@ export const NotificationEventStyledBox = styled(Box, {
 export const NotificationEventGravatar = styled(GravatarByUsername, {
   label: 'StyledGravatarByUsername',
 })(() => ({
-  animation: `${fadeIn} 1s ease-out forwards`,
+  animation: `${fadeIn} .2s ease-in-out forwards`,
   height: 32,
   marginTop: 2,
   minWidth: 32,
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index 821da8d8cfd..ce64dae9ead 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -228,5 +228,5 @@ const StyledTooltipIcon = styled(TooltipIcon, {
 const StyledGravatar = styled(GravatarByEmail, {
   label: 'StyledGravatarByEmail',
 })(() => ({
-  animation: `${fadeIn} .3s ease-out forwards`,
+  animation: `${fadeIn} .2s ease-in-out forwards`,
 }));
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index f1d8fef35e8..2712c26514a 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -355,5 +355,5 @@ const Heading = styled(Typography)(({ theme }) => ({
 const StyledGravatar = styled(GravatarByEmail, {
   label: 'StyledGravatarByEmail',
 })(() => ({
-  animation: `${fadeIn} .2s ease-out forwards`,
+  animation: `${fadeIn} .2s ease-in-out forwards`,
 }));
diff --git a/packages/manager/src/features/Users/UserRow.tsx b/packages/manager/src/features/Users/UserRow.tsx
index 9c62b8efbf8..3d33812f341 100644
--- a/packages/manager/src/features/Users/UserRow.tsx
+++ b/packages/manager/src/features/Users/UserRow.tsx
@@ -120,5 +120,5 @@ const LastLogin = (props: Pick<User, 'last_login'>) => {
 const StyledGravatar = styled(GravatarByEmail, {
   label: 'StyledGravatarByEmail',
 })(() => ({
-  animation: `${fadeIn} .3s ease-out forwards`,
+  animation: `${fadeIn} .2s ease-in-out forwards`,
 }));

From 1e589a88a19285c142eed58b4731fd799bfcda51 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Tue, 10 Sep 2024 13:51:25 -0700
Subject: [PATCH 45/46] Revert "Improve fading behavior" because it causes
 other issues

This reverts commit 04c0b6b719309c987f0155ed3715eb2f6fd28fe7.
---
 .../src/components/AccessPanel/UserSSHKeyPanel.tsx |  2 +-
 .../manager/src/components/GravatarByEmail.tsx     | 14 --------------
 .../manager/src/components/GravatarByUsername.tsx  | 13 -------------
 .../manager/src/features/Events/EventRow.styles.ts |  2 +-
 .../NotificationCenter.styles.ts                   |  2 +-
 .../Profile/DisplaySettings/DisplaySettings.tsx    |  2 +-
 .../src/features/TopMenu/UserMenu/UserMenu.tsx     |  2 +-
 packages/manager/src/features/Users/UserRow.tsx    |  2 +-
 8 files changed, 6 insertions(+), 33 deletions(-)

diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
index 906097b0fcc..8051823b640 100644
--- a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
+++ b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
@@ -39,7 +39,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     width: '30%',
   },
   gravatar: {
-    animation: `${fadeIn} .2s ease-in-out forwards`,
+    animation: `${fadeIn} .2s ease-out forwards`,
     borderRadius: '50%',
     height: 24,
     marginRight: theme.spacing(1),
diff --git a/packages/manager/src/components/GravatarByEmail.tsx b/packages/manager/src/components/GravatarByEmail.tsx
index 95e4bdc183d..4ff64876d93 100644
--- a/packages/manager/src/components/GravatarByEmail.tsx
+++ b/packages/manager/src/components/GravatarByEmail.tsx
@@ -4,8 +4,6 @@ import * as React from 'react';
 import UserIcon from 'src/assets/icons/account.svg';
 import { getGravatarUrl } from 'src/utilities/gravatar';
 
-import { Box } from './Box';
-
 export const DEFAULT_AVATAR_SIZE = 28;
 
 export interface GravatarByEmailProps {
@@ -25,18 +23,6 @@ export const GravatarByEmail = (props: GravatarByEmailProps) => {
 
   const url = getGravatarUrl(email);
 
-  // Render placeholder instead of flashing default user icon briefly
-  if (!url) {
-    return (
-      <Box
-        sx={{
-          height,
-          width,
-        }}
-      />
-    );
-  }
-
   return (
     <Avatar
       alt={`Avatar for user ${email}`}
diff --git a/packages/manager/src/components/GravatarByUsername.tsx b/packages/manager/src/components/GravatarByUsername.tsx
index 810caebf7c7..9f3cf39c029 100644
--- a/packages/manager/src/components/GravatarByUsername.tsx
+++ b/packages/manager/src/components/GravatarByUsername.tsx
@@ -5,7 +5,6 @@ import UserIcon from 'src/assets/icons/account.svg';
 import { useAccountUser } from 'src/queries/account/users';
 import { getGravatarUrl } from 'src/utilities/gravatar';
 
-import { Box } from './Box';
 import { DEFAULT_AVATAR_SIZE } from './GravatarByEmail';
 
 export interface GravatarByUsernameProps {
@@ -18,18 +17,6 @@ export const GravatarByUsername = (props: GravatarByUsernameProps) => {
   const { data: user } = useAccountUser(username ?? '');
   const url = user?.email ? getGravatarUrl(user.email) : undefined;
 
-  // Render placeholder instead of flashing default user icon briefly
-  if (!url) {
-    return (
-      <Box
-        sx={{
-          height: DEFAULT_AVATAR_SIZE,
-          width: DEFAULT_AVATAR_SIZE,
-        }}
-      />
-    );
-  }
-
   return (
     <Avatar
       alt={`Avatar for user ${username}`}
diff --git a/packages/manager/src/features/Events/EventRow.styles.ts b/packages/manager/src/features/Events/EventRow.styles.ts
index d290c6469c9..968b58bd1c9 100644
--- a/packages/manager/src/features/Events/EventRow.styles.ts
+++ b/packages/manager/src/features/Events/EventRow.styles.ts
@@ -8,7 +8,7 @@ import { GravatarByUsername } from '../../components/GravatarByUsername';
 export const StyledGravatar = styled(GravatarByUsername, {
   label: 'StyledGravatar',
 })(({ theme }) => ({
-  animation: `${fadeIn} 0.2s ease-in-out forwards`,
+  animation: `${fadeIn} 1.75s ease-out forwards`,
   height: theme.spacing(3),
   width: theme.spacing(3),
 }));
diff --git a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
index 620151a4769..a59176a1344 100644
--- a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
+++ b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
@@ -123,7 +123,7 @@ export const NotificationEventStyledBox = styled(Box, {
 export const NotificationEventGravatar = styled(GravatarByUsername, {
   label: 'StyledGravatarByUsername',
 })(() => ({
-  animation: `${fadeIn} .2s ease-in-out forwards`,
+  animation: `${fadeIn} 1s ease-out forwards`,
   height: 32,
   marginTop: 2,
   minWidth: 32,
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index ce64dae9ead..821da8d8cfd 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -228,5 +228,5 @@ const StyledTooltipIcon = styled(TooltipIcon, {
 const StyledGravatar = styled(GravatarByEmail, {
   label: 'StyledGravatarByEmail',
 })(() => ({
-  animation: `${fadeIn} .2s ease-in-out forwards`,
+  animation: `${fadeIn} .3s ease-out forwards`,
 }));
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index 2712c26514a..f1d8fef35e8 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -355,5 +355,5 @@ const Heading = styled(Typography)(({ theme }) => ({
 const StyledGravatar = styled(GravatarByEmail, {
   label: 'StyledGravatarByEmail',
 })(() => ({
-  animation: `${fadeIn} .2s ease-in-out forwards`,
+  animation: `${fadeIn} .2s ease-out forwards`,
 }));
diff --git a/packages/manager/src/features/Users/UserRow.tsx b/packages/manager/src/features/Users/UserRow.tsx
index 3d33812f341..9c62b8efbf8 100644
--- a/packages/manager/src/features/Users/UserRow.tsx
+++ b/packages/manager/src/features/Users/UserRow.tsx
@@ -120,5 +120,5 @@ const LastLogin = (props: Pick<User, 'last_login'>) => {
 const StyledGravatar = styled(GravatarByEmail, {
   label: 'StyledGravatarByEmail',
 })(() => ({
-  animation: `${fadeIn} .2s ease-in-out forwards`,
+  animation: `${fadeIn} .3s ease-out forwards`,
 }));

From 58351406ef80a38e63cfdbb6a6246f1fefe8abb3 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Tue, 10 Sep 2024 15:12:06 -0700
Subject: [PATCH 46/46] Add GravatarByUsername loading placeholder; adjust
 other fades

---
 .../src/components/AccessPanel/UserSSHKeyPanel.tsx    |  2 --
 .../manager/src/components/GravatarByUsername.tsx     |  8 +++++++-
 .../manager/src/features/Events/EventRow.styles.ts    |  2 +-
 .../NotificationCenter/NotificationCenter.styles.ts   |  2 +-
 .../Profile/DisplaySettings/DisplaySettings.tsx       | 11 ++---------
 .../src/features/TopMenu/UserMenu/UserMenu.tsx        |  9 +--------
 packages/manager/src/features/Users/UserRow.tsx       | 10 +---------
 7 files changed, 13 insertions(+), 31 deletions(-)

diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
index 8051823b640..fa9ed19f713 100644
--- a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
+++ b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
@@ -16,7 +16,6 @@ import { CreateSSHKeyDrawer } from 'src/features/Profile/SSHKeys/CreateSSHKeyDra
 import { usePagination } from 'src/hooks/usePagination';
 import { useAccountUsers } from 'src/queries/account/users';
 import { useProfile, useSSHKeysQuery } from 'src/queries/profile/profile';
-import { fadeIn } from 'src/styles/keyframes';
 import { truncateAndJoinList } from 'src/utilities/stringUtils';
 
 import { Avatar } from '../Avatar/Avatar';
@@ -39,7 +38,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
     width: '30%',
   },
   gravatar: {
-    animation: `${fadeIn} .2s ease-out forwards`,
     borderRadius: '50%',
     height: 24,
     marginRight: theme.spacing(1),
diff --git a/packages/manager/src/components/GravatarByUsername.tsx b/packages/manager/src/components/GravatarByUsername.tsx
index 9f3cf39c029..3adb2262aa3 100644
--- a/packages/manager/src/components/GravatarByUsername.tsx
+++ b/packages/manager/src/components/GravatarByUsername.tsx
@@ -5,6 +5,7 @@ import UserIcon from 'src/assets/icons/account.svg';
 import { useAccountUser } from 'src/queries/account/users';
 import { getGravatarUrl } from 'src/utilities/gravatar';
 
+import { Box } from './Box';
 import { DEFAULT_AVATAR_SIZE } from './GravatarByEmail';
 
 export interface GravatarByUsernameProps {
@@ -14,9 +15,14 @@ export interface GravatarByUsernameProps {
 
 export const GravatarByUsername = (props: GravatarByUsernameProps) => {
   const { className, username } = props;
-  const { data: user } = useAccountUser(username ?? '');
+  const { data: user, isLoading } = useAccountUser(username ?? '');
   const url = user?.email ? getGravatarUrl(user.email) : undefined;
 
+  // Render placeholder instead of flashing default user icon briefly
+  if (isLoading) {
+    return <Box height={DEFAULT_AVATAR_SIZE} width={DEFAULT_AVATAR_SIZE} />;
+  }
+
   return (
     <Avatar
       alt={`Avatar for user ${username}`}
diff --git a/packages/manager/src/features/Events/EventRow.styles.ts b/packages/manager/src/features/Events/EventRow.styles.ts
index 968b58bd1c9..cf2743a97ed 100644
--- a/packages/manager/src/features/Events/EventRow.styles.ts
+++ b/packages/manager/src/features/Events/EventRow.styles.ts
@@ -8,7 +8,7 @@ import { GravatarByUsername } from '../../components/GravatarByUsername';
 export const StyledGravatar = styled(GravatarByUsername, {
   label: 'StyledGravatar',
 })(({ theme }) => ({
-  animation: `${fadeIn} 1.75s ease-out forwards`,
+  animation: `${fadeIn} .2s ease-in-out forwards`,
   height: theme.spacing(3),
   width: theme.spacing(3),
 }));
diff --git a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
index a59176a1344..620151a4769 100644
--- a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
+++ b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
@@ -123,7 +123,7 @@ export const NotificationEventStyledBox = styled(Box, {
 export const NotificationEventGravatar = styled(GravatarByUsername, {
   label: 'StyledGravatarByUsername',
 })(() => ({
-  animation: `${fadeIn} 1s ease-out forwards`,
+  animation: `${fadeIn} .2s ease-in-out forwards`,
   height: 32,
   marginTop: 2,
   minWidth: 32,
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index 821da8d8cfd..6c003f183c2 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -9,7 +9,6 @@ import { Avatar } from 'src/components/Avatar/Avatar';
 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 { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Link } from 'src/components/Link';
 import { Paper } from 'src/components/Paper';
@@ -20,12 +19,12 @@ import { RESTRICTED_FIELD_TOOLTIP } from 'src/features/Account/constants';
 import { useGravatar } from 'src/hooks/useGravatar';
 import { useNotificationsQuery } from 'src/queries/account/notifications';
 import { useMutateProfile, useProfile } from 'src/queries/profile/profile';
-import { fadeIn } from 'src/styles/keyframes';
 
 import { AvatarColorPickerDialog } from './AvatarColorPickerDialog';
 import { TimezoneForm } from './TimezoneForm';
 
 import type { ApplicationState } from 'src/store';
+import { GravatarByEmail } from 'src/components/GravatarByEmail';
 
 export const DisplaySettings = () => {
   const theme = useTheme();
@@ -104,7 +103,7 @@ export const DisplaySettings = () => {
           >
             <GravatarOrAvatar
               gravatar={
-                <StyledGravatar
+                <GravatarByEmail
                   email={profile?.email ?? ''}
                   height={88}
                   width={88}
@@ -224,9 +223,3 @@ const StyledTooltipIcon = styled(TooltipIcon, {
     minWidth: 350,
   },
 }));
-
-const StyledGravatar = styled(GravatarByEmail, {
-  label: 'StyledGravatarByEmail',
-})(() => ({
-  animation: `${fadeIn} .3s ease-out forwards`,
-}));
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index f1d8fef35e8..c1470ebbaaf 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -25,7 +25,6 @@ import { useIsParentTokenExpired } from 'src/features/Account/SwitchAccounts/use
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useAccount } from 'src/queries/account/account';
 import { useGrants, useProfile } from 'src/queries/profile/profile';
-import { fadeIn } from 'src/styles/keyframes';
 import { sendSwitchAccountEvent } from 'src/utilities/analytics/customEventAnalytics';
 import { getStorage, setStorage } from 'src/utilities/storage';
 
@@ -216,7 +215,7 @@ export const UserMenu = React.memo(() => {
             ) : (
               <GravatarOrAvatar
                 avatar={<Avatar />}
-                gravatar={<StyledGravatar email={profile?.email ?? ''} />}
+                gravatar={<GravatarByEmail email={profile?.email ?? ''} />}
               />
             )
           }
@@ -351,9 +350,3 @@ const Heading = styled(Typography)(({ theme }) => ({
   letterSpacing: 1.875,
   textTransform: 'uppercase',
 }));
-
-const StyledGravatar = styled(GravatarByEmail, {
-  label: 'StyledGravatarByEmail',
-})(() => ({
-  animation: `${fadeIn} .2s ease-out forwards`,
-}));
diff --git a/packages/manager/src/features/Users/UserRow.tsx b/packages/manager/src/features/Users/UserRow.tsx
index 9c62b8efbf8..abe6616ddde 100644
--- a/packages/manager/src/features/Users/UserRow.tsx
+++ b/packages/manager/src/features/Users/UserRow.tsx
@@ -1,5 +1,4 @@
 import { useTheme } from '@mui/material/styles';
-import { styled } from '@mui/material/styles';
 import React from 'react';
 
 import { Avatar } from 'src/components/Avatar/Avatar';
@@ -16,7 +15,6 @@ import { TableRow } from 'src/components/TableRow';
 import { Typography } from 'src/components/Typography';
 import { useAccountUserGrants } from 'src/queries/account/users';
 import { useProfile } from 'src/queries/profile/profile';
-import { fadeIn } from 'src/styles/keyframes';
 import { capitalize } from 'src/utilities/capitalize';
 
 import { UsersActionMenu } from './UsersActionMenu';
@@ -51,7 +49,7 @@ export const UserRow = ({ onDelete, user }: Props) => {
                 username={user.username}
               />
             }
-            gravatar={<StyledGravatar email={user.email} />}
+            gravatar={<GravatarByEmail email={user.email} />}
           />
           <Typography>{user.username}</Typography>
           <Box display="flex" flexGrow={1} />
@@ -116,9 +114,3 @@ const LastLogin = (props: Pick<User, 'last_login'>) => {
     </Stack>
   );
 };
-
-const StyledGravatar = styled(GravatarByEmail, {
-  label: 'StyledGravatarByEmail',
-})(() => ({
-  animation: `${fadeIn} .3s ease-out forwards`,
-}));