Merge pull request #7 from elwood-software/fix/upload-button-style-#1

add margin to upload status sidebar [fixes #1]. rework user menu
elwood-software · May 14, 2024 · a083e93 · a083e93
2 parents a2a1ef8 + 7979872
commit a083e93
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/packages/react/src/components/sidebar/footer.tsx b/packages/react/src/components/sidebar/footer.tsx
@@ -12,12 +12,12 @@ export function SidebarFooter(props: SidebarFooterProps): JSX.Element {
 
   return (
     <footer>
-      <div className="mb-3">{props.uploadStatus}</div>
+      <div className="mb-3 mx-6">{props.uploadStatus}</div>
 
-      <div className="flex justify-between items-center px-6">
-        {props.userMenu}
+      <div className="flex justify-between items-center p-1 mx-6 border rounded-lg">
+        <div className="pl-2 cursor-pointer">{props.userMenu}</div>
         <div className="flex items-center space-x-1">
-          <Button href="/bookmarks" size="icon-sm" variant="secondary">
+          <Button href="/bookmarks" size="sm" variant="ghost">
             <BookMarkedIcon className="size-4" />
           </Button>
         </div>

diff --git a/packages/react/src/hooks/ui/use-sidebar-footer.tsx b/packages/react/src/hooks/ui/use-sidebar-footer.tsx
@@ -183,12 +183,10 @@ export function useSidebarFooter(): JSX.Element {
 
   const userMenu = (
     <DropdownMenu items={userMenuItems} contentClassName="ml-3">
-      <Button
-        type="button"
-        variant="secondary"
-        icon={<CircleUserRound className="size-5" />}>
-        {member.display_name}
-      </Button>
+      <div className="flex items-center">
+        <CircleUserRound className="size-[1em]" />
+        <span className="font-bold ml-1">{member.display_name}</span>
+      </div>
     </DropdownMenu>
   );