frontend/src/App.tsx

@@ -31,7 +31,7 @@ export default function App() {
 
   return (
     <BrowserRouter>
-      <main className="relative min-h-screen min-w-screen flex items-center justify-center w-full bg-base-200 before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-50 before:pointer-events-none before:bg-[url('assets/noise.gif')]">
+      <main className="relative min-h-screen min-w-screen flex items-center justify-center w-full bg-base-200 before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-50 before:pointer-events-none before:bg-[url('assets/textures/noise.gif')]">
         <Suspense fallback={<SplashScreen />}>
           <Routes>
             <Route

frontend/src/components/Logo.tsx

@@ -1,64 +1,65 @@
 import { DotIcon } from "@phosphor-icons/react";
+import logo from "../assets/logo.svg";
 import "@fontsource/knewave/400.css";
 
 interface LogoProps {
-  scale?: number;
+    scale?: number;
-  type?: "inline" | "mono" | "logo" | null;
+    type?: "inline" | "mono" | "logo" | null;
-  ul?: boolean;
+    ul?: boolean;
 }
 
 export default function Logo({
-  scale = 1,
+    scale = 1,
-  type = null,
+    type = null,
-  ul = false,
+    ul = false,
 }: LogoProps) {
-  if (type === "inline") {
+    if (type === "inline") {
-    return (
+        return (
-      <span className={"text-accent font-display italic "}>
+            <span className={"text-accent font-display italic "}>
-        pi<span className="text-primary">.</span>&nbsp;ku
+                pi<span className="text-primary">.</span>&nbsp;ku
-        <span className="text-primary">.</span>&nbsp;
+                <span className="text-primary">.</span>&nbsp;
-      </span>
+            </span>
-    );
+        );
-  }
+    }
 
-  if (type === "mono") {
+    if (type === "mono") {
-    return (
+        return (
-      <span className="font-display italic font-bold border-b-3 border-dashed border-stone-800/50">
+            <span className="font-display italic font-bold border-b-3 border-dashed border-stone-800/50">
-        pi. ku.
+                pi. ku.
-      </span>
+            </span>
-    );
+        );
-  }
+    }
 
-  if (type === "logo") {
+    if (type === "logo") {
-    return (
+        return (
-      <img
+            <img
-        src="/logo.svg"
+                src={logo}
-        alt="Pi. Ku. logo"
+                alt="Pi. Ku. logo"
-        className="mx-4"
+                className="mx-4"
-        width={scale * 100}
+                width={scale * 100}
-      />
+            />
-    );
+        );
-  }
+    }
 
-  return (
+    return (
-    <div
+        <div
-      role="img"
+            role="img"
-      aria-label="Pi. Ku. logo"
+            aria-label="Pi. Ku. logo"
-      className={`inline-flex items-baseline justify-center leading-none select-none ${ul ? "ul-wavy" : ""}`}
+            className={`inline-flex items-baseline justify-center leading-none select-none ${ul ? "ul-wavy" : ""}`}
-      style={{ fontFamily: "'Knewave', serif", scale }}
+            style={{ fontFamily: "'Knewave', serif", scale }}
-    >
+        >
-      <span className="text-3xl font-light text-accent">Pi</span>
+            <span className="text-3xl font-light text-accent">Pi</span>
-      <DotIcon
+            <DotIcon
-        weight="fill"
+                weight="fill"
-        size={12}
+                size={12}
-        className="text-primary translate-y-1 -mx-px"
+                className="text-primary translate-y-1 -mx-px"
-      />
+            />
-      <span className="text-3xl font-light text-accent">&nbsp;Ku</span>
+            <span className="text-3xl font-light text-accent">&nbsp;Ku</span>
-      <DotIcon
+            <DotIcon
-        weight="fill"
+                weight="fill"
-        size={12}
+                size={12}
-        className="text-primary translate-y-1 -mx-px"
+                className="text-primary translate-y-1 -mx-px"
-      />
+            />
-    </div>
+        </div>
-  );
+    );
 }

frontend/src/components/SplashScreen.tsx

@@ -5,7 +5,7 @@ export default function SplashScreen() {
   return (
     <div
       data-testid="splash-screen"
-      className="fixed w-screen h-screen inset-0 flex flex-col items-center justify-center z-9999  before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')"
+      className="fixed w-screen h-screen inset-0 flex flex-col items-center justify-center z-9999  before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/textures/noise.gif')"
     >
       <div className="flex flex-col items-center gap-6 animate-pulse">
         <Logo />

frontend/src/components/ui/Modal.tsx

@@ -2,39 +2,39 @@ import { XCircleIcon } from "@phosphor-icons/react";
 import type { ReactNode } from "react";
 
 interface ModalProps {
-  isOpen: boolean;
+    isOpen: boolean;
-  onClose?: () => void;
+    onClose?: () => void;
-  children: ReactNode;
+    children: ReactNode;
-  "data-testid"?: string;
+    "data-testid"?: string;
 }
 
 export function Modal({
-  isOpen,
+    isOpen,
-  onClose,
+    onClose,
-  children,
+    children,
-  "data-testid": testId,
+    "data-testid": testId,
 }: ModalProps) {
-  if (!isOpen) return null;
+    if (!isOpen) return null;
 
-  return (
+    return (
-    <div
+        <div
-      data-testid={testId}
+            data-testid={testId}
-      className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')]"
+            className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/textures/noise.gif')]"
-    >
+        >
-      <div className="modal-box relative bg-base-100/60 flex flex-col items-center text-center gap-6">
+            <div className="modal-box relative bg-base-100/60 flex flex-col items-center text-center gap-6">
-        {onClose && (
+                {onClose && (
-          <button
+                    <button
-            type="button"
+                        type="button"
-            data-testid="modal-close-btn"
+                        data-testid="modal-close-btn"
-            className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 z-20"
+                        className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 z-20"
-            onClick={onClose}
+                        onClick={onClose}
-            aria-label="Close"
+                        aria-label="Close"
-          >
+                    >
-            <XCircleIcon size={18} weight="bold" />
+                        <XCircleIcon size={18} weight="bold" />
-          </button>
+                    </button>
-        )}
+                )}
-        {children}
+                {children}
-      </div>
+            </div>
-    </div>
+        </div>
-  );
+    );
 }