frontend: improve responsive styling of buttons

- changed button border-width to be reponsive and scale with the ui
- fixed send/recieve button, should scale
- fixed responsive button height

Author: thisconnect

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

@@ -4,16 +4,16 @@
     border-color: transparent;
     border-radius: 2px;
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--border-width);
     cursor: default;
     display: inline-flex;
     flex-direction: row;
     font-family: var(--font-family);
     font-size: var(--size-default);
     font-weight: 400;
     justify-content: center;
+    min-height: var(--button-height);
     min-width: 100px;
-    height: 50px;
     outline: none;
     padding: 0 var(--space-default);
     position: relative;
@@ -87,7 +87,6 @@
     border-color: transparent;
     color: var(--color-blue);
     display: inline-block;
-    height: 50px;
     min-width: 0;
 }
 

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

@@ -35,17 +35,13 @@
     width: 17px;
 }
 
-.button {
-    height: 37px;
-}
-
 @media (max-width: 768px) {
     .accountHeader {
         padding: 0 var(--space-half);
     }
 
     .button {
-        height: 50px;
+        min-height: var(--button-height);
     }
 }
 
@@ -58,7 +54,7 @@
 }
 
 .actionsContainer {
-    --size-default: 14px;
+    --size-default: 1.4rem;
     display: flex;
     flex-grow: 1;
     flex-shrink: 0;

frontends/web/src/style/variables.css

@@ -106,6 +106,10 @@
 
     /* bottom navigation */
     --bottom-navigation-height: calc(min(7rem, 90px) + env(safe-area-inset-bottom, 0));
+
+    /* form elements */
+    --border-width: 0.1rem;
+    --button-height: min(5rem, 70px);
 }
 
 :root,