Pull request #144: [EDELIVERY-13978] update access token panel

Merge in EDELIVERY/smp from bugfix/EDELIVERY-13978-access-tokens-ui-elements-improvement to development

* commit '19b9f918':
  [EDELIVERY-13978] update access token panel

smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.html

 <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>&nbsp;/&nbsp;</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">

smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.scss

 .access-token-panel {
-
-
   border-bottom: 1px solid #e0e0e0;
 }
+
+.access-token-control-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 3px
+}

smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.html

 <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">

smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.scss

 .smp-certificate-warning-panel   {
   font-size: 0.8em;
+  padding-bottom: 5px;
+}
+
+.user-certificate-control-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
 }