fix: html structure of callout warnings

tnc-ca-geo · Jan 6, 2025 · 17e2981 · 17e2981
1 parent 9915f30
commit 17e2981
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 14 deletions.
diff --git a/src/components/Callout.jsx b/src/components/Callout.jsx
@@ -19,7 +19,12 @@ const StyledCallout = styled('div', {
   p: {
     marginTop: '$3',
     color: '$textMedium',
-    fontSize: '$3',
+    fontSize: '$4',
+  },
+  ul: {
+    marginTop: '$3',
+    color: '$textMedium',
+    fontSize: '$4',
   },
   variants: {
     type: {

diff --git a/src/components/HydratedModal.jsx b/src/components/HydratedModal.jsx
@@ -79,7 +79,6 @@ const HydratedModal = () => {
       fullHeight: true,
       content: <CameraAdminModal />,
       callBackOnClose: () => {
-        console.log('callBackOnClose() - reverting moment global timezone to local timezone');
         moment.tz.setDefault();
         dispatch(clearDeployments());
       },

diff --git a/src/features/cameras/DeleteCameraAlert.jsx b/src/features/cameras/DeleteCameraAlert.jsx
@@ -81,15 +81,15 @@ const DeleteCameraAlert = () => {
           <div>
             <Callout type="warning">
               {imageCount > ASYNC_IMAGE_DELETE_BY_FILTER_LIMIT ? (
-                <>
+                <p>
                   Due to the large number of images associated with this camera, we are unable to
                   delete Camera <strong>{selectedCamera}</strong> at this time. Please ensure that
                   the number of images associated with this camera do not exceed{' '}
                   {ASYNC_IMAGE_DELETE_BY_FILTER_LIMIT} before trying again. We apologize for the
                   inconvenience.
-                </>
+                </p>
               ) : (
-                <>
+                <div>
                   <p>
                     Are you sure you&apos;d like to delete Camera <strong>{selectedCamera}</strong>?{' '}
                     {imageCount === 0 && 'This will remove the Camera and the Deployments '}
@@ -107,7 +107,7 @@ const DeleteCameraAlert = () => {
                   <p>
                     <strong>This action cannot be undone.</strong>
                   </p>
-                </>
+                </div>
               )}
             </Callout>
             <PermanentActionConfirmation

diff --git a/src/features/projects/ManageLabelsModal/DeleteLabelsAlert.jsx b/src/features/projects/ManageLabelsModal/DeleteLabelsAlert.jsx
@@ -41,8 +41,8 @@ const DeleteLabelsAlert = ({ open, setAlertOpen, label }) => {
             label?
           </AlertTitle>
           <Callout type="warning">
-            <p>
-              Deleting this Label will:
+            <div>
+              <p>Deleting this Label will:</p>
               <ul>
                 <li>
                   remove it as an option to apply to your images (
@@ -59,8 +59,10 @@ const DeleteLabelsAlert = ({ open, setAlertOpen, label }) => {
                   affected images to a &quot;not-reviewed&quot; state
                 </li>
               </ul>
-              <strong>This action can not be undone.</strong>
-            </p>
+              <p>
+                <strong>This action can not be undone.</strong>
+              </p>
+            </div>
           </Callout>
           <PermanentActionConfirmation
             text="permanently delete"

diff --git a/src/features/projects/ManageTagsModal/DeleteTagAlert.jsx b/src/features/projects/ManageTagsModal/DeleteTagAlert.jsx
@@ -52,14 +52,16 @@ export const DeleteTagAlert = ({ open, tag, onConfirm, onCancel }) => {
           </AlertTitle>
           <div>
             <Callout type="warning">
-              <p>
-                Deleting this Tag will:
+              <div>
+                <p> Deleting this Tag will:</p>
                 <ul>
                   <li>remove it as an option to apply to your images</li>
                   <li>remove all instances of it from your existing images</li>
                 </ul>
-                <strong>This action cannot be undone.</strong>
-              </p>
+                <p>
+                  <strong>This action cannot be undone.</strong>
+                </p>
+              </div>
             </Callout>
             <PermanentActionConfirmation
               text="permanently delete"