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,31 +3,27 @@
 	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-radius: 32px;
+	border: 0.1rem solid var(--background-secondary);
+	border-radius: 36px;
 	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;
+	font-size: min(calc(var(--size-default) + 1px), 24px);
+	padding: 2px 24px;
 }
 
 .pillbuttongroup button:hover:not([disabled]) {
@@ -60,10 +56,3 @@
 	border-color: var(--background-secondary);
 	color: var(--color-disabled);
 }
-
-@media (max-width: 768px) {
-	.pillbuttongroup.lg button {
-		font-size: calc(var(--size-default));
-		padding: 2px calc(var(--spacing-default) * 1.25);
-	}	
-}

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

@@ -101,13 +101,13 @@
 }
 
 .coinName {
+    align-items: center;
     display: flex;
 }
 
 .coinName img {
     flex-shrink: 0;
     margin-right: var(--spacing-default);
-    vertical-align: middle;
 }
 
 .coinUnit {
@@ -188,13 +188,4 @@
         padding-bottom: var(--spacing-default);
     }
 
-    .coinName {
-        position: relative;
-    }
-
-    .coinName img {
-        left: -32px;
-        position: absolute;
-        top: -3px;
-    }
 }

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

@@ -82,16 +82,16 @@
 }
 
 .totalValue {
-  font-size: 3.2rem;
-  display: flex;
   align-items: flex-end;
+  display: flex;
+  font-size: min(3.2rem, 40px);
 }
 
 .totalUnit {
   color: var(--color-secondary);
   display: inline-block;
+  font-size: min(2rem, 25px);
   margin-bottom: 3px;
-  font-size: 2.2rem;
   padding: 0 4px;
 }
 

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

@@ -1,7 +1,13 @@
 
+.arrow {
+  line-height: 1;
+  vertical-align: text-bottom;
+}
+
 .arrow img {
+  height: min(2rem, 25px);
   margin-right: 4px;
-  vertical-align: text-bottom;
+  width: min(2rem, 25px);
 }
 
 .up {
@@ -13,10 +19,10 @@
 }
 
 .diffValue {
-  font-size: 1.9rem;
+  font-size: min(2rem, 25px);
 }
 
 .diffUnit {
-  font-size: 1.6rem;
+  font-size: min(1.6rem, 20px); /* var(--size-default); */
   padding: 0 4px;
 }