From 019a519b817977a4c44bc7e2e036afc4b2788507 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Mon, 25 May 2026 01:34:54 +0200
Subject: [PATCH] fix: improve accessibility and visual consistency

---
 templates/components/dropdown.gohtml          |  2 +-
 templates/components/video_player.gohtml      |  8 +++----
 templates/components/watch_order.gohtml       |  6 ++---
 templates/components/watchlist_actions.gohtml | 24 +++++++++----------
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/templates/components/dropdown.gohtml b/templates/components/dropdown.gohtml
index 6dfe456..c973853 100644
--- a/templates/components/dropdown.gohtml
+++ b/templates/components/dropdown.gohtml
@@ -4,7 +4,7 @@
     {{template "dropdown_trigger" .}}
   </div>
 
-  <div data-content class="hidden absolute z-50 {{if .Width}}{{.Width}}{{else}}min-w-[320px]{{end}} bg-background-button rounded-none shadow-[var(--shadow-card)] {{if eq .Align "left"}}left-0{{else}}right-0{{end}} {{if eq .Position "top"}}bottom-full mb-2{{else}}top-full mt-2{{end}}">
+  <div data-content class="hidden absolute z-50 {{if .Width}}{{.Width}}{{else}}min-w-[320px]{{end}} bg-background-button rounded-none shadow-[var(--shadow-card)] ring-1 ring-black/10 {{if eq .Align "left"}}left-0{{else}}right-0{{end}} {{if eq .Position "top"}}bottom-full mb-2{{else}}top-full mt-2{{end}}">
     <div class="flex flex-col py-1">
       {{template "dropdown_children" .}}
     </div>
diff --git a/templates/components/video_player.gohtml b/templates/components/video_player.gohtml
index 8e4fae8..52c683e 100644
--- a/templates/components/video_player.gohtml
+++ b/templates/components/video_player.gohtml
@@ -45,7 +45,7 @@
     <div class="flex flex-col gap-3">
       <div class="flex items-center justify-between px-2">
         <div class="flex items-center gap-4">
-          <button data-play-pause data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus:outline-none">
+          <button data-play-pause data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/70">
             <svg data-icon-play class="size-6 transition-colors duration-200" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
             <svg data-icon-pause class="size-6 transition-colors duration-200 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="9" y1="6" x2="9" y2="18" /><line x1="15" y1="6" x2="15" y2="18" /></svg>
           </button>
@@ -59,7 +59,7 @@
                 </div>
               </div>
             </div>
-            <button data-mute data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus:outline-none">
+            <button data-mute data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/70">
               <svg data-icon-volume class="size-6 transition-colors duration-200" viewBox="0 0 24 24" aria-hidden="true"><polygon points="5 10 9 10 13 6 13 18 9 14 5 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></polygon><path d="M16 9c1.3 1.3 1.3 4.7 0 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M18.8 6.5c3 2.9 3 8.1 0 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"></path></svg>
               <svg data-icon-muted class="size-6 transition-colors duration-200 hidden" viewBox="0 0 24 24" aria-hidden="true"><polygon points="5 10 9 10 13 6 13 18 9 14 5 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></polygon><line x1="16" y1="9" x2="21" y2="15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="21" y1="9" x2="16" y2="15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg>
             </button>
@@ -69,7 +69,7 @@
         <div class="flex items-center gap-4">
           <ui-dropdown class="relative block" data-align="right" data-position="top">
             <div data-trigger class="cursor-pointer">
-                <button data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus:outline-none" aria-label="Settings">
+                <button data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/70" aria-label="Settings">
                 <svg class="size-6 transition-transform duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
               </button>
             </div>
@@ -113,7 +113,7 @@
             </div>
           </ui-dropdown>
           
-          <button data-fullscreen data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus:outline-none">
+          <button data-fullscreen data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/70">
             <svg class="size-6 transition-colors duration-200" viewBox="0 0 240 240" aria-hidden="true"><path d="M143.7,53.9c-1.9-1.9-1.3-4,1.4-4.4l50.6-8.4c1.8-0.5,3.7,0.6,4.2,2.4c0.2,0.6,0.2,1.2,0,1.7l-8.4,50.6c-0.4,2.7-2.4,3.4-4.4,1.4l-14.5-14.5l-28.2,28.2l-14.3-14.3l28.2-28.2L143.7,53.9z M44.2,200.9l50.6-8.4c2.7-0.4,3.4-2.4,1.4-4.4l-14.5-14.5l28.2-28.2l-14.3-14.3l-28.2,28.2l-14.5-14.5c-1.9-1.9-4-1.3-4.4,1.4l-8.4,50.6c-0.5,1.8,0.6,3.6,2.4,4.2C43,201,43.6,201,44.2,200.9L44.2,200.9z" fill="currentColor"></path></svg>
           </button>
         </div>
diff --git a/templates/components/watch_order.gohtml b/templates/components/watch_order.gohtml
index 9d686f5..3141f0c 100644
--- a/templates/components/watch_order.gohtml
+++ b/templates/components/watch_order.gohtml
@@ -1,16 +1,16 @@
 {{define "watch_order"}}
 <div class="space-y-4">
-  <h2 class="text-lg font-normal text-foreground">Watch Order</h2>
+  <h2 class="text-base font-normal text-foreground">Watch Order</h2>
   <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
     {{range .Relations}}
       <div class="group relative">
         {{template "anime_card" dict "Anime" .Anime "WithActions" true "Compact" true "HasTopBadge" true "IsWatchlist" (index $.WatchlistMap .Anime.MalID)}}
         {{if eq .Anime.MalID $.AnimeID}}
