frontend: improve form elements in responsive mode

Improved various form elements mostly related to Send view.

Can be tested by setting font-size: 150%; on the html element.

Author: thisconnect

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

@@ -56,7 +56,7 @@
 
 .select :global(.react-select__control) {
     background-color: var(--background-secondary);
-    border-radius: 2px;
+    border-radius: 0.2rem;
     padding: var(--space-quarter) var(--space-eight);
 }
 

frontends/web/src/components/forms/checkbox.module.css

@@ -7,7 +7,7 @@
 .checkbox input + label {
     display: inline-block;
     max-width: 100%;
-    padding-left: 2em;
+    padding-left: 2rem;
     position: relative;
 }
 
@@ -27,7 +27,7 @@
 }
 
 .checkbox input + label::before {
-    border: 1px solid var(--background-tertiary);
+    border: 0.1rem solid var(--background-tertiary);
     border-radius: 2px;
     top: 2px;
 }
@@ -37,11 +37,11 @@
 }
 .warning input + label::before {
     border-color: var(--background-secondary);
-    outline: 1px solid var(--color-warning);
+    outline: 0.1rem solid var(--color-warning);
 }
 .info input + label::before {
     border-color: var(--background-secondary);
-    outline: 1px solid var(--color-info);
+    outline: 0.1rem solid var(--color-info);
 }
 
 .checkbox input + label::after {
@@ -51,8 +51,8 @@
     width: 0.35em;
     height: 0.55em;
     position: absolute;
-    top: 6px;
-    left: 6px;
+    top: min(0.6rem, 9px);
+    left: 0.6rem;
     margin-left: -1px;
     margin-top: -2px;
     opacity: 0;

frontends/web/src/components/forms/input.module.css

@@ -28,11 +28,11 @@
     border-color: var(--background-quaternary);
     border-radius: 2px;
     border-style: solid;
-    border-width: 1px;
+    border-width: 0.1rem;
     font-family: var(--font-family);
     font-size: var(--size-default);
     font-weight: 400;
-    height: 52px;
+    height: var(--input-height);
     padding: 0 var(--space-half);
     width: 100%;
     transition: border-color .2s ease-out;

frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css

@@ -18,20 +18,20 @@
 
 .qrButton {
   align-items: center;
-  display: flex;
+  background-color: transparent;
+  bottom: 0;
   border: none;
-  background-color: var(--background-secondary);
-  height: 36px;
-  width: 36px;
+  cursor: pointer;
+  display: flex;
+  height: var(--input-height);
   justify-content: center;
   padding: 0;
   position: absolute;
-  top: calc(50% - var(--space-quarter));
   right: calc(var(--spacing-default) - var(--space-quarter));
-  cursor: pointer;
+  width: 36px;
 }
 
 .qrButton img {
-  width: 18px;
-  height: 18px;
+  width: 1.8rem;
+  height: 1.8rem;
 }

frontends/web/src/routes/account/send/feetargets.module.css

@@ -58,11 +58,12 @@
 /* styles to overwrite default dropdown styling to make it fit into send */
 .priority :global(.react-select__control) {
     border-color: var(--background-quaternary);
-    height: 52px;
+    border-width: 0.1rem;
+    margin-bottom: var(--space-quarter);
+    min-height: var(--input-height);
     padding-bottom: 0;
     padding-top: 0;
     z-index: 1;
-    margin-bottom: var(--space-quarter);
 }
 
 @media (min-width: 640px) {
@@ -113,13 +114,15 @@
 
 .rowCustomFee .priority :global(.react-select__control:not(:hover)) {
     border-right-color: var(--background-secondary);
+    border-width: 0.2rem;
 }
 
 .customFeeUnit {
-    bottom: 0;
+    bottom: var(--space-quarter);
     color: var(--color-secondary);
-    font-size: var(--size-default);
-    line-height: 50px;
+    font-size: min(var(--size-default), 20px);
+    line-height: 1;
+    height: calc(var(--input-height) * 0.5);
     padding-right: var(--space-half);
     position: absolute;
     right: 0;

frontends/web/src/style/variables.css

@@ -107,8 +107,9 @@
     /* bottom navigation */
     --bottom-navigation-height: calc(min(7rem, 90px) + env(safe-area-inset-bottom, 0));
 
-    /* buttons */
+    /* form elements */
     --button-height: min(5rem, 70px);
+    --input-height: min(5.2rem, 72px);
 }
 
 :root,