From d62cdc798688f689992714a1b404d9b8c13d35ff Mon Sep 17 00:00:00 2001
From: Max Richter <git@max-richter.dev>
Date: Sat, 25 Oct 2025 14:37:48 +0200
Subject: [PATCH] fix: make design of imag egallery better

---
 src/components/ImageGallery.svelte | 50 +++++++++++++++++++++---------
 src/components/ImageSlider.svelte  |  4 +--
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/src/components/ImageGallery.svelte b/src/components/ImageGallery.svelte
index 09459e3..ea5efee 100644
--- a/src/components/ImageGallery.svelte
+++ b/src/components/ImageGallery.svelte
@@ -218,7 +218,9 @@
       {#each images as _, i}
         <button
           aria-label={`Image ${i + 1}`}
+          class="rounded bg-light"
           class:active={currentIndex === i}
+          class:bg-light={currentIndex === i}
           on:click={() => {
             currentIndex = i;
           }}></button>
@@ -226,9 +228,24 @@
     </div>
   {/if}
 
-  <button class="left" on:click={() => addIndex(-1)}>&lt;</button>
-  <button class="right" on:click={() => addIndex(+1)}>&gt;</button>
-  <button class="close" on:click={() => setIndex(-1)}>X</button>
+  <button
+    class="left flex-1 bg-light"
+    aria-label="previous image"
+    on:click={() => addIndex(- 1)}>
+    <span class="i-tabler-arrow-left" />
+  </button>
+  <button
+    class="right flex-1 bg-light"
+    aria-label="next image"
+    on:click={() => addIndex( + 1)}>
+    <span class="i-tabler-arrow-right" />
+  </button>
+  <button
+    class="close bg-light"
+    aria-label="close gallery"
+    on:click={() => setIndex(-1)}>
+    <span class="i-tabler-x" />
+  </button>
 
   {#if currentIndex > -1}
     <div
@@ -278,6 +295,7 @@
     transform-origin: left;
     transition: transform 0.3s ease;
   }
+
   .gallery-wrapper {
     position: fixed;
     z-index: 199;
@@ -375,27 +393,31 @@
   }
 
   .gallery-wrapper > button {
-    background: var(--neutral-800);
-    color: white;
-    border-radius: 0px;
-    border: none;
-    padding: 10px 20px;
+    border-radius: 6px;
+    padding: 0;
     position: fixed;
     z-index: 200;
+    font-size: 1.5rem;
+    width: 44px;
+    height: 44px;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    transition: background-color 0.2s;
   }
 
   .close {
-    top: 0;
-    right: 0;
+    top: 10px;
+    right: 10px;
   }
 
   .left {
-    bottom: 0;
-    left: 0;
+    bottom: 10px;
+    left: 10px;
   }
 
   .right {
-    bottom: 0;
-    right: 0;
+    bottom: 10px;
+    right: 10px;
   }
 </style>
diff --git a/src/components/ImageSlider.svelte b/src/components/ImageSlider.svelte
index fdfe9af..78fc853 100644
--- a/src/components/ImageSlider.svelte
+++ b/src/components/ImageSlider.svelte
@@ -67,11 +67,11 @@
         <button
           class="flex-1 i-tabler-arrow-left"
           aria-label="previous image"
-          on:click={() => setIndex(index - 1)} />
+          on:click={() => setIndex(index - 1)}></button>
         <button
           class="flex-1 i-tabler-arrow-right"
           aria-label="next image"
-          on:click={() => setIndex(index + 1)} />
+          on:click={() => setIndex(index + 1)}></button>
       </div>
     </div>
   {/if}