chore: Refactor toast (#538)

* Refactor toast so it's not just for errors.

* Address PR feedback.

assets/css/dashboard/toast.scss

@@ -0,0 +1,52 @@
+.toast-container {
+  margin-bottom: 40px;
+
+  .toast {
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+
+    .btn-close {
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &--warning {
+      background-color: $alert-yellow;
+    }
+
+    &--info {
+      background-color: $accessibility-blue;
+      color: white;
+    }
+
+    &__icon {
+      height: 24px;
+      width: 24px;
+      opacity: 60%;
+      flex-shrink: 0;
+    }
+
+    &__text {
+      padding-left: 8px;
+
+      ul {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .toast-header {
+    .btn-close {
+      margin-right: 4px;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    border: none;
+    border-radius: 4px;
+  }
+}

assets/css/screenplay.scss

@@ -43,7 +43,7 @@ $form-feedback-invalid-color: $text-error;
 @import "sort-label.scss";
 @import "search-bar.scss";
 @import "dashboard/picker.scss";
-@import "dashboard/error-toast.scss";
+@import "dashboard/toast.scss";
 
 html {
   font-size: 16px;

assets/css/variables.scss

@@ -67,3 +67,4 @@ $button-secondary-outline-active-bg: #d9d9d93d;
 $text-button-blue-hover-color: #c1e4ff14;
 $text-button-grey-hover-color: #f8f9fa14;
 $alert-yellow: #ffdd00;
+$accessibility-blue: #165c96;

assets/js/components/Dashboard/PaMessageForm/PaMessageForm.tsx

@@ -6,7 +6,7 @@ import SelectStationsAndZones from "./SelectStationsAndZones";
 import AssociateAlert from "./AssociateAlert";
 import { Alert, InformedEntity } from "Models/alert";
 import { usePlacesWithPaEss } from "Hooks/usePlacesWithPaEss";
-import ErrorToast from "Components/ErrorToast";
+import Toast from "Components/Toast";
 import { busRouteIdsAtPlaces, getRouteIdsForSign } from "../../../util";
 import fp from "lodash/fp";
 
@@ -217,8 +217,9 @@ const PaMessageForm = ({
           setEndWithEffectPeriod={setEndWithEffectPeriod}
         />
       )}
-      <ErrorToast
-        errorMessage={errorMessage}
+      <Toast
+        variant="warning"
+        message={errorMessage}
         errors={errors}
         onClose={() => {
           onErrorsChange([]);

assets/js/components/Dashboard/Toast.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Toast as BSToast, ToastContainer } from "react-bootstrap";
+import {
+  CheckCircleFill,
+  ExclamationTriangleFill,
+} from "react-bootstrap-icons";
+import { classWithModifier } from "../../util";
+
+interface ToastProps {
+  variant: "warning" | "info";
+  message: string | null;
+  errors?: string[];
+  onClose?: () => void;
+}
+
+const Toast = ({ message, errors = [], onClose, variant }: ToastProps) => {
+  const getErrorMessageFromField = (error: string) => {
+    switch (error) {
+      case "sign_ids":
+        return "Add Stations & Zones";
+      case "visual_text":
+        return "Visual Text";
+      case "audio_text":
+        return "Phonetic Audio";
+      case "start_datetime":
+        return "Start date/time";
+      case "end_datetime":
+        return "End date/time";
+      default:
+        return "";
+    }
+  };
+
+  const Icon =
+    variant === "warning" ? ExclamationTriangleFill : CheckCircleFill;
+
+  return (
+    <ToastContainer position="bottom-center" className="toast-container">
+      <BSToast
+        show={message != null}
+        onClose={onClose}
+        delay={5000}
+        autohide={true}
+      >
+        <BSToast.Header className={classWithModifier("toast", variant)}>
+          {<Icon className="toast__icon" />}
+          <div className="toast__text">
+            {message}
+            {errors.length > 0 && (
+              <ul>
+                {errors.map((error, i) => {
+                  return <li key={i}>{getErrorMessageFromField(error)}</li>;
+                })}
+              </ul>
+            )}
+          </div>
+        </BSToast.Header>
+      </BSToast>
+    </ToastContainer>
+  );
+};
+
+export default Toast;