feat(dapp): add missing page titles - part 2 styling (#6978)

# Motivation

From [NNS1-3834](https://dfinity.atlassian.net/browse/NNS1-3834): update
and uniform titles for all pages.
**This is part 2 (only design).**

# Changes

Changed the styling of the buttons in the header toolbar.
![localhost_5173_(iPhone 12 Pro)
(1)](https://github.com/user-attachments/assets/15fbfe59-1b28-4cd1-83bf-421ae1cbd4ff)
![localhost_5173_(iPhone 12
Pro)](https://github.com/user-attachments/assets/0bc58859-fb47-424d-becf-b733f0daead6)

![localhost_5173_](https://github.com/user-attachments/assets/85948d09-7d48-4499-84fb-a5518281d7fa)
![localhost_5173_
(1)](https://github.com/user-attachments/assets/fd06f150-eee7-49da-8182-0ee4c945d6d7)

# Tests

Tested desktop + mobile, dark and light themes.
CI should pass.

# Todos

- [x] Accessibility (a11y) – any impact?
- [x] Changelog – is it needed?

[NNS1-3834]:
https://dfinity.atlassian.net/browse/NNS1-3834?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: 0xFFrancesco

frontend/src/lib/components/header/AccountMenu.svelte

@@ -4,13 +4,14 @@
   import LinkToCanisters from "$lib/components/header/LinkToCanisters.svelte";
   import LinkToReporting from "$lib/components/header/LinkToReporting.svelte";
   import LinkToSettings from "$lib/components/header/LinkToSettings.svelte";
-  import LoginIconOnly from "$lib/components/header/LoginIconOnly.svelte";
   import Logout from "$lib/components/header/Logout.svelte";
   import ManageInternetIdentityButton from "$lib/components/header/ManageInternetIdentityButton.svelte";
   import ToggleBalancePrivacyOption from "$lib/components/header/ToggleBalancePrivacyOption.svelte";
   import { authSignedInStore } from "$lib/derived/auth.derived";
+  import { login } from "$lib/services/auth.services";
   import { i18n } from "$lib/stores/i18n";
-  import { IconUser, Popover } from "@dfinity/gix-components";
+  import { layoutAuthReady } from "$lib/stores/layout.store";
+  import { IconLogin, IconUser, Popover } from "@dfinity/gix-components";
 
   let visible = false;
   let button: HTMLButtonElement | undefined;
@@ -22,11 +23,11 @@
 <TestIdWrapper testId="account-menu-component">
   {#if $authSignedInStore}
     <button
-      data-tid="account-menu"
+      aria-label={$i18n.header.account_menu}
       class="icon-only toggle"
+      data-tid="account-menu"
       bind:this={button}
       on:click={toggle}
-      aria-label={$i18n.header.account_menu}
     >
       <IconUser />
     </button>
@@ -49,22 +50,34 @@
       </div>
     </Popover>
   {:else}
-    <LoginIconOnly />
+    <button
+      class="icon-only toggle"
+      aria-label={$i18n.auth.login}
+      disabled={!$layoutAuthReady}
+      data-tid="toolbar-login"
+      on:click={login}
+    >
+      <IconLogin />
+    </button>
   {/if}
 </TestIdWrapper>
 
 <style lang="scss">
   @use "@dfinity/gix-components/dist/styles/mixins/header";
 
   .info {
-    width: 100%;
-
-    display: flex;
     flex-direction: column;
     gap: var(--padding-3x);
+    display: flex;
+    width: 100%;
   }
 
-  .toggle {
+  .toggle,
+  :global([data-tid="menu-toggle"]) {
     @include header.button(--primary-tint);
+    background-color: var(--sidebar-button-background);
+    min-width: 0 !important;
+    height: 28px !important;
+    width: 28px !important;
   }
 </style>

frontend/src/lib/components/header/LoginIconOnly.svelte

@@ -20,10 +20,12 @@
 
 <style lang="scss">
   @use "@dfinity/gix-components/dist/styles/mixins/text";
-  @use "@dfinity/gix-components/dist/styles/mixins/media";
 
   h1 {
+    background-color: var(--sidebar-button-background);
     @include text.truncate;
+    border-radius: 45px;
+    padding: 4px 12px;
     line-height: 20px;
     font-size: 14px;
     margin: 0;

frontend/src/lib/components/header/Title.svelte

@@ -21,3 +21,14 @@
   {/snippet}
   {@render children()}
 </Content>
+
+<style lang="scss">
+  @use "@dfinity/gix-components/dist/styles/mixins/layout";
+
+  :global(.content .toolbar .back) {
+    background-color: var(--sidebar-button-background);
+    min-width: 0 !important;
+    height: 28px;
+    width: 28px;
+  }
+</style>