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
snapshot-labs · Oct 9, 2024 · 5c47ef7 · 5c47ef7
1 parent f0440fc
commit 5c47ef7
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 41 deletions.
diff --git 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
diff --git a/src/components/Banner.vue 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
@@ -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
@@ -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
@@ -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"
       >