fix: center align filters sidebar icon (#49)

Signed-off-by: Adam Setch <adam.setch@outlook.com>
setchy · Sep 18, 2024 · 16ce0c1 · 16ce0c1
1 parent fbea6b9
commit 16ce0c1
Showing 1 changed file with 16 additions and 16 deletions.
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -9,7 +9,7 @@ import NotificationIcon from '@atlaskit/icon/glyph/notification';
 import RefreshIcon from '@atlaskit/icon/glyph/refresh';
 import SettingsIcon from '@atlaskit/icon/glyph/settings';
 import { AtlasIcon } from '@atlaskit/logo';
-import { Box, Stack, Text } from '@atlaskit/primitives';
+import { Box, Inline, Stack, Text } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 
 import Toggle from '@atlaskit/toggle';
@@ -161,26 +161,26 @@ export const Sidebar: FC = () => {
 
               <Tooltip content="Filters" position="right">
                 <Button
-                  iconBefore={(iconProps) => (
-                    <FilterIcon
-                      {...iconProps}
-                      size="small"
-                      primaryColor="white"
-                    />
-                  )}
                   appearance="subtle"
                   spacing="compact"
                   onClick={() => toggleFilters()}
                 >
-                  {filterCount > 0 && (
-                    <Text
-                      color="color.text.inverse"
+                  <Inline alignBlock="center" space="space.100">
+                    <FilterIcon
+                      label="Filters"
                       size="small"
-                      weight="semibold"
-                    >
-                      {filterCount}
-                    </Text>
-                  )}
+                      primaryColor="white"
+                    />
+                    {filterCount > 0 && (
+                      <Text
+                        color="color.text.inverse"
+                        size="small"
+                        weight="semibold"
+                      >
+                        {filterCount}
+                      </Text>
+                    )}
+                  </Inline>
                 </Button>
               </Tooltip>
             </>