From 7d2852552bb28dbde262d09a60fae6c5151cdf12 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Mon, 27 Nov 2023 14:33:50 +0300
Subject: [PATCH] refactor styles for header in mobile

---
 .../PagesStyles/adaptive-pages/homemobile.css | 40 ++++++++++++++-----
 .../pages/adaptive-pages/HomemobilePage.vue   | 13 ++++--
 2 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css b/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
index 20faa10..5ca53db 100644
--- a/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
+++ b/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
@@ -41,10 +41,6 @@
     justify-content: space-between;
 }
 
-.header-mobile__nav {
-    display: flex;
-}
-
 .header-mobile__logo {
     padding: 23px 0 11px 17px;
 }
@@ -53,19 +49,43 @@
     width: 170px;
 }
 
-.balance-mobile__card {
-    align-self: start;
+.header-mobile__balance--content {
     display: flex;
+    align-items: center;
 }
 
-.card-balance h2 {
+.header-mobile__card {
     border-radius: 7px;
     background: #22252F;
     box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.card-display h2 {
     display: flex;
-    text-align: center;
-    align-items: center;
-    font-size: 0.813em;
+    align-items: flex-end;
+    padding: 6px 15px 6px 5px;
+}
+
+.card-img img {
+    width: 100%;
+    height: 100%;
+}
+
+.card-text {
+    color: #FFF;
+    font-weight: 700;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 13px;
+}
+
+.btn-card img {
+    width: 40px;
+    height: 40px;
+}
+
+.btn-card__margin {
+    margin-left: -10px;
 }
 
 /* /Header */
\ No newline at end of file
diff --git a/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue b/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
index 020daf7..7320fc7 100644
--- a/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
+++ b/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
@@ -1,3 +1,4 @@
+<link rel="stylesheet" href="../../assets/css/PagesStyles/adaptive-pages/homemobile.css">
 <template>
   <div class="content-grid__mobile-home">
     <header class="header-mobile">
@@ -5,10 +6,14 @@
         <div class="header-mobile__logo">
           <img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now">
         </div>
-        <div class="header-mobile__nav">
-          <div class="balance-mobile__card card-balance">
-            <h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
-            <a href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a>
+        <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>
           </div>
         </div>
       </div>