From be33f87dc4490d58e7c51e1680a7ebcfe847a873 Mon Sep 17 00:00:00 2001
From: Antonio Ventilii
 <169057656+AntonioVentilii-DFINITY@users.noreply.github.com>
Date: Mon, 4 Nov 2024 22:35:15 +0100
Subject: [PATCH 1/2] style(frontend): update Refresh button to current pallete
 (#3308)

# Motivation

We adapt the refresh button to use the `brand-secondary` color for
`hover` and `active`, as defined by the Design.
---
 .../IcTransactionsBitcoinStatusBalance.svelte         | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/frontend/src/icp/components/transactions/IcTransactionsBitcoinStatusBalance.svelte b/src/frontend/src/icp/components/transactions/IcTransactionsBitcoinStatusBalance.svelte
index 25bffea1d1..8769007376 100644
--- a/src/frontend/src/icp/components/transactions/IcTransactionsBitcoinStatusBalance.svelte
+++ b/src/frontend/src/icp/components/transactions/IcTransactionsBitcoinStatusBalance.svelte
@@ -86,7 +86,7 @@
 		</div>{:else}
 		<button
 			in:blur
-			class="text flex gap-2 border-0 text-brand-primary"
+			class="text flex gap-2 border-0 text-brand-primary hover:text-brand-secondary active:text-brand-secondary"
 			on:click={async () => await receive()}
 			><IconReimbursed size="24" /> {$i18n.core.text.refresh}</button
 		>
@@ -102,12 +102,3 @@
 		</div>
 	</Modal>
 {/if}
-
-<style lang="scss">
-	button {
-		&:hover,
-		&:active {
-			color: var(--color-dark-blue);
-		}
-	}
-</style>

From 7cd5f5bb2e296dc4250de2e47217a4d93dace17e Mon Sep 17 00:00:00 2001
From: BonomoAlessandro <64775378+BonomoAlessandro@users.noreply.github.com>
Date: Tue, 5 Nov 2024 08:31:47 +0100
Subject: [PATCH 2/2] style(frontend): fix modal covering (#3302)

# Motivation

The vh measurement, shorthand for Viewport Height, refers to the height
of the viewing area of your device or browser. When you define something
as 100vh, it means it should take up 100% of the viewport height.
However, this measure doesn't consider changes in the size of the
browser's interface elements like the URL bar. Consequently, when these
elements alter their size dynamically, your modals that use vh could end
up being partially hidden under these elements, as 100vh can sometimes
span beyond the visible area.
To solve this, we use 100dvh, where dvh stands for dynamic viewport
height. This measure dynamically recalculates the height of the viewport
(vh) considering any changes to the display of the browser's interface
elements, like the URL bar. With 100dvh, you're ensuring that your
modals are displayed within the actually visible part of the page,
rather than being potentially hidden by dynamically changing browser
interfaces.

# Changes

- uses dynamic height for modals

# Tests

**before:**

Brave browser:

![image](https://github.com/user-attachments/assets/40ef0d0e-8ca8-4b91-ab31-3e02d82f60fc)

Chrome browser:

![image](https://github.com/user-attachments/assets/527ddd49-eed1-4e61-ae74-c3d72976eb8b)


**after:**

Brave browser:

![image](https://github.com/user-attachments/assets/388c3f0b-fd71-4875-b9c5-db1653e739a5)

Chrome browser:

![image](https://github.com/user-attachments/assets/8ea61714-13e6-437f-a722-92494263a426)
---
 src/frontend/src/lib/styles/global/gix.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/lib/styles/global/gix.scss b/src/frontend/src/lib/styles/global/gix.scss
index 5f4da67e3f..2118ae6a0f 100644
--- a/src/frontend/src/lib/styles/global/gix.scss
+++ b/src/frontend/src/lib/styles/global/gix.scss
@@ -60,7 +60,7 @@
 
 	--alert-width: calc(100% - var(--padding-8x));
 	--alert-max-width: calc(100vw - var(--padding-4x));
-	--alert-max-height: calc(100vh - var(--padding-4x));
+	--alert-max-height: calc(100dvh - var(--padding-4x));
 	--alert-border-radius: var(--border-radius-xs);
 	--alert-padding-y: 0;
 	--alert-padding-x: 0;