From 90e9e7fb366b820a8ed294d500ec651f44ef2ad2 Mon Sep 17 00:00:00 2001
From: Josiah Ivey <josiah.ivey@gmail.com>
Date: Mon, 4 Nov 2024 15:15:51 -0800
Subject: [PATCH] render user icon when the initials are not available

---
 .../NavBar/__snapshots__/index.spec.tsx.snap  | 28 ++++++++++++++++++-
 src/app/components/NavBar/index.tsx           |  5 ++--
 src/app/components/NavBar/styled.tsx          |  4 +++
 src/assets/UserIcon.tsx                       | 16 +++++++++++
 4 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/UserIcon.tsx

diff --git a/src/app/components/NavBar/__snapshots__/index.spec.tsx.snap b/src/app/components/NavBar/__snapshots__/index.spec.tsx.snap
index e10fad3d11..92e6a8f90c 100644
--- a/src/app/components/NavBar/__snapshots__/index.spec.tsx.snap
+++ b/src/app/components/NavBar/__snapshots__/index.spec.tsx.snap
@@ -180,6 +180,10 @@ exports[`content in browser assignable user renders 1`] = `
   box-shadow: 0 0 0.2rem 0.2rem rgba(0,0,0,0.3);
 }
 
+.c6 svg {
+  width: 1.5rem;
+}
+
 .c6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -208,6 +212,10 @@ exports[`content in browser assignable user renders 1`] = `
   box-shadow: 0 0 0.2rem 0.2rem rgba(0,0,0,0.3);
 }
 
+.c6 svg {
+  width: 1.5rem;
+}
+
 .c6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -236,6 +244,10 @@ exports[`content in browser assignable user renders 1`] = `
   box-shadow: 0 0 0.2rem 0.2rem rgba(0,0,0,0.3);
 }
 
+.c6 svg {
+  width: 1.5rem;
+}
+
 .c10 {
   color: #424242;
   font-size: 1.8rem;
@@ -947,7 +959,17 @@ exports[`content in browser assignable user renders 1`] = `
         data-testid="user-nav-toggle"
         tabIndex="0"
       >
-        AU
+        <svg
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill=\\"currentColor\\"
+d=\\"M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z\\" />",
+            }
+          }
+          fill="currentColor"
+          viewBox="0 0 448 512"
+          xmlns="http://www.w3.org/2000/svg"
+        />
       </div>
       <div
         className="c7 c8"
@@ -1525,6 +1547,10 @@ exports[`content in browser when logged in matches snapshot 1`] = `
   box-shadow: 0 0 0.2rem 0.2rem rgba(0,0,0,0.3);
 }
 
+.c6 svg {
+  width: 1.5rem;
+}
+
 .c10 {
   color: #424242;
   font-size: 1.8rem;
diff --git a/src/app/components/NavBar/index.tsx b/src/app/components/NavBar/index.tsx
index acf49c71d1..79f5e3dfef 100644
--- a/src/app/components/NavBar/index.tsx
+++ b/src/app/components/NavBar/index.tsx
@@ -9,6 +9,7 @@ import * as selectNavigation from '../../navigation/selectors';
 import { AppState } from '../../types';
 import OnScroll, { OnScrollCallback } from '../OnScroll';
 import * as Styled from './styled';
+import UserIcon from '../../../assets/UserIcon';
 
 export { maxNavWidth, navDesktopHeight, navMobileHeight } from './styled';
 
@@ -83,7 +84,7 @@ export const Dropdown: FunctionComponent<{user: User, currentPath: string}> = ({
 const DropdownToggle: FunctionComponent<{ user: User }> = ({
   user: { firstName, lastName },
 }) => {
-  const initials = ((firstName || 'A')[0] + (lastName || 'U')[0]).toUpperCase();
+  const renderEl = firstName && lastName ? (firstName[0] + lastName[0]).toUpperCase() : <UserIcon />;
   return (
     <Styled.DropdownToggle
       tabIndex='0'
@@ -92,7 +93,7 @@ const DropdownToggle: FunctionComponent<{ user: User }> = ({
       aria-haspopup='true'
       aria-controls='dropdown-menu'
     >
-      {initials}
+      {renderEl}
     </Styled.DropdownToggle>
   );
 };
diff --git a/src/app/components/NavBar/styled.tsx b/src/app/components/NavBar/styled.tsx
index 0dd6d694a5..4e0c30fedf 100644
--- a/src/app/components/NavBar/styled.tsx
+++ b/src/app/components/NavBar/styled.tsx
@@ -165,6 +165,10 @@ export const DropdownToggle = styled.div`
   ${theme.breakpoints.mobile(css`
     margin-top: 0;
   `)}
+
+  svg {
+    width: 1.5rem;
+  }
 `;
 
 // tslint:disable-next-line:variable-name
diff --git a/src/assets/UserIcon.tsx b/src/assets/UserIcon.tsx
new file mode 100644
index 0000000000..880845376d
--- /dev/null
+++ b/src/assets/UserIcon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+// tslint:disable:max-line-length
+// tslint:disable-next-line:variable-name
+const SvgComponent = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 448 512"
+    fill="currentColor"
+    dangerouslySetInnerHTML={{
+      __html: `<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="currentColor"
+d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z" />`
+    }}
+  ></svg>
+);
+export default SvgComponent;