Fix-336-responsive-icon-buttons (#337)

* Add icon button variant to Button

* Apply in both group and friend pages

Author: krokosik

src/components/Friend/Export.tsx

@@ -83,13 +83,7 @@ export const Export: React.FC<ExportCSVProps> = ({
   };
 
   return (
-    <Button
-      size="sm"
-      variant="secondary"
-      className="w-[150px] gap-1 text-sm lg:w-[180px]"
-      onClick={exportToCSV}
-      disabled={disabled}
-    >
+    <Button size="sm" variant="secondary" responsiveIcon onClick={exportToCSV} disabled={disabled}>
       <Download className="h-4 w-4 text-white" size={20} /> Export
     </Button>
   );

src/components/Friend/Settleup.tsx

@@ -1,5 +1,5 @@
 import { type Balance, SplitType, type User } from '@prisma/client';
-import { ArrowRightIcon } from 'lucide-react';
+import { ArrowRightIcon, HandCoins } from 'lucide-react';
 import { type User as NextUser } from 'next-auth';
 import React, { useState } from 'react';
 import { toast } from 'sonner';
@@ -16,11 +16,19 @@ import { Input } from '../ui/input';
 import { EntityAvatar } from '../ui/avatar';
 
 export const SettleUp: React.FC<{
-  balances: Balance[];
+  balances?: Balance[];
   friend: User;
   currentUser: NextUser;
 }> = ({ balances, friend, currentUser }) => {
   const { t } = useTranslation('friend_details');
+  if (!balances) {
+    return (
+      <Button size="sm" variant="outline" responsiveIcon disabled>
+        <span className="xs:inline hidden">{t('ui.actions.settle_up')}</span>
+      </Button>
+    );
+  }
+
   const [balanceToSettle, setBalanceToSettle] = useState<Balance | undefined>(
     1 < balances.length ? undefined : balances[0],
   );
@@ -83,7 +91,7 @@ export const SettleUp: React.FC<{
           className="flex w-[150px] items-center gap-2 rounded-md border bg-cyan-500 px-3 text-sm font-normal text-black focus:bg-cyan-600 focus:ring-0 focus-visible:outline-hidden lg:w-[180px]"
           disabled={!balances.length}
         >
-          {t('ui.actions.settle_up', { ns: 'common' })}
+          <HandCoins className="size-4" /> {t('ui.actions.settle_up', { ns: 'common' })}
         </Button>
       }
       disableTrigger={!balances?.length}

src/components/group/AddMembers.tsx

@@ -103,9 +103,7 @@ const AddMembers: React.FC<{
 
   return (
     <AppDrawer
-      trigger={
-        <div className="flex items-center justify-center gap-2 lg:w-[180px]">{children}</div>
-      }
+      trigger={<>{children}</>}
       onTriggerClick={handleTriggerClick}
       title={t('ui.no_members.add_members_details.title')}
       leftAction={t('ui.actions.cancel', { ns: 'common' })}

src/components/ui/button.tsx

@@ -38,13 +38,40 @@ export interface ButtonProps
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
   loading?: boolean;
+  responsiveIcon?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, children, loading, ...props }, ref) => {
+  (
+    {
+      className = '',
+      variant = 'default',
+      size,
+      asChild = false,
+      responsiveIcon = false,
+      children,
+      loading,
+      ...props
+    },
+    ref,
+  ) => {
     const Comp = asChild ? SlotPrimitive.Slot : 'button';
     return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props}>
+      <Comp
+        className={cn(
+          buttonVariants({
+            variant,
+            size,
+            className:
+              className +
+              (responsiveIcon
+                ? 'responsive-icon xs:gap-1 xs:text-sm xs:w-40 w-auto lg:w-[180px]'
+                : ''),
+          }),
+        )}
+        ref={ref}
+        {...props}
+      >
         {loading ? <LoadingSpinner /> : children}
       </Comp>
     );

src/pages/balances/[friendId].tsx

@@ -112,31 +112,10 @@ const FriendPage: NextPageWithUser = ({ user }) => {
               </div>
             </div>
             <div className="mt-6 mb-4 flex justify-center gap-2">
-              {balances.data ? (
-                <SettleUp
-                  balances={balances.data}
-                  key={`${friendQuery.data?.id}-${balances.data.length}`}
-                  friend={friendQuery.data}
-                  currentUser={user}
-                />
-              ) : (
-                <Button
-                  size="sm"
-                  variant="outline"
-                  className="w-[150px] gap-1 text-sm lg:w-[180px]"
-                  disabled
-                >
-                  {t('ui.actions.settle_up')}
-                </Button>
-              )}
-
+              <SettleUp balances={balances.data} friend={friendQuery.data} currentUser={user} />
               <Link href={`/add?friendId=${friendQuery.data.id}`}>
-                <Button
-                  size="sm"
-                  variant="secondary"
-                  className="w-[150px] gap-1 text-sm lg:w-[180px]"
-                >
-                  <PlusIcon className="h-4 w-4 text-gray-400" /> {t('ui.actions.add_expense')}
+                <Button size="sm" variant="secondary" responsiveIcon>
+                  <PlusIcon className="size-4" /> {t('ui.actions.add_expense')}
                 </Button>
               </Link>
               <Export

src/pages/groups/[groupId].tsx

@@ -8,6 +8,7 @@ import {
   DoorOpen,
   Info,
   Merge,
+  PlusIcon,
   Share,
   Trash2,
   UserPlus,
@@ -420,11 +421,11 @@ const BalancePage: NextPageWithUser<{
             </div>
             <div className="mb-4 flex justify-center gap-2 overflow-y-auto border-b pb-4">
               <Link href={`/add?groupId=${groupId}`}>
-                <Button size="sm" className="gap-1 text-sm lg:w-[180px]" disabled={isArchived}>
-                  {t('ui.actions.add_expense', { ns: 'common' })}
+                <Button size="sm" className="w-40 gap-1 text-sm lg:w-[180px]" disabled={isArchived}>
+                  <PlusIcon className="size-4" /> {t('ui.actions.add_expense', { ns: 'common' })}
                 </Button>
               </Link>
-              <Button size="sm" className="gap-1 text-sm" variant="secondary" disabled={isArchived}>
+              <Button size="sm" responsiveIcon variant="secondary" disabled={isArchived}>
                 {groupDetailQuery.data ? (
                   <AddMembers
                     group={groupDetailQuery.data}
@@ -436,14 +437,14 @@ const BalancePage: NextPageWithUser<{
               </Button>
               <Button
                 size="sm"
-                className="gap-1 text-sm lg:w-[180px]"
+                responsiveIcon
                 variant="secondary"
                 onClick={inviteMembers}
                 disabled={isArchived}
               >
                 {isInviteCopied ? (
                   <>
-                    <Check className="size-4 text-gray-400" /> {t('ui.copied')}
+                    <Check className="size-4" /> {t('ui.copied')}
                   </>
                 ) : (
                   <>

src/styles/globals.css

@@ -3,6 +3,8 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
+  --breakpoint-xs: 30rem;
+
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -78,6 +80,15 @@
   }
 }
 
+@utility responsive-icon {
+  @media (width < --theme(--breakpoint-xs)) {
+    font-size: 0;
+    svg {
+      font-size: initial;
+    }
+  }
+}
+
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still