From d41054e51c3d8034cfe23de8fa9375a27bb8346b Mon Sep 17 00:00:00 2001 From: Ihar Tsykala Date: Sun, 21 Jun 2026 14:35:20 +0500 Subject: [PATCH 1/7] feat: 5506 add GuardianTabsSwitch component and wire to contract-config --- .../common/common-components.module.ts | 3 ++ .../guardian-tabs-switch.component.html | 11 ++++ .../guardian-tabs-switch.component.scss | 33 ++++++++++++ .../guardian-tabs-switch.component.ts | 28 +++++++++++ .../contract-config.component.css | 50 +------------------ .../contract-config.component.html | 15 +++--- 6 files changed, 84 insertions(+), 56 deletions(-) create mode 100644 frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.html create mode 100644 frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.scss create mode 100644 frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.ts diff --git a/frontend/src/app/modules/common/common-components.module.ts b/frontend/src/app/modules/common/common-components.module.ts index ab0385c238..a098c0be40 100644 --- a/frontend/src/app/modules/common/common-components.module.ts +++ b/frontend/src/app/modules/common/common-components.module.ts @@ -34,6 +34,7 @@ import { StatusDropdown } from './status-dropdown/status-dropdown.component'; import { CustomConfirmDialogComponent } from './custom-confirm-dialog/custom-confirm-dialog.component'; import { TreeGraphComponent } from './tree-graph/tree-graph.component'; import { GuardianSwitchButton } from './guardian-switch-button/guardian-switch-button.component'; +import { GuardianTabsSwitch } from './guardian-tabs-switch/guardian-tabs-switch.component'; import { ImportEntityDialog } from './import-entity-dialog/import-entity-dialog.component'; import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog'; import { GuardianDialogService } from '../../services/guardian-dialog.service'; @@ -79,6 +80,7 @@ import { ContentSearchComponent } from './content-search/content-search.componen CustomConfirmDialogComponent, TreeGraphComponent, GuardianSwitchButton, + GuardianTabsSwitch, ImportEntityDialog, MathLiveComponent, MenuButton, @@ -141,6 +143,7 @@ import { ContentSearchComponent } from './content-search/content-search.componen CustomConfirmDialogComponent, TreeGraphComponent, GuardianSwitchButton, + GuardianTabsSwitch, ImportEntityDialog, MathLiveComponent, MenuButton, diff --git a/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.html b/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.html new file mode 100644 index 0000000000..27e27035fc --- /dev/null +++ b/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.html @@ -0,0 +1,11 @@ +
+ + + @for (tab of options; track tab) { + +
{{ tab.label }}
+ + } + + +
diff --git a/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.scss b/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.scss new file mode 100644 index 0000000000..931e0b3e17 --- /dev/null +++ b/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.scss @@ -0,0 +1,33 @@ +:host ::ng-deep { + .p-tab { + padding: 0 !important; + color: var(--color-grey-5) !important; + } + + .p-tabs, + .p-tablist, + .p-tablist-content, + .p-tablist-tab-list { + background: transparent; + } + + .p-tabpanels { + background: transparent; + } + + .p-tabs .p-tab.p-tab-active, + .p-tabs .p-tab[data-p-active='true'] { + color: var(--color-primary) !important; + border-color: var(--color-primary); + } +} + +.tabview-label { + padding: 10px 25px 10px 25px; + background: var(--guardian-grey-background, #f9fafc); + text-align: center; + font-family: Inter, sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 600; +} diff --git a/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.ts b/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.ts new file mode 100644 index 0000000000..819ce2ecc2 --- /dev/null +++ b/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.ts @@ -0,0 +1,28 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +/** + * Reusable tab-style switcher matching the Schemas page tabs. + * Renders a list of options as PrimeNG tabs and emits the selected value. + */ +@Component({ + selector: 'guardian-tabs-switch', + templateUrl: './guardian-tabs-switch.component.html', + styleUrls: ['./guardian-tabs-switch.component.scss'], + standalone: false +}) +export class GuardianTabsSwitch { + @Input('options') options: { label: string; value: any }[] = []; + @Input('value') value: any; + + @Output('valueChange') valueChange = new EventEmitter(); + @Output('onChange') change = new EventEmitter(); + + onSelect(value: any): void { + if (value === this.value) { + return; + } + this.value = value; + this.valueChange.emit(value); + this.change.emit(value); + } +} diff --git a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.css b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.css index 479894b18a..97e1f78211 100644 --- a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.css +++ b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.css @@ -1,54 +1,6 @@ .actions__tabs { position: relative; - margin-bottom: 40px; - - &::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 2px; - background: var(--color-grey-3); - z-index: 0; - } - - ::ng-deep .p-selectbutton .p-button { - background: transparent !important; - border: none !important; - color: #848FA9 !important; - position: relative; - padding: 0.75rem 2rem 0.5rem 0 !important; - margin: 0 0.5rem 0 0 !important; - border-radius: 0 !important; - } - - ::ng-deep .p-selectbutton .p-button.p-highlight { - color: var(--color-primary, #0b73f8) !important; - pointer-events: none !important; - cursor: default !important; - } - - ::ng-deep .p-selectbutton .p-button.p-highlight::after { - display: none !important; - } - - ::ng-deep .p-selectbutton .p-button .p-button-label { - position: relative; - padding: 0 !important; - margin: 0 !important; - } - - ::ng-deep .p-selectbutton .p-button.p-highlight .p-button-label::after { - content: ""; - position: absolute; - bottom: -8px; - left: 0; - width: 100%; - height: 3px; - background: var(--color-primary, #0b73f8); - z-index: 2; - } + margin-bottom: 28px; } .button-group { diff --git a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.html b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.html index c0fe946f33..1315826ad3 100644 --- a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.html +++ b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.html @@ -15,14 +15,15 @@
Retirement
- + >
+
+ } + @if (confirmVisible) { +
+ +
+ } +
+ } + + } + diff --git a/frontend/src/app/modules/common/common-dialog/common-dialog.component.scss b/frontend/src/app/modules/common/common-dialog/common-dialog.component.scss new file mode 100644 index 0000000000..6a3799f97f --- /dev/null +++ b/frontend/src/app/modules/common/common-dialog/common-dialog.component.scss @@ -0,0 +1,32 @@ +:host { + display: flex; + flex-direction: column; + height: 100%; + min-height: 0; +} + +.guardian-common-dialog { + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-height: 0; + + .dialog-body { + flex: 1 1 auto; + min-height: 0; + margin-top: 16px; + } + + .dialog-footer { + flex-shrink: 0; + } +} + +.loading { + display: flex; + align-items: center; + justify-content: center; + align-content: center; + min-height: 120px; + background: var(--guardian-background, #fff); +} diff --git a/frontend/src/app/modules/common/common-dialog/common-dialog.component.ts b/frontend/src/app/modules/common/common-dialog/common-dialog.component.ts new file mode 100644 index 0000000000..e644e1018d --- /dev/null +++ b/frontend/src/app/modules/common/common-dialog/common-dialog.component.ts @@ -0,0 +1,57 @@ +import { + AfterContentInit, + Component, + ContentChild, + Directive, + EventEmitter, + Input, + Output, +} from '@angular/core'; + +@Directive({ + selector: '[appDialogHeader]', + standalone: false, +}) +export class DialogHeaderDirective {} + +@Directive({ + selector: '[appDialogFooter]', + standalone: false, +}) +export class DialogFooterDirective {} + +@Component({ + selector: 'app-common-dialog', + templateUrl: './common-dialog.component.html', + styleUrls: ['./common-dialog.component.scss'], + standalone: false, +}) +export class CommonDialogComponent implements AfterContentInit { + @Input() title: string; + @Input() confirmLabel: string = 'Confirm'; + @Input() cancelLabel: string = 'Close'; + @Input() confirmDisabled: boolean = false; + @Input() confirmVisible: boolean = true; + @Input() cancelVisible: boolean = true; + @Input() showHeader: boolean = true; + @Input() showFooter: boolean = true; + @Input() loading: boolean = false; + @Input() width: string; + @Input() height: string; + @Input() bodyMaxHeight: string; + + @Output() confirm: EventEmitter = new EventEmitter(); + @Output() cancel: EventEmitter = new EventEmitter(); + @Output() close: EventEmitter = new EventEmitter(); + + @ContentChild(DialogHeaderDirective) private headerContent?: DialogHeaderDirective; + @ContentChild(DialogFooterDirective) private footerContent?: DialogFooterDirective; + + public hasCustomHeader: boolean = false; + public hasCustomFooter: boolean = false; + + public ngAfterContentInit(): void { + this.hasCustomHeader = !!this.headerContent; + this.hasCustomFooter = !!this.footerContent; + } +} diff --git a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts index e7d1275c53..793cb70103 100644 --- a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts +++ b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts @@ -644,7 +644,7 @@ export class ContractConfigComponent implements OnInit, OnDestroy { .filter((token: Token) => !token.draftToken); const dialogRef = this.dialog.open(SetPoolDialogComponent, { width: '750px', - styleClass: 'g-dialog set-pool-dialog', + styleClass: 'guardian-dialog set-pool-dialog', modal: true, closable: false, showHeader: false, @@ -692,7 +692,8 @@ export class ContractConfigComponent implements OnInit, OnDestroy { openWipeRequests(contract: any) { this.dialog.open(WipeRequestsDialogComponent, { width: contract.version === '1.0.0' ? '650px' : '850px', - styleClass: 'g-dialog', + styleClass: 'guardian-dialog', + showHeader: false, modal: true, closable: false, data: contract, @@ -702,7 +703,8 @@ export class ContractConfigComponent implements OnInit, OnDestroy { openPools(contract: any) { this.dialog.open(RetirePoolsDialogComponent, { width: '800px', - styleClass: 'g-dialog retire-pool-dialog', + styleClass: 'guardian-dialog retire-pool-dialog', + showHeader: false, modal: true, closable: false, data: contract, @@ -712,7 +714,8 @@ export class ContractConfigComponent implements OnInit, OnDestroy { openRetireRequests(contract: any) { this.dialog.open(RetireRequestsDialogComponent, { width: '800px', - styleClass: 'g-dialog', + styleClass: 'guardian-dialog', + showHeader: false, modal: true, closable: false, data: contract, diff --git a/frontend/src/app/modules/contract-engine/configs/user-contract-config/user-contract-config.component.ts b/frontend/src/app/modules/contract-engine/configs/user-contract-config/user-contract-config.component.ts index 5008afff7d..7662a6061b 100644 --- a/frontend/src/app/modules/contract-engine/configs/user-contract-config/user-contract-config.component.ts +++ b/frontend/src/app/modules/contract-engine/configs/user-contract-config/user-contract-config.component.ts @@ -125,7 +125,8 @@ export class UserContractConfigComponent implements OnInit { openRetirePoolsDialog() { const dialogRef = this.dialog.open(UserRetirePoolsDialogComponent, { width: '800px', - styleClass: 'g-dialog pools-dialog', + styleClass: 'guardian-dialog pools-dialog', + showHeader: false, modal: true, closable: false, })!; @@ -150,7 +151,8 @@ export class UserContractConfigComponent implements OnInit { openRetireRequestsDialog() { this.dialog.open(UserRetireRequestsDialogComponent, { width: '800px', - styleClass: 'g-dialog', + styleClass: 'guardian-dialog', + showHeader: false, modal: true, closable: false, }); diff --git a/frontend/src/app/modules/contract-engine/contract-engine.module.ts b/frontend/src/app/modules/contract-engine/contract-engine.module.ts index d8e1ded821..9d681a6a9e 100644 --- a/frontend/src/app/modules/contract-engine/contract-engine.module.ts +++ b/frontend/src/app/modules/contract-engine/contract-engine.module.ts @@ -13,7 +13,6 @@ import { RefreshBtnComponent } from './components/refresh-btn/refresh-btn.compon // Configs import { ContractConfigComponent } from './configs/contract-config/contract-config.component'; // Dialogs -import { DialogWrapperComponent } from './dialogs/dialog-wrapper/dialog-wrapper.component'; import { SetPoolDialogComponent } from './dialogs/set-pool-dialog/set-pool-dialog.component'; import { RetirePoolsDialogComponent } from './dialogs/retire-pools-dialog/retire-pools-dialog.component'; import { RetireRequestsDialogComponent } from './dialogs/retire-requests-dialog/retire-requests-dialog.component'; @@ -28,7 +27,6 @@ import { UserContractConfigComponent } from './configs/user-contract-config/user declarations: [ ContractConfigComponent, SetPoolDialogComponent, - DialogWrapperComponent, RetirePoolsDialogComponent, RetireRequestsDialogComponent, WipeRequestsDialogComponent, diff --git a/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.html b/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.html deleted file mode 100644 index e3a14f171e..0000000000 --- a/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.html +++ /dev/null @@ -1,42 +0,0 @@ -
-
-
-
- -
-
-
- {{ title }} -
-
- @if (syncVisible) { -
- Last sync: {{ (syncDate ? (syncDate | date:'medium') : 'Never') }} - -
- } - @if (confirmVisible) { -
- {{ confirmBtnLabel || 'Confirm' }} -
- } -
-
-
- @if (!loading) { - - } @else { -
- -
- } - @if (paginatorVisible && length && length > 0) { - - - } -
-
diff --git a/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.scss b/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.scss deleted file mode 100644 index 85bfddfb5c..0000000000 --- a/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.scss +++ /dev/null @@ -1,23 +0,0 @@ -.sync { - display: flex; - align-items: center; - &__date { - text-wrap: nowrap; - color: #646464; - font-weight: 500; - font-size: 16px; - } -} - -.content { - position: relative; -} - -.loading { - background: var(--guardian-background, #fff); - display: flex; - align-items: center; - justify-items: center; - justify-content: center; - align-content: center; -} \ No newline at end of file diff --git a/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.ts b/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.ts deleted file mode 100644 index adc732a72f..0000000000 --- a/frontend/src/app/modules/contract-engine/dialogs/dialog-wrapper/dialog-wrapper.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; - -@Component({ - selector: 'app-dialog-wrapper', - templateUrl: './dialog-wrapper.component.html', - styleUrls: ['./dialog-wrapper.component.scss'], - standalone: false -}) -export class DialogWrapperComponent implements OnInit { - @Output() cancel: EventEmitter = new EventEmitter(); - @Output() confirm: EventEmitter = new EventEmitter(); - @Output() sync: EventEmitter = new EventEmitter(); - @Output() page: EventEmitter = new EventEmitter(); - @Input() confirmDisabled: boolean; - @Input() confirmVisible: boolean = true; - @Input() syncVisible: boolean = false; - @Input() confirmBtnLabel: string; - @Input() syncDate: string; - @Input() title: string; - @Input() loading: boolean; - @Input() length: number; - @Input() pageSize: number; - @Input() paginatorVisible: boolean = true; - - constructor() {} - - ngOnInit(): void {} -} diff --git a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.html index c8cb9e6c80..c83b0ff252 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.html +++ b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.html @@ -1,16 +1,16 @@ - + [confirmVisible]="false" + cancelLabel="Close" + (cancel)="onNoClick()" + (close)="onNoClick()"> +
+ Pools +
+ Last sync: {{ syncDate ? (syncDate | date:'medium') : 'Never' }} + +
+
There are no pools
} - - -
- -
+ @if (length) { + + + } + diff --git a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.scss b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.scss index 5cde6ab4b7..a163779fb5 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.scss +++ b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.scss @@ -1,85 +1,45 @@ -::ng-deep .g-dialog.retire-pool-dialog { - min-width: 840px !important; - height: 800px; -} - -::ng-deep .g-dialog.retire-pool-dialog .g-dialog-header .g-dialog-actions { - flex: 7; +:host { + display: block; + height: 100%; } -::ng-deep .g-dialog.retire-pool-dialog .g-dialog-header .refresh-action-btn { - outline: none !important; - box-shadow: none !important; - border: none; -} - -::ng-deep .g-dialog.retire-pool-dialog .g-dialog-header .sync__date { - font-size: 14px; - margin-bottom: -4px; - margin-left: -10px; - color: var(--color-grey-4); -} - -::ng-deep .g-dialog.retire-pool-dialog .g-dialog-header .g-dialog-cancel-btn { - width: 18px; - height: 18px; - overflow: hidden; - margin: -10px 0 0 36px; - border-radius: 6px; - cursor: pointer; - color: #969696; +::ng-deep .guardian-dialog.retire-pool-dialog { + min-width: 840px !important; + height: 800px; } -::ng-deep .g-dialog.retire-pool-dialog .p-dialog-content { +::ng-deep .guardian-dialog.retire-pool-dialog .p-dialog-content { border-radius: 10px; padding: 12px 10px 0; } -::ng-deep .g-dialog.retire-pool-dialog > .p-dialog-header { - display: none; -} -::ng-deep .g-dialog.retire-pool-dialog .g-dialog-header { - position: relative; - padding-right: 48px; +.pools-header { display: flex; align-items: center; - margin-top: 20px; -} + gap: 16px; -::ng-deep .g-dialog.retire-pool-dialog .g-dialog-title { - height: 46px; - flex: 1; - padding: 10px 0; - box-sizing: border-box; - color: var(--color-grey-black-1); - font-weight: 500; - font-size: 22px; - margin: 0; -} - -::ng-deep .g-dialog.retire-pool-dialog .g-dialog-cancel { - position: absolute; - top: 24px; - right: 24px; + .header-text { + font-size: 22px; + font-weight: 600; + color: var(--guardian-header-color); + } } -::ng-deep .g-dialog-cancel-btn { - width: 28px; - height: 28px; - border: none; - background: transparent; - cursor: pointer; +.sync { display: flex; align-items: center; - justify-content: center; - transition: background 0.15s; - .pi { - font-size: 18px; - color: #6b6b6b; + gap: 8px; + + &__date { + font-size: 14px; + color: var(--guardian-disabled-color); + white-space: nowrap; } - &:hover { - background: rgba(0, 0, 0, 0.05); - border-radius: 50%; + + ::ng-deep .refresh-action-btn { + outline: none !important; + box-shadow: none !important; + border: none; } } @@ -96,12 +56,12 @@ color: var(--color-grey-black-1); } -::ng-deep .g-dialog.retire-pool-dialog .p-multiselect { +::ng-deep .guardian-dialog.retire-pool-dialog .p-multiselect { width: 250px; margin-top: 4px; } -::ng-deep .g-dialog.retire-pool-dialog p-multiselect-item { +::ng-deep .guardian-dialog.retire-pool-dialog p-multiselect-item { width: 250px; } @@ -231,27 +191,6 @@ span.btn--remove { padding: 20px; } -::ng-deep .g-dialog.retire-pool-dialog .table-paginator { +::ng-deep .guardian-dialog.retire-pool-dialog .table-paginator { box-shadow: none !important; } - -:host ::ng-deep .g-dialog.retire-pool-dialog .g-dialog-body { - position: relative; - padding-bottom: 92px !important; -} - -:host ::ng-deep .pools-dialog__footer { - position: absolute; - right: 32px; - bottom: 24px; - z-index: 3; - margin-bottom: 30px; - margin-top: 10px; -} -:host ::ng-deep .pools-dialog__close-btn { - min-width: 96px; - height: 42px; - border-radius: 8px; - font-size: 16px; - color: var(--guardian-primary-color); -} diff --git a/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.html index 4bb7afa1c1..87d0436f3c 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.html +++ b/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.html @@ -1,5 +1,5 @@ - + @if (requests.length) {
@@ -62,4 +62,12 @@ } @else {
Contract has no requests, try to sync.
} - + + @if (length) { + + + } + diff --git a/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.html index 0ec7cb1f8a..38e41cf18d 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.html +++ b/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.html @@ -1,11 +1,11 @@ -
-
-

Set Pool

- -
- +
Set Pool optionLabel="tokenSymbol" placeholder="Token" [required]="true" + [appendTo]="'body'" [style]="{ width: '100%' }" > @@ -73,25 +74,4 @@

Set Pool

}
- -
- - - -
-
+ diff --git a/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.scss b/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.scss index a70cb95424..98040e854d 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.scss +++ b/frontend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.scss @@ -1,46 +1,13 @@ +:host { + display: block; + height: 100%; +} + ::ng-deep .set-pool-dialog .p-dialog-content { border-radius: 10px; padding: 0 40px 24px 40px; } -.sp-dialog { - display: grid; - grid-template-rows: 100px 175px auto; -} - -.sp-dialog__header { - margin: 30px 0; - display: grid; - grid-template-columns: 95% 1fr; -} - -.sp-dialog__title { - margin: 0; - font-size: 22px -} - -.sp-dialog__close { - width: 28px; - height: 28px; - border: none; - background: transparent; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background .15s; - outline: none !important; - box-shadow: none !important; - .pi { - font-size: 18px; - color: #6b6b6b; - } - &:hover { - background: rgba(0, 0, 0, 0.05); - border-radius: 50%; - } -} - .set-pool__header { display: flex; align-items: center; @@ -147,30 +114,3 @@ ::ng-deep .p-dialog-content .mat-progress-bar { display: none !important; } - -[dir='rtl'] .sp-dialog__close { - margin-left: 0; - margin-right: auto; -} - -.sp-dialog__footer { - margin-top: 80px; - padding-top: 16px; - display: flex; - justify-content: flex-end; - gap: 12px; - - ::ng-deep .p-button { - min-width: 96px; - height: 42px; - border-radius: 8px; - font-size: 16px; - } - - ::ng-deep .button-cancel { - color: #1976d2 !important; - } - - ::ng-deep .button-set { - } -} diff --git a/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.html index f76a5d7767..b67f6792f2 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.html +++ b/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.html @@ -1,16 +1,14 @@ - + (cancel)="onNoClick()" + (close)="onNoClick()"> @if (!retireMod) {
@@ -126,18 +124,12 @@
} - - - -@if (!retireMod) { -
- -
-} + @if (!retireMod && length) { + + + } + diff --git a/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.scss b/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.scss index 1efca09a40..f2aeb6ff32 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.scss +++ b/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.scss @@ -1,50 +1,27 @@ -::ng-deep .p-dialog.pools-dialog { +:host { + display: block; + height: 100%; +} + +::ng-deep .guardian-dialog.pools-dialog { min-width: 840px !important; height: 800px; } -::ng-deep .p-dialog.pools-dialog .p-dialog-content { +::ng-deep .guardian-dialog.pools-dialog .p-dialog-content { border-radius: 10px; padding: 12px 10px 0 } -::ng-deep .p-dialog.pools-dialog > .p-dialog-header { - display: none; -} - -::ng-deep .g-dialog.pools-dialog .g-dialog-header { - margin-top: 20px -} - -::ng-deep .g-dialog.pools-dialog .g-dialog-cancel-btn { - width: 18px; - height: 18px; - overflow: hidden; - margin: -10px 0 0 36px; - border-radius: 6px; - cursor: pointer; - color: #969696; -} - -::ng-deep .g-dialog.pools-dialog .g-dialog-header .g-dialog-title { - height: 46px; - flex: 1; - padding: 10px 0; - box-sizing: border-box; - color: var(--color-grey-black-1); - font-weight: 500; - font-size: 22px; -} - -::ng-deep .g-dialog.pools-dialog p-multiselect { +::ng-deep .guardian-dialog.pools-dialog p-multiselect { margin-top: 4px; } -::ng-deep .g-dialog.pools-dialog .p-multiselect { +::ng-deep .guardian-dialog.pools-dialog .p-multiselect { width: 250px; } -::ng-deep .g-dialog.pools-dialog p-multiselect-item { +::ng-deep .guardian-dialog.pools-dialog p-multiselect-item { width: 250px; } @@ -166,126 +143,24 @@ } } -.btn--retire { - background: none; - border: none; - cursor: pointer; - color: var(--color-grey-black-1); - font-size: 20px; - display: grid; - align-self: start; - margin-top: 20px; -} - -.no-pools { - font-size: 18px; - color: #888; - text-align: center; - padding: 20px; -} - -.retire { - display: flex; - flex-direction: column; -} - -.retire__back { - margin-bottom: 10px; - background: transparent; - border: none; - cursor: pointer; - color: #3f51b5; -} - -::ng-deep .g-dialog.pools-dialog .table-paginator { +::ng-deep .guardian-dialog.pools-dialog .table-paginator { box-shadow: none !important; } -::ng-deep .g-dialog.pools-dialog .g-dialog-header { - position: relative; - padding-right: 48px; - display: flex; - align-items: center; -} - -::ng-deep .g-dialog.pools-dialog .g-dialog-title { - font-size: 22px; - font-weight: 600; - margin: 0; -} - -::ng-deep .g-dialog.pools-dialog .g-dialog-cancel { - position: absolute; - top: 24px; - right: 24px; -} - -::ng-deep .g-dialog-cancel-btn { - width: 28px; - height: 28px; - border: none; - background: transparent; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background .15s; - - .pi { - font-size: 18px; - color: #6b6b6b; - } - - &:hover { - background: rgba(0,0,0,.05); - border-radius: 50%; - } -} - -::ng-deep .g-dialog.pools-dialog .g-dialog-actions { - margin-left: auto; -} - -:host ::ng-deep .g-dialog.pools-dialog .g-dialog-body { - position: relative; - padding-bottom: 92px !important; -} - -:host ::ng-deep .pools-dialog__footer { - position: absolute; - right: 32px; - bottom: 24px; - z-index: 3; - margin-bottom: 30px; - margin-top: 10px; -} - -:host ::ng-deep .pools-dialog__close-btn { - min-width: 96px; - height: 42px; - border-radius: 8px; - font-size: 16px; - color: var(--guardian-primary-color); -} - -.retire-mode ::ng-deep .g-dialog-actions { - display: none !important; -} - ::ng-deep .retire-serials-ms__panel { width: 250px; } -::ng-deep .g-dialog.pools-dialog .g-dialog-actions { - flex: 1 !important; -} - .retire__back { display: grid; grid-template-columns: 1fr auto; width: 30px; column-gap: 10px; color: var(--color-grey-6); + background: transparent; + border: none; + cursor: pointer; + margin-bottom: 10px; } .pools-dialog__retire-btn { diff --git a/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.html index 6d3d66237f..29a5655c25 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.html +++ b/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.html @@ -1,5 +1,5 @@ - + @if (requests.length) {
@@ -41,4 +41,4 @@ } @else {
You have no retire requests
} - + diff --git a/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.html index 2e9c8e7f2a..31334ae3a4 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.html +++ b/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.html @@ -1,5 +1,5 @@ - + @if (requests.length) { @for (request of requests; track request) {
@@ -53,4 +53,4 @@ } @else {
Contract has no requests, try to sync.
} - + From 274ba148e0969284b036e0a0fba1cd7073ae1951 Mon Sep 17 00:00:00 2001 From: Ihar Tsykala Date: Sun, 21 Jun 2026 16:38:19 +0500 Subject: [PATCH 4/7] feat: 5506/5538 migrate DataInputDialogComponent to CommonDialogComponent --- .../data-input-dialog.component.html | 36 +++++-------------- 1 file changed, 9 insertions(+), 27 deletions(-) diff --git a/frontend/src/app/modules/common/data-input-dialog/data-input-dialog.component.html b/frontend/src/app/modules/common/data-input-dialog/data-input-dialog.component.html index 3e6ee70a3a..15e0c51de0 100644 --- a/frontend/src/app/modules/common/data-input-dialog/data-input-dialog.component.html +++ b/frontend/src/app/modules/common/data-input-dialog/data-input-dialog.component.html @@ -1,13 +1,11 @@ -
-
-
{{ title }}
-
-
- -
-
- -
+
@for (field of fieldsConfig; track field) {
@@ -21,20 +19,4 @@
}
-
- -
-
-
- -
-
- -
-
-
\ No newline at end of file + From 333b5e17ba2a3230df5fee60b36df29a469ef49a Mon Sep 17 00:00:00 2001 From: Ihar Tsykala Date: Sun, 21 Jun 2026 16:48:31 +0500 Subject: [PATCH 5/7] feat: 5506/5538 restyle three Requests dialogs to match Figma design --- .../contract-config.component.ts | 2 +- .../retire-requests-dialog.component.html | 66 +++--- .../retire-requests-dialog.component.scss | 195 ++++++++---------- ...user-retire-requests-dialog.component.html | 42 ++-- ...user-retire-requests-dialog.component.scss | 171 +++++++-------- .../wipe-requests-dialog.component.html | 95 +++++---- .../wipe-requests-dialog.component.scss | 130 +++++++++--- 7 files changed, 369 insertions(+), 332 deletions(-) diff --git a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts index 793cb70103..982dededd5 100644 --- a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts +++ b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts @@ -691,7 +691,7 @@ export class ContractConfigComponent implements OnInit, OnDestroy { openWipeRequests(contract: any) { this.dialog.open(WipeRequestsDialogComponent, { - width: contract.version === '1.0.0' ? '650px' : '850px', + width: '800px', styleClass: 'guardian-dialog', showHeader: false, modal: true, diff --git a/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.html index 87d0436f3c..5817cb47f7 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.html +++ b/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.html @@ -2,53 +2,52 @@ (cancel)="onNoClick()" (close)="onNoClick()"> @if (requests.length) { -
+
@for (request of requests; track request) {
- {{ request.displayUser }} + {{ request.displayUser }}
@for (token of request.tokens; track token) {
- - - {{ token.tokenSymbol }} - - - - {{ token.token }} - +
+ NAME + {{ token.tokenSymbol }} +
+
+ TOKEN + {{ token.token }} +
@if (token.count > 0) { - - - {{ token.count | tokenCount: token.decimals }} - +
+ COUNT + {{ token.count | tokenCount: token.decimals }} +
} @if (token.serials?.length > 0) { - - - {{ token.serials?.join(', ') }} - +
+ SERIALS + {{ token.serials?.join(', ') }} +
}
}
- -
- } @else { -
Contract has no requests, try to sync.
- } - @if (length) { - - + @if (length) { + + + } + } @else { +
+ + Contract has no requests, try to sync. +
} diff --git a/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.scss b/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.scss index 5c2a56ad95..b8d4f98ba1 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.scss +++ b/frontend/src/app/modules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.scss @@ -1,144 +1,119 @@ -.no-requests { - font-size: 25px; - color: gray; - font-weight: bold; - min-height: 200px; +.requests { display: flex; - align-items: center; - justify-content: center; + flex-direction: column; } + .request { - display: grid; - grid-template-columns: 170px minmax(150px, 1fr) 170px; + display: flex; align-items: center; - column-gap: 30px; - padding: 20px 20px; - box-shadow: 0px 0px 4px 2px rgba(127, 127, 127, 0.13); - margin-bottom: 20px; - border-radius: 10px; + justify-content: space-between; + gap: 24px; + border: 1px solid var(--color-grey-3); + background-color: var(--color-grey-white); + border-radius: 12px; + padding: 16px; + margin-bottom: 16px; + &__actions { - justify-self: flex-end; display: flex; align-items: center; gap: 10px; + flex-shrink: 0; } } -.status { - text-wrap: nowrap; - font-size: 20px; - font-weight: bold; - flex-basis: 117px; - &__label--available { - color: green; - } - &__label--not-available { - color: gray; - } -} -.approve { - // text-wrap: nowrap; - font-size: 20px; - font-weight: bold; - flex-basis: 117px; - &__label--approve { - color: green; +.profile { + display: flex; + align-items: center; + gap: 10px; + color: var(--color-grey-6); + flex-shrink: 0; + + &__icon { + font-size: 28px; } - &__label--no-approve { - color: goldenrod; + + &__id { + font-size: 14px; + font-weight: 500; } } + .tokens { - justify-self: center; display: flex; - overflow: auto; + flex-wrap: wrap; + gap: 15px; + flex: 1; +} + +.token-card { display: flex; - padding: 5px; - gap: 25px; - .token-card { + flex-direction: column; + gap: 8px; + min-width: 160px; + background-color: var(--color-background); + border: 1px solid var(--color-grey-3); + border-radius: 8px; + padding: 12px 14px; + + &__row { display: flex; flex-direction: column; - // border: 1px solid black; - box-shadow: 0px 0px 3px 2px rgb(0 144 255 / 20%); - border-radius: 5px; - padding: 10px; - gap: 5px; - - color: rgb(71, 71, 71); - - i, svg { - color: #3f51b5; - } - - &__serials, - &__token, - &__count { - display: flex; - align-items: center; - gap: 10px; - font-weight: bold; - - i, svg { - font-size: 30px; - width: 30px; - height: 30px; - } - } - - &__count { - i, svg { - transform: translateX(-2px); - } - } - - &__serials { - span { - overflow: hidden; - max-width: 70px; - white-space: nowrap; - text-overflow: ellipsis; - } - } + } + + &__label { + font-size: 12px; + font-weight: 500; + color: var(--color-grey-5); + } + + &__value { + font-size: 14px; + color: var(--color-grey-black-1); + word-break: break-all; } } -:host ::ng-deep .request-actions { - display: flex; - align-items: center; - i, svg { - font-size: 25px; - width: 25px; - height: 25px; +.btn { + min-width: 96px; + height: 36px; + padding: 0 16px; + border-radius: 8px; + font-size: 14px; + font-weight: 500; + cursor: pointer; + border: 1px solid transparent; + color: #fff; + + &:disabled { + opacity: 0.5; + cursor: not-allowed; } } -.btn--remove { - color: red; +.btn--approve { + background-color: var(--color-accent-green-1); } -.profile { +.btn--reject { + background-color: var(--color-accent-red-1); +} + +.no-requests { + min-height: 200px; display: flex; + flex-direction: column; align-items: center; - gap: 10px; - color: #6f6f6f; + justify-content: center; + gap: 12px; &__icon { - font-size: 45px; - width: 45px; - height: 45px; - } - &__id { - font-size: 20px; - font-weight: 500; + font-size: 32px; + color: var(--color-grey-5); } -} -.btn { - color: white; -} -.btn--approve { - background-color: darkgreen; -} -.btn--reject { - background-color: rgb(179, 3, 3); + &__label { + font-size: 16px; + color: var(--color-grey-5); + } } diff --git a/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.html index 29a5655c25..d72949764f 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.html +++ b/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.html @@ -2,43 +2,45 @@ (cancel)="onNoClick()" (close)="onNoClick()"> @if (requests.length) { -
+
@for (request of requests; track request) {
@for (token of request.tokens; track token) {
- - - {{ token.tokenSymbol }} - - - - {{ token.token }} - +
+ NAME + {{ token.tokenSymbol }} +
+
+ TOKEN + {{ token.token }} +
@if (token.count > 0) { - - - {{ token.count | tokenCount: token.decimals }} - +
+ COUNT + {{ token.count | tokenCount: token.decimals }} +
} @if (token.serials?.length > 0) { - - - {{ token.serials?.join(', ') }} - +
+ SERIALS + {{ token.serials?.join(', ') }} +
}
}
- +
}
} @else { -
You have no retire requests
+
+ + You have no retire requests +
} diff --git a/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.scss b/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.scss index 235c4addbb..0cf36c9a49 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.scss +++ b/frontend/src/app/modules/contract-engine/dialogs/user-retire-requests-dialog/user-retire-requests-dialog.component.scss @@ -1,125 +1,98 @@ -.no-requests { - font-size: 25px; - color: gray; - font-weight: bold; - min-height: 200px; +.requests { display: flex; - align-items: center; - justify-content: center; + flex-direction: column; } + .request { - display: grid; - grid-template-columns: minmax(150px, 1fr) 170px; + display: flex; align-items: center; - column-gap: 30px; - padding: 20px 20px; - box-shadow: 0px 0px 4px 2px rgba(127, 127, 127, 0.13); - margin-bottom: 20px; - border-radius: 10px; + justify-content: space-between; + gap: 24px; + border: 1px solid var(--color-grey-3); + background-color: var(--color-grey-white); + border-radius: 12px; + padding: 16px; + margin-bottom: 16px; &__actions { - justify-self: center; + display: flex; + align-items: center; + gap: 10px; + flex-shrink: 0; } } -.status { - text-wrap: nowrap; - font-size: 20px; - font-weight: bold; - flex-basis: 117px; - &__label--available { - color: green; - } - &__label--not-available { - color: gray; - } -} -.approve { - // text-wrap: nowrap; - font-size: 20px; - font-weight: bold; - flex-basis: 117px; - &__label--approve { - color: green; - } - &__label--no-approve { - color: goldenrod; - } -} .tokens { - justify-self: center; display: flex; - overflow: auto; + flex-wrap: wrap; + gap: 15px; +} + +.token-card { display: flex; - padding: 5px; - gap: 25px; - .token-card { + flex-direction: column; + gap: 8px; + min-width: 160px; + background-color: var(--color-background); + border: 1px solid var(--color-grey-3); + border-radius: 8px; + padding: 12px 14px; + + &__row { display: flex; flex-direction: column; - // border: 1px solid black; - box-shadow: 0px 0px 3px 2px rgb(0 144 255 / 20%); - border-radius: 5px; - padding: 10px; - gap: 5px; - - color: rgb(71, 71, 71); - - i, svg { - color: #3f51b5; - } + } - &__serials, - &__token, - &__count { - display: flex; - align-items: center; - gap: 10px; - font-weight: bold; + &__label { + font-size: 12px; + font-weight: 500; + color: var(--color-grey-5); + } - i, svg { - font-size: 30px; - width: 30px; - height: 30px; - } - } + &__value { + font-size: 14px; + color: var(--color-grey-black-1); + word-break: break-all; + } +} - &__count { - i, svg { - transform: translateX(-2px); - } - } +.btn { + min-width: 96px; + height: 36px; + padding: 0 16px; + border-radius: 8px; + font-size: 14px; + font-weight: 500; + cursor: pointer; + border: 1px solid transparent; - &__serials { - span { - overflow: hidden; - max-width: 70px; - white-space: nowrap; - text-overflow: ellipsis; - } - } + &:disabled { + opacity: 0.5; + cursor: not-allowed; } } -:host ::ng-deep .request-actions { +.btn--cancel { + background-color: transparent; + color: var(--color-accent-red-1); + border-color: var(--color-accent-red-1); +} + +.no-requests { + min-height: 200px; display: flex; + flex-direction: column; align-items: center; - i, svg { - font-size: 25px; - width: 25px; - height: 25px; - } -} + justify-content: center; + gap: 12px; -.btn--remove { - color: red; -} + &__icon { + font-size: 32px; + color: var(--color-grey-5); + } -.btn { - color: white; -} -.btn--approve { - background-color: darkgreen; -} -.btn--reject { - background-color: rgb(179, 3, 3); + &__label { + font-size: 16px; + color: var(--color-grey-5); + } } diff --git a/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.html index 31334ae3a4..c7ffd8d3b2 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.html +++ b/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.html @@ -1,49 +1,57 @@ @if (requests.length) { - @for (request of requests; track request) { -
-
- - {{ request.user }} -
- @if (version !== '1.0.0') { -
- - {{ request.token }} +
+ @for (request of requests; track request) { +
+
+ + {{ request.user }} +
+
+ @if (version !== '1.0.0') { +
+
+ TOKEN + {{ request.token }} +
+
+ } +
+
+ + +
- } -
- - -
-
- } + } +
+ } @else { -
Contract has no requests, try to sync.
+
+ + Contract has no requests, try to sync. +
} diff --git a/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.scss b/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.scss index 5db5dbbd93..8a5b685863 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.scss +++ b/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.scss @@ -1,55 +1,129 @@ -.btn { - color: white; +.requests { + display: flex; + flex-direction: column; } -.no-requests { - min-height: 200px; + +:host ::ng-deep .dialog-body { + max-height: 740px !important; +} + +.request { display: flex; align-items: center; - justify-content: center; + justify-content: space-between; + gap: 24px; + border: 1px solid var(--color-grey-3); + background-color: var(--color-grey-white); + border-radius: 12px; + padding: 16px; + margin-bottom: 16px; - &__label { - font-size: 25px; - color: gray; - font-weight: bold; + &__actions { + display: flex; + align-items: center; + gap: 10px; + flex-shrink: 0; } } -.profile, .token { + +.profile { display: flex; align-items: center; gap: 10px; - color: #6f6f6f; + color: var(--color-grey-6); + flex-shrink: 0; &__icon { - font-size: 25px; - width: 25px; - height: 25px; + font-size: 28px; } + &__id { - font-size: 20px; + font-size: 14px; + font-weight: 500; + } +} + +.tokens { + display: flex; + flex-wrap: wrap; + gap: 15px; + flex: 1; +} + +.token-card { + display: flex; + flex-direction: column; + gap: 8px; + min-width: 160px; + background-color: var(--color-background); + border: 1px solid var(--color-grey-3); + border-radius: 8px; + padding: 12px 14px; + + &__row { + display: flex; + flex-direction: column; + } + + &__label { + font-size: 12px; font-weight: 500; + color: var(--color-grey-5); + } + + &__value { + font-size: 14px; + color: var(--color-grey-black-1); + word-break: break-all; + } +} + +.btn { + min-width: 96px; + height: 36px; + padding: 0 16px; + border-radius: 8px; + font-size: 14px; + font-weight: 500; + cursor: pointer; + border: 1px solid transparent; + color: #fff; + + &:disabled { + opacity: 0.5; + cursor: not-allowed; } } + .btn--approve { - background-color: darkgreen; + background-color: var(--color-accent-green-1); } + .btn--reject { - background-color: rgb(179, 3, 3); + background-color: var(--color-accent-red-1); } + .btn--ban { - background-color: darkred; + background-color: transparent; + color: var(--color-accent-red-1); + border-color: var(--color-accent-red-1); } -.request { + +.no-requests { + min-height: 200px; display: flex; + flex-direction: column; align-items: center; - justify-content: space-between; - padding: 20px 20px; - box-shadow: 0px 0px 4px 2px rgb(127 127 127 / 13%); - margin-bottom: 20px; - border-radius: 10px; + justify-content: center; + gap: 12px; - &__actions { - display: flex; - align-items: center; - gap: 10px; + &__icon { + font-size: 32px; + color: var(--color-grey-5); + } + + &__label { + font-size: 16px; + color: var(--color-grey-5); } } From 55d979e7e67edd0c7e3bedd7fbf8284fae02adf7 Mon Sep 17 00:00:00 2001 From: Ihar Tsykala Date: Sun, 21 Jun 2026 16:57:42 +0500 Subject: [PATCH 6/7] feat: 5506/5538 apply iteration-05 empty-state pattern to Pools dialogs --- .../retire-pools-dialog.component.html | 47 ++++++++++--------- .../retire-pools-dialog.component.scss | 46 ++++++++++++++++-- .../retire-pools-dialog.component.ts | 32 +++++++++---- .../user-retire-pools-dialog.component.html | 43 +++++++++-------- .../user-retire-pools-dialog.component.scss | 27 +++++++++++ 5 files changed, 140 insertions(+), 55 deletions(-) diff --git a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.html index c83b0ff252..581a8107dc 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.html +++ b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.html @@ -6,31 +6,31 @@ (close)="onNoClick()">
Pools -
+
Last sync: {{ syncDate ? (syncDate | date:'medium') : 'Never' }} - +
-
- - - - {{ item.label }} - - -
@if (pools.length) { +
+ + + + {{ item.label }} + + +
WIPE PERMISSION
@@ -94,7 +94,10 @@ }
} @else { -
There are no pools
+
+ + There are no pools +
} @if (length) { diff --git a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.scss b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.scss index a163779fb5..2fa943ae6c 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.scss +++ b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.scss @@ -8,6 +8,14 @@ height: 800px; } +::ng-deep .guardian-dialog.retire-pool-dialog:has(.no-pools) { + height: auto; +} + +::ng-deep .guardian-dialog.retire-pool-dialog:has(.no-pools) .dialog-body { + max-height: none; +} + ::ng-deep .guardian-dialog.retire-pool-dialog .p-dialog-content { border-radius: 10px; padding: 12px 10px 0; @@ -41,6 +49,15 @@ box-shadow: none !important; border: none; } + + &.syncing { + ::ng-deep .pi-sync { + animation-name: spin; + animation-duration: 3000ms; + animation-iteration-count: infinite; + animation-timing-function: linear; + } + } } .action-buttons { @@ -184,11 +201,32 @@ span.btn--remove { } } +@keyframes spin { + from { + transform: rotate(360deg); + } + to { + transform: rotate(0deg); + } +} + .no-pools { - font-size: 18px; - color: #888; - text-align: center; - padding: 20px; + min-height: 200px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 12px; + + &__icon { + font-size: 32px; + color: var(--color-grey-5); + } + + &__label { + font-size: 16px; + color: var(--color-grey-5); + } } ::ng-deep .guardian-dialog.retire-pool-dialog .table-paginator { diff --git a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.ts b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.ts index 9f8bd2a14d..af83585221 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.ts +++ b/frontend/src/app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.ts @@ -14,6 +14,7 @@ export class RetirePoolsDialogComponent implements OnInit { pools: any[] = []; syncDate: string; loading: boolean = false; + syncLoading: boolean = false; pageIndex = 0; pageSize = 5; length = 0; @@ -42,8 +43,10 @@ export class RetirePoolsDialogComponent implements OnInit { }); } - loadPools() { - this.loading = true; + loadPools(showLoading: boolean = true, onComplete?: () => void) { + if (showLoading) { + this.loading = true; + } this.contractService .getRetirePools({ contractId: this.contract.contractId, @@ -71,8 +74,12 @@ export class RetirePoolsDialogComponent implements OnInit { const count = pools.headers.get('X-Total-Count'); this.length = (count && +count) || this.pools.length; this.loading = false; + onComplete?.(); }, - () => (this.loading = false) + () => { + this.loading = false; + onComplete?.(); + } ); } @@ -91,18 +98,25 @@ export class RetirePoolsDialogComponent implements OnInit { this.dialogRef.close(null); } - sync(event: any) { - event.target.classList.add('spin'); - this.loading = true; + sync() { + const startedAt = Date.now(); + const stopSyncLoading = () => { + const delay = Math.max(0, 800 - (Date.now() - startedAt)); + setTimeout(() => { + this.syncLoading = false; + }, delay); + }; + + this.syncLoading = true; this.contractService.retireSyncPools(this.contract.id).subscribe( (result) => { this.syncDate = result; this.contract.syncPoolsDate = result; - this.loadPools(); + this.loadPools(false, stopSyncLoading); }, - () => (this.loading = false), () => { - event.target.classList.remove('spin'); + this.loading = false; + stopSyncLoading(); } ); } diff --git a/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.html b/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.html index b67f6792f2..e1c8bd703b 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.html +++ b/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.html @@ -10,26 +10,26 @@ (cancel)="onNoClick()" (close)="onNoClick()"> @if (!retireMod) { -
- - - - {{ item.label }} - - -
@if (pools.length) { +
+ + + + {{ item.label }} + + +
WIPE PERMISSION
@@ -76,7 +76,10 @@ }
} @else { -
There are no pools
+
+ + There are no pools +
} } @else {
diff --git a/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.scss b/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.scss index f2aeb6ff32..09eeee83c0 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.scss +++ b/frontend/src/app/modules/contract-engine/dialogs/user-retire-pools-dialog/user-retire-pools-dialog.component.scss @@ -8,6 +8,14 @@ height: 800px; } +::ng-deep .guardian-dialog.pools-dialog:has(.no-pools) { + height: auto; +} + +::ng-deep .guardian-dialog.pools-dialog:has(.no-pools) .dialog-body { + max-height: none; +} + ::ng-deep .guardian-dialog.pools-dialog .p-dialog-content { border-radius: 10px; padding: 12px 10px 0 @@ -173,3 +181,22 @@ align-self: start; padding: 5px; } + +.no-pools { + min-height: 200px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 12px; + + &__icon { + font-size: 32px; + color: var(--color-grey-5); + } + + &__label { + font-size: 16px; + color: var(--color-grey-5); + } +} From cf41b5bbd64d7e655046bd447417aeba2d692268 Mon Sep 17 00:00:00 2001 From: Ihar Tsykala Date: Mon, 22 Jun 2026 23:34:08 +0500 Subject: [PATCH 7/7] refactor: 5506/5538 --- .../guardian-tabs-switch/guardian-tabs-switch.component.html | 2 +- .../configs/contract-config/contract-config.component.html | 5 +---- .../configs/contract-config/contract-config.component.ts | 5 +++++ .../wipe-requests-dialog/wipe-requests-dialog.component.scss | 4 ---- 4 files changed, 7 insertions(+), 9 deletions(-) diff --git a/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.html b/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.html index 27e27035fc..c52fb43dd0 100644 --- a/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.html +++ b/frontend/src/app/modules/common/guardian-tabs-switch/guardian-tabs-switch.component.html @@ -1,7 +1,7 @@
- @for (tab of options; track tab) { + @for (tab of options; track tab.value) {
{{ tab.label }}
 diff --git a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.html b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.html index 1315826ad3..0ffc558631 100644 --- a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.html +++ b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.html @@ -17,10 +17,7 @@
diff --git a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts index 982dededd5..bcd1ee914d 100644 --- a/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts +++ b/frontend/src/app/modules/contract-engine/configs/contract-config/contract-config.component.ts @@ -191,6 +191,11 @@ export class ContractConfigComponent implements OnInit, OnDestroy { ]; type: ContractType = ContractType.WIPE; + public readonly contractTypeOptions = [ + { label: 'Token Wiping Contracts', value: ContractType.WIPE }, + { label: 'Token Retirement Contracts', value: ContractType.RETIRE }, + ]; + constructor( public tagsService: TagsService, private profileService: ProfileService, diff --git a/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.scss b/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.scss index 8a5b685863..f8e478b55f 100644 --- a/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.scss +++ b/frontend/src/app/modules/contract-engine/dialogs/wipe-requests-dialog/wipe-requests-dialog.component.scss @@ -3,10 +3,6 @@ flex-direction: column; } -:host ::ng-deep .dialog-body { - max-height: 740px !important; -} - .request { display: flex; align-items: center;