Merge pull request #133 from abusix/pla-1249-less-gap-in-tags

navigation spacing fix
abusix · Jul 17, 2024 · d513b16 · d513b16
2 parents c8baf8d + b739859
commit d513b16
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/components/navigation/navigation-disclosure.tsx b/src/components/navigation/navigation-disclosure.tsx
@@ -2,23 +2,29 @@ import { Disclosure } from "@headlessui/react";
 import React from "react";
 import { NavigationDisclosurePanel } from "./navigation-disclosure-panel";
 import { NavigationGroupItemTag } from "./navigation-group-item-tag";
+import { classNames } from "../../util/class-names";
 
 export interface NavigationDisclosureButtonProps {
     children: React.ReactNode;
     LeftIcon?: React.ElementType;
     onClick?: () => void;
     tag?: string;
+    className?: string;
 }
 
 const NavigationDisclosureButton = ({
     children,
     LeftIcon,
     onClick,
     tag,
+    className,
 }: NavigationDisclosureButtonProps) => {
     return (
         <Disclosure.Button
-            className="flex w-full cursor-pointer items-center gap-x-3 px-4 py-3 text-left text-sm text-neutral-0 hover:bg-primary-900+10 ui-open:bg-primary-900+8 ui-open:font-semibold"
+            className={classNames(
+                "flex w-full cursor-pointer items-center gap-x-2 px-4 py-3 text-left text-sm text-neutral-0 hover:bg-primary-900+10 ui-open:bg-primary-900+8 ui-open:font-semibold",
+                className
+            )}
             onClick={onClick}
         >
             {LeftIcon ? <LeftIcon className="h-4 w-4" /> : null}

diff --git a/src/components/navigation/navigation-group.tsx b/src/components/navigation/navigation-group.tsx
@@ -18,7 +18,7 @@ const NavigationGroupItem = ({
     return (
         <div
             className={classNames(
-                "relative flex cursor-pointer items-center gap-x-3 px-4 py-3 text-sm text-neutral-0 hover:bg-primary-900+10",
+                "relative flex cursor-pointer items-center gap-x-2 px-4 py-3 text-sm text-neutral-0 hover:bg-primary-900+10",
                 isActive && "bg-primary-900+20 font-semibold hover:bg-primary-900+20"
             )}
             {...props}

diff --git a/src/components/navigation/navigation.stories.tsx b/src/components/navigation/navigation.stories.tsx
@@ -35,7 +35,7 @@ export const Default: Story = {
                         <Navigation.Group.Item>Mail Intelligence</Navigation.Group.Item>
                         <Navigation.Disclosure>
                             <Navigation.Disclosure.Button tag="Beta">
-                                AbuseHQ 2
+                                Guardian Ops
                             </Navigation.Disclosure.Button>
                             <Navigation.Disclosure.Panel>
                                 <Navigation.Disclosure.Panel.Item>