Add discreet option to IconButton

bugbakery · May 2, 2024 · da549d2 · da549d2
1 parent 24d8e74
commit da549d2
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/frontend/src/components/button.tsx b/frontend/src/components/button.tsx
@@ -52,13 +52,15 @@ export function IconButton({
   size,
   iconClassName,
   iconAfter = false,
+  discreet = false,
   ...props
 }: {
   icon: IconType;
   label: string;
   size?: number;
   iconClassName?: string;
   iconAfter?: boolean;
+  discreet?: boolean;
 } & ComponentProps<'button'>) {
   const Icon = icon;
 
@@ -68,9 +70,8 @@ export function IconButton({
       title={label}
       aria-label={label}
       className={clsx(
-        'hover:bg-gray-200 dark:hover:bg-neutral-700',
+        !discreet && 'p-2 hover:bg-gray-200 dark:hover:bg-neutral-700',
         'rounded-full',
-        'p-2',
         props.className,
       )}
     >

diff --git a/frontend/src/components/popup.tsx b/frontend/src/components/popup.tsx
@@ -136,7 +136,8 @@ export function HelpPopup({ children, className }: { children?: ReactNode; class
       popupClassName="w-[300px]"
       button={
         <IconButton
-          className="inline-block !p-0 !bg-transparent"
+          className="inline-block"
+          discreet={true}
           icon={IoHelpCircleOutline}
           label={`help`}
         />