From 3b219007a42d7045300cea182cac80a6b0059879 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Fri, 6 Dec 2024 12:44:59 +0100
Subject: [PATCH 1/4] frontend: fix chart edgecase to properly update the total
 amount

On mobile the total changes when the user selects a point on the
chart so that they can see exact amount at the time.

With scrolling or 2nd finger changing the currency it can happen
that the amount does not update, ending up with a wrong amount/unit.

Fixed by resetting the tooltip value if the currency changes.
---
 frontends/web/src/routes/account/summary/chart.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/frontends/web/src/routes/account/summary/chart.tsx b/frontends/web/src/routes/account/summary/chart.tsx
index 8383051304..4fd4fe9246 100644
--- a/frontends/web/src/routes/account/summary/chart.tsx
+++ b/frontends/web/src/routes/account/summary/chart.tsx
@@ -26,6 +26,7 @@ import { PercentageDiff } from './percentage-diff';
 import { Filters } from './filters';
 import { getDarkmode } from '@/components/darkmode/darkmode';
 import { DefaultCurrencyRotator } from '@/components/rates/rates';
+import { RatesContext } from '@/contexts/RatesContext';
 import { AppContext, TChartDisplay } from '@/contexts/AppContext';
 import styles from './chart.module.css';
 
@@ -137,6 +138,7 @@ export const Chart = ({
 
   const { t, i18n } = useTranslation();
   const { chartDisplay, setChartDisplay } = useContext(AppContext);
+  const { defaultCurrency } = useContext(RatesContext);
   const [searchParams] = useSearchParams();
 
   const ref = useRef<HTMLDivElement>(null);
@@ -163,6 +165,15 @@ export const Chart = ({
     toolTipTime: 0,
   });
 
+  useEffect(() => {
+    setTooltipData({
+      toolTipVisible: false,
+      toolTipTop: 0,
+      toolTipLeft: 0,
+      toolTipTime: 0,
+    });
+  }, [defaultCurrency]);
+
   const [showAnimationOverlay, setAnimationOverlay] = useState(true);
 
   const prevChartDataDaily = usePrevious(data.chartDataDaily);

From 96800e8b9d923dcb9969f968c28eb7d02b8ddf08 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 9 May 2024 11:06:05 +0200
Subject: [PATCH 2/4] frontend: remove unused css files

Removed unused CSS files as they are not importated anywhere.
---
 frontends/web/src/routes/bitsurance/account.module.css | 5 -----
 frontends/web/src/routes/exchange/info.module.css      | 5 -----
 2 files changed, 10 deletions(-)
 delete mode 100644 frontends/web/src/routes/bitsurance/account.module.css
 delete mode 100644 frontends/web/src/routes/exchange/info.module.css

diff --git a/frontends/web/src/routes/bitsurance/account.module.css b/frontends/web/src/routes/bitsurance/account.module.css
deleted file mode 100644
index 3af60ceb6b..0000000000
--- a/frontends/web/src/routes/bitsurance/account.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.title {
-  font-size: 2rem;
-  font-weight: 400;
-  text-align: center;
-}
diff --git a/frontends/web/src/routes/exchange/info.module.css b/frontends/web/src/routes/exchange/info.module.css
deleted file mode 100644
index 3af60ceb6b..0000000000
--- a/frontends/web/src/routes/exchange/info.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.title {
-  font-size: 2rem;
-  font-weight: 400;
-  text-align: center;
-}

From 1b53371eb21f034d22f70b8631e20e8e10124f74 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 9 May 2024 11:37:13 +0200
Subject: [PATCH 3/4] frontend: prepare for responsive font-size

In order to change the CSS to change the codebase to use rem, using
'The 62.5% Font Size Trick' we need to first convert all existing
rem units back to px. This is so that we don't accidentally already
have rem values.

If the default base font size is 16px, 1rem equals 16px. Changing
back to pixel first makes it much easier to use the 62.5% trick
where 1rem = 10px.

This refactoring should not introduce any visual change and just
converted rem to px. I.e. 1.5rem is now 24px as 1rem currently
equals 16px.

Also simplified terms.module.css a bit as the title was defined
multiple times.
---
 .../web/src/components/guide/guide.module.css    |  6 +++---
 frontends/web/src/components/password.module.css |  2 +-
 .../pillbuttongroup/pillbuttongroup.module.css   |  2 +-
 .../web/src/components/terms/terms.module.css    | 16 +++++-----------
 .../web/src/routes/account/add/add.module.css    |  2 +-
 .../web/src/routes/account/info/info.module.css  |  2 +-
 .../account/summary/accountssummary.module.css   |  2 +-
 .../src/routes/account/summary/chart.module.css  | 14 +++++++-------
 .../account/summary/percentage-diff.module.css   |  8 ++++----
 .../web/src/routes/device/bitbox01/check.jsx     |  2 +-
 .../routes/device/components/backups.module.css  |  2 +-
 .../web/src/routes/exchange/exchange.module.css  |  2 +-
 frontends/web/src/style/variables.css            | 12 ++++++------
 13 files changed, 33 insertions(+), 39 deletions(-)

diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
index 37a70e1bcb..014cfb956d 100644
--- a/frontends/web/src/components/guide/guide.module.css
+++ b/frontends/web/src/components/guide/guide.module.css
@@ -74,10 +74,9 @@
 }
 
 .content h2 {
-    font-size: 1.1em;
+    font-size: var(--size-subheader);
     font-weight: 400;
-    line-height: 1.2em;
-    margin: 0px;
+    margin: 0;
 }
 
 .guide p {
@@ -104,6 +103,7 @@
 .entryTitle .entryToggle {
     align-items: center;
     display: flex;
+    font-size: var(--size-subheader);
     flex-direction: row;
     font-weight: bold;
     justify-content: flex-start;
diff --git a/frontends/web/src/components/password.module.css b/frontends/web/src/components/password.module.css
index 313232864d..09fda96a40 100644
--- a/frontends/web/src/components/password.module.css
+++ b/frontends/web/src/components/password.module.css
@@ -4,5 +4,5 @@
     line-height: 42px;
     position: absolute;
     right: 0;
-    width: 2rem;
+    width: 32px;
 }
diff --git a/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css b/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css
index f0c72a8581..8c92b25549 100644
--- a/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css
+++ b/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css
@@ -9,7 +9,7 @@
 	appearance: none;
 	background: var(--background-secondary);
 	border: 2px solid var(--background-secondary);
-	border-radius: 2rem;
+	border-radius: 32px;
 	color: var(--color-default);
 	font-size: var(--size-default);
 	line-height: 1.75;
diff --git a/frontends/web/src/components/terms/terms.module.css b/frontends/web/src/components/terms/terms.module.css
index 4098619777..5dff9bca79 100644
--- a/frontends/web/src/components/terms/terms.module.css
+++ b/frontends/web/src/components/terms/terms.module.css
@@ -12,12 +12,6 @@
   width: 100%;
 }
 
-.title {
-  font-size: 2rem;
-  font-weight: 400;
-  text-align: center;
-}
-
 .disclaimer {
   background-color: var(--background-secondary);
   flex-basis: 100%;
@@ -30,19 +24,19 @@
   padding: var(--space-quarter) 1em 1em 1em;
 }
 
-.disclaimer .title {
-  font-size: .875rem;
+.title {
+  font-size: 14px;
   font-weight: bold;
   text-align: left;
 }
 
 .disclaimer p {
-  font-size: .875rem;
+  font-size: 14px;
   line-height: 1.5;
 }
 
 .disclaimer p + .title {
-  margin: 2.5rem 0 0 0;
+  margin: 40px 0 0 0;
 }
 
 .table {
@@ -51,7 +45,7 @@
 
 .table table {
   border-collapse: collapse;
-  font-size: .875rem;
+  font-size: 14px;
   text-align: left;
 }
 
diff --git a/frontends/web/src/routes/account/add/add.module.css b/frontends/web/src/routes/account/add/add.module.css
index 070334489c..d43d2f0569 100644
--- a/frontends/web/src/routes/account/add/add.module.css
+++ b/frontends/web/src/routes/account/add/add.module.css
@@ -13,7 +13,7 @@
 
 .successCheck {
     background-color: var(--color-success);
-    border: .5rem solid var(--color-success);
+    border: 8px solid var(--color-success);
     border-radius: 100px;
 }
 
diff --git a/frontends/web/src/routes/account/info/info.module.css b/frontends/web/src/routes/account/info/info.module.css
index f6981d2b2e..6b7419f542 100644
--- a/frontends/web/src/routes/account/info/info.module.css
+++ b/frontends/web/src/routes/account/info/info.module.css
@@ -36,7 +36,7 @@
     clear: both;
     display: flex;
     justify-content: space-between;
-    min-height: 3.5rem;
+    min-height: 56px;
 }
 
 .verifyButton {
diff --git a/frontends/web/src/routes/account/summary/accountssummary.module.css b/frontends/web/src/routes/account/summary/accountssummary.module.css
index d65da56922..4a01d318d0 100644
--- a/frontends/web/src/routes/account/summary/accountssummary.module.css
+++ b/frontends/web/src/routes/account/summary/accountssummary.module.css
@@ -193,7 +193,7 @@
     }
 
     .coinName img {
-        left: -2rem;
+        left: -32px;
         position: absolute;
         top: -3px;
     }
diff --git a/frontends/web/src/routes/account/summary/chart.module.css b/frontends/web/src/routes/account/summary/chart.module.css
index d9cb9e30c6..36652e180e 100644
--- a/frontends/web/src/routes/account/summary/chart.module.css
+++ b/frontends/web/src/routes/account/summary/chart.module.css
@@ -78,7 +78,7 @@
 }
 
 .totalValue {
-  font-size: 2rem;
+  font-size: 32px;
   display: flex;
   align-items: flex-end;
 }
@@ -87,8 +87,8 @@
   color: var(--color-secondary);
   display: inline-block;
   margin-bottom: 3px;
-  font-size: 1.4rem;
-  padding: 0 .25rem;
+  font-size: 22px;
+  padding: 0 4px;
 }
 
 .chartCanvas {
@@ -109,7 +109,7 @@
   font-size: var(--size-small);
   margin-top: -25px;
   min-width: 140px;
-  padding: .75rem .6rem;
+  padding: 12px 10px;
   pointer-events: none;
   position: absolute;
   text-align: center;
@@ -119,14 +119,14 @@
 
 .toolTipValue {
   font-weight: normal;
-  font-size: 1rem;
-  margin: 0 0 .25rem 0;
+  font-size: 16px;
+  margin: 0 0 4px 0;
 }
 
 .toolTipUnit {
   color: var(--color-secondary);
   font-size: var(--size-small);
-  padding: 0 .125rem;
+  padding: 0 2px;
 }
 
 .toolTipTime {
diff --git a/frontends/web/src/routes/account/summary/percentage-diff.module.css b/frontends/web/src/routes/account/summary/percentage-diff.module.css
index fb032d8493..d4380296b2 100644
--- a/frontends/web/src/routes/account/summary/percentage-diff.module.css
+++ b/frontends/web/src/routes/account/summary/percentage-diff.module.css
@@ -1,6 +1,6 @@
 
 .arrow img {
-  margin-right: .25rem;
+  margin-right: 4px;
   vertical-align: text-bottom;
 }
 
@@ -13,10 +13,10 @@
 }
 
 .diffValue {
-  font-size: 1.2rem;
+  font-size: 19px;
 }
 
 .diffUnit {
-  font-size: 1rem;
-  padding: 0 .25rem;
+  font-size: 16px;
+  padding: 0 4px;
 }
diff --git a/frontends/web/src/routes/device/bitbox01/check.jsx b/frontends/web/src/routes/device/bitbox01/check.jsx
index f34a14270d..c829018178 100644
--- a/frontends/web/src/routes/device/bitbox01/check.jsx
+++ b/frontends/web/src/routes/device/bitbox01/check.jsx
@@ -99,7 +99,7 @@ class Check extends Component {
               onClose={this.abort}>
               { message ? (
                 <div>
-                  <p style={{ minHeight: '3rem' }}>{message}</p>
+                  <p style={{ minHeight: '48px' }}>{message}</p>
                   <div className={style.actions}>
                     <Button secondary onClick={this.abort}>
                       {t('button.back')}
diff --git a/frontends/web/src/routes/device/components/backups.module.css b/frontends/web/src/routes/device/components/backups.module.css
index 32544c62d8..26f4df2cf1 100644
--- a/frontends/web/src/routes/device/components/backups.module.css
+++ b/frontends/web/src/routes/device/components/backups.module.css
@@ -36,7 +36,7 @@
 }
 
 .agreements {
-    margin-bottom: 1rem;
+    margin-bottom: 16px;
 }
 
 .emptyText {
diff --git a/frontends/web/src/routes/exchange/exchange.module.css b/frontends/web/src/routes/exchange/exchange.module.css
index 53c51752eb..190ef13e55 100644
--- a/frontends/web/src/routes/exchange/exchange.module.css
+++ b/frontends/web/src/routes/exchange/exchange.module.css
@@ -85,7 +85,7 @@
 }
 
 .title {
-    font-size: 2rem;
+    font-size: 32px;
     font-weight: 400;
     margin-top: 0;
     margin-bottom: var(--space-default);
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index 0fbb33941c..20918080d9 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -48,9 +48,9 @@
     --color-error-border: rgba(227, 6, 19, .33);
 
     /* font sizes */
-    --size-extra-large: 2.2rem;
-    --size-large: 2rem;
-    --size-large-mobile: 1.4rem;
+    --size-extra-large: 35px;
+    --size-large: 32px;
+    --size-large-mobile: 22px;
     --size-subheader: 18px;
     --size-medium: var(--size-default);
     --size-default: 14px;
@@ -64,9 +64,9 @@
     --size-wizard-text: 16px;
 
     /* spacing */
-    --spacing-large: 2rem;
-    --spacing-default: 1rem;
-    --spacing-half: .5rem;
+    --spacing-large: 32px;
+    --spacing-default: 16px;
+    --spacing-half: 8px;
 
     --space-large: 64px;
     --space-default: 32px;

From 3d778dabd8730c30e7500d9ec291a5aceab77431 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 12 Dec 2024 15:30:08 +0100
Subject: [PATCH 4/4] frontend: add missing license header

---
 .../components/dialogs/message-wait-dialog.tsx   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/frontends/web/src/routes/account/send/components/dialogs/message-wait-dialog.tsx b/frontends/web/src/routes/account/send/components/dialogs/message-wait-dialog.tsx
index 6f30f12968..7d7176fa25 100644
--- a/frontends/web/src/routes/account/send/components/dialogs/message-wait-dialog.tsx
+++ b/frontends/web/src/routes/account/send/components/dialogs/message-wait-dialog.tsx
@@ -1,3 +1,19 @@
+/**
+ * Copyright 2023-2024 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import { useTranslation } from 'react-i18next';
 import { ISendTx } from '@/api/account';
 import { Cancel, Checked } from '@/components/icon/icon';