From 41734a0e9a0ea04bc4f93329e90b11edb3ced859 Mon Sep 17 00:00:00 2001
From: Hepatica <danil.tkachenko@getmore.cz>
Date: Tue, 2 Apr 2024 00:36:22 +0200
Subject: [PATCH] Add styles for displaying red green black labels on display
 active member in game

---
 .../css/PagesStyles/games-pages/double.css    | 83 ++++++++++++-------
 .../src/pages/games-pages/DoublePage.vue      | 27 +++++-
 2 files changed, 75 insertions(+), 35 deletions(-)

diff --git a/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css b/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css
index 0793d64..868918e 100644
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css
@@ -18,11 +18,40 @@
 }
 
 .double-members-ingame-red {
-    background: linear-gradient(to bottom, #FF416C, #FF4B2B);
+    background: linear-gradient(to bottom right,
+            #A9373C,
+            #1C2133 20%);
+    z-index: 1;
+    border: 2px solid #3B4260;
+    border-radius: 15px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin-top: 1vh;
+    width: 100%;
+    height: 94%;
+    padding: 2vh;
+}
+
+.double-members-ingame-green {
+    background: linear-gradient(to bottom right,
+            #345D3B,
+            #1C2133 20%);
+    z-index: 1;
+    border: 2px solid #3B4260;
+    border-radius: 15px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin-top: 1vh;
+    width: 100%;
+    height: 94%;
+    padding: 2vh;
+}
+
+.double-members-ingame-black {
+    background: linear-gradient(to bottom right,
+            #1B1A1A,
+            #1C2133 26%);
     z-index: 1;
     border: 2px solid #3B4260;
     border-radius: 15px;
-    /* background: #1C2133; */
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     margin-top: 1vh;
     margin-top: 1vh;
@@ -31,24 +60,12 @@
     padding: 2vh;
 }
 
-.double-members-ingame-green {
-    z-index: 1;
-    border: 2px solid #3B4260;
-    border-radius: 15px;
-    background: #1C2133;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    margin-top: 1vh;
-    margin-top: 1vh;
-    width: 100%;
-    height: 94%;
-}
-
 .double-members-flex-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: white;
-    /* Assuming the text is white */
+    margin-bottom: 2vh;
 }
 
 .double-red-box {
@@ -60,10 +77,28 @@
     color: #B64848;
 }
 
+.double-white-box {
+    display: flex;
+    align-items: baseline;
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: FEEBEB;
+}
+
+.double-green-box {
+    display: flex;
+    align-items: baseline;
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #5EA25C;
+}
+
 .double-number-color {
     color: #56629A;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     font-family: Montserrat;
 }
 
@@ -82,24 +117,8 @@
 .double-user-icon .double-user-icon-span {
     background-image: url('../../../icons-games/double-game/MembersInGame.png');
     width: 20px;
-    /* Replace with actual size of your icon */
     height: 20px;
-    /* Replace with actual size of your icon */
     margin-right: 5px;
-    /* Spacing between icon and number 6 */
-}
-
-
-.double-members-ingame-black {
-    z-index: 1;
-    border: 2px solid #3B4260;
-    border-radius: 15px;
-    background: #1C2133;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    margin-top: 1vh;
-    margin-top: 1vh;
-    width: 100%;
-    height: 94%;
 }
 
 .double-game {
diff --git a/luckydiamond/src/pages/games-pages/DoublePage.vue b/luckydiamond/src/pages/games-pages/DoublePage.vue
index 7ad8981..8c38a16 100644
--- a/luckydiamond/src/pages/games-pages/DoublePage.vue
+++ b/luckydiamond/src/pages/games-pages/DoublePage.vue
@@ -118,17 +118,31 @@
                       RED X2
                     </div>
                     <div class="double-user-icon">
-                      <span class="double-user-icon-span"></span> <span class="double-number-color">6</span>
+                      <span class="double-user-icon-span"></span> <span class="double-number-color">0</span>
                     </div>
                   </div>
                   <h1>fds</h1>
                   <h1>fds</h1>
                   <h1>fds</h1>
+                  <h1>fds</h1>
+                  <h1>fds</h1>
+                  <h1>fds</h1>
+                  <h1>fds</h1>
+                  <h1>fds</h1>
+                  <h1>fds</h1>
+                  <h1>fds</h1>
                 </div>
               </div>
               <div class="col-md-4" style="padding-left: 0px">
                 <div class="double-members-ingame-green">
-                  <h1>Red X2</h1>
+                  <div class="double-members-flex-container">
+                    <div class="double-green-box">
+                      GREEN X20
+                    </div>
+                    <div class="double-user-icon">
+                      <span class="double-user-icon-span"></span> <span class="double-number-color">0</span>
+                    </div>
+                  </div>
                   <h1>fds</h1>
                   <h1>fds</h1>
                   <h1>fds</h1>
@@ -136,7 +150,14 @@
               </div>
               <div class="col-md-4" style="padding-left: 0px; padding-right: 0px">
                 <div class="double-members-ingame-black">
-                  <h1>Red X2</h1>
+                  <div class="double-members-flex-container">
+                    <div class="double-white-box">
+                      BLACK X2
+                    </div>
+                    <div class="double-user-icon">
+                      <span class="double-user-icon-span"></span> <span class="double-number-color">0</span>
+                    </div>
+                  </div>
                   <h1>fds</h1>
                   <h1>fds</h1>
                   <h1>fds</h1>