From 9239fa1408091e1cb3a136bfae2d15a04ab8b1c3 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <98811342+mstrasinskis@users.noreply.github.com>
Date: Wed, 8 Jan 2025 09:08:21 +0000
Subject: [PATCH] Update HW hotkey banner style (#6117)

# Motivation

To make the HW-hotkey banner less distracting, it should be displayed in
the standard style with an info icon.

# Changes

- Replace Callout with Banner component.

# Tests

- Updated.
- Tested locally.

| Before | After |
|--------|--------|
| ![Screenshot 2025-01-07 at 22 19
23](https://github.com/user-attachments/assets/2aef1b7d-a917-4ce4-9249-8fad7d08ceaa)
| ![Screenshot 2025-01-07 at 22 18
12](https://github.com/user-attachments/assets/11eea01c-a419-4a80-a173-ac492dc587fa)
|

# Todos

- [ ] Add entry to changelog (if necessary).
Not necessary.
---
 .../lib/components/neurons/AddUserToHotkeys.svelte    | 11 ++++++++---
 .../page-objects/AddUserToHotkeys.page-object.ts      |  4 ++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/neurons/AddUserToHotkeys.svelte b/frontend/src/lib/components/neurons/AddUserToHotkeys.svelte
index ff6c73b3860..eecb4521f3b 100644
--- a/frontend/src/lib/components/neurons/AddUserToHotkeys.svelte
+++ b/frontend/src/lib/components/neurons/AddUserToHotkeys.svelte
@@ -3,11 +3,12 @@
   import { authStore } from "$lib/stores/auth.store";
   import { i18n } from "$lib/stores/i18n";
   import type { Account } from "$lib/types/account";
-  import { busy } from "@dfinity/gix-components";
+  import { busy, IconInfo } from "@dfinity/gix-components";
   import type { NeuronId } from "@dfinity/nns";
   import { createEventDispatcher } from "svelte";
-  import CalloutWarning from "$lib/components/common/CalloutWarning.svelte";
   import { ENABLE_PERIODIC_FOLLOWING_CONFIRMATION } from "$lib/stores/feature-flags.store";
+  import Banner from "$lib/components/ui/Banner.svelte";
+  import BannerIcon from "$lib/components/ui/BannerIcon.svelte";
 
   export let account: Account;
   export let neuronId: NeuronId;
@@ -33,7 +34,11 @@
 
 <div class="wrapper" data-tid="add-principal-to-hotkeys-modal">
   {#if $ENABLE_PERIODIC_FOLLOWING_CONFIRMATION}
-    <CalloutWarning htmlText={$i18n.losing_rewards.hw_create_neuron_warning} />
+    <Banner htmlText={$i18n.losing_rewards.hw_create_neuron_warning}>
+      <BannerIcon slot="icon">
+        <IconInfo />
+      </BannerIcon>
+    </Banner>
   {/if}
 
   <p class="description">{$i18n.neurons.add_user_as_hotkey_message}</p>
diff --git a/frontend/src/tests/page-objects/AddUserToHotkeys.page-object.ts b/frontend/src/tests/page-objects/AddUserToHotkeys.page-object.ts
index 25e1e6f440e..c7a39f356db 100644
--- a/frontend/src/tests/page-objects/AddUserToHotkeys.page-object.ts
+++ b/frontend/src/tests/page-objects/AddUserToHotkeys.page-object.ts
@@ -1,6 +1,6 @@
-import { CalloutWarningPo } from "$tests/page-objects/CalloutWarning.page-object";
 import { BasePageObject } from "$tests/page-objects/base.page-object";
 import type { PageObjectElement } from "$tests/types/page-object.types";
+import { BannerPo } from "./Banner.page-object";
 
 export class AddUserToHotkeysPo extends BasePageObject {
   private static readonly TID = "add-principal-to-hotkeys-modal";
@@ -10,7 +10,7 @@ export class AddUserToHotkeysPo extends BasePageObject {
   }
 
   isMissingRewardsWarningVisible(): Promise<boolean> {
-    return CalloutWarningPo.under(this.root).isPresent();
+    return BannerPo.under(this.root).isPresent();
   }
 
   clickSkip(): Promise<void> {