From 526eb756b111302e8b5b8df72462a2415c71fcc2 Mon Sep 17 00:00:00 2001
From: Nawaz Dhandala <hello@nawazdhandala.com>
Date: Fri, 27 Mar 2026 12:07:04 +0000
Subject: [PATCH] feat: Add buttonSize property to CardButtonSchema and update
 button styles in BaseModelTable for consistency

---
 Common/UI/Components/Card/Card.tsx            | 12 ++++++---
 .../Components/ModelTable/BaseModelTable.tsx  | 25 +++++++++++--------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/Common/UI/Components/Card/Card.tsx b/Common/UI/Components/Card/Card.tsx
index 995360fdb9..f63d0599ef 100644
--- a/Common/UI/Components/Card/Card.tsx
+++ b/Common/UI/Components/Card/Card.tsx
@@ -1,4 +1,4 @@
-import Button, { ButtonStyleType } from "../Button/Button";
+import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
 import ShortcutKey from "../ShortcutKey/ShortcutKey";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, { FunctionComponent, ReactElement } from "react";
@@ -12,6 +12,7 @@ export interface CardButtonSchema {
   isLoading?: undefined | boolean;
   className?: string | undefined;
   shortcutKey?: undefined | ShortcutKey;
+  buttonSize?: ButtonSize | undefined;
 }
 
 export interface ComponentProps {
@@ -59,21 +60,21 @@ const Card: FunctionComponent<ComponentProps> = (
               </div>
               {(props.rightElement ||
                 (props.buttons && props.buttons.length > 0)) && (
-                <div className="flex flex-col md:flex-row md:items-center md:w-fit mt-4 md:mt-0 md:ml-4 gap-2 md:gap-0 flex-shrink-0">
+                <div className="flex flex-col md:flex-row md:items-center md:w-fit mt-4 md:mt-0 md:ml-4 gap-2 md:gap-0 flex-shrink-0 items-center">
                   {props.rightElement && (
                     <div className="mb-2 md:mb-0 md:mr-3">
                       {props.rightElement}
                     </div>
                   )}
                   {props.buttons && props.buttons.length > 0 && (
-                    <div className="flex flex-wrap items-center gap-2">
+                    <div className="flex flex-wrap items-center gap-1.5">
                       {props.buttons.map(
                         (
                           button: CardButtonSchema | ReactElement,
                           i: number,
                         ) => {
                           return (
-                            <div key={i}>
+                            <div key={i} className="flex items-center">
                               {React.isValidElement(button) ? button : null}
                               {React.isValidElement(button) ? null : (
                                 <Button
@@ -82,6 +83,9 @@ const Card: FunctionComponent<ComponentProps> = (
                                   buttonStyle={
                                     (button as CardButtonSchema).buttonStyle
                                   }
+                                  buttonSize={
+                                    (button as CardButtonSchema).buttonSize
+                                  }
                                   className={
                                     (button as CardButtonSchema).className
                                   }
diff --git a/Common/UI/Components/ModelTable/BaseModelTable.tsx b/Common/UI/Components/ModelTable/BaseModelTable.tsx
index 663c3e81b6..280aca669b 100644
--- a/Common/UI/Components/ModelTable/BaseModelTable.tsx
+++ b/Common/UI/Components/ModelTable/BaseModelTable.tsx
@@ -19,7 +19,7 @@ import {
   BulkActionFailed,
   BulkActionOnClickProps,
 } from "../BulkUpdate/BulkUpdateForm";
-import { ButtonStyleType } from "../Button/Button";
+import { ButtonSize, ButtonStyleType } from "../Button/Button";
 import Card, {
   CardButtonSchema,
   ComponentProps as CardComponentProps,
@@ -1045,7 +1045,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       headerbuttons.push({
         title: "View Documentation",
         icon: IconProp.Book,
-        buttonStyle: ButtonStyleType.OUTLINE,
+        buttonStyle: ButtonStyleType.HOVER_PRIMARY_OUTLINE,
+        buttonSize: ButtonSize.Small,
         className: "hidden md:flex",
         onClick: () => {
           Navigation.navigate(props.documentationLink!, {
@@ -1061,7 +1062,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         title: "",
         icon: IconProp.Help,
         buttonStyle: ButtonStyleType.ICON,
-        className: "py-0 pr-0 pl-1 mt-1",
+        buttonSize: ButtonSize.Small,
+        className: "",
         onClick: () => {
           setShowHelpModal(true);
         },
@@ -1073,7 +1075,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       headerbuttons.push({
         title: "Watch Demo",
         icon: IconProp.Play,
-        buttonStyle: ButtonStyleType.OUTLINE,
+        buttonStyle: ButtonStyleType.HOVER_PRIMARY_OUTLINE,
+        buttonSize: ButtonSize.Small,
         className: "hidden md:flex",
         onClick: () => {
           Navigation.navigate(props.videoLink!, {
@@ -1109,8 +1112,9 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         title: `${props.createVerb || "Create"} ${
           props.singularName || model.singularName
         }`,
-        buttonStyle: ButtonStyleType.NORMAL,
-        className: showFilterButton || props.showRefreshButton ? "mr-1" : "",
+        buttonStyle: ButtonStyleType.HOVER_PRIMARY_OUTLINE,
+        buttonSize: ButtonSize.Small,
+        className: "",
         onClick: () => {
           setModalType(ModalType.Create);
           setShowModal(true);
@@ -1122,10 +1126,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     if (props.showRefreshButton) {
       headerbuttons.push({
         ...getRefreshButton(),
-        className: showFilterButton
-          ? "p-1 px-1 pr-0 pl-0 py-0 mt-1"
-          : "py-0 pr-0 pl-1 mt-1",
-
+        buttonSize: ButtonSize.Small,
+        className: "",
         onClick: async () => {
           await fetchItems();
         },
@@ -1137,7 +1139,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       headerbuttons.push({
         title: "",
         buttonStyle: ButtonStyleType.ICON,
-        className: "py-0 pr-0 pl-1 mt-1",
+        buttonSize: ButtonSize.Small,
+        className: "",
         onClick: () => {
           setQuery({});
           setShowFilterModal(true);