frontend: cleanup css

frontends/web/src/components/balance/balance.module.css

@@ -41,7 +41,7 @@
   }
 
   .balanceTable td {
-    font-size: var(--size-large-mobile);
+    font-size: var(--size-header);
     line-height: 1.5;
   }
 

frontends/web/src/components/dialog/dialog.module.css

@@ -203,7 +203,7 @@
 @media (max-width: 768px) {
 
     .header .title{
-        font-size: var(--header-default-font-size);
+        font-size: var(--size-header);
     }
 
     .modal {

frontends/web/src/components/guide/guide.module.css

@@ -56,7 +56,7 @@
 }
 
 .header h2 {
-    font-size: var(--header-default-font-size);
+    font-size: var(--size-header);
     font-weight: 400;
     margin: 0;
 }

frontends/web/src/components/layout/header.module.css

@@ -78,7 +78,7 @@
 
 .title > * {
     margin: 0;
-    font-size: var(--header-default-font-size);
+    font-size: var(--size-header);
     font-weight: 400;
     line-height: 1;
     display: inline-flex;

frontends/web/src/components/wallet-connect/incoming-signing-request.module.css

@@ -21,7 +21,7 @@
 }
 
 .animationAndTextContainer p {
-    font-size: var(--header-default-font-size);
+    font-size: var(--size-header);
     margin-top: var(--space-quarter);
 }
 
@@ -101,7 +101,7 @@
 }
 
 .titleContainer h3 {
-    font-size: var(--header-default-font-size);
+    font-size: var(--size-header);
     font-weight: 400;
     margin: 0 0 0 var(--space-eight);
     padding: 0 var(--space-quarter);

frontends/web/src/routes/account/info/info.module.css

@@ -1,5 +1,5 @@
 .title {
-    font-size: var(--header-default-font-size);
+    font-size: var(--size-header);
     font-weight: 400;
 }
 

frontends/web/src/routes/account/receive/receive.module.css

@@ -40,7 +40,7 @@
     background: none;
     border: 0;
     color: var(--color-blue);
-    font-size: var(--size-button);
+    font-size: var(--size-default);
     line-height: 1;
     padding: 0;
     text-decoration: none;

frontends/web/src/routes/account/send/components/confirm/confirm.module.css

@@ -64,6 +64,6 @@
 }
 
 .valueOriginalLarge {
-  font-size: var(--header-default-font-size);
+  font-size: var(--size-header);
   font-weight: 500;
 }

frontends/web/src/routes/device/bitbox02/setup/checklist.module.css

@@ -1,9 +1,3 @@
-/* TODO: ideally fontsize of those labels would just use the default from View component */
-.wizardCheckbox label {
-  font-size: var(--size-wizard-text) !important;
-  line-height: 1.4;
-}
-
 .wizardCheckbox label::before {
   top: 2px !important;
 }

frontends/web/src/routes/device/bitbox02/setup/name.module.css

@@ -1,8 +1,3 @@
-/* TODO: ideally fontsize of those labels would just use the default from View component */
-.wizardLabel label {
-  font-size: var(--size-wizard-text) !important;
-}
-
 .inputError input,
 .inputError input:focus {
   border-color: var(--color-danger);
@@ -11,7 +6,7 @@
 .errorMessage {
   color: var(--color-danger);
   display: block;
-  font-size: var(--size-medium);
+  font-size: var(--size-default);
   padding-top: var(--space-quarter);
 }
 

frontends/web/src/style/variables.css

@@ -48,21 +48,14 @@
     --color-error-border: rgba(227, 6, 19, .33);
 
     /* font sizes */
-    --size-extra-large: 2.2rem;
     --size-large: 2rem;
-    --size-large-mobile: 1.4rem;
+    --size-header: 24px;
     --size-subheader: 18px;
-    --size-medium: var(--size-default);
     --size-default: 14px;
     --size-small: 12px;
     --size-xsmall: 11px;
-    --size-label: var(--size-small);
-    --size-button: var(--size-default);
     --size-title: 32px;
 
-    /* wizard */
-    --size-wizard-text: 16px;
-
     /* spacing */
     --spacing-large: 2rem;
     --spacing-default: 1rem;
@@ -94,7 +87,6 @@
 
     /* header */
     --header-height: 70px;
-    --header-default-font-size: 24px;
 
     /* content */
     --content-width: 1080px;
@@ -208,11 +200,9 @@
 
 @media (max-width: 768px) {
     :root {
-        --header-default-font-size: 20px;
+        --size-header: 20px;
         --size-subheader: 16px;
         --size-title: 16px;
-
-        --size-wizard-text: 14px;
         --size-default: 16px;
     }
 }