diff --git a/src/app/components/balance-with-symbol/balance-with-symbol.component.css b/src/app/components/balance-with-symbol/balance-with-symbol.component.css index e69de29b..4767267c 100644 --- a/src/app/components/balance-with-symbol/balance-with-symbol.component.css +++ b/src/app/components/balance-with-symbol/balance-with-symbol.component.css @@ -0,0 +1,11 @@ +:host { + white-space: nowrap; +} + +.balance { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + vertical-align: text-bottom; +} diff --git a/src/app/components/balance-with-symbol/balance-with-symbol.component.html b/src/app/components/balance-with-symbol/balance-with-symbol.component.html index d963d858..ed10055b 100644 --- a/src/app/components/balance-with-symbol/balance-with-symbol.component.html +++ b/src/app/components/balance-with-symbol/balance-with-symbol.component.html @@ -2,6 +2,8 @@ *ngIf="balance | decimal: token.decimals as decimalBalance" [matTooltip]="decimalBalance" [matTooltipDisabled]="!showTooltip" + class="balance" + [style.max-width.px]="maxBalanceWidth" > {{ decimalBalance | displayDecimals: 3 }} diff --git a/src/app/components/balance-with-symbol/balance-with-symbol.component.ts b/src/app/components/balance-with-symbol/balance-with-symbol.component.ts index c7a4fe58..6382480f 100644 --- a/src/app/components/balance-with-symbol/balance-with-symbol.component.ts +++ b/src/app/components/balance-with-symbol/balance-with-symbol.component.ts @@ -11,6 +11,7 @@ export class BalanceWithSymbolComponent implements OnInit { @Input() balance: BigNumber; @Input() token: UserToken; @Input() showTooltip = true; + @Input() maxBalanceWidth = 50; constructor() {} diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index 2c49be76..814edd90 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -37,7 +37,7 @@ {{ balance | displayDecimals: 3 }}  diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss index 103a3bca..0e74ea57 100644 --- a/src/app/components/header/header.component.scss +++ b/src/app/components/header/header.component.scss @@ -15,6 +15,13 @@ &--uppercase { text-transform: uppercase; } + + &--limited { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 50px; + } } &__label { @@ -119,7 +126,7 @@ background-color: $black; border-radius: 8px; font-size: 12px; - line-height: 30px; + line-height: 15px; color: $white; width: 125px; max-height: 171px; @@ -127,7 +134,8 @@ &__label { width: 100%; - padding-top: 6px; + padding-top: 13.5px; + padding-bottom: 7.5px; background-color: $black; position: sticky; position: -webkit-sticky; @@ -140,6 +148,7 @@ } &__item { + padding: 7.5px 0; margin: 0 16px; white-space: nowrap; overflow: hidden; diff --git a/src/app/components/header/header.component.spec.ts b/src/app/components/header/header.component.spec.ts index 0e54a01f..d42487ee 100644 --- a/src/app/components/header/header.component.spec.ts +++ b/src/app/components/header/header.component.spec.ts @@ -163,7 +163,7 @@ describe('HeaderComponent', () => { expect(dialogSpy).toHaveBeenCalledTimes(1); expect(dialogSpy).toHaveBeenCalledWith(QrCodeComponent, { data: payload, - width: '536px', + width: '550px', }); }); diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts index 5aa23e34..65018c9a 100644 --- a/src/app/components/header/header.component.ts +++ b/src/app/components/header/header.component.ts @@ -141,7 +141,7 @@ export class HeaderComponent implements OnInit, OnDestroy { }; this.dialog.open(QrCodeComponent, { data: payload, - width: '536px', + width: '550px', }); } diff --git a/src/app/components/token/token.component.html b/src/app/components/token/token.component.html index b97d1a9d..17892995 100644 --- a/src/app/components/token/token.component.html +++ b/src/app/components/token/token.component.html @@ -125,6 +125,7 @@ All Networks diff --git a/src/app/components/token/token.component.scss b/src/app/components/token/token.component.scss index 97ba1853..343c9d7e 100644 --- a/src/app/components/token/token.component.scss +++ b/src/app/components/token/token.component.scss @@ -47,7 +47,7 @@ &__item { text-align: center; font-size: 12px; - line-height: 22px; + line-height: 15px; border-right: 1px solid $bg-grey; &:last-child { diff --git a/src/app/components/user-deposit-dialog/user-deposit-dialog.component.html b/src/app/components/user-deposit-dialog/user-deposit-dialog.component.html index eedcbd43..d38906d2 100644 --- a/src/app/components/user-deposit-dialog/user-deposit-dialog.component.html +++ b/src/app/components/user-deposit-dialog/user-deposit-dialog.component.html @@ -13,6 +13,7 @@ class="info__balance" [balance]="balance$ | async" [token]="servicesToken" + [maxBalanceWidth]="200" >