From a572eb35cd988b10f1a47fb4e7b62e49df7f72a1 Mon Sep 17 00:00:00 2001
From: RandyJC <rchompff@gmail.com>
Date: Tue, 9 Dec 2025 10:23:46 +0100
Subject: [PATCH] polish UI to all menus

---
 packages/web/src/app/(auth)/manager/page.tsx  | 16 +++++++++-------
 .../components/game/create/ThemeEditor.tsx    | 19 +++++++++----------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/web/src/app/(auth)/manager/page.tsx b/packages/web/src/app/(auth)/manager/page.tsx
index b937c70..0c6392d 100644
--- a/packages/web/src/app/(auth)/manager/page.tsx
+++ b/packages/web/src/app/(auth)/manager/page.tsx
@@ -7,6 +7,7 @@ import QuizEditor from "@rahoot/web/components/game/create/QuizEditor"
 import MediaLibrary from "@rahoot/web/components/game/create/MediaLibrary"
 import ThemeEditor from "@rahoot/web/components/game/create/ThemeEditor"
 import SelectQuizz from "@rahoot/web/components/game/create/SelectQuizz"
+import Button from "@rahoot/web/components/Button"
 import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
 import { useManagerStore } from "@rahoot/web/stores/manager"
 import { useRouter } from "next/navigation"
@@ -57,14 +58,15 @@ const Manager = () => {
 
   if (showMedia) {
     return (
-      <div className="flex w-full flex-col gap-4">
-        <div className="flex gap-2">
-          <button
-            onClick={() => setShowMedia(false)}
-            className="rounded-md bg-gray-700 px-3 py-2 text-white"
-          >
+      <div className="flex w-full max-w-6xl flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
+        <div className="flex items-center gap-2">
+          <Button onClick={() => setShowMedia(false)} className="bg-gray-700">
             Back
-          </button>
+          </Button>
+          <div className="flex flex-col leading-tight">
+            <h2 className="text-lg font-semibold text-gray-900">Media library</h2>
+            <p className="text-xs text-gray-500">Upload, view, and delete unused media.</p>
+          </div>
         </div>
         <MediaLibrary />
       </div>
diff --git a/packages/web/src/components/game/create/ThemeEditor.tsx b/packages/web/src/components/game/create/ThemeEditor.tsx
index 734ddf7..3a4c44f 100644
--- a/packages/web/src/components/game/create/ThemeEditor.tsx
+++ b/packages/web/src/components/game/create/ThemeEditor.tsx
@@ -97,18 +97,17 @@ const ThemeEditor = ({ onBack }: Props) => {
   }
 
   return (
-    <div className="flex w-full flex-col gap-4">
-      <div className="flex items-center justify-between rounded-md bg-white/90 px-4 py-3 shadow-sm backdrop-blur">
-        <div className="flex items-center gap-3">
-          <button
-            onClick={onBack}
-            className="rounded-md bg-gray-800 px-3 py-2 text-white shadow hover:bg-gray-700"
-          >
+    <div className="flex w-full max-w-6xl flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Button onClick={onBack} className="bg-gray-700">
             Back
-          </button>
-          <div>
+          </Button>
+          <div className="flex flex-col leading-tight">
             <h2 className="text-lg font-semibold text-gray-900">Theme editor</h2>
-            <p className="text-xs text-gray-500">Set the game background from uploads or a custom URL.</p>
+            <p className="text-xs text-gray-500">
+              Set the game background from uploads or a custom URL.
+            </p>
           </div>
         </div>
       </div>