From 199b02b0cc30c3eec5714b9c743832da227c1ee5 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 20:36:45 -0800
Subject: [PATCH] Fix unauth menu

---
 components/Header/index.scss     | 7 ++++++-
 components/Header/index.tsx      | 8 ++++++--
 components/LoginModal/index.tsx  | 4 ++--
 components/SignupModal/index.tsx | 4 ++--
 styles/themes.scss               | 4 ++++
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/components/Header/index.scss b/components/Header/index.scss
index f19cc45f..bfa358ea 100644
--- a/components/Header/index.scss
+++ b/components/Header/index.scss
@@ -10,13 +10,18 @@
     gap: $unit;
   }
 
-  img {
+  img,
+  .placeholder {
     $diameter: 32px;
     border-radius: calc($diameter / 2);
     height: $diameter;
     width: $diameter;
   }
 
+  .placeholder {
+    background: var(--placeholder-bg);
+  }
+
   #DropdownWrapper {
     display: inline-block;
     padding-bottom: $unit;
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 2fe2a72f..a66c95a5 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -225,7 +225,7 @@ const Header = () => {
         />
       )
     } else {
-      image = <img alt={t('no_user')} className="profile placeholder" />
+      image = <div className="profile placeholder" />
     }
 
     return image
@@ -395,7 +395,11 @@ const Header = () => {
       items = (
         <>
           <DropdownMenuGroup className="MenuGroup">
-            <DropdownMenuItem className="MenuItem">New party</DropdownMenuItem>
+            <DropdownMenuItem className="MenuItem">
+              <Link href={`/new` || ''} passHref>
+                New party
+              </Link>
+            </DropdownMenuItem>
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
           <DropdownMenuGroup className="MenuGroup">
diff --git a/components/LoginModal/index.tsx b/components/LoginModal/index.tsx
index be2f72c6..e2910acf 100644
--- a/components/LoginModal/index.tsx
+++ b/components/LoginModal/index.tsx
@@ -199,9 +199,9 @@ const LoginModal = () => {
   return (
     <Dialog open={open} onOpenChange={openChange}>
       <DialogTrigger asChild>
-        <li className="MenuItem">
+        <div className="MenuItem">
           <span>{t('menu.login')}</span>
-        </li>
+        </div>
       </DialogTrigger>
       <DialogContent
         className="Login"
diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx
index a142d348..34f681cd 100644
--- a/components/SignupModal/index.tsx
+++ b/components/SignupModal/index.tsx
@@ -280,9 +280,9 @@ const SignupModal = (props: Props) => {
   return (
     <Dialog open={open} onOpenChange={openChange}>
       <DialogTrigger asChild>
-        <li className="MenuItem">
+        <div className="MenuItem">
           <span>{t('menu.signup')}</span>
-        </li>
+        </div>
       </DialogTrigger>
       <DialogContent
         className="Signup"
diff --git a/styles/themes.scss b/styles/themes.scss
index d181dca2..12e3a02f 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -19,6 +19,8 @@
   --selected-item-bg: #{$selected--item--bg--light};
   --selected-item-bg-hover: #{$selected--item--bg--light--hover};
 
+  --placeholder-bg: #{$grey-80};
+
   // Light - Menus
   --dialog-bg: #{$dialog--bg--light};
 
@@ -149,6 +151,8 @@
   --selected-item-bg: #{$selected--item--bg--dark};
   --selected-item-bg-hover: #{$selected--item--bg--dark--hover};
 
+  --placeholder-bg: #{$grey-40};
+
   // Dark - Dialogs
   --dialog-bg: #{$dialog--bg--dark};