Working to feature parity

src/components/App/FlashContext.tsx

@@ -1,6 +1,7 @@
 import { createContext } from "preact";
 import { useContext } from "preact/compat";
+import { Message } from "./FlashProvider";
 
-export const FlashContext = createContext(null);
+export const FlashContext = createContext(null as (message: Message) => void);
 
 export const useFlash = () => useContext(FlashContext);

src/components/App/FlashProvider.tsx

@@ -2,13 +2,18 @@ import { FlashContext } from "./FlashContext";
 import { useState } from "preact/hooks";
 import { MESSAGE_FLASH_TIME } from "../../consts";
 
+export type Message = {
+    message: string;
+    type: "error" | "success";
+};
+
 export const FlashProvider = ({ children }) => {
-    const [messages, setMessages] = useState([] as string[]);
+    const [messages, setMessages] = useState([] as Message[]);
 
     return (
         <FlashContext.Provider
-            value={(message: string) => {
-                setMessages((messages: string[]) => [...messages, message]);
+            value={(message: Message) => {
+                setMessages((messages: Message[]) => [...messages, message]);
                 setTimeout(() => {
                     setMessages((messages) => [...messages].splice(1));
                 }, MESSAGE_FLASH_TIME);
@@ -16,14 +21,22 @@ export const FlashProvider = ({ children }) => {
         >
             <>
                 {children}
-                {messages.map((message) => (
-                    <div class="notification is-danger flash-message is-active">
-                        <span class="icon">
-                            <i class="far fa-exclamation-circle"></i>
-                        </span>{" "}
-                        <span class="error-message">{message}</span>
-                    </div>
-                ))}
+                <div class="flash-container">
+                    {messages.map((message) => {
+                        const className = message.type === "error" ? "is-danger" : "is-success";
+                        const icon =
+                            message.type === "error" ? "fa-exclamation-circle" : "fa-check";
+
+                        return (
+                            <div class={`notification flash-message is-active ${className}`}>
+                                <span class="icon">
+                                    <i class={`far ${icon}`}></i>
+                                </span>{" "}
+                                <span class="error-message">{message.message}</span>
+                            </div>
+                        );
+                    })}
+                </div>
             </>
         </FlashContext.Provider>
     );

src/components/App/index.tsx

@@ -13,7 +13,7 @@ export function App() {
             <QueryClientProvider client={queryClient}>
                 <Router base={"/dashboard"}>
                     <div class="columns is-gapless dashboard-frame">
-                        <Sidebar></Sidebar>
+                        <Sidebar />
                         <div class="column is-main-content">
                             <Switch>
                                 <Route path={"/:guild/reminders"} component={Guild}></Route>