From 753bacd2dce7b58bcbe45596da59098a1fb8fc32 Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Mon, 25 Mar 2024 16:31:56 +0200
Subject: [PATCH] UI: oauth settings style improvement

---
 .../pages/admin/oauth2-settings.component.html    |  8 ++++----
 .../pages/admin/oauth2-settings.component.scss    | 15 ++++++++++++++-
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
index acaf58895e..2e85f8b54b 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
@@ -29,8 +29,8 @@
     <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
     <mat-card-content style="padding-top: 16px;">
       <form [formGroup]="oauth2SettingsForm" (ngSubmit)="save()">
-        <fieldset class="fields-group" [disabled]="isLoading$ | async">
-          <div class="tb-form-row no-border column-xs">
+        <fieldset class="tb-form-panel stroked gap-xs-12" style="margin-bottom: 16px" [disabled]="isLoading$ | async">
+          <div class="tb-form-row no-border no-padding column-xs">
             <mat-chip-listbox formControlName="enabled">
               <mat-chip-option [value]="true">{{ 'admin.oauth2.enable' | translate }}</mat-chip-option>
             </mat-chip-listbox>
@@ -38,9 +38,9 @@
               <mat-chip-option [value]="true">{{ 'admin.oauth2.edge-enable' | translate }}</mat-chip-option>
             </mat-chip-listbox>
           </div>
-          <section *ngIf="oauth2SettingsForm.get('enabled').value" style="margin-top: 1em;">
+          <section *ngIf="oauth2SettingsForm.get('enabled').value && oauth2ParamsInfos.controls.length">
             <ng-container formArrayName="oauth2ParamsInfos">
-              <div class="container">
+              <div>
                 <mat-accordion multi>
                   <ng-container *ngFor="let oauth2ParamsInfo of oauth2ParamsInfos.controls; let i = index; trackBy: trackByItem">
                     <mat-expansion-panel [formGroupName]="i">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.scss b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.scss
index a476f438e3..639fb877f2 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.scss
@@ -13,7 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../../scss/constants';
+
 :host{
+  .gap-xs-12 {
+    @media #{$mat-xs} {
+      gap: 12px;
+    }
+  }
+
+  .mdc-evolution-chip-set .mdc-evolution-chip {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
   .checkbox-row {
     margin-top: 1em;
   }
@@ -31,7 +44,7 @@
   }
 
   .container{
-    margin-bottom: 1em;
+    margin-bottom: 16px;
 
     .tb-highlight{
       margin: 0;