From c5363e5a81a99a7fb556ba5e4cef13bbb9c704f5 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Fri, 15 Dec 2023 20:56:59 +0300
Subject: [PATCH] refactor header-mobile

---
 .../AdaptiveStyles/headermobile.css           | 28 +++++++++++++++++--
 .../home-adaptive/icon-wallet.svg             |  3 ++
 .../HeaderMobileComponent.vue                 | 19 ++++++++-----
 3 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-wallet.svg

diff --git a/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css b/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css
index 5d5a409..6c3260f 100644
--- a/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css
@@ -22,6 +22,11 @@
     width: 85%;
 }
 
+.header-mobile__end {
+    display: flex;
+    align-items: center;
+}
+
 .header-mobile__balance--content {
     display: flex;
     align-items: center;
@@ -36,7 +41,7 @@
 .card-display h2 {
     display: flex;
     align-items: flex-end;
-    padding: 8% 15px 8% 7%;
+    padding: 13% 15px 13% 6%;
 }
 
 .card-img img {
@@ -52,13 +57,32 @@
     font-size: 13px;
 }
 
+.btn-card {
+    border-radius: 13px;
+    background: #EF4444;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    text-align: center;
+    padding: 4px;
+}
+
 .btn-card img {
+
     width: 90%;
     height: 40px;
 }
 
 .btn-card__margin {
-    margin-left: -8%;
+    margin-left: -1%;
+}
+
+.header-mobile__user-icon {
+    display: flex;
+    align-items: center;
+}
+
+.user-icon img {
+    width: 70%;
+    margin-left: 15px;
 }
 
 /* /Header */
\ No newline at end of file
diff --git a/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-wallet.svg b/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-wallet.svg
new file mode 100644
index 0000000..73fedc2
--- /dev/null
+++ b/luckydiamond/src/assets/icons-adaptive/home-adaptive/icon-wallet.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M36.0312 8.57143H6.25C5.5625 8.57143 5 7.92857 5 7.14286C5 6.35714 5.5625 5.71429 6.25 5.71429H36.25C36.9375 5.71429 37.5 5.07143 37.5 4.28571C37.5 1.91964 35.8203 0 33.75 0H5C2.24219 0 0 2.5625 0 5.71429V34.2857C0 37.4464 2.24219 40 5 40H36.0312C38.2188 40 40 38.0804 40 35.7143V12.8571C40 10.4911 38.2188 8.57143 36.0312 8.57143ZM32.5 27.1429C31.1172 27.1429 30 25.8661 30 24.2857C30 22.7054 31.1172 21.4286 32.5 21.4286C33.8828 21.4286 35 22.7054 35 24.2857C35 25.8661 33.8828 27.1429 32.5 27.1429Z" fill="white"/>
+</svg>
diff --git a/luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue b/luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue
index fc072ab..9ba2ed6 100644
--- a/luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue
+++ b/luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue
@@ -4,15 +4,20 @@
       <div class="header-mobile__logo">
         <img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now">
       </div>
-      <div class="header-mobile__balance">
-        <div class="header-mobile__balance--content">
-          <div class="header-mobile__card card-display card-text card-img">
-            <h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
-          </div>
-          <div class="header-mobile__btn--balance btn-card btn-card__margin">
-            <a href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a>
+      <div class="header-mobile__end">
+        <div class="header-mobile__balance">
+          <div class="header-mobile__balance--content">
+            <div class="header-mobile__card card-display card-text card-img">
+              <h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
+            </div>
+            <div class="header-mobile__btn--balance btn-card btn-card__margin">
+              <img src="@/assets/icons-adaptive/home-adaptive/icon-wallet.svg">
+            </div>
           </div>
         </div>
+        <div class="header-mobile__user-icon user-icon">
+          <img src="@/assets/icons-test/person-icon-profile-userinfo.png">
+        </div>
       </div>
     </div>
   </header>