fix: spacing in Menu Group

supabase · Feb 15, 2022 · f938f55 · f938f55
1 parent 68c8ca2
commit f938f55
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx
@@ -8,6 +8,7 @@ import { Menu } from './'
 import { Button } from '../Button'
 import { IconDatabase } from '../Icon/icons/IconDatabase'
 import { IconMenu } from '../Icon/icons/IconMenu'
+import { IconRefreshCcw } from '../Icon/icons/IconRefreshCcw'
 
 export default {
   title: 'Navigation/Menu',
@@ -100,7 +101,19 @@ export const BorderAndGroups = () => (
 
 export const CustomNode = () => (
   <Menu type="border">
-    <Menu.Group title="First group" />
+    <Menu.Group
+      // @ts-ignore
+      title={
+        <>
+          <div className="w-full flex items-center justify-between">
+            <span>All tables</span>
+            <button className="cursor-pointer">
+              <IconRefreshCcw className={'animate-spin'} size={14} />
+            </button>
+          </div>
+        </>
+      }
+    />
     <Menu.Item icon={<SampleIcon />}>
       <div className="flex items-center gap-2">
         <span>Account settings</span>

diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -107,10 +107,8 @@ export function Group({ children, icon, title }: GroupProps) {
     <div
       className={[__styles.group.base, __styles.group.variants[type]].join(' ')}
     >
-      <Space>
-        {icon && <span className={__styles.group.icon}>{icon}</span>}
-        <h5 className={__styles.group.content}>{title}</h5>
-      </Space>
+      {icon && <span className={__styles.group.icon}>{icon}</span>}
+      <span className={__styles.group.content}>{title}</span>
       {children}
     </div>
   )

diff --git a/src/lib/theme/defaultTheme.ts b/src/lib/theme/defaultTheme.ts
@@ -1371,7 +1371,7 @@ export default {
     group: {
       base: `
         flex space-x-3 
-        mb-2 mt-4 
+        mb-2
         font-normal
       `,
       icon: `text-scale-900`,