feat: use button for dropdown trigger (#432)

sigle · Apr 21, 2022 · 464dd64 · 464dd64
1 parent 3b57667
commit 464dd64
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 12 deletions.
diff --git a/.changeset/tall-bats-retire.md 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
@@ -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