3762-replace buttons in Notifications flow

Author: katarina-cala

client/src/pages/settings/platform/notifications/Notifications.tsx

@@ -1,6 +1,6 @@
+import Button from '@/components/Button/Button';
 import EmptyList from '@/components/EmptyList';
 import PageLoader from '@/components/PageLoader';
-import {Button} from '@/components/ui/button';
 import NotificationDialog from '@/pages/settings/platform/notifications/components/NotificationDialog';
 import NotificationsTable from '@/pages/settings/platform/notifications/components/NotificationsTable';
 import Header from '@/shared/layout/Header';
@@ -34,14 +34,7 @@ const Notifications = () => {
                 <Header
                     centerTitle
                     position="main"
-                    right={
-                        <Button
-                            className="bg-surface-brand-primary hover:bg-surface-brand-primary-hover"
-                            onClick={() => openEditDialog()}
-                        >
-                            <PlusIcon /> New Notification
-                        </Button>
-                    }
+                    right={<Button icon={<PlusIcon />} label="New Notification" onClick={() => openEditDialog()} />}
                     title="Notifications"
                 />
             }
@@ -53,12 +46,7 @@ const Notifications = () => {
                 ) : (
                     <EmptyList
                         button={
-                            <Button
-                                className="bg-surface-brand-primary hover:bg-surface-brand-primary-hover"
-                                onClick={() => openEditDialog()}
-                            >
-                                <PlusIcon /> New Notification
-                            </Button>
+                            <Button icon={<PlusIcon />} label="New Notification" onClick={() => openEditDialog()} />
                         }
                         icon={<Link2Icon className="size-12 text-gray-400" />}
                         message="You do not have any Notifications created yet."

client/src/pages/settings/platform/notifications/components/NotificationDeleteDialog.tsx

@@ -1,3 +1,4 @@
+import Button from '@/components/Button/Button';
 import {
     AlertDialog,
     AlertDialogAction,
@@ -8,7 +9,6 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import {Button} from '@/components/ui/button';
 import {Notification} from '@/shared/middleware/platform/notification';
 import {XIcon} from 'lucide-react';
 
@@ -32,11 +32,14 @@ const NotificationDeleteDialog = ({
 
                 <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
 
-                <Button className="absolute right-2 top-0" onClick={closeDeleteDialog} size="icon" variant="ghost">
-                    <XIcon />
-
-                    <span className="sr-only">Close</span>
-                </Button>
+                <Button
+                    aria-label="Close"
+                    className="absolute right-2 top-0"
+                    icon={<XIcon />}
+                    onClick={closeDeleteDialog}
+                    size="icon"
+                    variant="ghost"
+                />
             </AlertDialogHeader>
 
             <AlertDialogFooter>

client/src/pages/settings/platform/notifications/components/NotificationDialog.tsx

@@ -1,5 +1,5 @@
+import Button from '@/components/Button/Button';
 import {MultiSelect} from '@/components/MultiSelect/MultiSelect';
-import {Button} from '@/components/ui/button';
 import {
     Dialog,
     DialogClose,
@@ -210,12 +210,10 @@ const NotificationDialog = ({
 
                         <DialogFooter>
                             <DialogClose asChild>
-                                <Button type="button" variant="outline">
-                                    Cancel
-                                </Button>
+                                <Button label="Cancel" type="button" variant="outline" />
                             </DialogClose>
 
-                            <Button type="submit">Save</Button>
+                            <Button label="Save" type="submit" />
                         </DialogFooter>
                     </form>
                 </Form>

client/src/pages/settings/platform/notifications/components/NotificationTableCell.tsx

@@ -1,5 +1,5 @@
 import Badge from '@/components/Badge/Badge';
-import {Button} from '@/components/ui/button';
+import Button from '@/components/Button/Button';
 import {Notification, NotificationEvent} from '@/shared/middleware/platform/notification';
 import {PenIcon, TrashIcon} from 'lucide-react';
 
@@ -29,22 +29,19 @@ export const ActionsCell = ({notification, openDeleteDialog, openEditDialog}: Ac
     <div className="flex space-x-1">
         <Button
             className="text-content-neutral-primary/50 hover:bg-surface-neutral-primary-hover"
+            icon={<PenIcon />}
             onClick={() => openEditDialog(notification)}
             size="icon"
             title="Edit notification"
             variant="ghost"
-        >
-            <PenIcon className="size-4 hover:cursor-pointer" />
-        </Button>
+        />
 
         <Button
-            className="text-content-destructive/50 hover:bg-surface-destructive-secondary hover:text-content-destructive"
+            icon={<TrashIcon />}
             onClick={() => openDeleteDialog(notification)}
             size="icon"
             title="Delete notification"
-            variant="ghost"
-        >
-            <TrashIcon className="size-4 hover:cursor-pointer" />
-        </Button>
+            variant="destructiveGhost"
+        />
     </div>
 );