storybook and template fixes

src/design-system/atoms/avatar/avatarUtils.tsx

@@ -1,10 +1,16 @@
 export const initialsFromName = (name: string) =>
-    name
-        .split(' ')
-        .slice(0, 2)
-        .map((x) => x[0])
-        .join('')
-        .toUpperCase();
+    !!name
+        ? name
+              .split(' ')
+              .slice(0, 2)
+              .map((x) => x[0])
+              .join('')
+              .toUpperCase()
+        : '';
 
-export const avatarHash = (id: string, hash: string) =>
-    `https://cdn.discordapp.com/icons/${id}/${hash}.webp?size=256`;
+export const avatarHash = (
+    id: string,
+    hash: string,
+    bucket: 'icons' | 'avatars' = 'icons',
+    size: number = 256
+) => `https://cdn.discordapp.com/${bucket}/${id}/${hash}.webp?size=${size}`;

src/design-system/atoms/branding/DynamicBranding.tsx

@@ -276,7 +276,7 @@ export const BicycleDay: Variant = {
 export const Christmas: Variant = {
     // Dec 20-27
     activeIf: (currentDate?: Date) =>
-        true || matchDay(new Date('2021-Dec-20'), new Date('2021-Dec-28'), currentDate),
+        matchDay(new Date('2021-Dec-20'), new Date('2021-Dec-28'), currentDate),
     sharedProps: {
         circleFill: palette.green200,
         circleOuterFill: palette.red200,

src/design-system/molecules/server-masthead/ServerMasthead.tsx

@@ -16,7 +16,10 @@ export const ServerMasthead = (props: ServerMastheadProps) => {
     return (
         <Wrapper>
             <Icon>
-                <Avatar size={props.editable ? 60 : 48} src={guild.icon}>
+                <Avatar
+                    size={props.editable ? 60 : 48}
+                    src={utils.avatarHash(guild.id, guild.icon, 'icons', 512)}
+                >
                     {utils.initialsFromName(props.guild.name)}
                 </Avatar>
             </Icon>

src/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx

@@ -17,7 +17,10 @@ export const UserAvatarGroup = (props: Props) => (
             </GroupText>
             &nbsp;
         </Collapse>
-        <Avatar size={34} src={props.user.avatar}>
+        <Avatar
+            size={34}
+            src={utils.avatarHash(props.user.id, props.user.avatar, 'avatars')}
+        >
             {utils.initialsFromName(props.user.username)}
         </Avatar>
     </Group>

src/design-system/organisms/masthead/Authed.tsx

@@ -32,7 +32,7 @@ export const Authed = (props: Props) => {
         <MastheadBase>
             <MastheadAlignment>
                 <MastheadLeft>
-                    <Link href="/dashboard" passHref>
+                    <Link href="/dashboard" passHref prefetch={false}>
                         <MastheadA>
                             <DynamicLogomark height={35} />
                         </MastheadA>
@@ -75,7 +75,9 @@ export const Authed = (props: Props) => {
                         }}
                         hide={!userPopoverState}
                     >
-                        {props.user && <UserAvatarGroup user={props.user} />}
+                        {props.user !== undefined && (
+                            <UserAvatarGroup user={props.user} />
+                        )}
                     </InteractionBase>
                     <Popover
                         headContent={<></>}

src/design-system/templates/role-picker/RolePicker.stories.tsx

@@ -5,8 +5,9 @@ import {
     member,
     guildRoles,
     guild,
-    rpUser,
+    user,
     guildEnum,
+    mastheadSlugs,
 } from 'roleypoly/common/types/storyData';
 
 const props: RolePickerTemplateProps = {
@@ -17,9 +18,10 @@ const props: RolePickerTemplateProps = {
     },
     member: member,
     guild: guild,
+    guilds: mastheadSlugs,
     roles: guildRoles,
     editable: false,
-    user: rpUser,
+    user: user,
     guildEnumeration: guildEnum,
     activeGuildId: guild.id,
     onSubmit: () => {},