Merge branch 'develop' into feat/mint-nft-collection

packages/desktop/components/index.ts

@@ -2,7 +2,6 @@ export * from './drawers'
 export * from './filter'
 export * from './menus'
 export * from './modals'
-export * from './panes'
 export * from './popup'
 
 export { default as AccountSwitcher } from './AccountSwitcher.svelte'
@@ -16,11 +15,9 @@ export { default as FormattedBalance } from './FormattedBalance.svelte'
 export { default as NavbarContainer } from './NavbarContainer.svelte'
 export { default as NetworkCard } from './NetworkCard.svelte'
 export { default as NodeListTable } from './NodeListTable.svelte'
-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/components/menus/ProposalDetailsMenu.svelte

@@ -62,8 +62,8 @@
     function setItems(proposal: IProposal, isVotingForProposal: boolean): void {
         items = [
             {
-                icon: IconName.SettingsSliders,
-                title: localize('actions.changeNode'),
+                icon: IconName.LinkHorizontal,
+                title: localize('actions.changeNodeUrl'),
                 onClick: onChangeNodeClick,
             },
             {

packages/desktop/views/dashboard/governance/views/GovernanceDashboardView.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
     import { IconName } from '@bloomwalletio/ui'
-    import { EmptyListPlaceholder, Proposals, ProposalsDetails } from '@components'
+    import { EmptyListPlaceholder, ProposalsDetails } from '@components'
     import { Pane } from '@ui'
     import { ManageVotingPowerPane } from '../components'
     import { localize } from '@core/i18n'
     import { registeredProposalsForSelectedAccount } from '@contexts/governance/stores'
+    import { ProposalList } from '@views/governance'
 </script>
 
-<governance-dashboard class="w-full h-full flex flex-nowrap p-8 relative flex-1 space-x-6 bg-gray-50 dark:bg-gray-900">
+<governance-dashboard class="w-full h-full flex flex-nowrap p-8 relative flex-1 space-x-6">
     <div class="w-1/3 flex flex-col space-y-4">
         <ManageVotingPowerPane />
         <Pane classes="p-6 h-fit">
@@ -17,7 +18,7 @@
     <span class="block w-0.5 h-full bg-gray-200 dark:bg-gray-800" />
     <div class="w-2/3">
         {#if Object.keys($registeredProposalsForSelectedAccount).length}
-            <Proposals />
+            <ProposalList />
         {:else}
             <div class="w-full h-full flex flex-col items-center justify-center">
                 <EmptyListPlaceholder

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, ProposalInformationPane, 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 { ProposalStatusPill } from '@views/governance'
+    import { ProposalInformationPane, ProposalQuestion, ProposalStatusPill } from '@views/governance'
     import { MarkdownBlock, Pane, Text, TextType } from '@ui'
     import { onDestroy, onMount } from 'svelte'
 
@@ -211,7 +211,7 @@
     })
 </script>
 
-<proposal-details class="w-full h-full flex flex-nowrap p-8 relative flex-1 space-x-4 bg-gray-50 dark:bg-gray-900">
+<proposal-details class="w-full h-full flex flex-nowrap p-8 relative flex-1 space-x-4">
     <div class="w-2/5 flex flex-col space-y-4 relative">
         <Pane classes="p-6 flex flex-col h-fit">
             <header-container class="flex justify-between items-center mb-4">
@@ -242,7 +242,7 @@
                 ]}
             />
         </Pane>
-        <ProposalInformationPane classes="shrink-0" />
+        <ProposalInformationPane />
     </div>
     <Pane classes="w-3/5 h-full p-6 pr-3 flex flex-col justify-between">
         <proposal-questions

packages/desktop/components/panes/ProposalInformationPane.svelte → packages/desktop/views/governance/components/ProposalInformationPane.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
     import { EventStatus } from '@iota/sdk/out/types'
-    import { Table } from '@bloomwalletio/ui'
-    import { Pane, Text } from '@ui'
+    import { Table, Text } from '@bloomwalletio/ui'
+    import { Pane } from '@ui'
     import { formatDate, localize } from '@core/i18n'
     import { DATE_FORMAT, milestoneToDate, truncateString } from '@core/utils'
     import { networkStatus } from '@core/network/stores'
     import { selectedProposal } from '@contexts/governance/stores'
 
-    export let classes: string = ''
-
     interface IProposalDateData {
         propertyKey: 'votingOpens' | 'countingStarts' | 'countingEnds' | 'countingEnded'
         milestone: number
@@ -44,10 +42,8 @@
     }
 </script>
 
-<Pane classes="p-6 h-fit {classes}">
-    <Text smaller classes="mb-5">
-        {localize('views.governance.details.proposalInformation.title')}
-    </Text>
+<Pane classes="h-fit shrink-0 space-y-6 p-6">
+    <Text type="body2">{localize('views.governance.details.proposalInformation.title')}</Text>
     <Table
         items={[
             {

packages/desktop/components/Proposals.svelte → packages/desktop/views/governance/components/ProposalList.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
     import { Filter, ProposalCard } from '@components'
-    import { Text, SearchInput } from '@ui'
-    import { FontWeight } from '@ui/enums'
-
+    import { SearchInput } from '@ui'
+    import { Text } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
-
     import { proposalFilter, registeredProposalsForSelectedAccount } from '@contexts/governance/stores'
     import { isVisibleProposal, sortProposals } from '@contexts/governance/utils'
 
@@ -31,15 +29,13 @@
 
 <proposals-container class="flex flex-col h-full">
     <header-container class="flex justify-between items-center mb-4 h-9">
-        <Text fontSize="14" fontWeight={FontWeight.semibold}>
-            {localize('views.governance.proposals.title')}
-        </Text>
-        <div class="flex flex-row space-x-2 items-center">
+        <Text type="body2">{localize('views.governance.proposals.title')}</Text>
+        <div class="flex flex-row gap-5 items-center">
             <SearchInput bind:value={searchTerm} />
             <Filter filterStore={proposalFilter} />
         </div>
     </header-container>
-    <ul class="grid grid-cols-2 auto-rows-min gap-6 flex-1 overflow-y-scroll pr-3 -mr-5">
+    <ul class="grid grid-cols-2 auto-rows-min gap-4 flex-1 overflow-y-scroll pr-3 -mr-5">
         {#each sortedProposals as proposal}
             <ProposalCard {proposal} />
         {/each}

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,3 +1,6 @@
+export { default as ProposalInformationPane } from './ProposalInformationPane.svelte'
+export { default as ProposalList } from './ProposalList.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'

packages/shared/src/locales/en.json

@@ -1357,6 +1357,7 @@
         "addProposal": "Add proposal",
         "removeProposal": "Remove proposal",
         "changeNode": "Change node",
+        "changeNodeUrl": "Change node URL",
         "stopVoting": "Stop voting",
         "revote": "Revote",
         "skipAndKeep": "Skip and keep old password",