From 87cbe96c3b7b13d2db4ebf7b5a84e655b38ed731 Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Fri, 19 May 2023 15:07:25 +0300
Subject: [PATCH] rule node style improve

---
 .../home/components/details-panel.component.html       |  2 +-
 .../home/components/details-panel.component.scss       | 10 ++++++++++
 .../relation/relation-filters.component.html           | 10 +++++-----
 .../relation/relation-filters.component.scss           |  1 +
 .../pages/rulechain/rule-node-details.component.html   |  2 +-
 .../pages/rulechain/rule-node-details.component.scss   |  6 +++++-
 6 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.html b/ui-ngx/src/app/modules/home/components/details-panel.component.html
index 15df7e99e5..e82ee068d5 100644
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.html
@@ -65,6 +65,6 @@
     </section>
   </mat-toolbar>
 </header>
-<div fxFlex class="mat-content" [ngStyle]="{backgroundColor: backgroundColor}">
+<div fxFlex class="mat-content reset-style" [ngStyle]="{backgroundColor: backgroundColor}">
   <ng-content></ng-content>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.scss b/ui-ngx/src/app/modules/home/components/details-panel.component.scss
index 9002246841..b73eb5d58d 100644
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.scss
@@ -20,12 +20,22 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+
   .mat-toolbar.details-toolbar {
     padding: 0;
   }
 }
 
 :host ::ng-deep {
+
+  .reset-style {
+    color: rgba(0, 0, 0, 0.6);;
+    //font-family: "Arial";
+    line-height: 24px;
+    //font-weight: 500;
+    letter-spacing: 0.5px;
+  }
+
   .mat-toolbar-tools {
     height: 100%;
     min-height: 60px;
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
index bfc639e6b4..71965c4ba1 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
@@ -22,13 +22,13 @@
            fxLayoutAlign="start center" formArrayName="relationFilters"
            *ngFor="let relationFilterControl of relationFiltersFormArray.controls; let $index = index">
         <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-          <div class="input-block" fxFlex fxLayout="row" fxLayoutAlign="start center">
-            <tb-relation-type-autocomplete
-              style="width: 200px; min-width: 200px;"
+          <div class="input-block" fxFlex fxLayout="row" fxLayoutAlign="start center" style="margin-right: 8px">
+            <tb-relation-type-autocomplete fxFlex="50"
               subscriptSizing="dynamic"
+              style="min-width: 200px;"
               [formControl]="relationFilterControl.get('relationType')">
             </tb-relation-type-autocomplete>
-            <tb-entity-type-list style="margin-left: 30px" fxFlex
+            <tb-entity-type-list style="margin-left: 30px" fxFlex="50"
               subscriptSizing="dynamic"
               [allowedEntityTypes]="allowedEntityTypes"
               [formControl]="relationFilterControl.get('entityTypes')">
@@ -49,7 +49,7 @@
         <span fxLayoutAlign="center center"
               class="tb-prompt" translate>relation.any-relation</span>
   </div>
-  <div style="margin-top: 8px">
+  <div style="margin: 5px 0px 15px">
     <button mat-stroked-button color="primary"
             [disabled]="isLoading$ | async"
             (click)="addFilter()"
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss
index c6bf558aca..5713fa2461 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss
@@ -16,6 +16,7 @@
 :host {
   .tb-relation-filters {
     max-width: calc(100vw - 48px);
+    margin-top: 2px;
     overflow: hidden;
 
     .container{
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
index 592bb46cb2..bea1c50006 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
@@ -55,7 +55,7 @@
       <div formGroupName="additionalInfo" fxLayout="column">
         <mat-form-field class="mat-block">
           <mat-label translate>rulenode.rule-node-description</mat-label>
-          <textarea matInput formControlName="description" rows="2"></textarea>
+          <textarea matInput formControlName="description" rows="1"></textarea>
         </mat-form-field>
       </div>
     </section>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.scss b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.scss
index 4995d5c06d..a576472592 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.scss
@@ -27,12 +27,16 @@
       display: flex;
       flex-direction: column;
       gap: 8px;
-      margin-bottom: 5px;
+
+      @media #{$mat-gt-sm} {
+        margin-bottom: 24px;
+      }
     }
 
     @media #{$mat-gt-sm} {
       flex-direction: row;
       gap: 8px;
+      align-items: center;
 
       .node-setting {
         margin-top: 5px;