frontend: improve account-summary in scaled up mode

Author: thisconnect

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

@@ -19,7 +19,7 @@
 }
 
 .badgeIcon {
-  max-width: 10px;
+  max-width: 1rem;
 }
 
 .withChildren .badgeIcon {

frontends/web/src/components/keystore/connected-keystore.tsx

@@ -53,7 +53,7 @@ export const ConnectedKeystore = ({
         <>
           {' '}
           <Badge
-            icon={props => <USBSuccess {...props} />}
+            icon={props => <USBSuccess style={{ width: '0.9rem', height: '0.9rem' }} {...props} />}
             title={t('device.keystoreConnected')}
             type="success">
             {connectedIconOnly ? undefined : t('device.keystoreConnected')}

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

@@ -3,33 +3,28 @@
 	display: flex;
 	flex-wrap: wrap;
 	flex-grow: 1;
+	gap: var(--spacing-half);
 }
 
 .pillbuttongroup button {
 	appearance: none;
 	background: var(--background-secondary);
-	border: 2px solid var(--background-secondary);
+	border: 0.2rem solid var(--background-secondary);
 	border-radius: 32px;
 	color: var(--color-default);
-	font-size: var(--size-default);
+	font-size: min(var(--size-default), 18px);
 	line-height: 1.75;
-	margin-bottom: var(--spacing-half);
-	margin-left: var(--spacing-half);
 }
 
 .pillbuttongroup.medium button {
-	padding: 0 calc(var(--spacing-default) * .75);
+	padding: 0 12px;
 }
 
 .pillbuttongroup.large button {
 	font-size: calc(var(--size-default) + 1px);
 	padding: 2px calc(var(--spacing-default) * 1.5);
 }
 
-.pillbuttongroup button:first-child {
-	margin-left: 0;
-}
-
 .pillbuttongroup button:hover:not([disabled]) {
 	cursor: pointer;
 }
@@ -63,7 +58,7 @@
 
 @media (max-width: 768px) {
 	.pillbuttongroup.lg button {
-		font-size: calc(var(--size-default));
+		font-size: var(--size-default);
 		padding: 2px calc(var(--spacing-default) * 1.25);
 	}	
 }

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

@@ -22,7 +22,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: var(--spacing-half);
-  min-height: 68px;
+  min-height: 6.8rem;
 }
 
 .summary {
@@ -82,7 +82,7 @@
 }
 
 .totalValue {
-  font-size: 3.2rem;
+  font-size: min(3.2rem, var(--header-default-font-size));
   display: flex;
   align-items: flex-end;
 }
@@ -91,7 +91,7 @@
   color: var(--color-secondary);
   display: inline-block;
   margin-bottom: 3px;
-  font-size: 2.2rem;
+  font-size: min(2.2rem, 1.5rem);
   padding: 0 4px;
 }
 

frontends/web/src/routes/account/summary/percentage-diff.module.css

@@ -1,7 +1,9 @@
 
 .arrow img {
+  height: 2rem;
   margin-right: 4px;
   vertical-align: text-bottom;
+  width: 2rem;
 }
 
 .up {