From 7fdba6cf34bce99bc59867a1882ca488eb0b0cc0 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 21:30:25 +0100
Subject: [PATCH 01/10] fix: improve gallery contrast and keyboard focus

---
 frontend/src/components/gallery/GalleryCard.tsx   |  2 +-
 frontend/src/components/gallery/GalleryHeader.tsx | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/gallery/GalleryCard.tsx b/frontend/src/components/gallery/GalleryCard.tsx
index 5ba070b..9866b24 100644
--- a/frontend/src/components/gallery/GalleryCard.tsx
+++ b/frontend/src/components/gallery/GalleryCard.tsx
@@ -16,7 +16,7 @@ export default function GalleryCard({
   return (
     <Link
       to={`/galleries/${id}`}
-      className="block w-64 max-w-full min-w-0 rounded-xl focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-gray-700"
+      className="block w-64 max-w-full min-w-0 rounded-xl focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6]"
     >
       {imageUrls.length === 0 ? (
         <div className="flex h-40 w-full items-center justify-center rounded-xl bg-gray-200 dark:bg-[#302e2a]">
diff --git a/frontend/src/components/gallery/GalleryHeader.tsx b/frontend/src/components/gallery/GalleryHeader.tsx
index b14de6a..dd1e5a3 100644
--- a/frontend/src/components/gallery/GalleryHeader.tsx
+++ b/frontend/src/components/gallery/GalleryHeader.tsx
@@ -60,13 +60,13 @@ export default function GalleryHeader({
               onChange={(event) => onTitleChange(event.target.value)}
               required
               disabled={renaming}
-              className="min-h-11 w-full rounded border border-gray-300 bg-white px-3 py-2 font-serif text-3xl text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 disabled:opacity-50 dark:border-[#504b46] dark:bg-[#242321] dark:text-[#e6dfd6] sm:text-4xl"
+              className="min-h-11 w-full rounded border border-gray-300 bg-white px-3 py-2 font-serif text-3xl text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] disabled:opacity-50 dark:border-[#504b46] dark:bg-[#242321] dark:text-[#e6dfd6] sm:text-4xl"
             />
 
             <button
               type="submit"
               disabled={renaming || !titleInput.trim()}
-              className="min-h-11 cursor-pointer rounded border border-gray-300 px-4 py-2 text-sm hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-[#302e2a]"
+              className="min-h-11 cursor-pointer rounded border border-gray-300 px-4 py-2 text-sm hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-[#302e2a]"
             >
               {renaming ? "Saving..." : "Save"}
             </button>
@@ -75,7 +75,7 @@ export default function GalleryHeader({
               type="button"
               onClick={onCancelRenaming}
               disabled={renaming}
-              className="min-h-11 cursor-pointer rounded border border-gray-300 px-4 py-2 text-sm hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 disabled:opacity-50 dark:hover:bg-[#302e2a]"
+              className="min-h-11 cursor-pointer rounded border border-gray-300 px-4 py-2 text-sm hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] disabled:opacity-50 dark:hover:bg-[#302e2a]"
             >
               Cancel
             </button>
@@ -92,7 +92,7 @@ export default function GalleryHeader({
                 onClick={() => onStartRenaming(title)}
                 aria-label="Rename gallery"
                 title="Rename gallery"
-                className="inline-flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-full text-gray-600 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:text-gray-300 dark:hover:bg-[#302e2a]"
+                className="inline-flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-full text-gray-600 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:text-gray-300 dark:hover:bg-[#302e2a]"
               >
                 <Pencil size={20} aria-hidden="true" />
               </button>
@@ -111,7 +111,7 @@ export default function GalleryHeader({
       </div>
 
       <div className="flex shrink-0 flex-wrap items-center gap-4">
-        <p className="shrink-0 text-sm text-gray-600 sm:pb-1 sm:text-base">
+        <p className="shrink-0 text-sm text-gray-600 dark:text-gray-300 sm:pb-1 sm:text-base">
           {totalCount} {totalCount === 1 ? "artwork" : "artworks"}
         </p>
 
@@ -120,7 +120,7 @@ export default function GalleryHeader({
           onClick={onToggleEditing}
           disabled={renaming}
           aria-pressed={isEditing}
-          className="min-h-11 cursor-pointer rounded border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700"
+          className="min-h-11 cursor-pointer rounded border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:border-[#504b46] dark:text-[#e6dfd6] dark:hover:bg-[#302e2a]"
         >
           {isEditing ? "Done" : "Edit gallery"}
         </button>

From 05a2fa1d822f560a80c50d2fe89985dfe1efa265 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 21:31:22 +0100
Subject: [PATCH 02/10] fix: improve artwork card contrast and keyboard focus

---
 frontend/src/components/artwork/ArtworkCard.css | 4 ++++
 frontend/src/components/artwork/ArtworkCard.tsx | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/artwork/ArtworkCard.css b/frontend/src/components/artwork/ArtworkCard.css
index 437bbf5..6371d3b 100644
--- a/frontend/src/components/artwork/ArtworkCard.css
+++ b/frontend/src/components/artwork/ArtworkCard.css
@@ -41,3 +41,7 @@
   color: #595959;
   overflow-wrap: anywhere;
 }
+
+.dark .artwork-card__artist {
+  color: #d1d5db;
+}
diff --git a/frontend/src/components/artwork/ArtworkCard.tsx b/frontend/src/components/artwork/ArtworkCard.tsx
index 68da07f..1dd5d75 100644
--- a/frontend/src/components/artwork/ArtworkCard.tsx
+++ b/frontend/src/components/artwork/ArtworkCard.tsx
@@ -64,7 +64,7 @@ export default function ArtworkCard({
     <article className="artwork-card relative border-[#dedede] bg-white text-[#171717] dark:border-[#47433e] dark:bg-[#22211f] dark:text-[#f3f0ea]">
       <Link
         to={`/artworks/${artwork.id}`}
-        className="group block"
+        className="group block rounded-sm focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6]"
         state={{ from: `${location.pathname}${location.search}` }}
         onClick={rememberCataloguePosition}
       >

From 158b12d4a64e90a5f12fe08214b2e4592e45cd89 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 21:36:09 +0100
Subject: [PATCH 03/10] fix: improve gallery actions and feedback in dark mode

---
 frontend/src/pages/GalleryPage.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/GalleryPage.tsx b/frontend/src/pages/GalleryPage.tsx
index 2dd36b8..e028846 100644
--- a/frontend/src/pages/GalleryPage.tsx
+++ b/frontend/src/pages/GalleryPage.tsx
@@ -114,14 +114,14 @@ export default function GalleryPage() {
         className="pointer-events-none fixed bottom-8 left-4 right-4 z-50 sm:bottom-12 sm:left-auto sm:right-8 sm:w-full sm:max-w-md"
       >
         {successMessage && (
-          <p className="rounded-lg border border-gray-300 bg-white px-5 py-4 text-base leading-relaxed text-gray-800 shadow-lg">
+          <p className="rounded-lg border border-gray-300 bg-white px-5 py-4 text-base leading-relaxed text-gray-800 shadow-lg dark:border-[#504b46] dark:bg-[#242321] dark:text-[#e6dfd6]">
             {successMessage}
           </p>
         )}
       </div>
 
       {removeError && (
-        <p role="alert" className="my-4 text-sm text-red-700">
+        <p role="alert" className="my-4 text-sm text-red-700 dark:text-red-400">
           Could not remove artwork: {removeError}
         </p>
       )}
@@ -131,7 +131,7 @@ export default function GalleryPage() {
           Loading gallery...
         </p>
       ) : error ? (
-        <p role="alert" className="mt-6 text-red-700">
+        <p role="alert" className="mt-6 text-red-700 dark:text-red-400">
           Could not load gallery: {error}
         </p>
       ) : !gallery ? (
@@ -167,7 +167,7 @@ export default function GalleryPage() {
                 type="button"
                 onClick={() => setShowDeleteDialog(true)}
                 disabled={renaming || removingId !== null}
-                className="min-h-11 shrink-0 cursor-pointer self-start rounded border border-red-300 px-4 py-2 text-sm text-red-700 hover:bg-red-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-700 disabled:cursor-not-allowed disabled:opacity-50 dark:border-red-800 dark:text-red-400 dark:hover:bg-red-950"
+                className="min-h-11 shrink-0 cursor-pointer self-start rounded border border-red-300 px-4 py-2 text-sm text-red-700 hover:bg-red-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-700 disabled:cursor-not-allowed disabled:opacity-50 dark:border-red-800 dark:text-red-400 dark:hover:bg-red-950 dark:focus-visible:outline-red-400"
               >
                 Delete gallery
               </button>
@@ -193,7 +193,7 @@ export default function GalleryPage() {
                             disabled={removingId !== null}
                             aria-label={`Remove ${artwork.title} from this gallery`}
                             title="Remove from this gallery"
-                            className="absolute right-3 top-3 z-10 inline-flex min-h-11 min-w-11 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white text-gray-600 shadow-sm hover:border-red-300 hover:bg-red-50 hover:text-red-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 disabled:cursor-wait disabled:opacity-50"
+                            className="absolute right-3 top-3 z-10 inline-flex min-h-11 min-w-11 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white text-gray-600 shadow-sm hover:border-red-300 hover:bg-red-50 hover:text-red-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 disabled:cursor-wait disabled:opacity-50 dark:border-[#504b46] dark:bg-[#242321] dark:text-[#e6dfd6] dark:hover:border-red-800 dark:hover:bg-red-950 dark:hover:text-red-300 dark:focus-visible:outline-[#e6dfd6]"
                           >
                             {removingId === artwork.id ? (
                               <span className="px-2 text-sm">Removing...</span>

From 61842e62d879008d4161f55ef504bdce274f7ea9 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 21:38:51 +0100
Subject: [PATCH 04/10] fix: improve delete dialog focus in dark mode

---
 frontend/src/components/gallery/DeleteGalleryDialog.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/gallery/DeleteGalleryDialog.tsx b/frontend/src/components/gallery/DeleteGalleryDialog.tsx
index 9e7d6f8..6b4bb22 100644
--- a/frontend/src/components/gallery/DeleteGalleryDialog.tsx
+++ b/frontend/src/components/gallery/DeleteGalleryDialog.tsx
@@ -66,7 +66,7 @@ export default function DeleteGalleryDialog({
           type="button"
           onClick={onCancel}
           disabled={deleting}
-          className="min-h-11 cursor-pointer rounded border border-gray-300 px-4 py-2 text-sm hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 disabled:opacity-50 dark:border-[#504b46] dark:hover:bg-[#302e2a]"
+          className="min-h-11 cursor-pointer rounded border border-gray-300 px-4 py-2 text-sm hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 disabled:opacity-50 dark:border-[#504b46] dark:hover:bg-[#302e2a] dark:focus-visible:outline-[#e6dfd6]"
         >
           Cancel
         </button>
@@ -75,7 +75,7 @@ export default function DeleteGalleryDialog({
           type="button"
           onClick={onConfirm}
           disabled={deleting}
-          className="min-h-11 cursor-pointer rounded bg-red-700 px-4 py-2 text-sm text-white hover:bg-red-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-700 disabled:cursor-wait disabled:opacity-50"
+          className="min-h-11 cursor-pointer rounded bg-red-700 px-4 py-2 text-sm text-white hover:bg-red-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-700 disabled:cursor-wait disabled:opacity-50 dark:focus-visible:outline-red-400  "
         >
           {deleting ? "Deleting..." : "Delete gallery"}
         </button>

From 55cc3eac6885dd4964c5bacacb9003517e7bf7df Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 21:47:11 +0100
Subject: [PATCH 05/10] fix: improve contrast and focus in gallery dialogs

---
 frontend/src/components/gallery/AddToGalleryModal.tsx  |  2 +-
 frontend/src/components/gallery/CreateGalleryModal.tsx | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/gallery/AddToGalleryModal.tsx b/frontend/src/components/gallery/AddToGalleryModal.tsx
index c7dd44c..50449c4 100644
--- a/frontend/src/components/gallery/AddToGalleryModal.tsx
+++ b/frontend/src/components/gallery/AddToGalleryModal.tsx
@@ -174,7 +174,7 @@ export default function AddToGalleryModal({
         )}
 
         {message && (
-          <p role="alert" className="mt-4 text-sm text-red-600">
+          <p role="alert" className="mt-4 text-sm text-red-600 dark:text-red-400">
             {message}
           </p>
         )}
diff --git a/frontend/src/components/gallery/CreateGalleryModal.tsx b/frontend/src/components/gallery/CreateGalleryModal.tsx
index cf84f35..892a1ce 100644
--- a/frontend/src/components/gallery/CreateGalleryModal.tsx
+++ b/frontend/src/components/gallery/CreateGalleryModal.tsx
@@ -75,7 +75,7 @@ export default function CreateGalleryModal({
         <button
           type="button"
           onClick={onClose}
-          className="absolute top-6 right-6 cursor-pointer"
+          className="absolute top-6 right-6 cursor-pointer rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6]"
           aria-label="Close"
         >
           <LucideX size={28} />
@@ -95,22 +95,22 @@ export default function CreateGalleryModal({
           value={title}
           onChange={(e) => setTitle(e.target.value)}
           placeholder="Enter gallery title"
-          className="w-full rounded-lg border mt-10 border-gray-300 p-3 outline-none focus:border-blue-600 dark:border-[#504b46] dark:bg-[#1d1c1a] dark:text-[#f3f0ea] dark:placeholder:text-gray-400"
+          className="w-full rounded-lg border mt-10 border-gray-300 p-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#1d1c1a] dark:text-[#f3f0ea] dark:placeholder:text-gray-400"
         />
         <button
           type="button"
           onClick={handleCreateGallery}
           disabled={!title.trim() || isCreating}
-          className={`w-full rounded-full h-15 text-xl mt-10 transition-colors ${
+          className={`w-full rounded-full h-15 text-xl mt-10 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] ${
             title.trim() && !isCreating
-              ? "bg-amber-300 cursor-pointer hover:bg-amber-400"
+              ? "bg-amber-300 cursor-pointer hover:bg-amber-400 text-gray-900"
               : "bg-gray-300 text-gray-500 cursor-not-allowed"
           }`}
         >
           {isCreating ? "Creating..." : "Create"}
         </button>
         {error && (
-          <p role="alert" className="mt-4 text-red-600">
+          <p role="alert" className="mt-4 text-red-600 dark:text-red-400">
             {error}
           </p>
         )}

From a41d9a10474312caa170c099081678b9b467dd46 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 22:02:44 +0100
Subject: [PATCH 06/10] fix: keep keyboard focus in the create gallery dialog

---
 .../components/gallery/CreateGalleryModal.tsx | 107 ++++++++++--------
 1 file changed, 62 insertions(+), 45 deletions(-)

diff --git a/frontend/src/components/gallery/CreateGalleryModal.tsx b/frontend/src/components/gallery/CreateGalleryModal.tsx
index 892a1ce..91b2bc9 100644
--- a/frontend/src/components/gallery/CreateGalleryModal.tsx
+++ b/frontend/src/components/gallery/CreateGalleryModal.tsx
@@ -1,5 +1,5 @@
 import { LucideX } from "lucide-react";
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useAuthStore } from "../../store/authStore";
 
 type CreateGalleryModalProps = {
@@ -16,6 +16,15 @@ export default function CreateGalleryModal({
   const [error, setError] = useState("");
 
   const token = useAuthStore((state) => state.token);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    dialog.showModal();
+    return () => dialog.close();
+  }, []);
 
   async function handleCreateGallery() {
     if (!title.trim() || isCreating) return;
@@ -70,51 +79,59 @@ export default function CreateGalleryModal({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex text-center items-center justify-center bg-black/50">
-      <div className="relative w-3/4 h-3/4 rounded-2xl bg-white p-8 shadow-xl dark:bg-[#242321] dark:text-[#f3f0ea]">
-        <button
-          type="button"
-          onClick={onClose}
-          className="absolute top-6 right-6 cursor-pointer rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6]"
-          aria-label="Close"
-        >
-          <LucideX size={28} />
-        </button>
-
-        <h2 className="text-3xl font-light">Create a new gallery</h2>
-        <div className="illustration flex items-center justify-center mt-10">
-          <div className="right h-40 w-40 bg-gray-300 border-2 border-white rounded-tl-lg rounded-bl-lg"></div>
-          <div className="left">
-            <div className="h-20 w-40 bg-gray-300 border-2 border-white rounded-tr-lg"></div>
-            <div className="h-20 w-40 bg-gray-300 border-2 border-white rounded-br-lg"></div>
-          </div>
+    <dialog
+      ref={dialogRef}
+      aria-labelledby="create-gallery-title"
+      onCancel={(event) => {
+        event.preventDefault();
+        onClose();
+      }}
+      className="relative m-auto h-3/4 w-3/4 overflow-y-auto rounded-2xl bg-white p-8 text-center shadow-xl backdrop:bg-black/50 dark:bg-[#242321] dark:text-[#f3f0ea]"
+    >
+      <button
+        type="button"
+        onClick={onClose}
+        className="absolute right-6 top-6 cursor-pointer rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6]"
+        aria-label="Close"
+      >
+        <LucideX size={28} />
+      </button>
+
+      <h2 id="create-gallery-title" className="text-3xl font-light">
+        Create a new gallery
+      </h2>
+
+      <div className="illustration flex items-center justify-center mt-10">
+        <div className="right h-40 w-40 bg-gray-300 border-2 border-white rounded-tl-lg rounded-bl-lg"></div>
+        <div className="left">
+          <div className="h-20 w-40 bg-gray-300 border-2 border-white rounded-tr-lg"></div>
+          <div className="h-20 w-40 bg-gray-300 border-2 border-white rounded-br-lg"></div>
         </div>
-        <input
-          id="gallery-title"
-          type="text"
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          placeholder="Enter gallery title"
-          className="w-full rounded-lg border mt-10 border-gray-300 p-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#1d1c1a] dark:text-[#f3f0ea] dark:placeholder:text-gray-400"
-        />
-        <button
-          type="button"
-          onClick={handleCreateGallery}
-          disabled={!title.trim() || isCreating}
-          className={`w-full rounded-full h-15 text-xl mt-10 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] ${
-            title.trim() && !isCreating
-              ? "bg-amber-300 cursor-pointer hover:bg-amber-400 text-gray-900"
-              : "bg-gray-300 text-gray-500 cursor-not-allowed"
-          }`}
-        >
-          {isCreating ? "Creating..." : "Create"}
-        </button>
-        {error && (
-          <p role="alert" className="mt-4 text-red-600 dark:text-red-400">
-            {error}
-          </p>
-        )}
       </div>
-    </div>
+      <input
+        id="gallery-title"
+        type="text"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        placeholder="Enter gallery title"
+        className="w-full rounded-lg border mt-10 border-gray-300 p-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#1d1c1a] dark:text-[#f3f0ea] dark:placeholder:text-gray-400"
+      />
+      <button
+        type="button"
+        onClick={handleCreateGallery}
+        disabled={!title.trim() || isCreating}
+        className={`w-full rounded-full h-15 text-xl mt-10 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] ${title.trim() && !isCreating
+          ? "bg-amber-300 cursor-pointer hover:bg-amber-400 text-gray-900"
+          : "bg-gray-300 text-gray-500 cursor-not-allowed"
+          }`}
+      >
+        {isCreating ? "Creating..." : "Create"}
+      </button>
+      {error && (
+        <p role="alert" className="mt-4 text-red-600 dark:text-red-400">
+          {error}
+        </p>
+      )}
+    </dialog>
   );
 }

From d0ef8112c64bca8aed537e02f3b01ba7ad020156 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 22:07:53 +0100
Subject: [PATCH 07/10] fix: unify keyboard focus on gallery plus buttons

---
 frontend/src/components/artwork/ArtworkCard.tsx | 2 +-
 frontend/src/pages/ArtworkDetailPage.tsx        | 2 +-
 frontend/src/pages/ProfilePage.tsx              | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/artwork/ArtworkCard.tsx b/frontend/src/components/artwork/ArtworkCard.tsx
index 1dd5d75..84b8d07 100644
--- a/frontend/src/components/artwork/ArtworkCard.tsx
+++ b/frontend/src/components/artwork/ArtworkCard.tsx
@@ -97,7 +97,7 @@ export default function ArtworkCard({
             if (isLoggedIn) setShowGalleryModal(true);
             else navigate("/login");
           }}
-          className="absolute right-5 top-5 z-10 grid h-10 w-10 cursor-pointer place-items-center rounded-full border border-gray-300 bg-white/95 text-gray-700 shadow-sm transition hover:border-gray-500 hover:bg-white hover:text-black focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:border-[#5b554e] dark:bg-[#292724]/95 dark:text-gray-200 dark:hover:border-gray-400 dark:hover:bg-[#35322e] dark:hover:text-white"
+          className="absolute right-5 top-5 z-10 grid h-10 w-10 cursor-pointer place-items-center rounded-full border border-gray-300 bg-white/95 text-gray-700 shadow-sm transition-[background-color,border-color,color] hover:border-gray-500 hover:bg-white hover:text-black focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:border-[#5b554e] dark:bg-[#292724]/95 dark:text-gray-200 dark:hover:border-gray-400 dark:hover:bg-[#35322e] dark:hover:text-white dark:focus-visible:outline-[#e6dfd6]"
         >
           <Plus size={21} strokeWidth={1.7} aria-hidden="true" />
         </button>
diff --git a/frontend/src/pages/ArtworkDetailPage.tsx b/frontend/src/pages/ArtworkDetailPage.tsx
index 64543bf..6958131 100644
--- a/frontend/src/pages/ArtworkDetailPage.tsx
+++ b/frontend/src/pages/ArtworkDetailPage.tsx
@@ -72,7 +72,7 @@ export default function ArtworkDetailPage() {
               type="button"
               aria-label="Add artwork to gallery"
               onClick={() => setShowGalleryModal(true)}
-              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-gray-300 text-2xl font-light text-gray-500 transition cursor-pointer hover:border-gray-500 hover:text-black dark:border-[#504b46] dark:text-gray-300 dark:hover:border-gray-400 dark:hover:text-white"
+              className="flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-full border border-gray-300 text-2xl font-light text-gray-500 transition-[background-color,border-color,color] hover:border-gray-500 hover:text-black focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:border-[#504b46] dark:text-gray-300 dark:hover:border-gray-400 dark:hover:text-white dark:focus-visible:outline-[#e6dfd6]"
             >
               <span className="-translate-y-0.75">+</span>
             </button>
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 6102d28..8296572 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -145,7 +145,7 @@ export default function ProfilePage() {
           type="button"
           onClick={() => setShowCreateGallery(true)}
           aria-label="Create gallery"
-          className="flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border-2 border-gray-200 bg-white/90 transition-colors hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321] dark:hover:bg-[#302e2a]"
+          className="flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border-2 border-gray-200 bg-white/90 transition-[background-color,border-color,color] hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:border-[#504b46] dark:bg-[#242321] dark:hover:bg-[#302e2a] dark:focus-visible:outline-[#e6dfd6]"
         >
           <LucidePlus aria-hidden="true" />
         </button>

From 952ccf4f760236a622f2ed45676192803e0cf2f9 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 22:10:30 +0100
Subject: [PATCH 08/10] fix: unify keyboard focus on homepage actions

---
 frontend/src/components/Hero.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Hero.tsx b/frontend/src/components/Hero.tsx
index de4d10e..05e7f8f 100644
--- a/frontend/src/components/Hero.tsx
+++ b/frontend/src/components/Hero.tsx
@@ -45,18 +45,18 @@ function Hero({ onExploreClick }: HeroProps) {
           <Link
             to={isLoggedIn ? "/profile" : "/login"}
             aria-label={isLoggedIn ? "Open profile" : "Open login"}
-            className="flex min-h-20 flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-colors hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm"
+            className="flex min-h-20 flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-[background-color,border-color,color hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm"
           >
             <CircleUserRound size={22} strokeWidth={1.5} aria-hidden="true" />
             <span>{isLoggedIn ? "Profile" : "Log in"}</span>
           </Link>
 
-          <ThemeToggleButton showLabel className="flex min-h-20 cursor-pointer flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-colors hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm" />
+          <ThemeToggleButton showLabel className="flex min-h-20 cursor-pointer flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-[background-color,border-color,color] hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm" />
 
           <button
             type="button"
             onClick={onExploreClick}
-            className="flex min-h-20 cursor-pointer flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-colors hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm"
+            className="flex min-h-20 cursor-pointer flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-[background-color,border-color,color] hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm"
           >
             <ArrowDown size={20} strokeWidth={1.5} aria-hidden="true" />
             <span>Explore art</span>

From 9ddd629cea3285e7880ac588d565a4166f882a7c Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 22:14:07 +0100
Subject: [PATCH 09/10] fix: unify keyboard focus in the desktop catalogue
 toolbar

---
 frontend/src/components/CatalogueControls.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/CatalogueControls.tsx b/frontend/src/components/CatalogueControls.tsx
index a037dcf..52774ba 100644
--- a/frontend/src/components/CatalogueControls.tsx
+++ b/frontend/src/components/CatalogueControls.tsx
@@ -281,7 +281,7 @@ export default function CatalogueControls({
           onClick={onToggleFilters}
           aria-expanded={showFilters}
           aria-controls="catalogue-filters"
-          className="inline-flex cursor-pointer items-center gap-3 border-0 bg-transparent px-0 py-1 text-[0.95rem] text-[#80766f] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#80766f] dark:text-[#c0b5aa] dark:hover:text-white lg:text-base"
+          className="inline-flex cursor-pointer items-center gap-3 border-0 bg-transparent px-0 py-1 text-[0.95rem] text-[#80766f] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:text-[#c0b5aa] dark:hover:text-white lg:text-base"
         >
           <SlidersHorizontal size={19} strokeWidth={1.5} aria-hidden="true" />
           {showFilters ? "Hide filters" : "Show filters"}
@@ -290,11 +290,11 @@ export default function CatalogueControls({
         <Link
           to={isLoggedIn ? "/profile" : "/login"}
           aria-label={isLoggedIn ? "Open profile" : "Open login"}
-          className="grid h-10 w-10 shrink-0 place-items-center rounded-full text-[#80766f] transition-colors hover:bg-[#f4f1ee] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:text-[#c0b5aa] dark:hover:bg-white/10 dark:hover:text-white"
+          className="grid h-10 w-10 shrink-0 place-items-center rounded-full text-[#80766f] transition-colors hover:bg-[#f4f1ee] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:text-[#c0b5aa] dark:hover:bg-white/10 dark:hover:text-white"
         >
           <CircleUserRound size={23} strokeWidth={1.5} aria-hidden="true" />
         </Link>
-        <ThemeToggleButton className="grid h-10 w-10 shrink-0 cursor-pointer place-items-center rounded-full text-[#80766f] transition-colors hover:bg-[#f4f1ee] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:text-[#c0b5aa] dark:hover:bg-white/10 dark:hover:text-white" />
+        <ThemeToggleButton className="grid h-10 w-10 shrink-0 cursor-pointer place-items-center rounded-full text-[#80766f] transition-colors hover:bg-[#f4f1ee] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:text-[#c0b5aa] dark:hover:bg-white/10 dark:hover:text-white" />
 
         <form role="search" onSubmit={handleSubmit} className="ml-auto flex min-w-0 flex-1 lg:max-w-[27rem]">
           <label htmlFor="artwork-search" className="sr-only">
@@ -308,12 +308,12 @@ export default function CatalogueControls({
             placeholder="Search by artist or artwork..."
             value={searchInput}
             onChange={(event) => setSearchInput(event.target.value)}
-            className="min-w-0 flex-1 rounded-none border border-r-0 border-[#d7d3d0] bg-white px-2.5 py-2 text-sm text-[#292624] placeholder:text-gray-500 focus:border-[#80766f] focus:outline-2 focus:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321] dark:text-[#f3f0ea] dark:placeholder:text-gray-400 lg:px-3"
+            className="min-w-0 flex-1 rounded-none border border-r-0 border-[#d7d3d0] bg-white px-2.5 py-2 text-sm text-[#292624] placeholder:text-gray-500 focus:border-[#80766f] focus:outline-2 focus:outline-gray-700 dark:focus:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#242321] dark:text-[#f3f0ea] dark:placeholder:text-gray-400 lg:px-3"
           />
 
           <button
             type="submit"
-            className="grid shrink-0 cursor-pointer place-items-center border border-[#d7d3d0] bg-white px-3 text-[#514943] hover:bg-[#f4f1ee] focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321] dark:text-[#e6dfd6] dark:hover:bg-[#35322e] lg:px-4"
+            className="grid shrink-0 cursor-pointer place-items-center border border-[#d7d3d0] bg-white px-3 text-[#514943] hover:bg-[#f4f1ee] focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#242321] dark:text-[#e6dfd6] dark:hover:bg-[#35322e] lg:px-4"
             aria-label="Search artworks"
           >
             <Search size={18} aria-hidden="true" />

From edd94f6860bbfa48ef9684ede4c82f1c0a577d5c Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 22:58:14 +0100
Subject: [PATCH 10/10] fix: close the transition class on the hero profile
 link

---
 frontend/src/components/Hero.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Hero.tsx b/frontend/src/components/Hero.tsx
index 05e7f8f..c236ca8 100644
--- a/frontend/src/components/Hero.tsx
+++ b/frontend/src/components/Hero.tsx
@@ -45,7 +45,7 @@ function Hero({ onExploreClick }: HeroProps) {
           <Link
             to={isLoggedIn ? "/profile" : "/login"}
             aria-label={isLoggedIn ? "Open profile" : "Open login"}
-            className="flex min-h-20 flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-[background-color,border-color,color hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm"
+            className="flex min-h-20 flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-[background-color,border-color,color] hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm"
           >
             <CircleUserRound size={22} strokeWidth={1.5} aria-hidden="true" />
             <span>{isLoggedIn ? "Profile" : "Log in"}</span>