Merge branch 'develop' into 1730----add-domain-verfification-icon-to-…

…dapp-interactions
bloomwalletio · Feb 21, 2024 · 61c278b · 61c278b
2 parents a3a06f2 + 42edfe8
commit 61c278b
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 62 deletions.
diff --git a/packages/desktop/components/ProposalAnswer.svelte b/packages/desktop/components/ProposalAnswer.svelte
@@ -1,13 +1,6 @@
 <script lang="ts">
     import { Answer, EventStatus } from '@iota/sdk/out/types'
-
-    import { Icon, Text } from '@ui'
-
-    import { darkMode } from '@core/app/stores'
-
-    import { Icon as IconEnum } from '@auxiliary/icon'
-    import { Indicator, TooltipIcon } from '@bloomwalletio/ui'
-    import { FontWeight } from '@ui/enums'
+    import { Icon, IconName, Indicator, Text, TooltipIcon } from '@bloomwalletio/ui'
 
     export let onAnswerClick: () => void
 
@@ -49,7 +42,6 @@
 <button
     type="button"
     class="proposal-answer"
-    class:dark={$darkMode}
     class:disabled
     class:hidden={isSelected || isWinner ? false : hidden}
     class:voted={isVotedFor}
@@ -63,10 +55,8 @@
         {#if answerIndex !== undefined}
             {#if isVotedFor}
                 <status-icon class="flex justify-center items-center w-5 h-5">
-                    {#if proposalStatus === EventStatus.Ended}
-                        <Icon icon={IconEnum.Voted} width={20} height={20} />
-                    {:else if proposalStatus === EventStatus.Commencing}
-                        <Icon icon={IconEnum.History} width={20} height={20} />
+                    {#if proposalStatus === EventStatus.Ended || proposalStatus === EventStatus.Commencing}
+                        <Icon name={IconName.ReceiptCheck} size="sm" textColor={isWinner ? 'invert' : 'brand'} />
                     {:else if proposalStatus === EventStatus.Holding}
                         <Indicator size="sm" ping />
                     {/if}
@@ -75,21 +65,18 @@
                 <answer-index>{answerIndex + 1}</answer-index>
             {/if}
         {/if}
-        <Text fontWeight={FontWeight.medium} classes="w-full {truncate ? 'truncate' : ''}">{answer.text}</Text>
+        <Text
+            fontWeight={isSelected || isVotedFor ? 'semibold' : 'medium'}
+            textColor={isSelected || isVotedFor ? 'primary' : 'secondary'}
+            truncate>{answer.text}</Text
+        >
     </div>
     <div class="flex items-center space-x-1.5">
         {#if isWinner}
-            <Icon icon={IconEnum.Trophy} />
+            <Icon name={IconName.Trophy} size="xs" />
         {/if}
         {#if percentage}
-            <Text
-                smaller
-                fontWeight={FontWeight.medium}
-                classes="h-3 ml-auto text-gray-700 dark:text-gray-500"
-                overrideColor
-            >
-                {percentage}
-            </Text>
+            <Text type="sm" textColor="secondary">{percentage}</Text>
         {/if}
         {#if answer.additionalInfo}
             <div class="w-3 h-3">
@@ -101,37 +88,33 @@
 
 <style lang="scss">
     .proposal-answer {
-        @apply rounded-md border border-solid border-gray-200;
+        @apply rounded-lg border border-solid border-stroke dark:border-stroke-dark;
         @apply relative hidden items-center justify-between p-3 overflow-hidden;
         > * {
             z-index: 2;
         }
 
         &::after {
             @apply z-10 absolute inline-block h-full -ml-3 mr-auto;
-            @apply rounded-l-md bg-gray-100;
+            @apply rounded-l-md bg-surface-2;
             content: '';
             width: var(--percentage);
             z-index: 1;
         }
 
         &:not(.disabled):hover {
-            @apply border-blue-500;
+            @apply border-brand;
         }
 
         &:not(.hidden) {
             @apply flex;
         }
 
-        &:not(.winner) status-icon :global(svg) {
-            @apply text-blue-500;
-        }
-
         &.selected {
-            @apply border-blue-500;
+            @apply border-brand;
 
             answer-index {
-                @apply bg-blue-500 text-white;
+                @apply bg-brand text-white;
             }
         }
 
@@ -146,34 +129,34 @@
         }
 
         &.winner {
-            @apply bg-blue-500;
+            @apply bg-text-brand-dark border-brand;
 
             &::after {
-                @apply bg-blue-600;
+                @apply bg-brand;
             }
 
             answer-index {
-                @apply bg-blue-600 text-white;
+                @apply bg-surface-brand text-white;
             }
 
             :global(*) {
                 @apply text-white;
             }
         }
 
-        &.dark:not(.selected) {
-            @apply border-transparent;
+        &:not(.selected):not(.winner) {
+            @apply dark:border-transparent;
         }
 
-        &.dark:not(.winner) {
-            @apply bg-gray-900;
+        &:not(.winner) {
+            @apply dark:bg-surface-dark;
 
             &::after {
-                @apply bg-gray-950;
+                @apply dark:bg-surface-dark;
             }
 
             answer-index {
-                @apply bg-gray-900 border-gray-800;
+                @apply dark:bg-surface-dark dark:border-stroke-dark;
             }
         }
 
@@ -183,7 +166,7 @@
 
         answer-index {
             @apply flex items-center justify-center h-5 w-5 bg-white;
-            @apply border border-solid border-gray-200;
+            @apply border border-solid border-stroke rounded-sm;
             @apply font-bold text-12 text-gray-500;
         }
     }

diff --git a/...esktop/components/ProposalsDetails.svelte → ...top/components/ProposalListDetails.svelte b/...esktop/components/ProposalsDetails.svelte → ...top/components/ProposalListDetails.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Table } from '@bloomwalletio/ui'
-    import { IProposalsDetails } from '@contexts/governance/interfaces'
+    import { IProposalListDetails } from '@contexts/governance/interfaces'
     import {
         participationOverviewForSelectedAccount,
         registeredProposalsForSelectedAccount,
@@ -16,23 +16,21 @@
     import { localize } from '@core/i18n'
     import { activeProfileId } from '@core/profile/stores'
     import { PopupId, openPopup } from '@desktop/auxiliary/popup'
-    import { Text } from '@ui'
-    import { FontWeight } from '@ui/enums'
     import { onMount } from 'svelte'
-    import { Button } from '@bloomwalletio/ui'
+    import { Button, Text } from '@bloomwalletio/ui'
 
-    let details = <IProposalsDetails>{
+    let details = <IProposalListDetails>{
         totalProposals: null,
         activeProposals: null,
         votingProposals: null,
         votedProposals: null,
     }
 
     $: isOverviewLoaded = !!$participationOverviewForSelectedAccount
-    $: $registeredProposalsForSelectedAccount, $participationOverviewForSelectedAccount, updateProposalsDetails()
+    $: $registeredProposalsForSelectedAccount, $participationOverviewForSelectedAccount, updateProposalListDetails()
     $: $selectedAccount, void setParticipationOverview()
 
-    function updateProposalsDetails(): void {
+    function updateProposalListDetails(): void {
         if ($activeProfileId) {
             details = {
                 totalProposals: getNumberOfTotalProposals(),
@@ -59,8 +57,8 @@
     onMount(setParticipationOverview)
 </script>
 
-<proposals-details class="space-y-4">
-    <Text fontSize="14" fontWeight={FontWeight.semibold}>
+<proposal-list-details class="space-y-6">
+    <Text type="body2">
         {localize('views.governance.proposalsDetails.title')}
     </Text>
     <Table
@@ -70,4 +68,4 @@
         }))}
     />
     <Button variant="outlined" on:click={onAddProposalClick} width="full" text={localize('actions.addProposal')} />
-</proposals-details>
+</proposal-list-details>
diff --git a/packages/desktop/components/index.ts b/packages/desktop/components/index.ts
@@ -16,7 +16,7 @@ export { default as NetworkCard } from './NetworkCard.svelte'
 export { default as NodeListTable } from './NodeListTable.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 ProposalListDetails } from './ProposalListDetails.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/GovernanceDashboardView.svelte b/packages/desktop/views/dashboard/governance/views/GovernanceDashboardView.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { IconName } from '@bloomwalletio/ui'
-    import { EmptyListPlaceholder, ProposalsDetails } from '@components'
+    import { EmptyListPlaceholder, ProposalListDetails } from '@components'
     import { Pane } from '@ui'
     import { ManageVotingPowerPane } from '../components'
     import { localize } from '@core/i18n'
@@ -12,7 +12,7 @@
     <div class="w-1/3 flex flex-col space-y-4">
         <ManageVotingPowerPane />
         <Pane classes="p-6 h-fit">
-            <ProposalsDetails />
+            <ProposalListDetails />
         </Pane>
     </div>
     <span class="block w-0.5 h-full bg-gray-200 dark:bg-gray-800" />

diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Bloom Labs Ltd <[email protected]>",
     "license": "Apache-2.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.20.3",
+        "@bloomwalletio/ui": "0.20.4",
         "@ethereumjs/rlp": "4.0.1",
         "@ethereumjs/tx": "5.2.1",
         "@ethereumjs/util": "9.0.2",

diff --git a/packages/shared/src/lib/contexts/governance/interfaces/index.ts b/packages/shared/src/lib/contexts/governance/interfaces/index.ts
@@ -2,4 +2,4 @@ export * from './organization.interface'
 export * from './proposal-answer-percentages.interface'
 export * from './proposal-filter.interface'
 export * from './proposal-state.interface'
-export * from './proposals-details.interface'
+export * from './proposal-list-details.interface'
diff --git a/...interfaces/proposals-details.interface.ts → ...rfaces/proposal-list-details.interface.ts b/...interfaces/proposals-details.interface.ts → ...rfaces/proposal-list-details.interface.ts
@@ -1,4 +1,4 @@
-export interface IProposalsDetails {
+export interface IProposalListDetails {
     totalProposals: number
     activeProposals: number
     votingProposals: number

diff --git a/yarn.lock b/yarn.lock
@@ -343,15 +343,16 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/[email protected].3":
-  version "0.20.3"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.20.3/4ff384a8f0e32eb1d7ac72ecccdeabd5670030f8#4ff384a8f0e32eb1d7ac72ecccdeabd5670030f8"
-  integrity sha512-QEHsdq9isrs+m6osZRdafRFgac5k4Zcxn5AtQAwFjG0za/R6nAlP3zrs6GQpjGwglpIBMjNMMrXtt+8p+StKPQ==
+"@bloomwalletio/[email protected].4":
+  version "0.20.4"
+  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.20.4/55e00320965048d0daef162c9288ac5c75a9da6d#55e00320965048d0daef162c9288ac5c75a9da6d"
+  integrity sha512-LIwFYpkUrvVJbJMNYucjOFej7+IOYiKswkUNdS1qMFOzAch2zGCr/hDvh31eukhdzEVCCfP5bGLLI2Ck9awKfA==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"
     qrious "4.0.2"
     svelte-json-tree "2.1.0"
+    svelte-markdown "0.4.1"
     svelty-picker "4.1.4"
     tailwind-merge "1.13.2"