From bc5cd5be451922dd53ff8cef355821716f91503b Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Fri, 13 May 2022 18:07:44 -0700
Subject: [PATCH] Clean up some markup in the sidebar (#220)

* Remove wrapper div around logo

* Small refactor, remove wrapper around sidebar profile summary

* Remove random unused imports

* Replace random styles with Tailwind classes
---
 web/components/nav/profile-menu.tsx | 20 ++++++++++----------
 web/components/nav/sidebar.tsx      | 20 +++-----------------
 2 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/web/components/nav/profile-menu.tsx b/web/components/nav/profile-menu.tsx
index b25603d4..0082e4ca 100644
--- a/web/components/nav/profile-menu.tsx
+++ b/web/components/nav/profile-menu.tsx
@@ -1,8 +1,8 @@
+import Link from 'next/link'
 import { firebaseLogout, User } from 'web/lib/firebase/users'
 import { formatMoney } from 'common/util/format'
 import { Avatar } from '../avatar'
 import { IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
-import { Row } from '../layout/row'
 
 export function getNavigationOptions(user?: User | null) {
   if (IS_PRIVATE_MANIFOLD) {
@@ -27,18 +27,18 @@ export function getNavigationOptions(user?: User | null) {
   ]
 }
 
-export function ProfileSummary(props: { user: User | undefined }) {
+export function ProfileSummary(props: { user: User }) {
   const { user } = props
   return (
-    <Row className="group items-center gap-4 rounded-md py-3 text-gray-500 group-hover:bg-gray-100 group-hover:text-gray-700">
-      <Avatar avatarUrl={user?.avatarUrl} username={user?.username} noLink />
+    <Link href={`/${user.username}`}>
+      <a className="group flex flex-row items-center gap-4 rounded-md py-3 text-gray-500 hover:bg-gray-100 hover:text-gray-700">
+        <Avatar avatarUrl={user.avatarUrl} username={user.username} noLink />
 
-      <div className="truncate text-left">
-        <div>{user?.name}</div>
-        <div className="text-sm">
-          {user ? formatMoney(Math.floor(user.balance)) : ' '}
+        <div className="truncate">
+          <div>{user.name}</div>
+          <div className="text-sm">{formatMoney(Math.floor(user.balance))}</div>
         </div>
-      </div>
-    </Row>
+      </a>
+    </Link>
   )
 }
diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index f08403df..ad031f8e 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -1,9 +1,7 @@
 import {
   HomeIcon,
-  UserGroupIcon,
   CakeIcon,
   SearchIcon,
-  ChatIcon,
   BookOpenIcon,
   DotsHorizontalIcon,
   CashIcon,
@@ -126,26 +124,14 @@ export default function Sidebar(props: { className?: string }) {
 
   return (
     <nav aria-label="Sidebar" className={className}>
-      <div className="space-y-1 pb-6">
-        <ManifoldLogo twoLine />
-      </div>
-
+      <ManifoldLogo className="pb-6" twoLine />
       <div className="mb-2" style={{ minHeight: 80 }}>
         {user ? (
-          <Link href={`/${user.username}`}>
-            <a className="group">
-              <ProfileSummary user={user} />
-            </a>
-          </Link>
+          <ProfileSummary user={user} />
         ) : user === null ? (
           <div className="py-6 text-center">
             <button
-              className="btn btn-sm px-6 font-medium normal-case "
-              style={{
-                backgroundColor: 'white',
-                border: '2px solid',
-                color: '#3D4451',
-              }}
+              className="btn btn-sm border-2 bg-white px-6 font-medium normal-case text-gray-700"
               onClick={firebaseLogin}
             >
               Sign in