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.

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>

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> {