From 4d4be14bbb4e9328ee56c1651201351b69b34ebd Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Wed, 14 Feb 2024 20:24:56 -0300
Subject: [PATCH 1/3] refactor: rebrand ProposalStatusTimelineTooltip

fix: eventProgress condition

fix: move directory
---
 .../components/ProposalStatusInfo.svelte      |  2 +-
 .../ProposalStatusTimelineTooltip.svelte      | 50 +++++--------
 packages/desktop/components/index.ts          |  1 -
 .../ProposalStatusTimelineTooltip.svelte      | 75 +++++++++++++++++++
 .../views/governance/components/index.ts      |  1 +
 packages/desktop/views/governance/index.ts    |  1 +
 6 files changed, 97 insertions(+), 33 deletions(-)
 create mode 100644 packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte
 create mode 100644 packages/desktop/views/governance/components/index.ts
 create mode 100644 packages/desktop/views/governance/index.ts

diff --git a/packages/desktop/components/ProposalStatusInfo.svelte b/packages/desktop/components/ProposalStatusInfo.svelte
index f6bb847c1d..fab452fdff 100644
--- a/packages/desktop/components/ProposalStatusInfo.svelte
+++ b/packages/desktop/components/ProposalStatusInfo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ProposalStatusTimelineTooltip } from '@components'
+    import { ProposalStatusTimelineTooltip } from '@views/governance'
     import { InformationTooltip, ProposalStatusPill } from '@ui'
     import { Position } from '@ui/enums'
 
diff --git a/packages/desktop/components/ProposalStatusTimelineTooltip.svelte b/packages/desktop/components/ProposalStatusTimelineTooltip.svelte
index 7128c53771..7163741a13 100644
--- a/packages/desktop/components/ProposalStatusTimelineTooltip.svelte
+++ b/packages/desktop/components/ProposalStatusTimelineTooltip.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { EventStatus } from '@iota/sdk/out/types'
-    import { Text, Tooltip } from '@ui'
-    import { Position, TextType } from '@ui/enums'
+    import { Text, Popover } from '@bloomwalletio/ui'
 
     import { formatDate, localize } from '@core/i18n'
     import { networkStatus } from '@core/network'
@@ -10,7 +9,7 @@
     export let milestones: Record<EventStatus, number>
     export let status: EventStatus
     export let anchor: HTMLElement
-    export let position: Position = Position.Right
+    export let placement: 'top' | 'bottom' | 'left' | 'right' = 'right'
 
     let eventProgress: number
     switch (status) {
@@ -31,56 +30,45 @@
     }
 </script>
 
