Trigger error on 500 and 404 and style it

Author: Rikthepixel

src/pages/_app.tsx

@@ -4,10 +4,11 @@ import { Open_Sans } from 'next/font/google';
 import type { AppProps } from 'next/app';
 import Head from "next/head";
 
-import '@/styles/main.css';
 import Header from "@/components/navigation/Header";
 import Footer from "@/components/navigation/Footer";
 
+import '@/styles/main.css';
+
 const openSans = Open_Sans({
   subsets: ['latin'],
   variable: "--font-open-sans"

src/styles/main.css

@@ -10,5 +10,21 @@ body,
 }
 
 html {
-  @apply bg-fill text-fill-contrast
+  @apply bg-fill text-fill-contrast;
+}
+
+div.swal2-popup.swal2-toast {
+  @apply p-3 shadow shadow-black/25 bg-white/50 backdrop-blur-sm;
+}
+
+div.swal2-popup.swal2-toast .swal2-title {
+  @apply m-0 text-black;
+}
+
+div.swal2-popup.swal2-toast .swal2-html-container {
+  @apply m-0 text-black;
+}
+
+div.swal2-popup.swal2-toast .swal2-icon {
+  @apply mr-4;
 }

src/utils/swal.ts

@@ -1,6 +1,24 @@
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
+const swal = withReactContent(Swal).mixin({
+  customClass: {
+    icon: "mr-4"
+  }
+});
 
-const swal = withReactContent(Swal);
+export const toast = swal.mixin({
+  timer: 5000,
+  timerProgressBar: true,
+  position: "top",
+  showConfirmButton: false,
+  toast: true,
+  didOpen: (toast) => {
+    toast.addEventListener('mouseenter', Swal.stopTimer);
+    toast.addEventListener('mouseleave', Swal.resumeTimer);
+  },
+  customClass: {
+
+  }
+});
 
 export default swal;

src/utils/wretch.ts

@@ -0,0 +1,17 @@
+import wretch from "wretch";
+import { toast } from "./swal";
+
+export const backend = wretch(process.env.NEXT_PUBLIC_BACKEND_URL!)
+  .options({
+    mode: "cors"
+  })
+  .catcher(404, () => toast.fire({
+    title: "Error",
+    icon: "error",
+    text: "Resource was not found."
+  }))
+  .catcher(500, () => toast.fire({
+    title: "Error",
+    icon: "error",
+    text: "Internal Server Error, try again later."
+  }));

src/utils/wretch.tsx

@@ -1,11 +1,12 @@
+const plugin = require("tailwindcss/plugin");
 const { fontFamily } = require('tailwindcss/defaultTheme');
 
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     "./src/pages/**/*.tsx",
     "./src/components/**/*.tsx",
+    "./src/utils/**/*.{ts,tsx}"
   ],
   theme: {
     extend: {
@@ -14,7 +15,7 @@ module.exports = {
       },
       colors: {
         primary: {
-          DEFAULT: "#FF5C00",
+          DEFAULT: "#f2600c",
           light: "#FF792E",
           dark: "#DB5103",
           contrast: "#FFF"
@@ -26,7 +27,7 @@ module.exports = {
           contrast: "#FFF"
         },
         fill: {
-          DEFAULT: "#FFDFC1",
+          DEFAULT: "#FFE4CC",
           contrast: "#282828"
         }
       },
@@ -35,5 +36,10 @@ module.exports = {
       }
     },
   },
-  plugins: [],
+  plugins: [
+    plugin(({ addVariant }) => {
+      addVariant("is", ":is(&)");
+      addVariant("where", ":where(&)");
+    })
+  ],
 };