From 464dd642c42bca16ce5980a015c4bdc4788bf059 Mon Sep 17 00:00:00 2001
From: Greg Ogun <65421744+gregogun@users.noreply.github.com>
Date: Thu, 21 Apr 2022 08:13:15 +0100
Subject: [PATCH] feat: use button for dropdown trigger (#432)

---
 .changeset/tall-bats-retire.md                    |  5 +++++
 sigle/src/modules/layout/components/AppHeader.tsx | 15 +++------------
 2 files changed, 8 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/tall-bats-retire.md

diff --git a/.changeset/tall-bats-retire.md b/.changeset/tall-bats-retire.md
new file mode 100644
index 000000000..3f04747c8
--- /dev/null
+++ b/.changeset/tall-bats-retire.md
@@ -0,0 +1,5 @@
+---
+'@sigle/app': patch
+---
+
+Use button component for header dropdown trigger.
diff --git a/sigle/src/modules/layout/components/AppHeader.tsx b/sigle/src/modules/layout/components/AppHeader.tsx
index 78437c1d7..59ee63a2c 100644
--- a/sigle/src/modules/layout/components/AppHeader.tsx
+++ b/sigle/src/modules/layout/components/AppHeader.tsx
@@ -57,6 +57,7 @@ const StatusDot = styled('div', {
   width: '$2',
   height: '$2',
   borderRadius: '$round',
+  mr: '$2',
 });
 
 export const AppHeader = () => {
@@ -161,20 +162,10 @@ export const AppHeader = () => {
         {user ? (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Flex
-                tabIndex={0}
-                css={{
-                  cursor: 'pointer',
-                  p: '$3',
-                  br: '$1',
-                  '&:hover': { backgroundColor: '$gray4' },
-                }}
-                gap="2"
-                align="center"
-              >
+              <Button size="lg" variant="ghost">
                 <StatusDot />
                 <Text size="sm">{user.username}</Text>
-              </Flex>
+              </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent sideOffset={8}>
               <DropdownMenuItem