-<Tooltip {anchor} {position}>
+<Popover {anchor} {placement} showArrow event="hover" class="p-4 rounded-xl shadow-elevation-4">
     <ul class="space-y-3 text-left">
         {#each Object.keys(EventStatus) as status, index}
-            <li class="grid grid-rows-2 relative" class:active={eventProgress >= index}>
-                <Text
-                    overrideColor={eventProgress < index}
-                    classes={eventProgress < index ? 'text-gray-400 dark:text-gray-700' : ''}
-                >
+            {@const hasProgressed = eventProgress >= index}
+            <li
+                class="grid grid-rows-2 relative
+                before:justify-self-end before:mr-4 before:row-span-2 before:self-center
+                {hasProgressed
+                    ? 'before:text-2xl before:text-brand before:dark:text-brand-dark'
+                    : 'before:text-xl before:text-secondary before:ml-[1px]'}
+                "
+            >
+                <Text textColor={!hasProgressed ? 'secondary' : 'primary'} fontWeight="medium">
                     {formatDate(
                         milestoneToDate($networkStatus.currentMilestone, milestones[EventStatus[status]]),
                         DATE_FORMAT
                     )}
                 </Text>
-                <Text
-                    type={TextType.h5}
-                    overrideColor={eventProgress < index}
-                    classes={eventProgress < index ? 'text-gray-400 dark:text-gray-700' : ''}
-                >
+                <Text textColor={!hasProgressed ? 'secondary' : 'primary'} fontWeight="medium">
                     {localize(`views.governance.statusTimeline.${EventStatus[status]}`)}
                 </Text>
             </li>
         {/each}
     </ul>
-</Tooltip>
+</Popover>
 
 <style lang="scss">
     li {
         grid-template-columns: min-content 1fr;
+
         &::before {
-            @apply justify-self-start;
-            @apply mr-4;
-            @apply row-span-2;
-            @apply self-center;
-            @apply text-2xl;
-            @apply text-gray-400;
             content: '●';
         }
-        &.active::before {
-            @apply text-blue-400;
-        }
+
         &:not(:first-child)::after {
-            @apply absolute;
-            @apply block;
-            @apply border;
-            @apply border-gray-300;
-            @apply border-solid;
-            @apply bottom-4;
+            @apply absolute block border-r border-text-secondary dark:border-text-secondary-dark border-solid bottom-4;
             content: '';
             height: 130%;
-            left: 0.38em;
+            left: 0.415em;
             z-index: -1;
         }
     }
diff --git a/packages/desktop/components/index.ts b/packages/desktop/components/index.ts
index 72c113784b..9ab07ef944 100644
--- a/packages/desktop/components/index.ts
+++ b/packages/desktop/components/index.ts
@@ -22,7 +22,6 @@ export { default as ProposalCard } from './ProposalCard.svelte'
 export { default as ProposalsDetails } from './ProposalsDetails.svelte'
 export { default as ProposalQuestion } from './ProposalQuestion.svelte'
 export { default as ProposalStatusInfo } from './ProposalStatusInfo.svelte'
-export { default as ProposalStatusTimelineTooltip } from './ProposalStatusTimelineTooltip.svelte'
 export { default as SidebarTab } from './SidebarTab.svelte'
 export { default as StatusTile, type StatusTileProps } from './StatusTile.svelte'
 export { default as TitleBar } from './TitleBar.svelte'
diff --git a/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte b/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte
new file mode 100644
index 0000000000..7163741a13
--- /dev/null
+++ b/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { EventStatus } from '@iota/sdk/out/types'
+    import { Text, Popover } from '@bloomwalletio/ui'
+
+    import { formatDate, localize } from '@core/i18n'
+    import { networkStatus } from '@core/network'
+    import { DATE_FORMAT, milestoneToDate } from '@core/utils'
+
+    export let milestones: Record<EventStatus, number>
+    export let status: EventStatus
+    export let anchor: HTMLElement
+    export let placement: 'top' | 'bottom' | 'left' | 'right' = 'right'
+
+    let eventProgress: number
+    switch (status) {
+        case EventStatus.Upcoming:
+            eventProgress = 0
+            break
+        case EventStatus.Commencing:
+            eventProgress = 1
+            break
+        case EventStatus.Holding:
+            eventProgress = 2
+            break
+        case EventStatus.Ended:
+            eventProgress = 3
+            break
+        default:
+            break
+    }
+</script>
+
+<Popover {anchor} {placement} showArrow event="hover" class="p-4 rounded-xl shadow-elevation-4">
+    <ul class="space-y-3 text-left">
+        {#each Object.keys(EventStatus) as status, index}
+            {@const hasProgressed = eventProgress >= index}
+            <li
+                class="grid grid-rows-2 relative
+                before:justify-self-end before:mr-4 before:row-span-2 before:self-center
+                {hasProgressed
+                    ? 'before:text-2xl before:text-brand before:dark:text-brand-dark'
+                    : 'before:text-xl before:text-secondary before:ml-[1px]'}
+                "
+            >
+                <Text textColor={!hasProgressed ? 'secondary' : 'primary'} fontWeight="medium">
+                    {formatDate(
+                        milestoneToDate($networkStatus.currentMilestone, milestones[EventStatus[status]]),
+                        DATE_FORMAT
+                    )}
+                </Text>
+                <Text textColor={!hasProgressed ? 'secondary' : 'primary'} fontWeight="medium">
+                    {localize(`views.governance.statusTimeline.${EventStatus[status]}`)}
+                </Text>
+            </li>
+        {/each}
+    </ul>
+</Popover>
+
+<style lang="scss">
+    li {
+        grid-template-columns: min-content 1fr;
+
+        &::before {
+            content: '●';
+        }
+
+        &:not(:first-child)::after {
+            @apply absolute block border-r border-text-secondary dark:border-text-secondary-dark border-solid bottom-4;
+            content: '';
+            height: 130%;
+            left: 0.415em;
+            z-index: -1;
+        }
+    }
+</style>
diff --git a/packages/desktop/views/governance/components/index.ts b/packages/desktop/views/governance/components/index.ts
new file mode 100644
index 0000000000..57c3fb94d7
--- /dev/null
+++ b/packages/desktop/views/governance/components/index.ts
@@ -0,0 +1 @@
+export { default as ProposalStatusTimelineTooltip } from './ProposalStatusTimelineTooltip.svelte'
diff --git a/packages/desktop/views/governance/index.ts b/packages/desktop/views/governance/index.ts
new file mode 100644
index 0000000000..cb64ac1b52
--- /dev/null
+++ b/packages/desktop/views/governance/index.ts
@@ -0,0 +1 @@
+export * from './components'

From 7a8696e1a5f8071d4a1f98dce0080562fc5b876c Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Mon, 19 Feb 2024 12:00:56 -0300
Subject: [PATCH 2/3] fix: design changes

---
 .../ProposalStatusTimelineTooltip.svelte      | 75 -------------------
 .../ProposalStatusTimelineTooltip.svelte      | 32 +++++---
 2 files changed, 23 insertions(+), 84 deletions(-)
 delete mode 100644 packages/desktop/components/ProposalStatusTimelineTooltip.svelte

diff --git a/packages/desktop/components/ProposalStatusTimelineTooltip.svelte b/packages/desktop/components/ProposalStatusTimelineTooltip.svelte
deleted file mode 100644
index 7163741a13..0000000000
--- a/packages/desktop/components/ProposalStatusTimelineTooltip.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<script lang="ts">
-    import { EventStatus } from '@iota/sdk/out/types'
-    import { Text, Popover } from '@bloomwalletio/ui'
-
-    import { formatDate, localize } from '@core/i18n'
-    import { networkStatus } from '@core/network'
-    import { DATE_FORMAT, milestoneToDate } from '@core/utils'
-
-    export let milestones: Record<EventStatus, number>
-    export let status: EventStatus
-    export let anchor: HTMLElement
-    export let placement: 'top' | 'bottom' | 'left' | 'right' = 'right'
-
-    let eventProgress: number
-    switch (status) {
-        case EventStatus.Upcoming:
-            eventProgress = 0
-            break
-        case EventStatus.Commencing:
-            eventProgress = 1
-            break
-        case EventStatus.Holding:
-            eventProgress = 2
-            break
-        case EventStatus.Ended:
-            eventProgress = 3
-            break
-        default:
-            break
-    }
-</script>
-
-<Popover {anchor} {placement} showArrow event="hover" class="p-4 rounded-xl shadow-elevation-4">
-    <ul class="space-y-3 text-left">
-        {#each Object.keys(EventStatus) as status, index}
-            {@const hasProgressed = eventProgress >= index}
-            <li
-                class="grid grid-rows-2 relative
-                before:justify-self-end before:mr-4 before:row-span-2 before:self-center
-                {hasProgressed
-                    ? 'before:text-2xl before:text-brand before:dark:text-brand-dark'
-                    : 'before:text-xl before:text-secondary before:ml-[1px]'}
-                "
-            >
-                <Text textColor={!hasProgressed ? 'secondary' : 'primary'} fontWeight="medium">
-                    {formatDate(
-                        milestoneToDate($networkStatus.currentMilestone, milestones[EventStatus[status]]),
-                        DATE_FORMAT
-                    )}
-                </Text>
-                <Text textColor={!hasProgressed ? 'secondary' : 'primary'} fontWeight="medium">
-                    {localize(`views.governance.statusTimeline.${EventStatus[status]}`)}
-                </Text>
-            </li>
-        {/each}
-    </ul>
-</Popover>
-
-<style lang="scss">
-    li {
-        grid-template-columns: min-content 1fr;
-
-        &::before {
-            content: '●';
-        }
-
-        &:not(:first-child)::after {
-            @apply absolute block border-r border-text-secondary dark:border-text-secondary-dark border-solid bottom-4;
-            content: '';
-            height: 130%;
-            left: 0.415em;
-            z-index: -1;
-        }
-    }
-</style>
diff --git a/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte b/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte
index 7163741a13..72ae9a209f 100644
--- a/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte
+++ b/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte
@@ -7,7 +7,8 @@
     import { DATE_FORMAT, milestoneToDate } from '@core/utils'
 
     export let milestones: Record<EventStatus, number>
-    export let status: EventStatus
+    // export let status: EventStatus
+    const status = EventStatus.Holding
     export let anchor: HTMLElement
     export let placement: 'top' | 'bottom' | 'left' | 'right' = 'right'
 
@@ -34,23 +35,32 @@
     <ul class="space-y-3 text-left">
         {#each Object.keys(EventStatus) as status, index}
             {@const hasProgressed = eventProgress >= index}
+            {@const currentProgress = eventProgress === index}
             <li
                 class="grid grid-rows-2 relative
                 before:justify-self-end before:mr-4 before:row-span-2 before:self-center
                 {hasProgressed
-                    ? 'before:text-2xl before:text-brand before:dark:text-brand-dark'
+                    ? currentProgress
+                        ? 'before:text-2xl before:text-brand before:dark:text-brand-dark'
+                        : 'before:text-xl before:text-brand before:dark:text-brand-dark before:ml-[1px]'
                     : 'before:text-xl before:text-secondary before:ml-[1px]'}
+                {currentProgress
+                    ? 'text-primary dark:text-primary-dark'
+                    : hasProgressed
+                      ? 'text-secondary/75'
+                      : 'text-secondary'}
                 "
+                class:has-progressed={hasProgressed}
             >
-                <Text textColor={!hasProgressed ? 'secondary' : 'primary'} fontWeight="medium">
-                    {formatDate(
-                        milestoneToDate($networkStatus.currentMilestone, milestones[EventStatus[status]]),
-                        DATE_FORMAT
-                    )}
-                </Text>
-                <Text textColor={!hasProgressed ? 'secondary' : 'primary'} fontWeight="medium">
+                <Text textColor="current" fontWeight="semibold">
                     {localize(`views.governance.statusTimeline.${EventStatus[status]}`)}
                 </Text>
+                <Text textColor="current" fontWeight="medium">
+                    {formatDate(milestoneToDate($networkStatus.currentMilestone, milestones[EventStatus[status]]), {
+                        ...DATE_FORMAT,
+                        timeZoneName: undefined,
+                    })}
+                </Text>
             </li>
         {/each}
     </ul>
@@ -64,6 +74,10 @@
             content: '●';
         }
 
+        &.has-progressed:not(:first-child)::after {
+            @apply border-text-brand dark:border-text-brand-dark;
+        }
+
         &:not(:first-child)::after {
             @apply absolute block border-r border-text-secondary dark:border-text-secondary-dark border-solid bottom-4;
             content: '';

From 4dd1af6884e626bfda1382bb7fc773ef7564175c Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Mon, 19 Feb 2024 14:20:30 -0300
Subject: [PATCH 3/3] fix: text vertical positioning and adds status dynamic
 tense functionality

---
 .../desktop/features/governance.features.ts   |  2 +-
 .../ProposalStatusTimelineTooltip.svelte      | 21 ++++++++++++----
 packages/shared/src/locales/en.json           | 24 +++++++++++++++----
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/packages/desktop/features/governance.features.ts b/packages/desktop/features/governance.features.ts
index d826ba74c2..3f72fa5ea6 100644
--- a/packages/desktop/features/governance.features.ts
+++ b/packages/desktop/features/governance.features.ts
@@ -1,7 +1,7 @@
 import { IGovernanceFeatures } from '@lib/features/interfaces'
 
 const governanceFeatures: IGovernanceFeatures = {
-    enabled: false,
+    enabled: true,
     removeProposals: {
         enabled: true,
     },
diff --git a/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte b/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte
index 72ae9a209f..df8c41ce03 100644
--- a/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte
+++ b/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte
@@ -7,8 +7,7 @@
     import { DATE_FORMAT, milestoneToDate } from '@core/utils'
 
     export let milestones: Record<EventStatus, number>
-    // export let status: EventStatus
-    const status = EventStatus.Holding
+    export let status: EventStatus
     export let anchor: HTMLElement
     export let placement: 'top' | 'bottom' | 'left' | 'right' = 'right'
 
@@ -29,6 +28,20 @@
         default:
             break
     }
+
+    function getLocaleTenseKey(index: number): 'past' | 'present' | 'future' {
+        if (index < eventProgress) {
+            return 'past'
+        }
+
+        if (index === eventProgress) {
+            return 'present'
+        }
+
+        if (index > eventProgress) {
+            return 'future'
+        }
+    }
 </script>
 
 <Popover {anchor} {placement} showArrow event="hover" class="p-4 rounded-xl shadow-elevation-4">
@@ -38,7 +51,7 @@
             {@const currentProgress = eventProgress === index}
             <li
                 class="grid grid-rows-2 relative
-                before:justify-self-end before:mr-4 before:row-span-2 before:self-center
+                before:justify-self-center before:mr-4 before:row-span-2 before:self-center
                 {hasProgressed
                     ? currentProgress
                         ? 'before:text-2xl before:text-brand before:dark:text-brand-dark'
@@ -53,7 +66,7 @@
                 class:has-progressed={hasProgressed}
             >
                 <Text textColor="current" fontWeight="semibold">
-                    {localize(`views.governance.statusTimeline.${EventStatus[status]}`)}
+                    {localize(`views.governance.statusTimeline.${EventStatus[status]}.${getLocaleTenseKey(index)}`)}
                 </Text>
                 <Text textColor="current" fontWeight="medium">
                     {formatDate(milestoneToDate($networkStatus.currentMilestone, milestones[EventStatus[status]]), {
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
index 1fcf8df979..119d996f38 100644
--- a/packages/shared/src/locales/en.json
+++ b/packages/shared/src/locales/en.json
@@ -651,10 +651,26 @@
                 "emptyDescription": "You can subscribe to a proposal on a node with its URL and an optional event ID."
             },
             "statusTimeline": {
-                "upcoming": "Announcement",
-                "commencing": "Voting open",
-                "holding": "Counting starts",
-                "ended": "Counting stops"
+                "upcoming": {
+                    "past": "Announced",
+                    "present": "Announcement",
+                    "future": "Announcement"
+                },
+                "commencing": {
+                    "past": "Voting opened",
+                    "present": "Voting open",
+                    "future": "Voting opens"
+                },
+                "holding": {
+                    "past": "Counting started",
+                    "present": "Counting started",
+                    "future": "Counting starts"
+                },
+                "ended": {
+                    "past": "Counting stopped",
+                    "present": "Counting stopped",
+                    "future": "Counting stops"
+                }
             },
             "details": {
                 "yourVote": {