Add ToastProvider component and useToast hook; update CabinetMaintenance for toast notifications; enhance Button styles and Tailwind CSS configuration

src/components/Button.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 function Button({text, onClick}) {
     return (
         <button 
-            className="px-12 py-2 text-lg text-white rounded-full bg-primary dark:bg-primary-dark" 
+            className="px-12 py-2 text-lg text-white dark:text-primary-dark rounded-full bg-primary dark:bg-secondary-dark" 
             onClick={onClick}
         >
             {text}

src/components/Toast.jsx

@@ -0,0 +1,56 @@
+import { createContext, useState } from "react";
+import { CircleAlert, X, CircleX, Check } from "lucide-react";
+import { toTitleCase } from "../util/util";
+
+import PropTypes from "prop-types";
+
+export const ToastContext = createContext();
+
+export const ToastProvider = ({ children }) => {
+  const [toast, setToast] = useState({ show: false, message: "", type: "" });
+  const showToast = (message, type) => {
+    setToast({ show: true, message, type });
+    setTimeout(() => {
+      setToast({ show: false, message: "", type: "" });
+    }, 7000);
+  };
+  let toastIcon;
+  let surfaceColor;
+  let borderColor;
+  if(toast.type === "warning") {
+    toastIcon = <CircleAlert size={30} fill="#EA7000" stroke="#FDF1E5" />;
+    surfaceColor = "bg-warning-surface";
+    borderColor = "border-warning";
+  } else if(toast.type === "success") {
+    toastIcon = <Check size={30} color="green"/>;
+    surfaceColor = "bg-success-surface";
+    borderColor = "border-success";
+  } else if (toast.type === "error") {
+    toastIcon = <CircleX size={30} fill="#E5254B" stroke="#FCE9ED" />;
+    surfaceColor = "bg-error-surface";
+    borderColor = "border-error";
+  }
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      {toast.show && (
+        <div 
+          className={`fixed bottom-10 right-5 px-5 py-2 ${surfaceColor} border-2 border-l-8 ${borderColor} rounded-xl font-medium text-onToast z-10 flex gap-5 items-center animate-[slideIn_0.5s]`}
+          role="alert"
+        >
+          {toastIcon}
+          <div>
+            <div className="text-lg text-onToast">{toTitleCase(toast.type)}</div>
+            <div className="text-sm font-body">{toast.message}</div>
+          </div>
+          <X onClick={() => setToast({ show: false, message: "", type: "" })}/>
+        </div>
+      )}
+    </ToastContext.Provider>
+  );
+};
+
+ToastProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};