fix: header height when warning message is shown

matter-labs · Dec 16, 2023 · 48cbf60 · 48cbf60
1 parent 6249b3d
commit 48cbf60
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/packages/app/src/components/IssuesBanner.vue b/packages/app/src/components/IssuesBanner.vue
@@ -20,7 +20,7 @@
   @apply flex text-white rounded-2xl border border-amber-400/50 bg-amber-400/10 mb-6 py-3 px-4;
 
   svg {
-    @apply mr-2;
+    @apply mr-2 shrink-0;
   }
 
   a {

diff --git a/packages/app/src/components/NetworkDeprecated.vue b/packages/app/src/components/NetworkDeprecated.vue
@@ -48,7 +48,7 @@ const newNetworkUrl = computed(() => {
   @apply flex text-white rounded-2xl border border-amber-400/50 bg-amber-400/10 mb-6 py-3 px-4;
 
   svg {
-    @apply mr-2;
+    @apply mr-2 shrink-0;
   }
 
   a {

diff --git a/packages/app/src/components/header/TheHeader.vue b/packages/app/src/components/header/TheHeader.vue
@@ -48,7 +48,11 @@
         </div>
       </div>
     </div>
-    <div v-if="hasContent" class="hero-banner-container" :class="{ 'home-banner': route.path === '/' }">
+    <div
+      v-if="hasContent"
+      class="hero-banner-container"
+      :class="[`${currentNetwork.name}`, { 'home-banner': route.path === '/' }]"
+    >
       <hero-arrows class="hero-image" />
     </div>
     <transition
@@ -301,12 +305,28 @@ const hasContent = computed(() => {
   .hero-banner-container {
     @apply absolute left-0 top-full flex h-64 w-full items-end justify-end overflow-hidden bg-primary-900;
 
+    &.mainnet {
+      @apply h-[27rem] md:h-[23rem] lg:h-[20rem];
+    }
+
+    &.goerli {
+      @apply h-[25rem] md:h-[23rem] lg:h-[19rem];
+    }
+
     .hero-image {
       @apply h-5/6 w-auto;
     }
   }
   .home-banner {
     @apply h-80;
+
+    &.mainnet {
+      @apply h-[32rem] md:h-[28rem] lg:h-[25rem];
+    }
+
+    &.goerli {
+      @apply h-[30rem] md:h-[27rem] lg:h-[24rem];
+    }
   }
 }
 .header-mobile-popover {
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,7 @@ @@
       @apply flex text-white rounded-2xl border border-amber-400/50 bg-amber-400/10 mb-6 py-3 px-4;
       svg {
-        @apply mr-2;
+        @apply mr-2 shrink-0;
       }
       a {
@@ Expand Down @@