From e12e99009a48c8804ee9af9751560dc0812b0bf9 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Tue, 20 Feb 2024 11:19:01 -0300
Subject: [PATCH] refactor: rebrand ProposalQuestion

---
 packages/desktop/components/index.ts          |  1 -
 .../views/ProposalDetailsView.svelte          |  3 ++-
 .../components/ProposalQuestion.svelte        | 24 +++++++------------
 .../views/governance/components/index.ts      |  1 +
 4 files changed, 11 insertions(+), 18 deletions(-)
 rename packages/desktop/{ => views/governance}/components/ProposalQuestion.svelte (81%)

diff --git a/packages/desktop/components/index.ts b/packages/desktop/components/index.ts
index 5872f5f63d..791ec804c9 100644
--- a/packages/desktop/components/index.ts
+++ b/packages/desktop/components/index.ts
@@ -20,7 +20,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 78bf36b421..a80901f6a0 100644
--- a/packages/desktop/views/dashboard/governance/views/ProposalDetailsView.svelte
+++ b/packages/desktop/views/dashboard/governance/views/ProposalDetailsView.svelte
@@ -6,7 +6,8 @@
         TrackedParticipationOverview,
     } from '@iota/sdk/out/types'
     import { Alert, Button, Table } from '@bloomwalletio/ui'
-    import { ProposalDetailsMenu, ProposalInformationPane, ProposalQuestion } from '@components'
+    import { ProposalDetailsMenu, ProposalInformationPane } from '@components'
+    import { ProposalQuestion } from '@views/governance'
     import { getVotingEvent } from '@contexts/governance/actions'
     import {
         clearParticipationEventStatusPoll,
diff --git a/packages/desktop/components/ProposalQuestion.svelte b/packages/desktop/views/governance/components/ProposalQuestion.svelte
similarity index 81%
rename from packages/desktop/components/ProposalQuestion.svelte
rename to packages/desktop/views/governance/components/ProposalQuestion.svelte
index 4cb3db9b70..ce2d2590e0 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">
             {#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 339e60d799..c71f3f3594 100644
--- a/packages/desktop/views/governance/components/index.ts
+++ b/packages/desktop/views/governance/components/index.ts
@@ -1,3 +1,4 @@
+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'