From a96636635a52a763c1058a2509b59b9f1908d610 Mon Sep 17 00:00:00 2001
From: Hepatica <danil.tkachenko@getmore.cz>
Date: Mon, 1 Apr 2024 23:57:52 +0200
Subject: [PATCH] Add main styles for double members elementsz

---
 .../css/PagesStyles/games-pages/double.css    |  51 +++++++++++++++++-
 .../icons-games/double-game/MembersInGame.png | Bin 0 -> 690 bytes
 .../src/pages/games-pages/DoublePage.vue      |  15 ++++--
 3 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 luckydiamond/src/assets/icons-games/double-game/MembersInGame.png

diff --git a/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css b/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css
index e216984..0793d64 100644
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css
@@ -18,15 +18,17 @@
 }
 
 .double-members-ingame-red {
+    background: linear-gradient(to bottom, #FF416C, #FF4B2B);
     z-index: 1;
     border: 2px solid #3B4260;
     border-radius: 15px;
-    background: #1C2133;
+    /* background: #1C2133; */
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     margin-top: 1vh;
     margin-top: 1vh;
     width: 100%;
     height: 94%;
+    padding: 2vh;
 }
 
 .double-members-ingame-green {
@@ -41,6 +43,53 @@
     height: 94%;
 }
 
+.double-members-flex-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+    /* Assuming the text is white */
+}
+
+.double-red-box {
+    display: flex;
+    align-items: baseline;
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #B64848;
+}
+
+.double-number-color {
+    color: #56629A;
+    font-weight: bold;
+    font-size: 20px;
+    font-family: Montserrat;
+}
+
+.double-red-box span {
+    font-size: larger;
+    /* Or any specific size */
+    margin-left: 5px;
+    /* Spacing between RED and X2 */
+}
+
+.double-user-icon {
+    display: flex;
+    align-items: center;
+}
+
+.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;
diff --git a/luckydiamond/src/assets/icons-games/double-game/MembersInGame.png b/luckydiamond/src/assets/icons-games/double-game/MembersInGame.png
new file mode 100644
index 0000000000000000000000000000000000000000..abd37cd1fb1a24f9150aa01cb57912bf9624790e
GIT binary patch
literal 690
zcmV;j0!{siP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0!K+iK~#7F)l@xb
zQ&AK?=iHZ{szbUsI7lTp_ydBVF8(xg5o(Ex2u(A@L=d_wwp|=Vp;4#=Yx_F1plBK_
zh=XA4q6HDfNvS1^bP|dn&EGr6lawScuW9XQ&+_j5?svZPopUb_;C~PF0{w#z!bHJC
zEY5PyP8B*O#fGOtYro5<0|pCEA1A(VDL4?%j3CHp^N=Ni<X^2yB~{yt$hgnIeimG6
za0GBPJ9TYrlVE@BQLiC<>(aNGWsVSEDa&fX5>@4kfHc@ZDgdWmP9;Cq*3<xrpvUc2
z9GTPt_uIv4j_4K&+HTAze5|R{Trd>eBu4nD?HmVB=tz!Kp`Gi9^<|Ubb32t+a&s1H
zt4CXV=M_|o?*UrfAmE*xo%rm^YekiV;|5FL1mLVP1B`Nm1Q&F@At3V05g0NS9%Tp8
z0<yd($g}MoXk1QY4su0ibl2;0l6NF<$@ix$yw{0n`yqy4uF|!Rfig{^z(9*Db6V(T
z?U~gbs@S}WopjA<%t3l%pfoT0<b>X6H`d!JrA?7Ol}#lc5bLWJ8QDm{D+b_zt|AzX
zO`H>=MVD(^*qJ~wOVHurH-}%9GmeF~mC)B3nK@5P7<Lmy@S%#$ZYNgfS#XzF?zu5T
z)i8O9EdCY!9EN{{wtK<q;vZg|z`>Pvs2GABMsb}?n;C{YWoMF$dI?vx<bnvi4wAnN
zJC5L5El2%61FrVfZn@)}qC=S{f)d|WOCbGXIyvlxw;X&_e-=#8-SLoRHEUo00J}2&
Y0#HQe3yzJ4WdHyG07*qoM6N<$f}67|ng9R*

literal 0
HcmV?d00001

diff --git a/luckydiamond/src/pages/games-pages/DoublePage.vue b/luckydiamond/src/pages/games-pages/DoublePage.vue
index ce2cb5d..7ad8981 100644
--- a/luckydiamond/src/pages/games-pages/DoublePage.vue
+++ b/luckydiamond/src/pages/games-pages/DoublePage.vue
@@ -113,13 +113,20 @@
               </div>
               <div class="col-md-4" style="padding-left: 0px">
                 <div class="double-members-ingame-red">
-                  <h1>Red X2</h1>
+                  <div class="double-members-flex-container">
+                    <div class="double-red-box">
+                      RED X2
+                    </div>
+                    <div class="double-user-icon">
+                      <span class="double-user-icon-span"></span> <span class="double-number-color">6</span>
+                    </div>
+                  </div>
                   <h1>fds</h1>
                   <h1>fds</h1>
                   <h1>fds</h1>
                 </div>
               </div>
-              <div class="col-md-4">
+              <div class="col-md-4" style="padding-left: 0px">
                 <div class="double-members-ingame-green">
                   <h1>Red X2</h1>
                   <h1>fds</h1>
@@ -127,7 +134,7 @@
                   <h1>fds</h1>
                 </div>
               </div>
-              <div class="col-md-4">
+              <div class="col-md-4" style="padding-left: 0px; padding-right: 0px">
                 <div class="double-members-ingame-black">
                   <h1>Red X2</h1>
                   <h1>fds</h1>
@@ -135,8 +142,6 @@
                   <h1>fds</h1>
                 </div>
               </div>
-
-              <!-- </div> -->
             </div>
           </div>
         </div>