From 1359cce32a62db9137359241b4f144151acdc278 Mon Sep 17 00:00:00 2001
From: Nathaniel Rindlaub <nathanielrindlaub@gmail.com>
Date: Fri, 6 Sep 2024 11:47:48 -0700
Subject: [PATCH] Rename ErrorAlerts component

---
 .../{ErrorAlerts.jsx => ErrorToast.jsx}       |  4 ++--
 src/components/Toast.jsx                      | 19 ++++++++-----------
 src/features/projects/ViewExplorer.jsx        |  4 ++--
 3 files changed, 12 insertions(+), 15 deletions(-)
 rename src/components/{ErrorAlerts.jsx => ErrorToast.jsx} (99%)

diff --git a/src/components/ErrorAlerts.jsx b/src/components/ErrorToast.jsx
similarity index 99%
rename from src/components/ErrorAlerts.jsx
rename to src/components/ErrorToast.jsx
index 17c4debc..f1983c79 100644
--- a/src/components/ErrorAlerts.jsx
+++ b/src/components/ErrorToast.jsx
@@ -54,7 +54,7 @@ import { selectManageUserErrors, dismissManageUsersError } from '../features/pro
 
 // TODO: add updateAutomationRules errors
 
-const ErrorAlerts = () => {
+const ErrorToast = () => {
   const dispatch = useDispatch();
   const labelsErrors = useSelector(selectLabelsErrors);
   const commentsErrors = useSelector(selectCommentsErrors);
@@ -176,4 +176,4 @@ function enrichErrors(errors, title, entity) {
   }));
 }
 
-export default ErrorAlerts;
+export default ErrorToast;
diff --git a/src/components/Toast.jsx b/src/components/Toast.jsx
index e3c7fe4d..5c7a7432 100644
--- a/src/components/Toast.jsx
+++ b/src/components/Toast.jsx
@@ -1,5 +1,3 @@
-
-
 import { styled, keyframes } from '@stitches/react';
 import { slate, red, green } from '@radix-ui/colors';
 import * as ToastPrimitive from '@radix-ui/react-toast';
@@ -43,10 +41,9 @@ const StyledToast = styled(ToastPrimitive.Root, {
   boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
   padding: 15,
   display: 'grid',
-  gridTemplateAreas: '"title action" "description action"',
+  gridTemplateAreas: '"title action" "description ."',
   gridTemplateColumns: 'auto max-content',
   columnGap: 15,
-  alignItems: 'center',
 
   '@media (prefers-reduced-motion: no-preference)': {
     '&[data-state="open"]': {
@@ -80,9 +77,9 @@ const StyledToast = styled(ToastPrimitive.Root, {
         backgroundColor: green.green2,
         color: '$successText',
         boxShadow: `inset 0 0 0 1px ${green.green7}`,
-      }
-    }
-  }
+      },
+    },
+  },
 });
 
 const StyledTitle = styled(ToastPrimitive.Title, {
@@ -96,12 +93,12 @@ const StyledTitle = styled(ToastPrimitive.Title, {
     variant: {
       red: {
         color: '$errorText',
-      },  
+      },
       green: {
         color: '$successText',
-      }
-    }
-  }
+      },
+    },
+  },
 });
 
 const StyledDescription = styled(ToastPrimitive.Description, {
diff --git a/src/features/projects/ViewExplorer.jsx b/src/features/projects/ViewExplorer.jsx
index 78fef422..95d4fcfa 100644
--- a/src/features/projects/ViewExplorer.jsx
+++ b/src/features/projects/ViewExplorer.jsx
@@ -7,7 +7,7 @@ import SidebarNav from './SidebarNav.jsx';
 import FiltersPanel from '../filters/FiltersPanel.jsx';
 import ImagesPanel from '../images/ImagesPanel.jsx';
 import Loupe from '../loupe/Loupe.jsx';
-import ErrorAlerts from '../../components/ErrorAlerts.jsx';
+import ErrorToast from '../../components/ErrorToast.jsx';
 import HydratedModal from '../../components/HydratedModal.jsx';
 
 const ViewExplorerWrapper = styled('div', {
@@ -39,7 +39,7 @@ const ViewExplorer = () => {
       <ImagesPanel />
       {loupeOpen && <Loupe />}
       <HydratedModal />
-      <ErrorAlerts />
+      <ErrorToast />
     </ViewExplorerWrapper>
   );
 };