From f657bd306b3452cef01e7d003ce7149b878c773b Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Thu, 25 May 2023 20:42:03 +0300
Subject: [PATCH] UI: Refactoring

---
 .../home/pages/rulechain/rulechain-page.component.html     | 7 +++----
 .../home/pages/rulechain/rulechain-page.component.scss     | 7 +++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
index 85dd8df688..f018f15fab 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
@@ -15,9 +15,8 @@
     limitations under the License.
 
 -->
-<div class="mat-content" fxFlex tb-fullscreen [fullscreen]="isFullscreen" tb-hotkeys [hotkeys]="hotKeys"
-     [cheatSheet]="cheatSheetComponent"
-  fxLayout="column" class="tb-rulechain">
+<div class="mat-content tb-rulechain" fxFlex tb-fullscreen [fullscreen]="isFullscreen" tb-hotkeys [hotkeys]="hotKeys"
+     [cheatSheet]="cheatSheetComponent" fxLayout="column">
   <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
   <section class="tb-rulechain-container" fxFlex fxLayout="column">
     <div class="tb-rulechain-layout" fxFlex fxLayout="row">
@@ -163,7 +162,7 @@
                   (click)="drawer.toggle();"
                   matTooltip="{{ (drawer.opened ? 'rulenode.close-node-library' : 'rulenode.open-node-library') | translate }}"
                   matTooltipPosition="above">
-            <mat-icon style="transition: transform 0.4s" [ngClass]="{'tb-library-node-btn-toggled' : !drawer.opened}">chevron_right</mat-icon>
+            <mat-icon class="tb-library-node-btn-icon" [ngClass]="{'tb-library-node-btn-icon-toggled' : !drawer.opened}">chevron_right</mat-icon>
           </button>
           <button #versionControlButton
                   *ngIf="!isImport"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
index 7fbe1f28d1..bb79851da4 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
@@ -63,8 +63,11 @@
     opacity: 0.5;
     border-radius: 0 15px 15px 0 !important;
     transform: translateY(-50%);
-    &-toggled {
-      transform: rotateZ(180deg);
+    &-icon {
+      transition: transform 0.4s !important;
+      &-toggled {
+        transform: rotateZ(180deg);
+      }
     }
     &:before {
       width: 20px;