From d842d397a46d0e0388a65b3a46a183b991edf333 Mon Sep 17 00:00:00 2001
From: Adrien Poly <adrienpoly@gmail.com>
Date: Fri, 8 Aug 2025 09:52:05 +0200
Subject: [PATCH 1/2] style a bit the stamp

---
 app/views/shared/_stickers_display.html.erb | 42 ++++++++++++++++-----
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/app/views/shared/_stickers_display.html.erb b/app/views/shared/_stickers_display.html.erb
index 43d753562..dc27d14a1 100644
--- a/app/views/shared/_stickers_display.html.erb
+++ b/app/views/shared/_stickers_display.html.erb
@@ -1,14 +1,36 @@
-<div class="bg-black rounded-2xl">
-  <div class="flex w-full items-center justify-center bg-black p-12">
-    <div class="mx-auto w-full overflow-hidden rounded-[40px] bg-gradient-to-b from-gray-300 via-gray-600 to-gray-600 p-[4px]">
-      <div class="back flex overflow-hidden aspect-[16/11] w-full items-center justify-center rounded-[40px] bg-gradient-to-b from-gray-400 via-gray-500 to-gray-600">
-        <div class="grid grid-cols-3 gap-[5vw] w-full h-full p-12">
-          <% events.shuffle.each do |event| %>
-            <%= link_to event, class: "max-w-[10vw]", style: "transform: rotate(#{(-20...20).to_a.sample}deg) translateY(#{(0...10).to_a.sample}vw) translateX(#{(0...10).to_a.sample}vh) scale(#{100 + (-10...10).to_a.sample}%)" do %>
-              <%= image_tag event.sticker_image_path, class: "transition transition-transform hover:scale-105" %>
+<div class="bg-gray-50 min-h-screen py-8">
+  <div class="max-w-2xl">
+    <!-- Header with stamp count -->
+    <div class="mb-4">
+      <h2 class="text-lg font-semibold text-gray-800">
+        <%= events.count %> STAMPS COLLECTED
+      </h2>
+    </div>
+
+    <!-- Stamps Grid -->
+    <div class="mx-auto w-full overflow-hidden rounded-[40px] bg-gradient-to-b from-gray-600 via-gray-600 to-gray-400 p-[12px]">
+      <div class="flex flex-wrap gap-4 p-4 justify-evenly back verflow-hidden aspect-[16/11] w-full items-center rounded-[32px] bg-white">
+        <% events.each_with_index do |event, index| %>
+          <div class="aspect-square flex items-center justify-center h-24 sm:h-32 md:h-40 lg:h-48">
+            <%= link_to event, class: "block h-full w-full" do %>
+              <div class="w-full h-full border-4 border-dotted border-gray-300 rounded-xl p-2 bg-white transition-transform duration-200 hover:scale-105">
+                <div class="w-full h-full rounded-xl bg-white flex items-center justify-center relative overflow-hidden">
+                  <%= image_tag event.sticker_image_path, class: "w-4/5 h-4/5 object-contain", style: "transform: rotate(#{(-10..10).to_a.sample}deg)" %>
+                </div>
+              </div>
             <% end %>
-          <% end %>
-        </div>
+          </div>
+        <% end %>
+
+        <!-- Fill remaining slots with empty stamps -->
+        <% (9 - events.count).times do %>
+          <div class="aspect-square flex items-center justify-center h-24 sm:h-32 md:h-40 lg:h-48">
+            <div class="w-full h-full border-4 border-dotted border-gray-300 rounded-xl p-2 bg-white">
+              <div class="w-full h-full rounded-xl bg-gray-100 flex items-center justify-center relative overflow-hidden">
+              </div>
+            </div>
+          </div>
+        <% end %>
       </div>
     </div>
   </div>

From e4f5062ffc23e4180abec0153b41ee90e28df2b1 Mon Sep 17 00:00:00 2001
From: Adrien Poly <adrienpoly@gmail.com>
Date: Fri, 8 Aug 2025 09:54:02 +0200
Subject: [PATCH 2/2] remove grey background for empty slot

---
 app/views/shared/_stickers_display.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/shared/_stickers_display.html.erb b/app/views/shared/_stickers_display.html.erb
index dc27d14a1..dcf699e61 100644
--- a/app/views/shared/_stickers_display.html.erb
+++ b/app/views/shared/_stickers_display.html.erb
@@ -26,7 +26,7 @@
         <% (9 - events.count).times do %>
           <div class="aspect-square flex items-center justify-center h-24 sm:h-32 md:h-40 lg:h-48">
             <div class="w-full h-full border-4 border-dotted border-gray-300 rounded-xl p-2 bg-white">
-              <div class="w-full h-full rounded-xl bg-gray-100 flex items-center justify-center relative overflow-hidden">
+              <div class="w-full h-full rounded-xl flex items-center justify-center relative overflow-hidden">
               </div>
             </div>
           </div>