-          <div class="bg-accent absolute -top-2 -right-2 z-20 px-2 py-0.5 text-[10px] font-bold text-on-accent shadow-md">
+          <div class="bg-accent absolute -top-2 -right-2 z-20 px-2 py-0.5 text-[10px] font-medium text-on-accent">
             CURRENT
           </div>
         {{end}}
-        <div class="absolute top-2 left-2 z-20 bg-black/80 px-2 py-0.5 text-[10px] font-medium text-white backdrop-blur-md">
+        <div class="absolute top-2 left-2 z-20 bg-black/60 px-2 py-0.5 text-[10px] font-medium text-white backdrop-blur-sm">
           {{.Relation}}
         </div>
       </div>
diff --git a/templates/components/watchlist_actions.gohtml b/templates/components/watchlist_actions.gohtml
index 21f9c12..17fcac9 100644
--- a/templates/components/watchlist_actions.gohtml
+++ b/templates/components/watchlist_actions.gohtml
@@ -6,7 +6,7 @@
 <div class="flex gap-2">
   <ui-dropdown class="relative block" data-align="left" data-width="min-w-[160px]">
     <div data-trigger class="cursor-pointer">
-      <button type="button" class="bg-background-button hover:bg-background-button-hover flex items-center justify-between gap-3 px-4 py-2.5 text-sm font-medium text-foreground transition-colors disabled:opacity-50">
+      <button type="button" class="!rounded-none bg-background-button hover:bg-background-button-hover flex items-center justify-between gap-3 px-4 py-2.5 text-sm font-normal text-foreground transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
         <span id="watchlist-status-display-{{$anime.MalID}}">
           {{if $status}}
             {{if eq $status "watching"}}Watching{{end}}
@@ -30,9 +30,9 @@
           data-watchlist-status="watching"
           data-watchlist-display="Watching"
           data-watchlist-title="{{$anime.DisplayTitle}}"
-          class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10 disabled:opacity-50"
+          class="flex w-full items-center px-5 py-2.5 transition-colors outline-none hover:bg-surface-hover focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50"
         >
-          <span class="font-medium text-sm text-foreground">Watching</span>
+          <span class="font-normal text-sm text-foreground">Watching</span>
         </button>
         <button
           data-unstyled-button
@@ -41,9 +41,9 @@
           data-watchlist-status="completed"
           data-watchlist-display="Completed"
           data-watchlist-title="{{$anime.DisplayTitle}}"
-          class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10 disabled:opacity-50"
+          class="flex w-full items-center px-5 py-2.5 transition-colors outline-none hover:bg-surface-hover focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50"
         >
-          <span class="font-medium text-sm text-foreground">Completed</span>
+          <span class="font-normal text-sm text-foreground">Completed</span>
         </button>
         <button
           data-unstyled-button
@@ -52,9 +52,9 @@
           data-watchlist-status="plan_to_watch"
           data-watchlist-display="Plan to Watch"
           data-watchlist-title="{{$anime.DisplayTitle}}"
-          class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10 disabled:opacity-50"
+          class="flex w-full items-center px-5 py-2.5 transition-colors outline-none hover:bg-surface-hover focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50"
         >
-          <span class="font-medium text-sm text-foreground">Plan to Watch</span>
+          <span class="font-normal text-sm text-foreground">Plan to Watch</span>
         </button>
         <button
           data-unstyled-button
@@ -63,9 +63,9 @@
           data-watchlist-status="dropped"
           data-watchlist-display="Dropped"
           data-watchlist-title="{{$anime.DisplayTitle}}"
-          class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10 disabled:opacity-50"
+          class="flex w-full items-center px-5 py-2.5 transition-colors outline-none hover:bg-surface-hover focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50"
         >
-          <span class="font-medium text-sm text-foreground">Dropped</span>
+          <span class="font-normal text-sm text-foreground">Dropped</span>
         </button>
         
         {{template "watchlist_remove_button" dict
@@ -73,14 +73,14 @@
           "Title" $anime.DisplayTitle
           "ContainerClass" "hidden"
           "DividerClass" "my-1"
-          "ButtonClass" "flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-red-500/10 focus:bg-red-500/10"
-          "SpanClass" "font-medium text-sm text-red-500 text-left whitespace-nowrap"
+          "ButtonClass" "flex w-full items-center px-5 py-2.5 transition-colors outline-none hover:bg-red-500/10 focus-visible:ring-1 focus-visible:ring-accent"
+          "SpanClass" "font-normal text-sm text-red-500 text-left whitespace-nowrap"
         }}
       </div>
     </div>
   </ui-dropdown>
 
-  <a href="/anime/{{$anime.MalID}}/watch{{if gt .ContinueWatchingEp 0}}?ep={{.ContinueWatchingEp}}{{end}}" class="inline-flex items-center justify-center bg-background-button hover:bg-background-button-hover px-5 py-2.5 text-sm font-medium text-foreground transition-colors">
+  <a href="/anime/{{$anime.MalID}}/watch{{if gt .ContinueWatchingEp 0}}?ep={{.ContinueWatchingEp}}{{end}}" class="!rounded-none inline-flex items-center justify-center bg-background-button hover:bg-background-button-hover px-5 py-2.5 text-sm font-normal text-foreground transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
     {{if gt .ContinueWatchingEp 0}}Continue Watching Ep {{.ContinueWatchingEp}}{{else}}Watch Now{{end}}
   </a>
 </div>