From a1193ea87f2bb5c3946cd160fa6ecdd05efacdc1 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sat, 1 Mar 2025 16:26:36 +0100
Subject: [PATCH] Update WaitingRoom design

---
 client/src/pages/WaitingRoom/styles.sass | 93 ++++++++++++++++--------
 1 file changed, 62 insertions(+), 31 deletions(-)

diff --git a/client/src/pages/WaitingRoom/styles.sass b/client/src/pages/WaitingRoom/styles.sass
index 8afd0e6..10899d4 100644
--- a/client/src/pages/WaitingRoom/styles.sass
+++ b/client/src/pages/WaitingRoom/styles.sass
@@ -335,34 +335,51 @@
       margin: 0
 
 .playlist-section
-  background: rgba(255, 255, 255, 0.08)
+  background: rgba(20, 20, 30, 0.6)
   backdrop-filter: blur(10px)
-  border-radius: 20px
+  border-radius: 15px
   padding: 25px
   animation: float-up 0.8s ease-out
-  border: 1px solid rgba(255, 255, 255, 0.2)
+  border: 1px solid rgba(255, 255, 255, 0.1)
+  transition: all 0.3s ease
+  
+  &:hover
+    border-color: rgba(255, 255, 255, 0.2)
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3)
   
   .section-header
+    background: rgba(30, 30, 40, 0.95)
+    padding: 20px
+    border-radius: 12px
+    margin: -25px -25px 25px -25px
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1)
     text-align: center
-    margin-bottom: 20px
     
     h2
       margin: 0
-      font-size: 32px
+      font-size: 24px
       color: $white
-      background: linear-gradient(135deg, $yellow, $pink)
-      -webkit-background-clip: text
-      background-clip: text
-      -webkit-text-fill-color: transparent
+      display: flex
+      align-items: center
+      justify-content: center
+      gap: 10px
+      
+      &:before, &:after
+        content: ""
+        height: 1px
+        width: 50px
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)
     
     .vote-info
-      color: rgba(255, 255, 255, 0.7)
-      font-size: 16px
+      color: rgba(255, 255, 255, 0.6)
+      font-size: 14px
+      margin-top: 5px
 
   .playlists-grid
     display: grid
     grid-template-columns: repeat(3, 1fr)
-    gap: 25px
+    gap: 20px
+    padding: 5px
     
     @media (max-width: 1200px)
       grid-template-columns: repeat(2, 1fr)
@@ -371,31 +388,36 @@
       grid-template-columns: 1fr
 
 .playlist-card
-  background: rgba(20, 20, 30, 0.6)
-  border-radius: 15px
+  background: rgba(255, 255, 255, 0.05)
+  border-radius: 12px
   overflow: hidden
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
   cursor: pointer
-  border: 2px solid transparent
+  border: 1px solid rgba(255, 255, 255, 0.1)
   
   &:hover
     transform: translateY(-5px)
-    background: rgba(30, 30, 40, 0.8)
+    background: rgba(255, 255, 255, 0.08)
+    border-color: rgba(255, 255, 255, 0.2)
     
     .playlist-overlay
       opacity: 1
   
   &.selected
-    border-color: $yellow
-    box-shadow: 0 0 30px rgba($yellow, 0.3)
+    background: rgba($yellow, 0.1)
+    border-color: rgba($yellow, 0.3)
+    box-shadow: 0 0 30px rgba($yellow, 0.15)
     
     .playlist-overlay
       opacity: 1
-      background: rgba(0, 0, 0, 0.5)
+      background: rgba(0, 0, 0, 0.4)
       
     .your-vote
       transform: translateY(0)
       opacity: 1
+    
+    .playlist-info h3
+      color: $yellow
 
   .playlist-thumbnail
     position: relative
@@ -422,40 +444,48 @@
       align-items: center
       
       .vote-count
-        background: rgba(0, 0, 0, 0.8)
+        background: rgba(20, 20, 30, 0.85)
         padding: 12px 20px
-        border-radius: 25px
+        border-radius: 15px
         text-align: center
+        border: 1px solid rgba(255, 255, 255, 0.2)
+        backdrop-filter: blur(5px)
         
         .count
-          font-size: 32px
+          font-size: 28px
           font-weight: bold
           color: $yellow
           display: block
+          text-shadow: 0 0 10px rgba($yellow, 0.5)
         
         .vote-label
-          font-size: 14px
-          color: rgba(255, 255, 255, 0.8)
+          font-size: 12px
+          color: rgba(255, 255, 255, 0.7)
       
       .your-vote
         position: absolute
         bottom: 15px
         background: $yellow
-        color: #000
+        color: rgba(0, 0, 0, 0.8)
         padding: 8px 16px
         border-radius: 20px
         font-weight: bold
+        font-size: 12px
         transform: translateY(20px)
         opacity: 0
         transition: all 0.3s ease
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3)
 
   .playlist-info
-    padding: 20px
+    padding: 15px
+    background: rgba(20, 20, 30, 0.4)
+    border-top: 1px solid rgba(255, 255, 255, 0.05)
     
     h3
       color: $white
-      margin-bottom: 10px
-      font-size: 20px
+      margin-bottom: 8px
+      font-size: 18px
+      transition: color 0.3s ease
     
     .playlist-details
       display: flex
@@ -463,8 +493,8 @@
       gap: 8px
       
       span
-        color: rgba(255, 255, 255, 0.7)
-        font-size: 14px
+        color: rgba(255, 255, 255, 0.6)
+        font-size: 13px
       
       .vote-percentage-bar
         height: 4px
@@ -474,7 +504,8 @@
         
         .fill
           height: 100%
-          background: linear-gradient(90deg, $yellow, $pink)
+          background: linear-gradient(90deg, $yellow, rgba($yellow, 0.5))
+          box-shadow: 0 0 10px rgba($yellow, 0.3)
           transition: width 0.3s ease
 
 .bottom-section