frontend: improve exchange list styling

Adjusted fontsize ans spacing so the BTC Direct does not break onto 2 lines.
BitBoxSwiss · Feb 12, 2025 · 941332d · 941332d
1 parent 300116e
commit 941332d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/frontends/web/src/components/actionable-item/actionable-item.module.css b/frontends/web/src/components/actionable-item/actionable-item.module.css
@@ -1,9 +1,12 @@
 .container {
+  --size-default: 14px;
   align-items: center;
   background-color: var(--background-secondary);
   border: none;
   display: flex;
+  font-size: var(--size-default);
   justify-content: space-between;
+  line-height: 1.571428;
   padding: 16px;
   text-align: left;
   width: 100%;

diff --git a/frontends/web/src/routes/exchange/components/exchange-provider.module.css b/frontends/web/src/routes/exchange/components/exchange-provider.module.css
@@ -3,7 +3,7 @@
 }
 
 .exchangeName {
-    width: 40px;
+    width: 110px;
 }
 
 .exchangeContainer {
@@ -37,7 +37,7 @@
 .paymentMethodsContainer {
     display: flex;
     flex-direction: column;
-    margin-left: 40px;
+    margin-left: 20px;
     width: 100%;
     padding-right: var(--space-quarter);
 }
@@ -46,6 +46,7 @@
     color: var(--color-default);
     display: inline-block;
     font-weight: 400;
+    line-height: 1.6;
     margin: 0;
 }
 .paymentMethodName img {
@@ -176,7 +177,7 @@ span[role="radio"]:focus{
 
 @media (max-width: 400px) {
     .exchangeName {
-        width: 50px;
+        width: 150px;
     }
 
     .badgeContainer {