refactor: rebrand ProposalQuestion

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'

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'
 

packages/desktop/components/ProposalQuestion.svelte → 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,31 +45,27 @@
 </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}
                     <TooltipIcon tooltip={question.additionalInfo} placement="bottom" size="xxs" />
                 {/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}

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'