🔥 Remove all things bootstrap

frontend/src/components/Toast.tsx

@@ -1,4 +1,3 @@
-import { Toast as BSToast } from "bootstrap";
 import clsx from "clsx";
 import React, { useEffect, useRef } from "react";
 
@@ -9,33 +8,26 @@ export const Toast: React.FC = () => {
   const ref = useRef<HTMLInputElement>(null);
   const { visible, showToast, message, background } = useToast();
 
-  const backgroundColor = `bg-${background}`;
-  const classes = clsx("toast align-items-center text-white bg-primary border-0", backgroundColor, styles.toast);
+  const classes = clsx(`bg-${background}`, styles.toast);
 
   useEffect(() => {
     if (!ref.current) return;
-    const bsToast = BSToast.getInstance(ref.current) || new BSToast(ref.current);
 
     if (visible) {
-      bsToast?.show();
+      // TODO
+      console.log("TODO: show");
     } else if (!visible) {
-      bsToast?.hide();
+      // TODO
+      console.log("TODO: hide");
     }
-    return () => bsToast?.hide();
+    // TODO
+    return () => console.log("TODO: hide");
   }, [visible]);
 
   return (
     <div ref={ref} className={classes} role="alert" aria-live="assertive" aria-atomic="true">
-      <div className="d-flex">
-        <div className="toast-body">{message}</div>
-        <button
-          type="button"
-          className="btn-close btn-close-white me-2 m-auto"
-          data-bs-dismiss="toast"
-          aria-label="Close"
-          onClick={() => showToast(message)}
-        />
-      </div>
+      <div>{message}</div>
+      <button type="button" aria-label="Close" onClick={() => showToast(message)} />
     </div>
   );
 };