Display VP in expandable (#6138)

# Motivation To clean up the page UI, the voting power calculations should be displayed inside a collapsible section. Note: it's more convenient to review with the "Hide whitespaces" checked. # Changes - Use `KeyValuePairInfo` to display the VP calculation details inside collapsible. # Tests - Tested manually. ![Screenshot 2025-01-10 at 00 39 06](https://github.com/user-attachments/assets/ffee3c57-48a6-452f-9479-ff60fadf7d79) ![Screenshot 2025-01-10 at 00 38 56](https://github.com/user-attachments/assets/8d72c041-a48f-4a3c-b296-e82b07cbd526) ot ![Screenshot 2025-01-10 at 00 38 41](https://github.com/user-attachments/assets/e5bb2edc-39a6-43ca-8cb2-9d6df325f2df) ![Screenshot 2025-01-10 at 00 38 13](https://github.com/user-attachments/assets/4f3fb0c6-9e64-49d2-a097-5fdeb58b8a04) # Todos - [ ] Add entry to changelog (if necessary). Not necessary.
dfinity · Jan 10, 2025 · 658f740 · 658f740
1 parent 5b56107
commit 658f740
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 59 deletions.
diff --git a/frontend/src/lib/components/neuron-detail/NnsNeuronVotingPowerSection.svelte b/frontend/src/lib/components/neuron-detail/NnsNeuronVotingPowerSection.svelte
@@ -16,7 +16,7 @@
   import NnsNeuronDissolveDelayItemAction from "./NnsNeuronDissolveDelayItemAction.svelte";
   import NnsNeuronStateItemAction from "./NnsNeuronStateItemAction.svelte";
   import NnsStakeItemAction from "./NnsStakeItemAction.svelte";
-  import { Html, Section } from "@dfinity/gix-components";
+  import { Html, KeyValuePairInfo, Section } from "@dfinity/gix-components";
   import type { NeuronInfo } from "@dfinity/nns";
   import { ENABLE_PERIODIC_FOLLOWING_CONFIRMATION } from "$lib/stores/feature-flags.store";
 
@@ -29,61 +29,69 @@
 </script>
 
 <Section testId="nns-neuron-voting-power-section-component">
-  <h3 slot="title">{$i18n.neurons.voting_power}</h3>
-  <p slot="end" class="title-value" data-tid="voting-power">
-    {#if canVote}
-      {formatVotingPower(neuron.decidingVotingPower ?? 0n)}
-    {:else}
-      {$i18n.neuron_detail.voting_power_zero}
-    {/if}
-  </p>
-  <svelte:fragment slot="description">
-    {#if canVote}
-      <p class="description">
-        {$i18n.neuron_detail.calculated_as}
-      </p>
-      <p
-        class="description calculation"
-        data-tid="voting-power-generic-description"
-      >
-        {$ENABLE_PERIODIC_FOLLOWING_CONFIRMATION
-          ? $i18n.neuron_detail.voting_power_section_calculation_generic_new
-          : $i18n.neuron_detail.voting_power_section_calculation_generic}
-      </p>
-      <p class="description">
-        {$i18n.neuron_detail.this_neuron_calculation}
-      </p>
-      <p class="description calculation" data-tid="voting-power-description">
-        {replacePlaceholders(
-          $ENABLE_PERIODIC_FOLLOWING_CONFIRMATION
-            ? $i18n.neuron_detail.voting_power_section_calculation_specific_new
-            : $i18n.neuron_detail.voting_power_section_calculation_specific,
-          {
-            $stake: formatTokenE8s({
-              value: neuronStake(neuron),
-            }),
-            $maturityStaked: formattedStakedMaturity(neuron),
-            $ageMultiplier: ageMultiplier(neuron.ageSeconds).toFixed(2),
-            $dissolveMultiplier: dissolveDelayMultiplier(
-              neuron.dissolveDelaySeconds
-            ).toFixed(2),
-            $activityMultiplier: activityMultiplier(neuron).toFixed(2),
-            $votingPower: formatVotingPower(neuron.decidingVotingPower ?? 0n),
-          }
-        )}
-      </p>
-    {:else}
-      <p class="description" data-tid="voting-power-description">
-        <Html
-          text={replacePlaceholders(
-            $i18n.neuron_detail
-              .voting_power_section_description_expanded_zero_nns,
-            { $dashboardLink: neuronDashboardUrl(neuron) }
-          )}
-        />
-      </p>
-    {/if}
-  </svelte:fragment>
+  <KeyValuePairInfo slot="description">
+    <h3 slot="key">{$i18n.neurons.voting_power}</h3>
+    <p slot="value" class="title-value" data-tid="voting-power">
+      {#if canVote}
+        {formatVotingPower(neuron.decidingVotingPower ?? 0n)}
+      {:else}
+        {$i18n.neuron_detail.voting_power_zero}
+      {/if}
+    </p>
+
+    <span class="info" slot="info">
+      {#if canVote}
+        <span class="info-item">
+          <span class="label">
+            {$i18n.neuron_detail.calculated_as}
+          </span>
+          <span class="calculation" data-tid="voting-power-generic-description">
+            {$ENABLE_PERIODIC_FOLLOWING_CONFIRMATION
+              ? $i18n.neuron_detail.voting_power_section_calculation_generic_new
+              : $i18n.neuron_detail.voting_power_section_calculation_generic}
+          </span>
+        </span>
+        <span class="info-item">
+          <span class="label">
+            {$i18n.neuron_detail.this_neuron_calculation}
+          </span>
+          <span class="calculation" data-tid="voting-power-description">
+            {replacePlaceholders(
+              $ENABLE_PERIODIC_FOLLOWING_CONFIRMATION
+                ? $i18n.neuron_detail
+                    .voting_power_section_calculation_specific_new
+                : $i18n.neuron_detail.voting_power_section_calculation_specific,
+              {
+                $stake: formatTokenE8s({
+                  value: neuronStake(neuron),
+                }),
+                $maturityStaked: formattedStakedMaturity(neuron),
+                $ageMultiplier: ageMultiplier(neuron.ageSeconds).toFixed(2),
+                $dissolveMultiplier: dissolveDelayMultiplier(
+                  neuron.dissolveDelaySeconds
+                ).toFixed(2),
+                $activityMultiplier: activityMultiplier(neuron).toFixed(2),
+                $votingPower: formatVotingPower(
+                  neuron.decidingVotingPower ?? 0n
+                ),
+              }
+            )}
+          </span>
+        </span>
+      {:else}
+        <span data-tid="voting-power-description">
+          <Html
+            text={replacePlaceholders(
+              $i18n.neuron_detail
+                .voting_power_section_description_expanded_zero_nns,
+              { $dashboardLink: neuronDashboardUrl(neuron) }
+            )}
+          />
+        </span>
+      {/if}
+    </span>
+  </KeyValuePairInfo>
+
   <ul class="content">
     <NnsStakeItemAction {neuron} />
     <NnsNeuronStateItemAction {neuron} />
@@ -95,6 +103,8 @@
 </Section>
 
 <style lang="scss">
+  @use "@dfinity/gix-components/dist/styles/mixins/fonts";
+
   h3 {
     margin: 0;
   }
@@ -111,8 +121,27 @@
     padding: 0;
   }
 
-  .calculation {
-    font-family: monospace;
-    font-size: 12px;
+  .info,
+  .info-item {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .info {
+    @include fonts.small;
+    gap: var(--padding-2x);
+
+    .info-item {
+      gap: var(--padding-0_5x);
+    }
+
+    .label {
+      color: var(--text-color);
+    }
+
+    .calculation {
+      font-family: monospace;
+      font-size: 12px;
+    }
   }
 </style>
diff --git a/...rc/tests/e2e/screenshots/neuron-details.spec.ts-desktop-Google-Chrome-linux.png b/...rc/tests/e2e/screenshots/neuron-details.spec.ts-desktop-Google-Chrome-linux.png
diff --git a/...tend/src/tests/e2e/screenshots/neuron-details.spec.ts-desktop-firefox-linux.png b/...tend/src/tests/e2e/screenshots/neuron-details.spec.ts-desktop-firefox-linux.png
diff --git a/...src/tests/e2e/screenshots/neuron-details.spec.ts-mobile-Google-Chrome-linux.png b/...src/tests/e2e/screenshots/neuron-details.spec.ts-mobile-Google-Chrome-linux.png
diff --git a/frontend/src/tests/e2e/screenshots/neuron-details.spec.ts-mobile-firefox-linux.png b/frontend/src/tests/e2e/screenshots/neuron-details.spec.ts-mobile-firefox-linux.png