Tidy up some dead code and markup in sidebar (#842)

web/components/create-question-button.tsx

@@ -1,27 +1,13 @@
 import React from 'react'
 import Link from 'next/link'
-import clsx from 'clsx'
-
-import { User } from 'web/lib/firebase/users'
 import { Button } from './button'
 
-export const CreateQuestionButton = (props: {
-  user: User | null | undefined
-  overrideText?: string
-  className?: string
-  query?: string
-}) => {
-  const { user, overrideText, className, query } = props
-
-  if (!user || user?.isBannedFromPosting) return <></>
-
+export const CreateQuestionButton = () => {
   return (
-    <div className={clsx('flex justify-center', className)}>
-      <Link href={`/create${query ? query : ''}`} passHref>
-        <Button color="gradient" size="xl" className="mt-4">
-          {overrideText ?? 'Create a market'}
-        </Button>
-      </Link>
-    </div>
+    <Link href="/create" passHref>
+      <Button color="gradient" size="xl" className="mt-4">
+        Create a market
+      </Button>
+    </Link>
   )
 }

web/components/nav/menu.tsx

@@ -19,12 +19,10 @@ export function MenuButton(props: {
       as="div"
       className={clsx(className ? className : 'relative z-40 flex-shrink-0')}
     >
-      <div>
-        <Menu.Button className="w-full rounded-full">
-          <span className="sr-only">Open user menu</span>
-          {buttonContent}
-        </Menu.Button>
-      </div>
+      <Menu.Button className="w-full rounded-full">
+        <span className="sr-only">Open user menu</span>
+        {buttonContent}
+      </Menu.Button>
       <Transition
         as={Fragment}
         enter="transition ease-out duration-100"

web/components/nav/profile-menu.tsx

@@ -11,7 +11,7 @@ export function ProfileSummary(props: { user: User }) {
     <Link href={`/${user.username}?tab=bets`}>
       <a
         onClick={trackCallback('sidebar: profile')}
-        className="group flex flex-row items-center gap-4 rounded-md py-3 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
+        className="group mb-3 flex flex-row items-center gap-4 truncate rounded-md py-3 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
       >
         <Avatar avatarUrl={user.avatarUrl} username={user.username} noLink />
 

web/components/nav/sidebar.tsx

@@ -234,11 +234,7 @@ export default function Sidebar(props: { className?: string }) {
 
       {!user && <SignInButton className="mb-4" />}
 
-      {user && (
-        <div className="min-h-[80px] w-full">
-          <ProfileSummary user={user} />
-        </div>
-      )}
+      {user && <ProfileSummary user={user} />}
 
       {/* Mobile navigation */}
       <div className="flex min-h-0 shrink flex-col gap-1 lg:hidden">
@@ -255,7 +251,7 @@ export default function Sidebar(props: { className?: string }) {
       </div>
 
       {/* Desktop navigation */}
-      <div className="hidden min-h-0 shrink flex-col gap-1 lg:flex">
+      <div className="hidden min-h-0 shrink flex-col items-stretch gap-1 lg:flex ">
         {navigationOptions.map((item) => (
           <SidebarItem key={item.href} item={item} currentPage={currentPage} />
         ))}
@@ -264,7 +260,7 @@ export default function Sidebar(props: { className?: string }) {
           buttonContent={<MoreButton />}
         />
 
-        {user && <CreateQuestionButton user={user} />}
+        {user && !user.isBannedFromPosting && <CreateQuestionButton />}
       </div>
     </nav>
   )

web/components/notifications-icon.tsx

@@ -12,11 +12,9 @@ export default function NotificationsIcon(props: { className?: string }) {
   const privateUser = usePrivateUser()
 
   return (
-    <Row className={clsx('justify-center')}>
-      <div className={'relative'}>
-        {privateUser && <UnseenNotificationsBubble privateUser={privateUser} />}
-        <BellIcon className={clsx(props.className)} />
-      </div>
+    <Row className="relative justify-center">
+      {privateUser && <UnseenNotificationsBubble privateUser={privateUser} />}
+      <BellIcon className={clsx(props.className)} />
     </Row>
   )
 }
@@ -32,11 +30,11 @@ function UnseenNotificationsBubble(props: { privateUser: PrivateUser }) {
 
   const notifications = useUnseenGroupedNotification(privateUser)
   if (!notifications || notifications.length === 0 || seen) {
-    return <div />
+    return null
   }
 
   return (
-    <div className="-mt-0.75 absolute ml-3.5 min-w-[15px] rounded-full bg-indigo-500 p-[2px] text-center text-[10px] leading-3 text-white lg:-mt-1 lg:ml-2">
+    <div className="-mt-0.75 absolute ml-3.5 min-w-[15px] rounded-full bg-indigo-500 p-[2px] text-center text-[10px] leading-3 text-white lg:left-0 lg:-mt-1 lg:ml-2">
       {notifications.length > NOTIFICATIONS_PER_PAGE
         ? `${NOTIFICATIONS_PER_PAGE}+`
         : notifications.length}