From 58cf0052eacc0d0f47efea7e5371e5e6ed8a29e6 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Tue, 20 Feb 2024 11:36:52 -0300
Subject: [PATCH] refactor: rebrand ProposalQuestion (#1967)

* refactor: rebrand ProposalQuestion

* Update packages/desktop/views/governance/components/ProposalQuestion.svelte

---------

Co-authored-by: Mark Nardi <nardimark7@gmail.com>
---
 packages/desktop/components/index.ts          |  1 -
 .../views/ProposalDetailsView.svelte          |  4 +--
 .../components/ProposalQuestion.svelte        | 26 +++++++------------
 .../views/governance/components/index.ts      |  1 +
 4 files changed, 12 insertions(+), 20 deletions(-)
 rename packages/desktop/{ => views/governance}/components/ProposalQuestion.svelte (80%)

diff --git a/packages/desktop/components/index.ts b/packages/desktop/components/index.ts
index b8e97a515b..89bbb87356 100644
--- a/packages/desktop/components/index.ts
+++ b/packages/desktop/components/index.ts
@@ -19,7 +19,6 @@ export { default as Proposals } from './Proposals.svelte'
 export { default as ProposalAnswer } from './ProposalAnswer.svelte'
 export { default as ProposalCard } from './ProposalCard.svelte'
 export { default as ProposalsDetails } from './ProposalsDetails.svelte'
-export { default as ProposalQuestion } from './ProposalQuestion.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/dashboard/governance/views/ProposalDetailsView.svelte b/packages/desktop/views/dashboard/governance/views/ProposalDetailsView.svelte
index ac8dea7277..6d6381a831 100644
--- a/packages/desktop/views/dashboard/governance/views/ProposalDetailsView.svelte
+++ b/packages/desktop/views/dashboard/governance/views/ProposalDetailsView.svelte
@@ -6,7 +6,7 @@
         TrackedParticipationOverview,
     } from '@iota/sdk/out/types'
     import { Alert, Button, Table } from '@bloomwalletio/ui'
-    import { ProposalDetailsMenu, ProposalQuestion } from '@components'
+    import { ProposalDetailsMenu } from '@components'
     import { getVotingEvent } from '@contexts/governance/actions'
     import {
         clearParticipationEventStatusPoll,
@@ -35,7 +35,7 @@
     import { visibleSelectedAccountTokens } from '@core/token/stores'
     import { getBestTimeDuration, milestoneToDate } from '@core/utils'
     import { PopupId, openPopup } from '@desktop/auxiliary/popup'
-    import { ProposalInformationPane, ProposalStatusPill } from '@views/governance'
+    import { ProposalInformationPane, ProposalQuestion, ProposalStatusPill } from '@views/governance'
     import { MarkdownBlock, Pane, Text, TextType } from '@ui'
     import { onDestroy, onMount } from 'svelte'
 
diff --git a/packages/desktop/components/ProposalQuestion.svelte b/packages/desktop/views/governance/components/ProposalQuestion.svelte
similarity index 80%
rename from packages/desktop/components/ProposalQuestion.svelte
rename to packages/desktop/views/governance/components/ProposalQuestion.svelte
index 4cb3db9b70..02abbbdf63 100644
--- a/packages/desktop/components/ProposalQuestion.svelte
+++ b/packages/desktop/views/governance/components/ProposalQuestion.svelte
@@ -2,16 +2,12 @@
     import { AnswerStatus, EventStatus, Question } from '@iota/sdk/out/types'
 
     import { ProposalAnswer } from '@components'
-    import { Icon, Text } from '@ui'
-    import { FontWeight } from '@ui/enums'
-    import { TooltipIcon } from '@bloomwalletio/ui'
+    import { Icon, IconName, Text, TooltipIcon } from '@bloomwalletio/ui'
 
     import { ABSTAIN_VOTE_VALUE } from '@contexts/governance/constants'
     import { getPercentagesFromAnswerStatuses, IProposalAnswerPercentages } from '@contexts/governance'
     import { selectedProposal } from '@contexts/governance/stores'
 
-    import { Icon as IconEnum } from '@auxiliary/icon'
-
     export let onQuestionClick: (questionIndex: number) => void
     export let onAnswerClick: (answerValue: number, questionIndex: number) => void
 
@@ -49,23 +45,17 @@
 </script>
 
 <proposal-question
-    class="flex flex-col px-5 py-4 rounded-xl border border-solid border-gray-200
-    cursor-pointer dark:border-transparent dark:bg-gray-900"
+    class="flex flex-col px-5 py-4 rounded-xl border border-solid border-stroke
+    cursor-pointer dark:border-stroke-dark dark:bg-surface-dark"
     class:animate-pulse={isLoading}
 >
     <button on:click={() => onQuestionClick(questionIndex)} class="flex justify-between items-center">
-        <div class="flex flex-col min-w-0">
+        <div class="flex flex-col min-w-0 gap-1">
             {#if questionIndex !== undefined}
-                <Text smaller fontWeight={FontWeight.bold} overrideColor classes="mb-1 text-blue-500">
-                    Question {questionIndex + 1}
-                </Text>
+                <Text align="left">Question {questionIndex + 1}</Text>
             {/if}
             <div class="flex flex-row space-x-1.5 items-center">
-                <Text
-                    fontWeight={FontWeight.bold}
-                    overrideColor
-                    classes="text-gray-900 dark:text-white {isOpened ? '' : 'truncate'}"
-                >
+                <Text align="left" fontWeight="medium" textColor="secondary" truncate={!isOpened}>
                     {question.text}
                 </Text>
                 {#if question.additionalInfo}
@@ -73,7 +63,9 @@
                 {/if}
             </div>
         </div>
-        <Icon icon={IconEnum.ChevronDown} classes="text-gray-500 transform {isOpened ? 'rotate-180' : 'rotate-0'}" />
+        <div class="transform {isOpened ? 'rotate-180' : 'rotate-0'}">
+            <Icon name={IconName.ChevronDown} textColor="secondary" />
+        </div>
     </button>
     <proposal-answers class:mt-4={showMargin} class="flex flex-col gap-2">
         {#each answers as answer, answerIndex}
diff --git a/packages/desktop/views/governance/components/index.ts b/packages/desktop/views/governance/components/index.ts
index f03d1c14f3..1cd1ec2186 100644
--- a/packages/desktop/views/governance/components/index.ts
+++ b/packages/desktop/views/governance/components/index.ts
@@ -1,4 +1,5 @@
 export { default as ProposalInformationPane } from './ProposalInformationPane.svelte'
+export { default as ProposalQuestion } from './ProposalQuestion.svelte'
 export { default as ProposalStatusInfo } from './ProposalStatusInfo.svelte'
 export { default as ProposalStatusPill } from './ProposalStatusPill.svelte'
 export { default as ProposalStatusTimelineTooltip } from './ProposalStatusTimelineTooltip.svelte'