Display voting power in red when rewards are reduced

frontend/src/lib/components/neuron-detail/NnsNeuronVotingPowerSection.svelte

@@ -26,12 +26,21 @@
   let canVote: boolean;
   $: canVote =
     neuron.dissolveDelaySeconds >= BigInt(NNS_MINIMUM_DISSOLVE_DELAY_TO_VOTE);
+
+  let isReducedVotingPower = false;
+  $: isReducedVotingPower =
+    (neuron.decidingVotingPower ?? 0n) < (neuron.potentialVotingPower ?? 0n);
 </script>
 
 <Section testId="nns-neuron-voting-power-section-component">
   <KeyValuePairInfo slot="description">
     <h3 slot="key">{$i18n.neurons.voting_power}</h3>
-    <p slot="value" class="title-value" data-tid="voting-power">
+    <p
+      slot="value"
+      class="title-value"
+      class:isReducedVotingPower
+      data-tid="voting-power"
+    >
       {#if canVote}
         {formatVotingPower(neuron.decidingVotingPower ?? 0n)}
       {:else}
@@ -111,6 +120,10 @@
 
   .title-value {
     font-size: var(--font-size-h3);
+
+    &.isReducedVotingPower {
+      color: var(--negative-emphasis);
+    }
   }
 
   .content {

frontend/src/tests/lib/components/neuron-detail/NnsNeuronVotingPowerSection.spec.ts

@@ -164,4 +164,46 @@ describe("NnsStakeItemAction", () => {
 
     expect(await po.getNnsNeuronRewardStatusActionPo().isPresent()).toBe(false);
   });
+
+  it("should render voting power w/o extra styling when not reduced voting power", async () => {
+    overrideFeatureFlagsStore.setFlag(
+      "ENABLE_PERIODIC_FOLLOWING_CONFIRMATION",
+      true
+    );
+    const neuron: NeuronInfo = {
+      ...mockNeuron,
+      dissolveDelaySeconds: BigInt(NNS_MINIMUM_DISSOLVE_DELAY_TO_VOTE),
+      decidingVotingPower: 614000000n,
+      potentialVotingPower: 614000000n,
+      fullNeuron: {
+        ...mockFullNeuron,
+        decidingVotingPower: 614000000n,
+        potentialVotingPower: 614000000n,
+      },
+    };
+    const po = renderComponent(neuron);
+
+    expect(await po.isReducedVotingPowerStyle()).toBe(false);
+  });
+
+  it("should render voting power in red when reduced voting power", async () => {
+    overrideFeatureFlagsStore.setFlag(
+      "ENABLE_PERIODIC_FOLLOWING_CONFIRMATION",
+      true
+    );
+    const neuron: NeuronInfo = {
+      ...mockNeuron,
+      dissolveDelaySeconds: BigInt(NNS_MINIMUM_DISSOLVE_DELAY_TO_VOTE),
+      decidingVotingPower: 307000000n,
+      potentialVotingPower: 614000000n,
+      fullNeuron: {
+        ...mockFullNeuron,
+        decidingVotingPower: 307000000n,
+        potentialVotingPower: 614000000n,
+      },
+    };
+    const po = renderComponent(neuron);
+
+    expect(await po.isReducedVotingPowerStyle()).toBe(true);
+  });
 });

frontend/src/tests/page-objects/NnsNeuronVotingPowerSection.page-object.ts

@@ -61,4 +61,10 @@ export class NnsNeuronVotingPowerSectionPo extends BasePageObject {
   clickDisburse(): Promise<void> {
     return this.getNeuronStateItemActionPo().clickDisburse();
   }
+
+  async isReducedVotingPowerStyle(): Promise<boolean> {
+    return (await this.root.byTestId("voting-power").getClasses()).includes(
+      "isReducedVotingPower"
+    );
+  }
 }