From 9f015816af25ac37f320a614728b410c415364d8 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 4 May 2024 09:49:41 -0500
Subject: [PATCH] add close button to all toasters

---
 web/src/components/filter/CameraGroupSelector.tsx  | 6 +++++-
 web/src/components/settings/MasksAndZones.tsx      | 2 +-
 web/src/components/settings/MotionMaskEditPane.tsx | 2 +-
 web/src/components/settings/MotionTuner.tsx        | 2 +-
 web/src/components/settings/ObjectMaskEditPane.tsx | 2 +-
 web/src/components/settings/ObjectSettings.tsx     | 2 +-
 web/src/components/settings/PolygonItem.tsx        | 2 +-
 web/src/components/settings/ZoneEditPane.tsx       | 2 +-
 web/src/components/ui/sonner.tsx                   | 2 ++
 web/src/pages/ConfigEditor.tsx                     | 2 +-
 web/src/pages/Logs.tsx                             | 2 +-
 web/src/views/events/EventView.tsx                 | 2 +-
 web/src/views/events/RecordingView.tsx             | 2 +-
 13 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index 3b9b3e20f..d67fea65a 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -273,7 +273,11 @@ function NewGroupDialog({
 
   return (
     <>
-      <Toaster className="toaster group z-[100]" position="top-center" />
+      <Toaster
+        className="toaster group z-[100]"
+        position="top-center"
+        closeButton={true}
+      />
       <Overlay
         open={open}
         onOpenChange={(open) => {
diff --git a/web/src/components/settings/MasksAndZones.tsx b/web/src/components/settings/MasksAndZones.tsx
index 5e17a534f..fce02ed75 100644
--- a/web/src/components/settings/MasksAndZones.tsx
+++ b/web/src/components/settings/MasksAndZones.tsx
@@ -366,7 +366,7 @@ export default function MasksAndZones({
     <>
       {cameraConfig && editingPolygons && (
         <div className="flex flex-col md:flex-row size-full">
-          <Toaster position="top-center" />
+          <Toaster position="top-center" closeButton={true} />
           <div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
             {editPane == "zone" && (
               <ZoneEditPane
diff --git a/web/src/components/settings/MotionMaskEditPane.tsx b/web/src/components/settings/MotionMaskEditPane.tsx
index 1797c2d99..df1a42508 100644
--- a/web/src/components/settings/MotionMaskEditPane.tsx
+++ b/web/src/components/settings/MotionMaskEditPane.tsx
@@ -183,7 +183,7 @@ export default function MotionMaskEditPane({
 
   return (
     <>
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <Heading as="h3" className="my-2">
         {polygon.name.length ? "Edit" : "New"} Motion Mask
       </Heading>
diff --git a/web/src/components/settings/MotionTuner.tsx b/web/src/components/settings/MotionTuner.tsx
index badaa75a4..d6dd8202c 100644
--- a/web/src/components/settings/MotionTuner.tsx
+++ b/web/src/components/settings/MotionTuner.tsx
@@ -169,7 +169,7 @@ export default function MotionTuner({
 
   return (
     <div className="flex flex-col md:flex-row size-full">
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
         <Heading as="h3" className="my-2">
           Motion Detection Tuner
diff --git a/web/src/components/settings/ObjectMaskEditPane.tsx b/web/src/components/settings/ObjectMaskEditPane.tsx
index c95b17bae..d97297b98 100644
--- a/web/src/components/settings/ObjectMaskEditPane.tsx
+++ b/web/src/components/settings/ObjectMaskEditPane.tsx
@@ -245,7 +245,7 @@ export default function ObjectMaskEditPane({
 
   return (
     <>
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <Heading as="h3" className="my-2">
         {polygon.name.length ? "Edit" : "New"} Object Mask
       </Heading>
diff --git a/web/src/components/settings/ObjectSettings.tsx b/web/src/components/settings/ObjectSettings.tsx
index 15d51aa54..4fdbb0b24 100644
--- a/web/src/components/settings/ObjectSettings.tsx
+++ b/web/src/components/settings/ObjectSettings.tsx
@@ -109,7 +109,7 @@ export default function ObjectSettings({
 
   return (
     <div className="flex flex-col md:flex-row size-full">
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
         <Heading as="h3" className="my-2">
           Debug
diff --git a/web/src/components/settings/PolygonItem.tsx b/web/src/components/settings/PolygonItem.tsx
index 9d8972341..bfd73725d 100644
--- a/web/src/components/settings/PolygonItem.tsx
+++ b/web/src/components/settings/PolygonItem.tsx
@@ -202,7 +202,7 @@ export default function PolygonItem({
 
   return (
     <>
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
 
       <div
         key={index}
diff --git a/web/src/components/settings/ZoneEditPane.tsx b/web/src/components/settings/ZoneEditPane.tsx
index dd213b6cc..90cff5f10 100644
--- a/web/src/components/settings/ZoneEditPane.tsx
+++ b/web/src/components/settings/ZoneEditPane.tsx
@@ -318,7 +318,7 @@ export default function ZoneEditPane({
 
   return (
     <>
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <Heading as="h3" className="my-2">
         {polygon.name.length ? "Edit" : "New"} Zone
       </Heading>
diff --git a/web/src/components/ui/sonner.tsx b/web/src/components/ui/sonner.tsx
index 15690ddc7..21da14e4e 100644
--- a/web/src/components/ui/sonner.tsx
+++ b/web/src/components/ui/sonner.tsx
@@ -18,6 +18,8 @@ const Toaster = ({ ...props }: ToasterProps) => {
           actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary",
           cancelButton:
             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+          closeButton:
+            "group-[.toast]:bg-secondary border-primary border-[1px]",
           success:
             "group toast group-[.toaster]:bg-success group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
           error:
diff --git a/web/src/pages/ConfigEditor.tsx b/web/src/pages/ConfigEditor.tsx
index 126d6c66a..7c30b5447 100644
--- a/web/src/pages/ConfigEditor.tsx
+++ b/web/src/pages/ConfigEditor.tsx
@@ -158,7 +158,7 @@ function ConfigEditor() {
       )}
 
       <div ref={configRef} className="h-full mt-2" />
-      <Toaster />
+      <Toaster closeButton={true} />
     </div>
   );
 }
diff --git a/web/src/pages/Logs.tsx b/web/src/pages/Logs.tsx
index c166968ab..e6cf07be5 100644
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@@ -332,7 +332,7 @@ function Logs() {
 
   return (
     <div className="size-full p-2 flex flex-col">
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <LogInfoDialog logLine={selectedLog} setLogLine={setSelectedLog} />
 
       <div className="flex justify-between items-center">
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 4d5b5b75b..90ca54531 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -238,7 +238,7 @@ export default function EventView({
 
   return (
     <div className="py-2 flex flex-col size-full">
-      <Toaster />
+      <Toaster closeButton={true} />
       <div className="h-11 mb-2 pl-3 pr-2 relative flex justify-between items-center">
         {isMobile && (
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 4e90937df..5494b6e87 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -261,7 +261,7 @@ export function RecordingView({
 
   return (
     <div ref={contentRef} className="size-full pt-2 flex flex-col">
-      <Toaster />
+      <Toaster closeButton={true} />
       <div
         className={`w-full h-11 mb-2 px-2 relative flex items-center justify-between`}
       >