fix(style): user avatar fallback

GZTimeWalker · Jul 13, 2023 · ed869a6 · ed869a6
1 parent f2b179b
commit ed869a6
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 13 deletions.
diff --git a/src/GZCTF/ClientApp/src/components/AppNavbar.tsx b/src/GZCTF/ClientApp/src/components/AppNavbar.tsx
@@ -200,7 +200,9 @@ const AppNavbar: FC = () => {
               <Menu.Target>
                 <ActionIcon className={classes.link}>
                   {user?.avatar ? (
-                    <Avatar alt="avatar" src={user?.avatar} radius="md" size="md" />
+                    <Avatar alt="avatar" src={user?.avatar} radius="md" size="md">
+                      {user.userName?.slice(0, 1) ?? 'U'}
+                    </Avatar>
                   ) : (
                     <Icon path={mdiAccountCircleOutline} size={1} />
                   )}

diff --git a/src/GZCTF/ClientApp/src/components/TeamCard.tsx b/src/GZCTF/ClientApp/src/components/TeamCard.tsx
@@ -96,7 +96,9 @@ const TeamCard: FC<TeamCardProps> = (props) => {
                       style={{
                         border: 'none',
                       }}
-                    />
+                    >
+                      {captain?.userName?.slice(0, 1) ?? 'C'}
+                    </Avatar>
                   </Tooltip>
                   {members &&
                     members.slice(0, AVATAR_LIMIT).map((m) => (
@@ -108,7 +110,9 @@ const TeamCard: FC<TeamCardProps> = (props) => {
                           style={{
                             border: 'none',
                           }}
-                        />
+                        >
+                          {m.userName?.slice(0, 1) ?? 'U'}
+                        </Avatar>
                       </Tooltip>
                     ))}
                   {members && members.length > AVATAR_LIMIT && (

diff --git a/src/GZCTF/ClientApp/src/components/TeamEditModal.tsx b/src/GZCTF/ClientApp/src/components/TeamEditModal.tsx
@@ -53,7 +53,9 @@ const TeamMemberInfo: FC<TeamMemberInfoProps> = (props) => {
       onMouseLeave={() => setShowBtns(false)}
     >
       <Group position="left">
-        <Avatar alt="avatar" src={user.avatar} radius="xl" />
+        <Avatar alt="avatar" src={user.avatar} radius="xl">
+          {user.userName?.slice(0, 1) ?? 'U'}
+        </Avatar>
         <Text weight={500}>{user.userName}</Text>
       </Group>
       {isCaptain && showBtns && (
@@ -295,7 +297,9 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
                 size={70}
                 src={teamInfo?.avatar}
                 onClick={() => isCaptain && setDropzoneOpened(true)}
-              />
+              >
+                {teamInfo?.name?.slice(0, 1) ?? 'T'}
+              </Avatar>
             </Center>
           </Grid.Col>
         </Grid>
@@ -355,7 +359,9 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
             {captain && (
               <Group position="apart">
                 <Group position="left">
-                  <Avatar alt="avatar" src={captain.avatar} radius="xl" />
+                  <Avatar alt="avatar" src={captain.avatar} radius="xl">
+                    {captain.userName?.slice(0, 1) ?? 'C'}
+                  </Avatar>
                   <Text weight={500}>{captain.userName}</Text>
                 </Group>
                 <Icon path={mdiStar} size={1} color={theme.colors.yellow[4]} />

diff --git a/src/GZCTF/ClientApp/src/components/admin/TeamEditModal.tsx b/src/GZCTF/ClientApp/src/components/admin/TeamEditModal.tsx
@@ -83,7 +83,9 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
           </Grid.Col>
           <Grid.Col span={4}>
             <Center>
-              <Avatar alt="avatar" radius="xl" size={70} src={activeTeam.avatar} />
+              <Avatar alt="avatar" radius="xl" size={70} src={activeTeam.avatar}>
+                {activeTeam.name?.slice(0, 1) ?? 'T'}
+              </Avatar>
             </Center>
           </Grid.Col>
         </Grid>
@@ -108,7 +110,9 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
             {activeTeam.members?.map((user) => (
               <Group position="apart">
                 <Group position="left">
-                  <Avatar alt="avatar" src={user.avatar} radius="xl" />
+                  <Avatar alt="avatar" src={user.avatar} radius="xl">
+                    {user.userName?.slice(0, 1) ?? 'U'}
+                  </Avatar>
                   <Stack spacing={0}>
                     <Text weight={500}>{user.userName}</Text>
                     <Text size="xs" color="dimmed">{`#${user.id?.substring(0, 8)}`}</Text>

diff --git a/src/GZCTF/ClientApp/src/components/admin/UserEditModal.tsx b/src/GZCTF/ClientApp/src/components/admin/UserEditModal.tsx
@@ -88,7 +88,9 @@ const UserEditModal: FC<UserEditModalProps> = (props) => {
           </Grid.Col>
           <Grid.Col span={4}>
             <Center>
-              <Avatar alt="avatar" radius="xl" size={70} src={activeUser.avatar} />
+              <Avatar alt="avatar" radius="xl" size={70} src={activeUser.avatar}>
+                {activeUser.userName?.slice(0, 1) ?? 'U'}
+              </Avatar>
             </Center>
           </Grid.Col>
         </Grid>

diff --git a/src/GZCTF/ClientApp/src/pages/account/Profile.tsx b/src/GZCTF/ClientApp/src/pages/account/Profile.tsx
@@ -173,7 +173,9 @@ const Profile: FC = () => {
                 size={80}
                 src={user?.avatar}
                 onClick={() => setDropzoneOpened(true)}
-              />
+              >
+                {user?.userName?.slice(0, 1) ?? 'U'}
+              </Avatar>
             </Center>
           </Grid.Col>
         </Grid>

diff --git a/src/GZCTF/ClientApp/src/pages/admin/Teams.tsx b/src/GZCTF/ClientApp/src/pages/admin/Teams.tsx
@@ -244,7 +244,9 @@ const Teams: FC = () => {
                                   withArrow
                                   classNames={tooltipClasses}
                                 >
-                                  <Avatar alt="avatar" radius="xl" src={m.avatar} />
+                                  <Avatar alt="avatar" radius="xl" src={m.avatar}>
+                                    {m.userName?.slice(0, 1) ?? 'U'}
+                                  </Avatar>
                                 </Tooltip>
                               ))}
                             {members && members.length > 8 && (

diff --git a/src/GZCTF/ClientApp/src/pages/admin/Users.tsx b/src/GZCTF/ClientApp/src/pages/admin/Users.tsx
@@ -254,7 +254,9 @@ const Users: FC = () => {
                     <td>
                       <Group noWrap position="apart" spacing="xs">
                         <Group noWrap position="left">
-                          <Avatar alt="avatar" src={user.avatar} radius="xl" />
+                          <Avatar alt="avatar" src={user.avatar} radius="xl">
+                            {user.userName?.slice(0, 1) ?? 'U'}
+                          </Avatar>
                           <Text
                             ff={theme.fontFamilyMonospace}
                             size="sm"

diff --git a/src/GZCTF/ClientApp/src/pages/admin/games/[id]/Review.tsx b/src/GZCTF/ClientApp/src/pages/admin/games/[id]/Review.tsx
@@ -52,7 +52,9 @@ const MemberItem: FC<MemberItemProps> = (props) => {
   return (
     <Group spacing="xl" position="apart">
       <Group w="calc(100% - 10rem)">
-        <Avatar alt="avatar" src={user.avatar} />
+        <Avatar alt="avatar" src={user.avatar}>
+          {user.userName?.slice(0, 1) ?? 'U'}
+        </Avatar>
         <Group noWrap>
           <Stack spacing={2} w="15rem">
             <Group noWrap spacing="xs">