From 4e7b3f85a285ce1f6c3ad8826eb306ff016f1ab6 Mon Sep 17 00:00:00 2001
From: Ayumi Takahashi <ayumee528@gmail.com>
Date: Fri, 29 Dec 2023 00:03:18 -0800
Subject: [PATCH] add claim warning banner (#1104)

* add claim warning banner

* update style
---
 src/components/header/ClaimWarningBanner.vue | 54 ++++++++++++++++++++
 src/components/header/Header.vue             |  4 ++
 src/components/header/HeaderComp.vue         | 24 +++------
 src/i18n/en-US/index.ts                      |  2 +
 src/layouts/DashboardLayout.vue              |  3 +-
 5 files changed, 69 insertions(+), 18 deletions(-)
 create mode 100644 src/components/header/ClaimWarningBanner.vue

diff --git a/src/components/header/ClaimWarningBanner.vue b/src/components/header/ClaimWarningBanner.vue
new file mode 100644
index 000000000..f2ab354d9
--- /dev/null
+++ b/src/components/header/ClaimWarningBanner.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="banner" :class="`banner--${network}`">
+    {{ $t('warning.claimRewards') }}
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    network: {
+      type: Number,
+      default: 0,
+    },
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
+.banner {
+  color: $gray-2;
+  font-weight: 600;
+  padding: 4px 16px 8px 16px;
+  line-height: 1.25;
+  font-size: 12px;
+  @media (min-width: $sm) {
+    font-size: 14px;
+  }
+
+  // shibuya, zKatana, local
+  background: linear-gradient(90deg, #6c6c6c 25%, #b7b7b7 100%);
+
+  // astar native
+  &.banner--0 {
+    background: linear-gradient(90deg, #e6007a 25%, #ff9dd1 100%);
+  }
+
+  // shiden
+  &.banner--1 {
+    background: linear-gradient(90deg, #5928b1 25%, #b092ea 100%);
+  }
+
+  // zkEVM
+  &.banner--3 {
+    background: linear-gradient(90deg, #703ac2 25%, #226dff 100%);
+  }
+}
+</style>
diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
index 675bdd9f2..80b6057f0 100644
--- a/src/components/header/Header.vue
+++ b/src/components/header/Header.vue
@@ -24,6 +24,8 @@
       <mobile-nav v-if="width <= screenSize.lg" />
     </header-comp>
 
+    <claim-warning-banner :network="currentNetworkIdx" />
+
     <!-- Modals -->
     <modal-network
       v-if="modalNetwork"
@@ -108,6 +110,7 @@ import { container } from 'src/v2/common';
 import { IEventAggregator, UnifyAccountMessage } from 'src/v2/messaging';
 import { Symbols } from 'src/v2/symbols';
 import { isValidAddressPolkadotAddress } from '@astar-network/astar-sdk-core';
+import ClaimWarningBanner from './ClaimWarningBanner.vue';
 
 interface Modal {
   modalNetwork: boolean;
@@ -127,6 +130,7 @@ export default defineComponent({
     ModalPolkasafe,
     ModalAccountUnification,
     MobileNav,
+    ClaimWarningBanner,
   },
   setup() {
     const { width, screenSize } = useBreakpoints();
diff --git a/src/components/header/HeaderComp.vue b/src/components/header/HeaderComp.vue
index cc59da380..deda345c5 100644
--- a/src/components/header/HeaderComp.vue
+++ b/src/components/header/HeaderComp.vue
@@ -46,40 +46,30 @@ export default defineComponent({
   padding-left: 16px;
   padding-right: 16px;
   border-bottom: 3px solid transparent;
-  border-image: linear-gradient(270deg, #6c6c6c 25%, #b7b7b7 100%);
-  border-image-slice: 1;
   @media (min-width: $lg) {
     padding: 40px 40px 25px 40px;
     height: 6rem;
   }
 
+  // shibuya, zKatana, local
+  border-image: linear-gradient(90deg, #6c6c6c 25%, #b7b7b7 100%);
+  border-image-slice: 1;
+
   // astar native
   &.header__border-0 {
-    border-image: linear-gradient(270deg, #e6007a 25%, #ff9dd1 100%);
+    border-image: linear-gradient(90deg, #e6007a 25%, #ff9dd1 100%);
     border-image-slice: 1;
   }
 
   // shiden
   &.header__border-1 {
-    border-image: linear-gradient(270deg, #5928b1 25%, #b092ea 100%);
-    border-image-slice: 1;
-  }
-
-  // shibuya
-  &.header__border-2 {
-    border-image: linear-gradient(270deg, #6c6c6c 25%, #b7b7b7 100%);
+    border-image: linear-gradient(90deg, #5928b1 25%, #b092ea 100%);
     border-image-slice: 1;
   }
 
   // zkEVM
   &.header__border-3 {
-    border-image: linear-gradient(270deg, #703ac2 25%, #226dff 100%);
-    border-image-slice: 1;
-  }
-
-  // zKatana
-  &.header__border-4 {
-    border-image: linear-gradient(270deg, #6c6c6c 25%, #b7b7b7 100%);
+    border-image: linear-gradient(90deg, #703ac2 25%, #226dff 100%);
     border-image-slice: 1;
   }
 }
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 4fe6d2b85..ad647fd7b 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -67,6 +67,8 @@ export default {
       'Account balances in {network} network is below than the existential deposit amount',
     withdrawalNotSupport: "The portal doesn't support withdrawing to {chain} at this moment",
     ledgerNotOpened: 'Ledger has not opened Astar App. Please open it and refresh this page.',
+    claimRewards:
+      'DApp Staking V3 is coming early next year! Make sure to claim your rewards and stay tuned for the release date.',
   },
   toast: {
     transactionFailed: 'Transaction failed with error: {message}',
diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue
index 6e5428d84..65be0c791 100644
--- a/src/layouts/DashboardLayout.vue
+++ b/src/layouts/DashboardLayout.vue
@@ -67,7 +67,8 @@ export default defineComponent({
   height: 100%;
   @media (min-width: $lg) {
     padding: 0 40px;
-    padding-top: 12px;
+    padding-top: 42px;
+    // padding-top: 12px; without the header warning banner
   }
 }
 </style>