fix(design): Add breadcrumbs to proposal page and fix proposal heading (#4477)

* Cleanup state styling

* Fix height

* Truncate proposal title in breadcrumb

* Reduce badge height to fix border

* Don't show core if its the connected user

* Reduce max length for proposal breadcrumb

* Add breadcrumb to proposal page and fix header

* Fix breadcrumbs on custom domain

* Refactor styling

* Fix indicator style

* Fix color and border

* Refactor

* Make both outlined

* Use truncate instead of fixes char length

* Change id name

* Revert state colors

* Increase max length of bread crumb

* Remove handleBackClick

* Cleanup

Author: samuveth

src/components/BaseBadge.vue

@@ -11,7 +11,7 @@ const isCore = computed(() => {
 <template>
   <div
     v-if="isCore"
-    class="ml-1 rounded-full border px-[7px] text-xs text-skin-text"
+    class="ml-1 rounded-full border px-[7px] text-xs text-skin-text leading-[22px]"
   >
     {{ $t('isCore') }}
   </div>

src/components/BaseBreadcrumbs.vue

@@ -1,17 +1,23 @@
 <script setup lang="ts">
 defineProps<{
-  pages: { name: string; to: string; current: boolean }[];
+  pages: { id?: string; name: string; to: string; current: boolean }[];
 }>();
 </script>
 
 <template>
   <div class="flex items-center">
     <div v-for="(page, i) in pages" :key="i" class="flex items-center">
       <router-link v-if="!page.current" :to="page.to" class="flex items-center">
-        <span class="text-skin-link">{{ page.name }}</span>
+        <span class="text-skin-link whitespace-nowrap">{{ page.name }}</span>
       </router-link>
       <div v-else class="flex cursor-default items-center">
-        <span class="text-skin-link opacity-40">{{ page.name }}</span>
+        <span
+          class="text-skin-link opacity-40"
+          :class="{
+            'line-clamp-1 max-w-[380px]': page.id === 'proposal-title'
+          }"
+          >{{ page.name }}</span
+        >
       </div>
       <div class="mx-1 flex h-[20px] w-[20px] items-center justify-center">
         <i-ho-chevron-right

src/components/BaseUser.vue

@@ -50,7 +50,11 @@ const spaceMembers = computed(() => {
         >
           {{ getUsername(address, profile) }}
         </span>
-        <BaseBadge :address="address" :members="spaceMembers" />
+        <BaseBadge
+          v-if="getUsername(address, profile) !== 'You'"
+          :address="address"
+          :members="spaceMembers"
+        />
       </div>
     </BaseLink>
   </PopoverHoverProfile>

src/components/LabelProposalState.vue

@@ -1,13 +1,7 @@
 <script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    state: string;
-    slim?: boolean;
-  }>(),
-  {
-    slim: false
-  }
-);
+const props = defineProps<{
+  state: string;
+}>();
 
 const stateClass = computed(() => {
   if (props.state === 'closed') return 'bg-[#BB6BD9]';
@@ -17,30 +11,10 @@ const stateClass = computed(() => {
 </script>
 
 <template>
-  <span v-if="slim" :class="stateClass" class="State slim text-white" />
-  <span
-    v-else
+  <div
+    class="text-white rounded-full px-[12px] text-sm h-[24px] w-fit leading-[23px]"
     :class="stateClass"
-    class="State text-white"
-    v-text="$t(`proposals.states.${state}`)"
-  />
+  >
+    {{ $t(`proposals.states.${state}`) }}
+  </div>
 </template>
-
-<style scoped>
-.State {
-  font-size: 16px;
-  height: 26px;
-  vertical-align: middle;
-  padding: 0 12px;
-  border-radius: 14px;
-  line-height: 24px;
-}
-
-.State.slim {
-  padding: 0;
-  height: 12px;
-  width: 13px;
-  border-radius: 50%;
-  display: inline-block;
-}
-</style>

src/components/SpaceBreadcrumbs.vue

@@ -1,31 +1,38 @@
 <script setup lang="ts">
-import { ExtendedSpace } from '@/helpers/interfaces';
+import { ExtendedSpace, Proposal } from '@/helpers/interfaces';
 import { shorten } from '@/helpers/utils';
 
-const props = defineProps<{ space: ExtendedSpace }>();
+const props = defineProps<{ space: ExtendedSpace; proposal?: Proposal }>();
 
 const route = useRoute();
+const { domain } = useApp();
 
 const pages = computed(() => {
   let pages: any = [];
   const spaceRoute = `/${props.space.id}`;
   const basePages = [
-    { name: props.space.name, to: spaceRoute, current: false }
+    { name: domain ? 'Home' : props.space.name, to: spaceRoute, current: false }
   ];
 
   if (route.name === 'spaceProposal') {
     const id = route.params.id as string;
     pages = [
       ...basePages,
-      { name: id, to: `${spaceRoute}/proposal/${id}`, current: true }
+      {
+        id: 'proposal-title',
+        name: props.proposal?.title,
+        to: `${spaceRoute}/proposal/${id}`,
+        current: true
+      }
     ];
   }
 
   if (route.name === 'spaceDelegate') {
     const delegate = route.params.address as string;
     pages = [
+      ...basePages,
       {
-        name: props.space.name,
+        name: 'Delegates',
         to: `${spaceRoute}/delegates`,
         current: false
       },
@@ -44,5 +51,8 @@ const pages = computed(() => {
 </script>
 
 <template>
-  <BaseBreadcrumbs :pages="pages" />
+  <BaseBreadcrumbs
+    :pages="pages"
+    class="px-3 md:px-4 -mt-1 pb-[16px] lg:pb-[20px]"
+  />
 </template>

src/components/SpaceProposalHeader.vue

@@ -106,22 +106,19 @@ watch(
 
 <template>
   <h1
-    class="mb-3 break-words text-xl leading-8 sm:text-2xl"
+    class="break-words text-xl leading-8 sm:leading-[44px] sm:text-2xl"
     data-testid="proposal-page-title"
     v-text="proposal.title"
   />
 
-  <div class="mb-4 flex flex-col sm:flex-row sm:space-x-1">
-    <div class="mb-1 flex items-center sm:mb-0">
-      <LabelProposalState :state="proposal.state" class="mr-2" />
+  <div class="mb-4 flex">
+    <div class="flex items-center space-x-1">
       <LinkSpace :space-id="space.id" class="group text-skin-text">
         <div class="flex items-center">
-          <AvatarSpace :space="space" size="28" />
-          <span class="ml-2 group-hover:text-skin-link" v-text="space.name" />
+          <AvatarSpace :space="space" size="20" />
+          <span class="ml-1 group-hover:text-skin-link" v-text="space.name" />
         </div>
       </LinkSpace>
-    </div>
-    <div class="flex grow items-center space-x-1">
       <span v-text="$t('proposalBy')" />
       <BaseUser
         :address="proposal.author"
@@ -130,7 +127,8 @@ watch(
         :proposal="proposal"
         hide-avatar
       />
-
+    </div>
+    <div class="flex grow items-center space-x-3">
       <BaseMenu
         class="!ml-auto pl-3"
         :items="sharingItems"
@@ -148,10 +146,10 @@ watch(
           </div>
         </template>
       </BaseMenu>
-      <BaseMenu class="md:ml-2" :items="threeDotItems" @select="handleSelect">
+      <BaseMenu :items="threeDotItems" @select="handleSelect">
         <template #button>
           <div>
-            <BaseButtonIcon :loading="isSending">
+            <BaseButtonIcon :loading="isSending" class="!p-0">
               <i-ho-dots-horizontal />
             </BaseButtonIcon>
           </div>

src/components/SpaceProposalPage.vue

@@ -22,7 +22,6 @@ useMeta({
 });
 
 const route = useRoute();
-const router = useRouter();
 const { web3, web3Account } = useWeb3();
 const { isMessageVisible, setMessageVisibility } = useFlaggedMessageStatus(
   route.params.id as string
@@ -54,8 +53,6 @@ const strategies = computed(
   () => props.proposal?.strategies ?? props.space.strategies
 );
 
-const browserHasHistory = computed(() => window.history.state.back);
-
 const { modalAccountOpen, isModalPostVoteOpen } = useModal();
 const { modalTermsOpen, termsAccepted, acceptTerms } = useTerms(props.space.id);
 
@@ -98,12 +95,6 @@ async function loadResults() {
   loadedResults.value = true;
 }
 
-function handleBackClick() {
-  if (!browserHasHistory.value || browserHasHistory.value.includes('create'))
-    return router.push({ name: 'spaceProposals' });
-  return router.go(-1);
-}
-
 function handleChoiceQuery() {
   const choice = route.query.choice as string;
   if (web3Account.value && choice && props.proposal.state === 'active') {
@@ -128,12 +119,9 @@ onMounted(() => setMessageVisibility(props.proposal.flagged));
 </script>
 
 <template>
-  <TheLayout v-bind="$attrs">
+  <SpaceBreadcrumbs :space="space" :proposal="proposal" />
+  <TheLayout v-bind="$attrs" class="mt-[20px]">
     <template #content-left>
-      <div class="mb-3 px-3 md:px-0">
-        <ButtonBack @click="handleBackClick" />
-      </div>
-
       <MessageWarningFlagged
         v-if="isMessageVisible"
         type="proposal"
@@ -143,6 +131,8 @@ onMounted(() => setMessageVisibility(props.proposal.flagged));
 
       <template v-else>
         <div class="px-3 md:px-0">
+          <LabelProposalState :state="proposal.state" class="mb-[12px]" />
+
           <SpaceProposalHeader
             :space="space"
             :proposal="proposal"

src/views/SpaceDelegate.vue

@@ -155,10 +155,7 @@ onBeforeRouteLeave(async () => {
 
 <template>
   <div class="mb-[80px] md:mb-0">
-    <SpaceBreadcrumbs
-      :space="space"
-      class="mx-4 -mt-1 pb-[16px] lg:pb-[20px]"
-    />
+    <SpaceBreadcrumbs :space="space" />
 
     <BaseContainer v-if="isLoggedUser" class="pb-2 pt-3 lg:py-[20px]">
       <ButtonSwitch