From f938f55276a5ea3d977922bdc1a090cdde2b7796 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 15 Feb 2022 15:22:30 -0500
Subject: [PATCH] fix: spacing in Menu Group

---
 src/components/Menu/Menu.stories.tsx | 15 ++++++++++++++-
 src/components/Menu/Menu.tsx         |  6 ++----
 src/lib/theme/defaultTheme.ts        |  2 +-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx
index 84679ab8..4ba2d746 100644
--- 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
index 61fa15f1..4f133ff1 100644
--- 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
index bb4c9464..cc28264d 100644
--- 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`,