Skip to content

Commit bba49bd

Browse files
thisconnectstrmci
authored andcommitted
frontend: improve vertical position of badges
Badges are not vertically aligned consistently in all places. This was caused mostly as badges were centerd vertically but then had slightly different line-height. Badges behave like text and usually have `display: inline;`. Changed line-height to be consistent and vertical alignment to baseline, so that the badge text stands on the same line as the other text. Badges currently appear in the following components: - account selector can have badge with icon only - sidebar shows badge for connected keystore with icon and text - reused utxo's in coincontrol have badge with warning text - account summary balance have badge for connected keystore - exchange options show best-deal or fast badge - manage-accounts shows badge for connected keystore
1 parent bdd14b2 commit bba49bd

File tree

6 files changed

+5
-5
lines changed

6 files changed

+5
-5
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
border: 1px solid;
44
display: inline-block;
55
font-size: var(--size-small);
6-
line-height: 14px;
6+
line-height: 1;
77
padding: var(--space-eight) 10px;
88
white-space: nowrap;
99
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.radio {
22
--size-default: 14px;
3+
line-height: 1.5;
34
}
45

56
.radio input {
@@ -11,7 +12,6 @@
1112
display: inline-flex;
1213
flex-direction: column;
1314
font-size: var(--size-default);
14-
line-height: 1.5;
1515
margin-right: var(--space-half);
1616
padding-left: calc(var(--space-half) + var(--space-quarter));
1717
position: relative;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
.transaction {
7575
display: flex;
7676
font-size: var(--size-default);
77-
line-height: 1.4;
77+
line-height: 1.5;
7878
white-space: nowrap;
7979
}
8080

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.accountName {
22
display: flex;
3-
align-items: center;
3+
align-items: baseline;
44
}
55

66
.accountName p {

frontends/web/src/routes/buy/components/exchangeselectionradio.module.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@
4848
color: var(--color-default);
4949
display: inline-block;
5050
font-weight: 400;
51-
line-height: 22px;
5251
margin: 0;
5352
}
5453
.paymentMethodName img {

frontends/web/src/routes/buy/exchange.module.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
}
7676

7777
.radioButtonsContainer {
78+
line-height: 1.5;
7879
min-height: 180px;
7980
}
8081

0 commit comments

Comments
 (0)