Fix unauth menu

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;

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">

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"

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"

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};