diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index 4c719fa66..0d435a313 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -17,11 +17,7 @@
'mr-cart-closed': !isCartToggledOpen && isSideCartShown,
}"
>
-
+
+
+
+ # /
+
+
+
+ {{ link.link.toUpperCase() }} /
+
+
+
+
+
+
+
+
diff --git a/vue-app/src/views/JoinLanding.vue b/vue-app/src/views/JoinLanding.vue
index 7b2fa93da..ef176ca08 100644
--- a/vue-app/src/views/JoinLanding.vue
+++ b/vue-app/src/views/JoinLanding.vue
@@ -6,13 +6,11 @@
-
-
+
+
+
+
Fetching round data...
@@ -141,7 +139,7 @@ import { BigNumber } from 'ethers'
import { RegistryInfo } from '@/api/recipient-registry-optimistic'
import Loader from '@/components/Loader.vue'
import CriteriaModal from '@/components/CriteriaModal.vue'
-import BackLink from '@/components/BackLink.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
import Links from '@/components/Links.vue'
import RoundStatusBanner from '@/components/RoundStatusBanner.vue'
import TimeLeft from '@/components/TimeLeft.vue'
@@ -155,10 +153,10 @@ import { formatAmount } from '@/utils/amounts'
RoundStatusBanner,
CriteriaModal,
Loader,
- BackLink,
Links,
TimeLeft,
ImageResponsive,
+ Breadcrumbs,
},
})
export default class JoinLanding extends Vue {
@@ -166,6 +164,10 @@ export default class JoinLanding extends Vue {
loading = true
showCriteriaPanel = false
+ get links(): Array<{ link: string; url: string }> {
+ return [{ link: 'join', url: '/join' }]
+ }
+
async created() {
this.currentRound = await getCurrentRound()
this.loading = false
@@ -290,6 +292,15 @@ h1 {
}
}
+.breadcrumbs {
+ position: relative;
+ z-index: 1;
+ box-sizing: border-box;
+ padding-left: $content-space;
+ margin-left: 2rem;
+ width: min(100%, 512px);
+}
+
.content {
position: relative;
z-index: 1;
diff --git a/vue-app/src/views/VerifyLanding.vue b/vue-app/src/views/VerifyLanding.vue
index 2e38f1675..489823390 100644
--- a/vue-app/src/views/VerifyLanding.vue
+++ b/vue-app/src/views/VerifyLanding.vue
@@ -11,6 +11,7 @@
+
Prove you’re only using one account
@@ -90,6 +91,7 @@ import { commify, formatUnits } from '@ethersproject/units'
import { getCurrentRound } from '@/api/round'
import { User } from '@/api/user'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
import Links from '@/components/Links.vue'
import Loader from '@/components/Loader.vue'
import ProgressBar from '@/components/ProgressBar.vue'
@@ -99,6 +101,7 @@ import ImageResponsive from '@/components/ImageResponsive.vue'
@Component({
components: {
+ Breadcrumbs,
Links,
Loader,
ProgressBar,