From 47b776a22d1a8706b7c00e8530ccd70d925a9d78 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Tue, 20 Feb 2024 10:16:35 -0300
Subject: [PATCH 1/3] WIP

---
 .../desktop/components/ProposalAnswer.svelte  | 45 +++++++++----------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/packages/desktop/components/ProposalAnswer.svelte b/packages/desktop/components/ProposalAnswer.svelte
index cf537dcc7b..5bebf6eb11 100644
--- a/packages/desktop/components/ProposalAnswer.svelte
+++ b/packages/desktop/components/ProposalAnswer.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
     import { Answer, EventStatus } from '@iota/sdk/out/types'
 
-    import { Icon, Text } from '@ui'
+    import { Icon } 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 { Indicator, Text, TooltipIcon } from '@bloomwalletio/ui'
 
     export let onAnswerClick: () => void
 
@@ -16,7 +15,8 @@
     export let votedAnswerValue: number = undefined
     export let selectedAnswerValue: number = undefined
     export let percentage: string = ''
-    export let disabled = false
+    // export let disabled = false
+    const disabled = false
     export let hidden: boolean = null
     export let isWinner: boolean
     export let proposalStatus: EventStatus
@@ -56,7 +56,7 @@
     class:winner={isWinner}
     class:selected={isSelected}
     class:cursor-default={isLoading}
-    style:--percentage={percentage}
+    style:--percentage={'83%' || percentage}
     on:click={onClick}
 >
     <div class="flex space-x-3 items-center w-full min-w-0">
@@ -75,21 +75,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} />
         {/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,7 +98,7 @@
 
 <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;
@@ -109,14 +106,14 @@
 
         &::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) {
@@ -128,10 +125,10 @@
         }
 
         &.selected {
-            @apply border-blue-500;
+            @apply border-brand;
 
             answer-index {
-                @apply bg-blue-500 text-white;
+                @apply bg-brand text-white;
             }
         }
 
@@ -146,14 +143,14 @@
         }
 
         &.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(*) {
@@ -161,7 +158,7 @@
             }
         }
 
-        &.dark:not(.selected) {
+        &.dark:not(.selected):not(.winner) {
             @apply border-transparent;
         }
 
@@ -183,7 +180,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;
         }
     }

From 8dae9316ea632eef75480d68ff33ffeb93600648 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Tue, 20 Feb 2024 17:32:09 -0300
Subject: [PATCH 2/3] refactor: rebrand ProposalAnswer

---
 .../desktop/components/ProposalAnswer.svelte  | 38 ++++++-------------
 packages/shared/package.json                  |  2 +-
 yarn.lock                                     |  8 ++--
 3 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/packages/desktop/components/ProposalAnswer.svelte b/packages/desktop/components/ProposalAnswer.svelte
index 5bebf6eb11..386f9c93c3 100644
--- a/packages/desktop/components/ProposalAnswer.svelte
+++ b/packages/desktop/components/ProposalAnswer.svelte
@@ -1,12 +1,6 @@
 <script lang="ts">
     import { Answer, EventStatus } from '@iota/sdk/out/types'
-
-    import { Icon } from '@ui'
-
-    import { darkMode } from '@core/app/stores'
-
-    import { Icon as IconEnum } from '@auxiliary/icon'
-    import { Indicator, Text, TooltipIcon } from '@bloomwalletio/ui'
+    import { Icon, IconName, Indicator, Text, TooltipIcon } from '@bloomwalletio/ui'
 
     export let onAnswerClick: () => void
 
@@ -15,8 +9,7 @@
     export let votedAnswerValue: number = undefined
     export let selectedAnswerValue: number = undefined
     export let percentage: string = ''
-    // export let disabled = false
-    const disabled = false
+    export let disabled = false
     export let hidden: boolean = null
     export let isWinner: boolean
     export let proposalStatus: EventStatus
@@ -49,24 +42,21 @@
 <button
     type="button"
     class="proposal-answer"
-    class:dark={$darkMode}
     class:disabled
     class:hidden={isSelected || isWinner ? false : hidden}
     class:voted={isVotedFor}
     class:winner={isWinner}
     class:selected={isSelected}
     class:cursor-default={isLoading}
-    style:--percentage={'83%' || percentage}
+    style:--percentage={percentage}
     on:click={onClick}
 >
     <div class="flex space-x-3 items-center w-full min-w-0">
         {#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}
@@ -83,7 +73,7 @@
     </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 type="sm" textColor="secondary">{percentage}</Text>
@@ -120,10 +110,6 @@
             @apply flex;
         }
 
-        &:not(.winner) status-icon :global(svg) {
-            @apply text-blue-500;
-        }
-
         &.selected {
             @apply border-brand;
 
@@ -158,19 +144,19 @@
             }
         }
 
-        &.dark:not(.selected):not(.winner) {
-            @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;
             }
         }
 
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 14a40f207d..6674cc256f 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Bloom Labs Ltd <contact@bloomwallet.io>",
     "license": "Apache-2.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.20.1",
+        "@bloomwalletio/ui": "0.20.4",
         "@ethereumjs/rlp": "4.0.1",
         "@ethereumjs/tx": "5.2.1",
         "@ethereumjs/util": "9.0.2",
diff --git a/yarn.lock b/yarn.lock
index a7ee91a0d5..51e2bd2299 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -343,10 +343,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/ui@0.20.1":
-  version "0.20.1"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.20.1/c33346879feefa970875731a6b3eaf030630fc89#c33346879feefa970875731a6b3eaf030630fc89"
-  integrity sha512-ba+TSRFt0YOuzFsFmdyspQBgACBfDvU8Ilu/DbO5qcIhqhFWY87gbSHYK/YFjrKFgDjXaCFIM+sAYfuzD6Hxsg==
+"@bloomwalletio/ui@0.20.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==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"

From 5468ef5135392b15cae2083cfc2c664d6fb59a87 Mon Sep 17 00:00:00 2001
From: Tuditi <daviddetroch@pm.me>
Date: Wed, 21 Feb 2024 13:31:40 +0100
Subject: [PATCH 3/3] chore: yarn.lock

---
 yarn.lock | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 11dc38ef10..d9f363afb6 100644
--- 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/ui@0.20.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/ui@0.20.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"