fix(snackbar): translation and responsivity

miksuh-dev · Jan 18, 2023 · 65b89f6 · 65b89f6
1 parent 0270c19
commit 65b89f6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/client/src/context/auth.tsx b/client/src/context/auth.tsx
@@ -92,7 +92,7 @@ export const AuthProvider: Component<{
       }
 
       if (err instanceof Error) {
-        snackbar.error(t("error.common", { error: err.message }));
+        snackbar.error(t("error.common", { error: t(err.message) }));
       }
     } finally {
       setReady(true);

diff --git a/client/src/context/snackbar.tsx b/client/src/context/snackbar.tsx
@@ -1,6 +1,7 @@
 import { JSX, Show, createContext, createSignal } from "solid-js";
 import type { Component } from "solid-js";
 import { CrossIcon, WarningIcon } from "components/common/icon";
+import { useI18n } from "@solid-primitives/i18n";
 
 interface SnackbarContextProps {
   show: (message: string, type: "success" | "error") => void;
@@ -23,6 +24,7 @@ export const SnackbarContext =
 export const SnackbarProvider: Component<{
   children: JSX.Element;
 }> = (props) => {
+  const [t] = useI18n();
   const [snackbar, setSnackbar] = createSignal<Snackbar | null>(null);
 
   let timeout: number;
@@ -46,9 +48,8 @@ export const SnackbarProvider: Component<{
     <SnackbarContext.Provider value={{ show, hide }}>
       {props.children}
       <Show when={snackbar()}>
-        <div class="absolute bottom-2 left-1/2 z-50 flex -translate-x-1/2 justify-center">
+        <div class="absolute bottom-2 left-2 right-2 z-50 flex justify-center md:left-1/2 md:-translate-x-1/2">
           <div
-            id="alert-1"
             class="flex space-x-4 rounded-lg border-2 bg-neutral-100 p-4 dark:border-neutral-500 dark:bg-neutral-900"
             role="alert"
           >
@@ -58,13 +59,22 @@ export const SnackbarProvider: Component<{
               </span>
             </Show>
             <div class="ml-3 self-center text-sm font-medium text-neutral-700 dark:text-neutral-100">
-              {snackbar()?.message}
+              <Show
+                when={snackbar()?.message}
+                fallback={
+                  snackbar()?.type === "error"
+                    ? t("error.unkown") ?? "Unknown error"
+                    : ""
+                }
+                keyd
+              >
+                {(message: string) => message}
+              </Show>
             </div>
             <div class="flex items-center">
               <button
                 type="button"
                 class="icon-button h-10 w-10"
-                data-dismiss-target="#alert-1"
                 aria-label="Close"
                 onClick={() => hide()}
               >