From 5c47ef75c61c5f1dd7e2706fc18b64c8bcb5edb4 Mon Sep 17 00:00:00 2001
From: Less <bonustrack@users.noreply.github.com>
Date: Wed, 9 Oct 2024 19:28:23 +0700
Subject: [PATCH] style: make v2 banner more visible (#4910)

* chore: remove youtube link

* chore: remove title on space overview

* style: make v2 banner more visible

* chore: remove target blank
---
 src/App.vue                      | 25 ------------
 src/assets/icons/youtube.svg     |  3 --
 src/components/Banner.vue        | 70 ++++++++++++++++++++++++++++++++
 src/components/FooterSocials.vue |  9 +---
 src/components/TheNavbar.vue     |  1 +
 src/views/SpaceProposals.vue     |  5 ---
 6 files changed, 72 insertions(+), 41 deletions(-)
 delete mode 100644 src/assets/icons/youtube.svg
 create mode 100644 src/components/Banner.vue

diff --git a/src/App.vue b/src/App.vue
index 542f8562a9eb..2f4726ca7cbd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useStorage } from '@vueuse/core';
-
 const { domain, init, isReady, showSidebar } = useApp();
 const route = useRoute();
 const { restorePendingTransactions } = useTxStatus();
@@ -9,11 +7,6 @@ onMounted(async () => {
   await init();
   restorePendingTransactions();
 });
-const bannerClosed = useStorage('snapshot.v2-banner-closed', false);
-const showBanner = computed(() => {
-  const showInPages = ['home', 'timeline'];
-  return showInPages.includes(route.name as string) && !bannerClosed.value;
-});
 </script>
 
 <template>
