fix: modified header styling for mobile devices (#782)

* fix: updated connect button

* fix: added separator at the top of assets page for mobile devices

* fix: updated header background for mobile devices

* fix: updated margin size inheader

Author: impelcrypto

src/components/assets/Assets.vue

@@ -1,5 +1,8 @@
 <template>
   <div v-if="!isLoading" class="wrapper--assets">
+    <div class="separator--top">
+      <div class="separator" />
+    </div>
     <div class="container--assets">
       <div>
         <span class="text--xl">

src/components/assets/styles/assets.scss

@@ -22,6 +22,14 @@
   }
 }
 
+.separator--top {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  @media (min-width: $lg) {
+    display: none;
+  }
+}
+
 .separator {
   border-bottom: 1px solid;
   border-image: linear-gradient(

src/components/header/ConnectButton.vue

@@ -4,7 +4,9 @@
       <slot />
     </astar-icon-base>
     <template v-if="width >= screenSize.sm">
-      {{ $t('connect') }}
+      <span class="text--connect">
+        {{ $t('connect') }}
+      </span>
     </template>
   </button>
 </template>
@@ -37,44 +39,83 @@ export default defineComponent({
   align-items: center;
   padding: 8px 16px 8px 16px;
   background: transparent;
-  border: 1px solid $navy-3;
   border-radius: 16px;
   margin-left: 8px;
   transition: all 0.3s ease 0s;
+  border: 1px solid $gray-4;
+
+  @media (min-width: $lg) {
+    border: 1px solid $navy-3;
+  }
+
+  @media (min-width: $sm) {
+    margin-left: 16px;
+  }
 }
 .btn--connect:hover {
-  background: #fff;
+  background: $astar-blue !important;
+  border: 1px solid transparent;
+  .iconbase {
+    color: $gray-1;
+  }
+  @media (min-width: $lg) {
+    background: transparent !important;
+    border: 1px solid $gray-4;
+    .iconbase {
+      color: $gray-5;
+    }
+  }
 }
 
 .m-btn--connect {
   padding-left: 10px;
   width: 32px;
   height: 32px;
-  border: 1px solid $navy-3;
+  background: transparent;
+  border: 1px solid $gray-4;
   border-radius: 16px;
   margin-left: 16px;
   transition: all 0.3s ease 0s;
+  @media (min-width: $lg) {
+    border: 1px solid $navy-3;
+  }
 }
 .m-btn--connect:hover {
-  background: #fff;
+  background: $astar-blue;
+  border: 1px solid transparent;
+  @media (min-width: $lg) {
+    background: #fff;
+  }
+  .iconbase {
+    color: $gray-1;
+  }
 }
 .iconbase {
-  color: $navy-3;
+  color: $gray-4;
   width: rem(20);
   height: rem(20);
   margin-left: -4px;
   margin-right: 4px;
   transition: all 0.3s ease 0s;
 }
 
+.text--connect {
+  font-weight: 400;
+  font-size: 14px;
+  color: $gray-1;
+  @media (min-width: $lg) {
+    color: $navy-1;
+  }
+}
+
 .body--dark {
   .btn--connect {
     background: transparent;
     color: #fff;
     border: 1px solid $gray-4;
   }
   .btn--connect:hover {
-    background: $astar-blue;
+    background: $astar-blue !important;
     border: 1px solid transparent;
     .iconbase {
       color: $gray-1;
@@ -96,5 +137,8 @@ export default defineComponent({
       color: $gray-1;
     }
   }
+  .text--connect {
+    color: $gray-1;
+  }
 }
 </style>

src/components/header/Header.vue

@@ -180,12 +180,14 @@ export default defineComponent({
 @import 'src/css/quasar.variables.scss';
 .wrapper {
   z-index: 100;
+  background-color: $navy-2;
   @media (min-width: $lg) {
     width: 100%;
     position: absolute;
     top: 0;
     left: 224px;
     padding-right: 224px;
+    background-color: transparent;
   }
 }
 

src/components/sidenav/styles/sidebar-mobile.scss

@@ -6,7 +6,7 @@
   display: flex;
   justify-content: space-between;
   height: 48px;
-  background: #0e101d;
+  background: $navy-2;
 }
 
 .tabs {