feat: governance polishing #2 (iotaledger#5723)

* fix: NodeInput selector not overflowing popup * fix: removes OrderFilterItem mb-4 * fix: ProposalCard height with falsy status * fix: question not collapsing * feat: add a decimal place to the proposal answers percentages where is needed * fix: consistent tooltip styling
boxfish-studio · Feb 1, 2023 · 6a23d81 · 6a23d81
1 parent b0b5a28
commit 6a23d81
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 31 deletions.
diff --git a/packages/desktop/views/dashboard/governance/views/DetailsView.svelte b/packages/desktop/views/dashboard/governance/views/DetailsView.svelte
@@ -132,14 +132,7 @@
 
     function handleQuestionClick(event: CustomEvent): void {
         const { questionIndex } = event.detail
-        openedQuestionIndex = questionIndex
-
-        const selectedQuestionElement: HTMLElement = proposalQuestions?.querySelector(
-            'proposal-question:nth-child(' + openedQuestionIndex + ')'
-        )
-        setTimeout(() => {
-            proposalQuestions.scrollTo({ top: selectedQuestionElement?.offsetTop, behavior: 'smooth' })
-        }, 250)
+        openedQuestionIndex = questionIndex === openedQuestionIndex ? null : questionIndex
     }
 
     function handleCancelClick(): void {
@@ -159,6 +152,15 @@
     function handleAnswerClick(event: CustomEvent): void {
         const { answerValue, questionIndex } = event.detail
         selectedAnswerValues[questionIndex] = answerValue
+
+        openedQuestionIndex = questionIndex + 1
+
+        const selectedQuestionElement: HTMLElement = proposalQuestions?.querySelector(
+            `proposal-question:nth-child(${openedQuestionIndex})`
+        )
+        setTimeout(() => {
+            proposalQuestions.scrollTo({ top: selectedQuestionElement?.offsetTop, behavior: 'smooth' })
+        }, 250)
     }
 
     function getTextHintString(): string {

diff --git a/packages/shared/components/atoms/pills/ProposalStatusPill.svelte b/packages/shared/components/atoms/pills/ProposalStatusPill.svelte
@@ -13,13 +13,11 @@
     }
 </script>
 
-{#if status}
-    <Pill
-        data={localize(`pills.proposalStatus.${status}`)}
-        textColor="gray-800"
-        darkTextColor="gray-800"
-        backgroundColor={STATUS_COLORS[status]}
-        darkBackgroundColor={STATUS_COLORS[status]}
-        classes="rounded-full px-2 py-1 flex items-center"
-    />
-{/if}
+<Pill
+    data={localize(`pills.proposalStatus.${status}`)}
+    textColor="gray-800"
+    darkTextColor="gray-800"
+    backgroundColor={STATUS_COLORS[status]}
+    darkBackgroundColor={STATUS_COLORS[status]}
+    classes="rounded-full px-2 py-1 flex items-center {status ? '' : 'invisible'}"
+/>
diff --git a/packages/shared/components/filters/items/OrderFilterItem.svelte b/packages/shared/components/filters/items/OrderFilterItem.svelte
@@ -30,6 +30,6 @@
 </script>
 
 <div class="flex flex-row justify-between space-x-2">
-    <Dropdown {value} items={choices} {onSelect} small classes="mb-4" />
+    <Dropdown {value} items={choices} {onSelect} small />
     <Dropdown value={ascDescvalue} items={ascDescChoices} onSelect={onSelectAscDesc} small />
 </div>
diff --git a/packages/shared/components/modals/ProposalsDetailsMenu.svelte b/packages/shared/components/modals/ProposalsDetailsMenu.svelte
@@ -9,6 +9,7 @@
     function handleAddProposal(): void {
         openPopup({
             type: 'addProposal',
+            overflow: true,
         })
     }
 </script>

diff --git a/packages/shared/components/organisms/ProposalCard.svelte b/packages/shared/components/organisms/ProposalCard.svelte
@@ -41,25 +41,24 @@
         {#if proposal.organization}
             <TooltipIcon
                 icon={proposal.organization.icon}
+                text={proposal.organization.name}
                 size="small"
                 classes="p-0.5 rounded-full bg-black text-white"
                 iconClasses="text-white"
-            >
-                <Text smaller overrideColor fontWeight={FontWeight.semibold} classes="text-gray-600"
-                    >{proposal.organization.name}</Text
-                >
-            </TooltipIcon>
+            />
         {/if}
         <Text fontWeight={FontWeight.semibold} fontSize="14" classes="truncate" lineHeight="5">{proposal.title}</Text>
     </div>
     <div class="flex justify-between items-center">
         <ProposalStatusInfo status={proposalState?.status} milestones={proposal.milestones} />
         {#if hasVoted}
-            <TooltipIcon icon={Icon.Voted} size="small" position={Position.Left} iconClasses="text-gray-500">
-                <Text smaller overrideColor fontWeight={FontWeight.semibold} classes="text-gray-600">
-                    {localize('views.governance.proposals.voted')}
-                </Text>
-            </TooltipIcon>
+            <TooltipIcon
+                text={localize('views.governance.proposals.voted')}
+                icon={Icon.Voted}
+                size="small"
+                position={Position.Left}
+                iconClasses="text-gray-500"
+            />
         {/if}
     </div>
 </proposal-card>
diff --git a/packages/shared/lib/contexts/governance/utils/getPercentagesFromAnswerStatuses.ts b/packages/shared/lib/contexts/governance/utils/getPercentagesFromAnswerStatuses.ts
@@ -1,3 +1,4 @@
+import { round } from '@core/utils/number'
 import type { AnswerStatus } from '@iota/wallet/out/types'
 import { IProposalAnswerPercentages } from '../interfaces'
 
@@ -13,7 +14,7 @@ export function getPercentagesFromAnswerStatuses(answerStatuses: AnswerStatus[])
             const divisionResult = (answerStatus.accumulated ?? 0) / totalVotes
             percentages = {
                 ...percentages,
-                [answerStatus.value]: Number.isNaN(divisionResult) ? '0%' : `${Math.round(divisionResult * 100)}%`,
+                [answerStatus.value]: Number.isNaN(divisionResult) ? '0%' : `${round(divisionResult * 100, 1)}%`,
             }
         }
     })

diff --git a/packages/shared/lib/contexts/governance/utils/tests/getPercentagesFromAnswerStatuses.test.ts b/packages/shared/lib/contexts/governance/utils/tests/getPercentagesFromAnswerStatuses.test.ts
@@ -24,7 +24,7 @@ describe('File: getPercentagesFromAnswerStatuses.ts', () => {
         ]
 
         it('should return percentages from valid arguments', () => {
-            expect(getPercentagesFromAnswerStatuses(ANSWER_STATUSES)).toEqual({ 0: '17%', 1: '33%', 2: '50%' })
+            expect(getPercentagesFromAnswerStatuses(ANSWER_STATUSES)).toEqual({ 0: '16.7%', 1: '33.3%', 2: '50%' })
         })
         it('should return empty object from invalid arguments', () => {
             expect(getPercentagesFromAnswerStatuses([{} as AnswerStatus])).toEqual({})

diff --git a/packages/shared/lib/core/utils/number.ts b/packages/shared/lib/core/utils/number.ts
@@ -18,3 +18,8 @@ export function isNumberLetterOrPunctuation(key: string): boolean {
     const code = key.charCodeAt(0)
     return (code >= 48 && code <= 57) || (code >= 65 && code <= 122)
 }
+
+export function round(value: number, precision: number): number {
+    const multiplier = Math.pow(10, precision || 0)
+    return Math.round(value * multiplier) / multiplier
+}