@@ -41,24 +34,6 @@ const showBanner = computed(() => {
       >
         <TheNavbar />
       </div>
-      <div
-        v-if="showBanner"
-        class="relative flex items-center justify-center gap-2 mb-2 bg-skin-border px-4 py-[10px]"
-      >
-        <a
-          class="flex gap-2"
-          target="_blank"
-          href="https://snapshot.box/#/home"
-        >
-          <i-ho-speakerphone class="shrink-0" />
-          <div class="leading-6">
-            Snapshot v2 is here! Experience our new and improved interface now.
-          </div>
-        </a>
-        <button class="xs:absolute xs:right-3" @click="bannerClosed = true">
-          <i-ho-x />
-        </button>
-      </div>
       <div id="content" class="pb-6 pt-4">
         <router-view v-slot="{ Component }">
           <KeepAlive :include="['ExploreView', 'RankingView']">
diff --git a/src/assets/icons/youtube.svg b/src/assets/icons/youtube.svg
deleted file mode 100644
index 4e7d9feb360c..000000000000
--- a/src/assets/icons/youtube.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg  viewBox="0 0 30 30"  xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M25.9386 5.78563C27.144 6.10831 28.0914 7.05561 28.414 8.26106C28.9972 10.4438 28.9995 15.0005 28.9995 15.0005C28.9995 15.0005 28.9995 19.5572 28.414 21.7399C28.0914 22.9454 27.144 23.8927 25.9386 24.2153C23.756 24.8008 14.9997 24.8008 14.9997 24.8008C14.9997 24.8008 6.24356 24.8008 4.06085 24.2153C2.85542 23.8927 1.90812 22.9454 1.58544 21.7399C1 19.5572 1 15.0005 1 15.0005C1 15.0005 1 10.4438 1.58544 8.26106C1.90812 7.05561 2.85542 6.10831 4.06085 5.78563C6.24356 5.2002 14.9997 5.2002 14.9997 5.2002C14.9997 5.2002 23.756 5.2002 25.9386 5.78563ZM19.4713 15.001L12.1971 19.2004V10.8015L19.4713 15.001Z" />
-</svg>
diff --git a/src/components/Banner.vue b/src/components/Banner.vue
new file mode 100644
index 000000000000..296a8a2353ae
--- /dev/null
+++ b/src/components/Banner.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+const route = useRoute();
+const { env, domain } = useApp();
+
+const link = computed(() => {
+  const baseUrl =
+    env === 'demo'
+      ? 'https://testnet.snapshot.box/#/'
+      : 'https://snapshot.box/#/';
+  let path = 'home';
+  const prefix = env === 'demo' ? `s-tn` : 's';
+
+  switch (route.name) {
+    case 'home': {
+      path = 'explore';
+      break;
+    }
+    case 'spaceProposals': {
+      path = `${prefix}:${route.params.key}`;
+      break;
+    }
+    case 'spaceSettings': {
+      path = `${prefix}:${route.params.key}/settings`;
+      break;
+    }
+    case 'spaceAbout': {
+      path = `${prefix}:${route.params.key}`;
+      break;
+    }
+    case 'spaceProposal': {
+      path = `${prefix}:${route.params.key}/proposal/${route.params.id}`;
+      break;
+    }
+    case 'spaceCreate': {
+      path = `${prefix}:${route.params.key}/create`;
+      break;
+    }
+    case 'spaceDelegates': {
+      path = `${prefix}:${route.params.key}/delegates`;
+      break;
+    }
+    case 'delegate': {
+      path = `${prefix}:${route.params.key}/delegates`;
+      break;
+    }
+    case 'profileAbout': {
+      path = `profile/${route.params.address}`;
+      break;
+    }
+    case 'profileActivity': {
+      path = `profile/${route.params.address}`;
+      break;
+    }
+  }
+
+  return `${baseUrl}${path}`;
+});
+</script>
+
+<template>
+  <a
+    v-if="!domain"
+    :href="link"
+    class="flex bg-blue-700 text-white rounded-full px-[10px] py-[2px] gap-1"
+  >
+    <div class="leading-6 hidden md:block">Switch to the new interface</div>
+    <div class="leading-6 md:hidden">Switch to v2</div>
+    <i-ho-arrow-narrow-right class="shrink-0 hidden xs:block" />
+  </a>
+</template>
diff --git a/src/components/FooterSocials.vue b/src/components/FooterSocials.vue
index e65f7612d06b..20db47bcfa1d 100644
--- a/src/components/FooterSocials.vue
+++ b/src/components/FooterSocials.vue
@@ -7,10 +7,6 @@ const socials = [
   {
     icon: 'discord',
     link: 'https://discord.snapshot.org/'
-  },
-  {
-    icon: 'youtube',
-    link: `https://www.youtube.com/channel/UCKiOLUMQNj77m_zhQnfdzsg`
   }
 ];
 </script>
@@ -21,10 +17,7 @@ const socials = [
   >
     <span v-for="social in socials" :key="social.icon">
       <BaseLink :link="social.link" hide-external-icon>
-        <FooterSocialsItem v-if="social.icon === 'youtube'">
-          <i-s-youtube class="text-[25px]" />
-        </FooterSocialsItem>
-        <FooterSocialsItem v-else-if="social.icon === 'x'">
+        <FooterSocialsItem v-if="social.icon === 'x'">
           <i-s-x class="text-[23px]" />
         </FooterSocialsItem>
         <FooterSocialsItem v-else-if="social.icon === 'discord'">
diff --git a/src/components/TheNavbar.vue b/src/components/TheNavbar.vue
index 295b8cad2133..c87196d38997 100644
--- a/src/components/TheNavbar.vue
+++ b/src/components/TheNavbar.vue
@@ -37,6 +37,7 @@ watch(
             class="ml-1 hidden uppercase text-[12px] sm:block mb-1"
             v-text="'testnet'"
           />
+          <Banner class="ml-3" />
         </div>
         <div :key="web3Account" class="flex space-x-2">
           <NavbarAccount />
diff --git a/src/views/SpaceProposals.vue b/src/views/SpaceProposals.vue
index 229d7a957079..b44abf19e6a1 100644
--- a/src/views/SpaceProposals.vue
+++ b/src/views/SpaceProposals.vue
@@ -194,11 +194,6 @@ watch(
           :space-id="space.id"
         />
       </div>
-
-      <h1 class="hidden lg:mb-3 lg:block">
-        {{ $t('proposals.header') }}
-      </h1>
-
       <div
         class="mb-4 flex flex-col justify-between gap-x-3 gap-y-[10px] px-[20px] sm:flex-row md:px-0"
       >