diff --git a/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.html b/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.html index db7be175adc386036673947db9c8ad741ff0211b..65e3e708dbceac65c84fad0566c3dc0b2483cd71 100644 --- a/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.html +++ b/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.html @@ -1,13 +1,7 @@ <mat-expansion-panel [expanded]="_expanded"> - <mat-expansion-panel-header style="height: 95px"> + <mat-expansion-panel-header style="height: 115px"> <div - style="display: flex; flex-direction: column;width: 100%;margin-right: 10px;"> - <smp-warning-panel *ngIf="!!_credential?.expired;" - class="smp-certificate-warning-panel" - [padding]="false" - icon="error" - label="{{ 'access.token.panel.label.token.expired' | translate }}"> - </smp-warning-panel> + style="flex-direction: column;width: 100%;margin-right: 10px;margin-top: 5px"> <div style="display: flex; flex-direction: row; justify-content: space-between; gap: 3px; padding-left: 5px;"> @@ -28,7 +22,7 @@ <ng-template #elseNoDate><span> / </span></ng-template> </mat-hint> </mat-form-field> - <div style="display: inline;display: flex;flex-direction: column"> + <div class="access-token-control-panel"> <button id="deleteButton" mat-raised-button (click)="onDeleteButtonClicked($event)" color="primary"> @@ -44,6 +38,12 @@ </button> </div> </div> + <smp-warning-panel *ngIf="!!_credential?.expired;" + [padding]="false" + style="padding-bottom: 5px" + icon="error" + label="{{ 'access.token.panel.label.token.expired' | translate }}"> + </smp-warning-panel> </div> </mat-expansion-panel-header> <div class="smp-data-panel" [formGroup]="credentialForm"> diff --git a/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.scss b/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.scss index 2ff5c115ed308f4c86a6cb9b801a6c949555e1d5..babb6cf50300f108c23582446630a294690f8281 100644 --- a/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.scss +++ b/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.scss @@ -1,5 +1,9 @@ .access-token-panel { - - border-bottom: 1px solid #e0e0e0; } + +.access-token-control-panel { + display: flex; + flex-direction: column; + gap: 3px +} diff --git a/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.html b/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.html index 06ca05efe59ada95c938a395a41aaa14f8f668ff..3d218ac523f05b76dfd56faeeacf9a95b1113956 100644 --- a/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.html +++ b/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.html @@ -1,13 +1,8 @@ <mat-expansion-panel [expanded]="_expanded" [formGroup]="credentialForm"> - <mat-expansion-panel-header style="height: 95px"> + <mat-expansion-panel-header style="height: 105px"> <div - style="display: flex; flex-direction: column;width: 100%; padding-right: 10px"> - <smp-warning-panel *ngIf="_credential.certificate?.invalid;" - class="smp-certificate-warning-panel" - [padding]="false" - icon="error" - label="{{ 'user.certificate.panel.label.invalid.certificate' | translate: { reason: _credential.certificate.invalidReason} }}"> - </smp-warning-panel> + style="display: flex; flex-direction: column;width: 100%; padding-right: 10px;margin-top: 5px"> + <div style="display: flex;flex-flow: row; align-items: center; width: 100%"> @@ -27,7 +22,7 @@ </mat-form-field> <div - style="display: flex; flex-direction: column; justify-content: space-between; padding-left: 5px;"> + class="user-certificate-control-panel"> <button id="deleteButton" mat-raised-button (click)="onDeleteButtonClicked($event)" color="primary"> @@ -43,6 +38,12 @@ </button> </div> </div> + <smp-warning-panel *ngIf="_credential.certificate?.invalid;" + class="smp-certificate-warning-panel" + [padding]="false" + icon="error" + label="{{ 'user.certificate.panel.label.invalid.certificate' | translate: { reason: _credential.certificate.invalidReason} }}"> + </smp-warning-panel> </div> </mat-expansion-panel-header> <div class="panel smp-data-panel"> diff --git a/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.scss b/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.scss index 588a7d255e8db0eb482aa3fc25b87044a7cfcd24..729c4a8e2cdfc6df447bc43bbe9be881c47f2e59 100644 --- a/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.scss +++ b/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.scss @@ -1,4 +1,11 @@ .smp-certificate-warning-panel { font-size: 0.8em; + padding-bottom: 5px; +} + +.user-certificate-control-panel { + display: flex; + flex-direction: column; + gap: 3px; }