@firecms/core 3.0.0-canary.258 → 3.0.0-canary.259

package/dist/types/collections.d.ts

@@ -173,8 +173,11 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      *     }
      * }
      * ```
+     *
+     * You can also pass the action as a string that represents the `key`, in which case it will
+     * use the action defined in the main configuration under `entityActions`.
      */
-    entityActions?: EntityAction<M, USER>[];
+    entityActions?: (EntityAction<M, USER> | string)[];
     /**
      * Pass your own selection controller if you want to control selected
      * entities externally.

package/dist/types/customization_controller.d.ts

@@ -4,6 +4,7 @@ import { FireCMSPlugin } from "./plugins";
 import { EntityCustomView } from "./collections";
 import { Locale } from "./locales";
 import { PropertyConfig } from "./property_config";
+import { EntityAction } from "./entity_actions";
 export type CustomizationController = {
     /**
      * Builder for generating utility links for entities
@@ -21,6 +22,13 @@ export type CustomizationController = {
      * You can also define an entity view from the UI.
      */
     entityViews?: EntityCustomView[];
+    /**
+     * List of actions that can be performed on entities.
+     * These actions are displayed in the entity view and in the collection view.
+     * You can later reuse these actions in the `entityActions` prop of a collection,
+     * by specifying the `key` of the action.
+     */
+    entityActions?: EntityAction<any, any>[];
     /**
      * Format of the dates in the CMS.
      * Defaults to 'MMMM dd, yyyy, HH:mm:ss'

package/dist/types/entity_actions.d.ts

@@ -4,6 +4,7 @@ import { Entity } from "./entities";
 import { EntityCollection, SelectionController } from "./collections";
 import { User } from "./user";
 import { SideEntityController } from "./side_entity_controller";
+import { FormContext } from "./fields";
 /**
  * An entity action is a custom action that can be performed on an entity.
  * They are displayed in the entity view and in the collection view.
@@ -15,7 +16,10 @@ export type EntityAction<M extends object = any, USER extends User = User> = {
     name: string;
     /**
      * Key of the action. You only need to provide this if you want to
-     * override the default actions.
+     * override the default actions, or if you are not passing the action
+     * directly to the `entityActions` prop of a collection.
+     * You can define your actions at the app level, in which case you
+     * must provide a key.
      * The default actions are:
      * - edit
      * - delete
@@ -31,6 +35,11 @@ export type EntityAction<M extends object = any, USER extends User = User> = {
      * @param props
      */
     onClick: (props: EntityActionClickProps<M, USER>) => Promise<void> | void;
+    /**
+     * Optional callback in case you want to disable the action
+     * @param props
+     */
+    isEnabled?: (props: EntityActionClickProps<M, USER>) => boolean;
     /**
      * Show this action collapsed in the menu of the collection view.
      * Defaults to true
@@ -43,18 +52,48 @@ export type EntityAction<M extends object = any, USER extends User = User> = {
     includeInForm?: boolean;
 };
 export type EntityActionClickProps<M extends object, USER extends User = User> = {
-    entity: Entity<M>;
+    entity?: Entity<M>;
     context: FireCMSContext<USER>;
     fullPath?: string;
     fullIdPath?: string;
     collection?: EntityCollection<M>;
+    /**
+     * Optional form context, present if the action is being called from a form.
+     * This allows you to access the form state and methods, including modifying the form values.
+     */
+    formContext?: FormContext;
+    /**
+     * Present if this actions is being called from a side dialog only
+     */
+    sideEntityController?: SideEntityController;
+    /**
+     * Is the action being called from the collection view or from the entity form view?
+     */
+    view: "collection" | "form";
+    /**
+     * If the action is rendered in the form, is it open in a side panel or full screen?
+     */
+    openEntityMode: "side_panel" | "full_screen";
+    /**
+     * Optional selection controller, present if the action is being called from a collection view
+     */
     selectionController?: SelectionController;
+    /**
+     * Optional highlight function to highlight the entity in the collection view
+     * @param entity
+     */
     highlightEntity?: (entity: Entity<any>) => void;
+    /**
+     * Optional unhighlight function to remove the highlight from the entity in the collection view
+     * @param entity
+     */
     unhighlightEntity?: (entity: Entity<any>) => void;
-    onCollectionChange?: () => void;
     /**
-     * If this actions is being called from a side dialog
+     * Optional function to navigate back (e.g. when deleting an entity or navigating from a form)
      */
-    sideEntityController?: SideEntityController;
-    openEntityMode: "side_panel" | "full_screen";
+    navigateBack?: () => void;
+    /**
+     * Callback to be called when the collection changes, e.g. after an entity is deleted or created.
+     */
+    onCollectionChange?: () => void;
 };

package/dist/types/firecms.d.ts

@@ -12,6 +12,7 @@ import { EntityLinkBuilder } from "./entity_link_builder";
 import { UserConfigurationPersistence } from "./local_config_persistence";
 import { FireCMSPlugin } from "./plugins";
 import { CMSAnalyticsEvent } from "./analytics";
+import { EntityAction } from "./entity_actions";
 /**
  * Use this callback to build entity collections dynamically.
  * You can use the user to decide which collections to show.
@@ -85,6 +86,13 @@ export type FireCMSProps<USER extends User> = {
      * You can also define an entity view from the UI.
      */
     entityViews?: EntityCustomView[];
+    /**
+     * List of actions that can be performed on entities.
+     * These actions are displayed in the entity view and in the collection view.
+     * You can later reuse these actions in the `entityActions` prop of a collection,
+     * by specifying the `key` of the action.
+     */
+    entityActions?: EntityAction[];
     /**
      * Format of the dates in the CMS.
      * Defaults to 'MMMM dd, yyyy, HH:mm:ss'

package/dist/types/plugins.d.ts

@@ -139,7 +139,14 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
             Component: React.ComponentType<PropsWithChildren<FORM_PROPS & PluginFormActionProps<any, EC>>>;
             props?: FORM_PROPS;
         };
+        /**
+         * Add custom actions to the default ones ("Save", "Discard"...)
+         */
         Actions?: React.ComponentType<PluginFormActionProps<any, EC>>;
+        /**
+         * Add custom actions to the top of the form
+         */
+        ActionsTop?: React.ComponentType<PluginFormActionProps<any, EC>>;
         fieldBuilder?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T, any, EC>) => React.ComponentType<FieldProps<T>> | null;
         fieldBuilderEnabled?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T>) => boolean;
     };
@@ -181,12 +188,12 @@ export interface PluginHomePageActionsProps<EP extends object = object, M extend
 export interface PluginFormActionProps<USER extends User = User, EC extends EntityCollection = EntityCollection> {
     entityId?: string;
     path: string;
+    parentCollectionIds: string[];
     status: EntityStatus;
     collection: EC;
     disabled: boolean;
     formContext?: FormContext<any>;
     context: FireCMSContext<USER>;
-    currentEntityId?: string;
     openEntityMode: "side_panel" | "full_screen";
 }
 export type PluginFieldBuilderParams<T extends CMSType = CMSType, M extends Record<string, any> = any, EC extends EntityCollection<M> = EntityCollection<M>> = {

package/dist/util/resolutions.d.ts

@@ -1,4 +1,4 @@
-import { ArrayProperty, AuthController, CMSType, CustomizationController, EntityCollection, EntityCustomView, EntityValues, EnumValueConfig, EnumValues, NumberProperty, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedArrayProperty, ResolvedEntityCollection, ResolvedNumberProperty, ResolvedProperties, ResolvedProperty, ResolvedStringProperty, StringProperty, UserConfigurationPersistence } from "../types";
+import { ArrayProperty, AuthController, CMSType, CustomizationController, EntityAction, EntityCollection, EntityCustomView, EntityValues, EnumValueConfig, EnumValues, NumberProperty, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedArrayProperty, ResolvedEntityCollection, ResolvedNumberProperty, ResolvedProperties, ResolvedProperty, ResolvedStringProperty, StringProperty, UserConfigurationPersistence } from "../types";
 export declare const resolveCollection: <M extends Record<string, any>>({ collection, path, entityId, values, previousValues, userConfigPersistence, propertyConfigs, ignoreMissingFields, authController }: {
     collection: EntityCollection<M> | ResolvedEntityCollection<M>;
     path: string;
@@ -81,6 +81,7 @@ export declare function resolveProperties<M extends Record<string, any>>({ prope
 export declare function resolvePropertyEnum(property: StringProperty | NumberProperty, fromBuilder?: boolean): ResolvedStringProperty | ResolvedNumberProperty;
 export declare function resolveEnumValues(input: EnumValues): EnumValueConfig[] | undefined;
 export declare function resolveEntityView(entityView: string | EntityCustomView<any>, contextEntityViews?: EntityCustomView<any>[]): EntityCustomView<any> | undefined;
+export declare function resolveEntityAction<M extends Record<string, any>>(entityAction: string | EntityAction<M>, contextEntityActions?: EntityAction<M>[]): EntityAction<M> | undefined;
 export declare function resolvedSelectedEntityView<M extends Record<string, any>>(customViews: (string | EntityCustomView<M>)[] | undefined, customizationController: CustomizationController, selectedTab?: string, canEdit?: boolean): {
     resolvedEntityViews: EntityCustomView<M>[];
     selectedEntityView: EntityCustomView<M> | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.258",
+  "version": "3.0.0-canary.259",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,9 +53,9 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.0-canary.258",
-    "@firecms/formex": "^3.0.0-canary.258",
-    "@firecms/ui": "^3.0.0-canary.258",
+    "@firecms/editor": "^3.0.0-canary.259",
+    "@firecms/formex": "^3.0.0-canary.259",
+    "@firecms/ui": "^3.0.0-canary.259",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -107,7 +107,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "2d408ab25c6f29305fa6052d2aff07a5ab3daa14",
+  "gitHead": "a4ab5e6aacfb9e10ee8c1c72354c939fb2275ab0",
   "publishConfig": {
     "access": "public"
   },

package/src/components/ConfirmationDialog.tsx

@@ -29,6 +29,7 @@ export function ConfirmationDialog({
 
             <DialogActions>
                 <Button
+                    color={"primary"}
                     variant={"text"}
                     onClick={onCancel}
                     autoFocus>Cancel</Button>

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -107,6 +107,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                 onClick={(event: MouseEvent) => {
                                     event.stopPropagation();
                                     action.onClick({
+                                        view: "collection",
                                         entity,
                                         fullPath,
                                         fullIdPath,
@@ -137,6 +138,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                     onClick={(e) => {
                                         e.stopPropagation();
                                         action.onClick({
+                                            view: "collection",
                                             entity,
                                             fullPath,
                                             fullIdPath,

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -73,7 +73,7 @@ export function CollectionTableToolbar({
         <div
             className={cls(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-surface-50 dark:bg-surface-900 border-b flex flex-row justify-between items-center w-full")}>
 
-            <div className="flex items-center gap-2 md:mr-4 mr-2">
+            <div className="flex items-center gap-1 md:mr-4 mr-2">
 
                 {title && <div className={"hidden lg:block"}>
                     {title}
@@ -85,7 +85,7 @@ export function CollectionTableToolbar({
 
             </div>
 
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1">
 
                 {largeLayout && <div className="w-[22px] mr-4">
                     {loading &&

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -31,6 +31,7 @@ import {
     mergeEntityActions,
     navigateToEntity,
     resolveCollection,
+    resolveEntityAction,
     resolveProperty
 } from "../../util";
 import { ReferencePreview } from "../../preview";
@@ -151,7 +152,6 @@ export const EntityCollectionView = React.memo(
                                                                  }: EntityCollectionViewProps<M>
     ) {
 
-
         const context = useFireCMSContext();
         const navigation = useNavigationController();
         const fullPath = fullPathProp ?? collectionProp.path;
@@ -521,10 +521,13 @@ export const EntityCollectionView = React.memo(
         }) => {
 
             const isSelected = Boolean(usedSelectionController.selectedEntities.find(e => e.id == entity.id && e.path == entity.path));
+            const customEntityActions = (collection.entityActions ?? [])
+                .map(action => resolveEntityAction(action, customizationController.entityActions))
+                .filter(Boolean) as EntityAction[];
 
             const actions = getActionsForEntity({
                 entity,
-                customEntityActions: collection.entityActions
+                customEntityActions
             });
 
             return (

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -71,7 +71,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
             ? <Button
                 variant={"text"}
                 disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
-                startIcon={<DeleteIcon/>}
+                startIcon={<DeleteIcon size={"small"}/>}
                 onClick={onMultipleDeleteClick}
                 color={"primary"}
                 className="lg:w-20"
@@ -79,10 +79,11 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
                 ({selectedEntities?.length})
             </Button>
             : <IconButton
+                size={"small"}
                 color={"primary"}
                 disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
                 onClick={onMultipleDeleteClick}>
-                <DeleteIcon/>
+                <DeleteIcon size={"small"}/>
             </IconButton>;
         multipleDeleteButton =
             <Tooltip

package/src/components/HomePage/DefaultHomePage.tsx

@@ -38,6 +38,7 @@ export function DefaultHomePage({
     additionalChildrenStart?: React.ReactNode;
     additionalChildrenEnd?: React.ReactNode;
 }) {
+
     const context = useFireCMSContext();
     const customizationController = useCustomizationController();
     const navigationController = useNavigationController();
@@ -56,9 +57,12 @@ export function DefaultHomePage({
     const [filteredUrls, setFilteredUrls] = useState<string[] | null>(null);
     const performingSearch = Boolean(filteredUrls);
 
-    const filteredNavigationEntries = filteredUrls
-        ? rawNavigationEntries.filter((e) => filteredUrls.includes(e.url))
-        : rawNavigationEntries;
+    // Memoize filtered navigation entries to prevent unnecessary recalculations
+    const filteredNavigationEntries = useMemo(() => {
+        return filteredUrls
+            ? rawNavigationEntries.filter((e) => filteredUrls.includes(e.url))
+            : rawNavigationEntries;
+    }, [filteredUrls, rawNavigationEntries]);
 
     useEffect(() => {
         fuse.current = new Fuse(rawNavigationEntries, {
@@ -67,9 +71,12 @@ export function DefaultHomePage({
     }, [rawNavigationEntries]);
 
     const updateSearch = useCallback((v?: string) => {
-        if (!v?.trim()) return setFilteredUrls(null);
-        const r = fuse.current?.search(v.trim());
-        setFilteredUrls(r ? r.map((x) => x.item.url) : []);
+        if (!v?.trim()) {
+            setFilteredUrls(null);
+            return;
+        }
+        const results = fuse.current?.search(v.trim());
+        setFilteredUrls(results ? results.map((x) => x.item.url) : []);
     }, []);
 
     /* ───────────────────────────────────────────────────────────────
@@ -83,12 +90,11 @@ export function DefaultHomePage({
         entries: NavigationEntry[];
     } | null>(null);
 
-    useEffect(() => {
-        const src = performingSearch
-            ? filteredNavigationEntries
-            : rawNavigationEntries;
-
+    // Memoize the processed groups to avoid unnecessary recalculations
+    const processedGroups = useMemo(() => {
+        const src = filteredNavigationEntries;
         const entriesByGroup: Record<string, NavigationEntry[]> = {};
+
         src.forEach((e) => {
             const g =
                 e.type === "admin"
@@ -97,6 +103,9 @@ export function DefaultHomePage({
             (entriesByGroup[g] ??= []).push(e);
         });
 
+        // Check if there are custom actions from plugins that should show in the default group
+        const hasPluginAdditionalCards = customizationController.plugins?.some(p => p.homePage?.AdditionalCards);
+
         let allProcessed: { name: string; entries: NavigationEntry[] }[];
 
         if (performingSearch) {
@@ -121,27 +130,35 @@ export function DefaultHomePage({
                         entries: entriesByGroup[g]
                     });
             });
+
+            // Ensure default group exists if there are plugin additional cards but no collections
+            if (hasPluginAdditionalCards && !allProcessed.some(g => g.name === DEFAULT_GROUP_NAME)) {
+                allProcessed.push({
+                    name: DEFAULT_GROUP_NAME,
+                    entries: []
+                });
+            }
+
             allProcessed = allProcessed.filter(
                 (g) =>
                     g.entries.length ||
-                    groupOrderFromNavController.includes(g.name)
+                    groupOrderFromNavController.includes(g.name) ||
+                    (g.name === DEFAULT_GROUP_NAME && hasPluginAdditionalCards)
             );
         }
 
         const admin = allProcessed.find((g) => g.name === ADMIN_GROUP_NAME);
-        if (admin) {
-            setAdminGroupData(admin);
-            setItems(allProcessed.filter((g) => g.name !== ADMIN_GROUP_NAME));
-        } else {
-            setAdminGroupData(null);
-            setItems(allProcessed);
-        }
-    }, [
-        performingSearch,
-        filteredNavigationEntries,
-        rawNavigationEntries,
-        groupOrderFromNavController
-    ]);
+        return {
+            adminGroupData: admin || null,
+            items: allProcessed.filter((g) => g.name !== ADMIN_GROUP_NAME)
+        };
+    }, [filteredNavigationEntries, performingSearch, groupOrderFromNavController, customizationController.plugins]);
+
+    // Update state only when processedGroups actually changes
+    useEffect(() => {
+        setAdminGroupData(processedGroups.adminGroupData);
+        setItems(processedGroups.items);
+    }, [processedGroups]);
 
     /* ───────────────────────────────────────────────────────────────
        Local update vs. persistence helpers
@@ -177,9 +194,9 @@ export function DefaultHomePage({
         onNavigationEntriesUpdate(all);
     };
 
-    /* ───────────────────────────────────────────────────────────────
+    /* ─────────────────────────────────────────────────────���─────────
        Hook for DnD
-       ─────────────────────────────────────────────────────────────── */
+       ───�����────────────────────────────────────────────────────────── */
     const {
         sensors,
         collisionDetection,
@@ -225,11 +242,9 @@ export function DefaultHomePage({
 
     const dndDisabled = !allowDragAndDrop || performingSearch;
 
-    const dndModifiers = useMemo(() => {
-        if (dndKitActiveNode?.data.current?.type === "group")
-            return [restrictToVerticalAxis, restrictToWindowEdges];
-        return [restrictToWindowEdges];
-    }, [dndKitActiveNode]);
+    const dndModifiers = dndKitActiveNode?.data.current?.type === "group"
+        ? [restrictToVerticalAxis, restrictToWindowEdges]
+        : [restrictToWindowEdges];
 
     /* ───────────────────────────────────────────────────────────────
        Plugin extras
@@ -288,7 +303,7 @@ export function DefaultHomePage({
 
     /* ───────────────────────────────────────────────────────────────
        Render
-       ─────────────────────────────────────────────────────────────── */
+       ─────────���───────────────────────────────────────────────────── */
     return (
         <div ref={containerRef} className="py-2 overflow-auto h-full w-full">
             <Container maxWidth="6xl">

package/src/components/HomePage/HomePageDnD.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
     Active,
     closestCenter,
@@ -84,14 +84,11 @@ export function SortableNavigationCard({
             animateLayoutChanges
         });
 
-    const style = useMemo(
-        () => ({
-            transform: transform ? CSS.Transform.toString(transform) : undefined,
-            transition,
-            opacity: isDragging ? 0 : 1
-        }),
-        [transform, transition, isDragging]
-    );
+    const style = {
+        transform: transform ? CSS.Transform.toString(transform) : undefined,
+        transition,
+        opacity: isDragging ? 0 : 1
+    };
 
     return (
         <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
@@ -153,14 +150,11 @@ export function SortableNavigationGroup({
             disabled
         });
 
-    const style = useMemo(
-        () => ({
-            transform: transform ? CSS.Transform.toString(transform) : undefined,
-            transition,
-            opacity: isDragging ? 0 : 1
-        }),
-        [transform, transition, isDragging]
-    );
+    const style = {
+        transform: transform ? CSS.Transform.toString(transform) : undefined,
+        transition,
+        opacity: isDragging ? 0 : 1
+    };
 
     return (
         <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
@@ -224,15 +218,10 @@ export function useHomePageDnd({
         }
     });
     const keyboardSensor = useSensor(KeyboardSensor);
-    const sensors = useSensors(
-        ...(disabled ? [] : [mouseSensor, touchSensor, keyboardSensor])
-    );
+    const sensors = useSensors(mouseSensor, touchSensor, keyboardSensor);
 
     /* ---------------- helpers ---------------- */
-    const dndContainers = useMemo(
-        () => dndItems.map((g) => g.name),
-        [dndItems]
-    );
+    const dndContainers = dndItems.map((g) => g.name);
 
     const findDndContainer = useCallback(
         (id: UniqueIdentifier): string | undefined => {
@@ -518,18 +507,15 @@ export function useHomePageDnd({
     };
 
     /* ---------------- public API ---------------- */
-    const activeItemForOverlay = useMemo(() => {
-        if (disabled || !activeId || activeIsGroup) return null;
-        return (
-            dndItems.flatMap((g) => g.entries).find((e) => e.url === activeId) ||
-            null
-        );
-    }, [activeId, dndItems, disabled, activeIsGroup]);
-
-    const activeGroupData = useMemo(() => {
-        if (disabled || !activeId || !activeIsGroup) return null;
-        return dndItems.find((g) => g.name === activeId) || null;
-    }, [activeId, dndItems, disabled, activeIsGroup]);
+    const activeItemForOverlay =
+        disabled || !activeId || activeIsGroup
+            ? null
+            : dndItems.flatMap((g) => g.entries).find((e) => e.url === activeId) || null;
+
+    const activeGroupData =
+        disabled || !activeId || !activeIsGroup
+            ? null
+            : dndItems.find((g) => g.name === activeId) || null;
 
     return {
         sensors,

package/src/components/HomePage/RenameGroupDialog.tsx

@@ -101,10 +101,14 @@ export function RenameGroupDialog({ open, initialName, existingGroupNames, onClo
                 {error && <p id="group-name-error" style={{ display: "none" }}>{error}</p>}
             </DialogContent>
             <DialogActions>
-                <Button onClick={onClose} variant="text">
+                <Button onClick={onClose}
+                        color={"primary"}
+                        variant="text">
                     Cancel
                 </Button>
-                <Button onClick={handleSave} disabled={!!error || !name.trim()}>
+                <Button onClick={handleSave}
+                        color={"primary"}
+                        disabled={!!error || !name.trim()}>
                     Save
                 </Button>
             </DialogActions>

package/src/components/UnsavedChangesDialog.tsx

@@ -34,8 +34,12 @@ export function UnsavedChangesDialog({
 
             </DialogContent>
             <DialogActions>
-                <Button variant="text" onClick={handleCancel} autoFocus> Cancel </Button>
-                <Button onClick={handleOk}> Ok </Button>
+                <Button variant="text"
+                        color={"primary"}
+                        onClick={handleCancel} autoFocus> Cancel </Button>
+                <Button
+                    color={"primary"}
+                    onClick={handleOk}> Ok </Button>
             </DialogActions>
         </Dialog>
     );