From 2c6be517c1455d38e7e716eb8286246496fb9962 Mon Sep 17 00:00:00 2001
From: Jan K9f <jan@kjan.email>
Date: Wed, 23 Apr 2025 14:20:02 +0200
Subject: [PATCH] style: update lootbox component styles and remove debug code

---
 .../lootbox-opening.component.css              | 18 +++++++++---------
 .../lootbox-opening.component.html             | 14 +++++++-------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.css b/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.css
index 71b8464..5684ca3 100644
--- a/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.css
+++ b/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.css
@@ -71,12 +71,12 @@ body {
   top: 50%;
   left: 50%; /* Back to center - we'll adjust the animation instead */
   transform: translate(-50%, -50%); /* Center precisely */
-  width: 4px;
+  width: 6px;
   height: 100%;
-  background: #ff0000; /* Bright red for debugging */
+  background: #facc15;
   box-shadow:
-    0 0 10px #ff0000,
-    0 0 15px rgba(255, 0, 0, 0.5);
+    0 0 10px #facc15,
+    0 0 15px rgba(255, 255, 255, 0.5);
   z-index: 3;
   animation: indicator-pulse 1.5s ease-in-out 10s infinite alternate;
 }
@@ -85,14 +85,14 @@ body {
   0% {
     opacity: 0.6;
     box-shadow:
-      0 0 10px #ff0000,
-      0 0 15px rgba(255, 0, 0, 0.3);
+      0 0 10px #facc15,
+      0 0 15px rgba(255, 255, 255, 0.3);
   }
   100% {
     opacity: 1;
     box-shadow:
-      0 0 15px #ff0000,
-      0 0 20px rgba(255, 0, 0, 0.7);
+      0 0 15px #facc15,
+      0 0 20px rgba(255, 255, 255, 0.7);
   }
 }
 
@@ -175,7 +175,7 @@ body {
 .case-item-won .case-item-inner {
   box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
   background: linear-gradient(to right, #232c43, #2a3354, #232c43);
-  border: 3px solid #ff0000 !important; /* Bright red border for debugging */
+  border: 2px solid #facc15; /* Gold border for winning item */
 }
 
 /* Specific ID for the winning item to ensure it's visible */
diff --git a/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.html b/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.html
index 007364d..fef38af 100644
--- a/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.html
+++ b/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.html
@@ -63,18 +63,18 @@
                  class="case-item"
                  [class.case-item-won]="isWonReward(reward)"
                  [id]="isWonReward(reward) ? 'winning-item' : ''"
-                 [style.border]="isCenterItem(i) ? '3px solid #00ff00' : 'none'"
+                 [style.border]="'none'"
                  [style.animation-delay]="isWonReward(reward) ? '10s' : (8 + (i % 50) * 0.04) + 's'">
               <div class="case-item-inner" 
                    [ngClass]="getRarityClass(reward.probability)"
-                   [style.border]="isCenterItem(i) ? '5px solid lime' : ''"
-                   [style.background-color]="isCenterItem(i) ? '#004400' : ''"
-                   [style.transform]="isCenterItem(i) ? 'scale(1.1)' : ''"
-                   [style.box-shadow]="isCenterItem(i) ? '0 0 15px lime' : ''"
+                   [style.border]="''"
+                   [style.background-color]="''"
+                   [style.transform]="''"
+                   [style.box-shadow]="''"
                    [style.margin-left]="isWonReward(reward) ? getCenterOffset() : '0'"
                    [style.transition-delay]="(i % 20) * 0.01 + 's'">
-                <div class="amount" [style.color]="isCenterItem(i) ? '#00ff00' : ''">{{ reward.value | currency:'EUR' }}</div>
-                <div class="rarity" [style.color]="isCenterItem(i) ? '#00ff00' : ''">{{ (reward.probability * 100) | number:'1.0-0' }}%</div>
+                <div class="amount">{{ reward.value | currency:'EUR' }}</div>
+                <div class="rarity">{{ (reward.probability * 100) | number:'1.0-0' }}%</div>
               </div>
             </div>