From 32d7978c9efe9d2563e101c53daf658e9603f37b Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 16 Oct 2024 19:15:53 +0300
Subject: [PATCH] Flex layout replacements. Switch to tailwind.css.

---
 ...scada-symbol-behavior-panel.component.html |  6 ++---
 .../scada-symbol-behaviors.component.html     |  7 +++--
 .../scada-symbol-metadata-tags.component.html |  5 ++--
 .../scada-symbol-metadata.component.html      | 20 +++++++-------
 .../scada-symbol-properties.component.html    |  7 +++--
 ...scada-symbol-property-panel.component.html |  4 +--
 .../scada-symbol-editor.component.html        | 10 +++----
 .../scada-symbol/scada-symbol.component.html  | 22 ++++++++--------
 .../pages/security/security.component.html    | 26 +++++++++----------
 ui-ngx/tailwind.config.js                     | 15 ++++++++---
 10 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
index 849a8661ab..9494fb8092 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
@@ -92,7 +92,7 @@
       </ng-container>
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>scada.behavior.default-settings</div>
-        <tb-get-value-action-settings fxFlex
+        <tb-get-value-action-settings class="flex-1"
                                       panelTitle="{{ behaviorFormGroup.get('name').value | customTranslate }}"
                                       [valueType]="behaviorFormGroup.get('valueType').value"
                                       [trueLabel]="behaviorFormGroup.get('trueLabel').value | customTranslate"
@@ -107,7 +107,7 @@
     <ng-container *ngIf="behaviorFormGroup.get('type').value === ScadaSymbolBehaviorType.action">
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>scada.behavior.default-settings</div>
-        <tb-set-value-action-settings fxFlex
+        <tb-set-value-action-settings class="flex-1"
                                       panelTitle="{{ behaviorFormGroup.get('name').value | customTranslate }}"
                                       [valueType]="behaviorFormGroup.get('valueType').value"
                                       [aliasController]="aliasController"
@@ -119,7 +119,7 @@
     <ng-container *ngIf="behaviorFormGroup.get('type').value === ScadaSymbolBehaviorType.widgetAction">
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>scada.behavior.default-settings</div>
-        <tb-widget-action-settings fxFlex
+        <tb-widget-action-settings class="flex-1"
                                    panelTitle="{{ behaviorFormGroup.get('name').value | customTranslate }}"
                                    [callbacks]="callbacks"
                                    [widgetType]="widgetType.rpc"
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html
index 7cefc6af63..d566336057 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html
@@ -30,7 +30,7 @@
       <div cdkDrag [cdkDragDisabled]="!dragEnabled"
            [class.tb-draggable-form-table-row]="!disabled"
            *ngFor="let behaviorControl of behaviorsFormArray().controls; trackBy: trackByBehavior; let $index = index;">
-        <tb-scada-symbol-metadata-behavior-row fxFlex
+        <tb-scada-symbol-metadata-behavior-row class="flex-1"
           [index]="$index"
           [formControl]="behaviorControl"
           [aliasController]="aliasController"
@@ -42,7 +42,7 @@
                   *ngIf="!disabled"
                   type="button"
                   cdkDragHandle
-                  [ngClass]="{'tb-hidden': !dragEnabled}"
+                  [class.tb-hidden]="!dragEnabled"
                   matTooltip="{{ 'action.drag' | translate }}"
                   matTooltipPosition="above">
             <mat-icon>drag_indicator</mat-icon>
@@ -60,6 +60,5 @@
 </div>
 
 <ng-template #noBehaviors>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'scada.behavior.no-behaviors' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'scada.behavior.no-behaviors' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html
index 32bb345ecf..c8f900ce54 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html
@@ -24,7 +24,7 @@
     </div>
     <div *ngIf="tagsFormArray().controls.length; else noTags" class="tb-form-table-body">
       <div *ngFor="let tagControl of tagsFormArray().controls; trackBy: trackByTag; let $index = index; let $last = last">
-        <tb-scada-symbol-metadata-tag fxFlex
+        <tb-scada-symbol-metadata-tag class="flex-1"
                                       [elementStateRenderFunctionCompleter]="elementStateRenderFunctionCompleter"
                                       [clickActionFunctionCompleter]="clickActionFunctionCompleter"
                                       [formControl]="tagControl">
@@ -35,6 +35,5 @@
   </div>
 </div>
 <ng-template #noTags>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'scada.tag.no-tags' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'scada.tag.no-tags' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html
index 67c77f7f2a..c505546286 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html
@@ -25,17 +25,17 @@
     </div>
   </div>
   <div [formGroup]="metadataFormGroup" class="tb-scada-symbol-metadata-content">
-    <div [fxShow]="selectedOption === 'general'" class="mat-content">
+    <div [class.!hidden]="selectedOption !== 'general'" class="mat-content">
       <div class="tb-form-panel">
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>scada.title</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <input matInput required formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
         </div>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>scada.description</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <textarea matInput
                       formControlName="description"
                       rows="2"></textarea>
@@ -43,8 +43,8 @@
         </div>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>scada.search-tags</div>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-            <tb-string-items-list fxFlex
+          <div class="flex flex-1 flex-row items-center justify-start">
+            <tb-string-items-list class="flex-1"
                                   style="display: flex;"
                                   formControlName="searchTags"
                                   appearance="outline"
@@ -54,7 +54,7 @@
         </div>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>scada.widget-size</div>
-          <div fxLayout="row" fxFlex fxLayoutAlign="end center" fxLayoutGap="8px">
+          <div class="flex flex-1 flex-row items-center justify-end gap-2">
             <div class="tb-small-label">{{ 'scada.cols' | translate }}</div>
             <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
               <input matInput formControlName="widgetSizeX" required
@@ -71,7 +71,7 @@
         </div>
         <div class="tb-form-panel stroked">
           <mat-expansion-panel class="tb-settings" expanded>
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex flex-row flex-wrap">
               <mat-panel-title>
                 {{ 'scada.state-render-function' | translate }}
               </mat-panel-title>
@@ -89,7 +89,7 @@
         </div>
       </div>
     </div>
-    <div [fxShow]="selectedOption === 'tags'" class="mat-content overflow-hidden">
+    <div [class.!hidden]="selectedOption !== 'tags'" class="mat-content overflow-hidden">
       <tb-scada-symbol-metadata-tags
         #symbolMetadataTags
         [tags]="tags"
@@ -98,14 +98,14 @@
         formControlName="tags">
       </tb-scada-symbol-metadata-tags>
     </div>
-    <div [fxShow]="selectedOption === 'behavior'" class="mat-content overflow-hidden">
+    <div [class.!hidden]="selectedOption !== 'behavior'" class="mat-content overflow-hidden">
       <tb-scada-symbol-metadata-behaviors
         formControlName="behavior"
         [aliasController]="aliasController"
         [callbacks]="callbacks">
       </tb-scada-symbol-metadata-behaviors>
     </div>
-    <div [fxShow]="selectedOption === 'properties'" class="mat-content overflow-hidden">
+    <div [class.!hidden]="selectedOption !== 'properties'" class="mat-content overflow-hidden">
       <tb-scada-symbol-metadata-properties
         formControlName="properties">
       </tb-scada-symbol-metadata-properties>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html
index 1b553a5130..684609937e 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html
@@ -30,7 +30,7 @@
       <div cdkDrag [cdkDragDisabled]="!dragEnabled"
            [class.tb-draggable-form-table-row]="!disabled"
            *ngFor="let propertyControl of propertiesFormArray().controls; trackBy: trackByProperty; let $index = index;">
-        <tb-scada-symbol-metadata-property-row fxFlex
+        <tb-scada-symbol-metadata-property-row class="flex-1"
                                                [index]="$index"
                                                [booleanPropertyIds]="booleanPropertyIds"
                                                [formControl]="propertyControl"
@@ -41,7 +41,7 @@
                   *ngIf="!disabled"
                   type="button"
                   cdkDragHandle
-                  [ngClass]="{'tb-hidden': !dragEnabled}"
+                  [class.tb-hidden]="!dragEnabled"
                   matTooltip="{{ 'action.drag' | translate }}"
                   matTooltipPosition="above">
             <mat-icon>drag_indicator</mat-icon>
@@ -59,6 +59,5 @@
 </div>
 
 <ng-template #noProperties>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'scada.property.no-properties' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'scada.property.no-properties' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html
index 6090a9504e..94efffca85 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html
@@ -83,7 +83,7 @@
     </div>
     <div *ngIf="propertyFormGroup.get('type').value === ScadaSymbolPropertyType.number" class="tb-form-row space-between">
       <div translate>scada.property.number-settings</div>
-      <div fxLayout="row" fxFlex fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-end gap-2">
         <div class="tb-small-label" translate>scada.property.min</div>
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="min"
@@ -110,7 +110,7 @@
     </div>
     <div class="tb-form-panel stroked">
       <mat-expansion-panel class="tb-settings">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             {{ 'scada.property.advanced-ui-settings' | translate }}
           </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
index 3ece699a83..8f75949a47 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div class="tb-scada-symbol-editor-shape" [fxShow]="editorMode === 'svg'" #scadaSymbolShape></div>
-<div class="tb-scada-symbol-editor-tooltips" [fxShow]="editorMode === 'svg'" #tooltipsContainer>
+<div class="tb-scada-symbol-editor-shape" [class.!hidden]="editorMode !== 'svg'" #scadaSymbolShape></div>
+<div class="tb-scada-symbol-editor-tooltips" [class.!hidden]="editorMode !== 'svg'" #tooltipsContainer>
   <tb-anchor #tooltipsContainerComponent></tb-anchor>
 </div>
-<div class="tb-scada-symbol-editor-svg-xml" [fxShow]="editorMode === 'xml'">
+<div class="tb-scada-symbol-editor-svg-xml" [class.!hidden]="editorMode !== 'xml'">
   <tb-svg-xml [formControl]="svgContentFormControl"
               fillHeight
               noLabel>
@@ -27,7 +27,7 @@
 </div>
 <div class="tb-scada-symbol-editor-buttons">
   <div class="tb-scada-symbol-editor-view-buttons">
-    <div class="tb-scada-symbol-editor-zoom-buttons tb-primary-fill" [fxShow]="editorMode === 'svg'">
+    <div class="tb-scada-symbol-editor-zoom-buttons tb-primary-fill" [class.!hidden]="editorMode !== 'svg'">
       <button mat-icon-button
               [disabled]="zoomInDisabled"
               (click)="zoomIn()"
@@ -43,7 +43,7 @@
         <mat-icon>remove</mat-icon>
       </button>
     </div>
-    <div *ngIf="displayShowHidden" [fxShow]="editorMode === 'svg'" class="tb-primary-fill">
+    <div *ngIf="displayShowHidden" [class.!hidden]="editorMode !== 'svg'" class="tb-primary-fill">
       <button mat-icon-button
               (click)="toggleShowHidden()"
               matTooltip="{{ (showHiddenElements ? 'scada.hide-hidden-elements' : 'scada.show-hidden-elements') | translate }}"
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html
index 6110f4afc0..809b85206f 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<div class="tb-scada-symbol-editor mat-content" fxLayout="column">
-  <section class="tb-scada-symbol-editor-container" fxFlex fxLayout="column">
-    <div class="tb-scada-symbol-editor-layout" fxFlex fxLayout="row">
-      <mat-drawer-container style="width: 100%; height: 100%;">
+<div class="tb-scada-symbol-editor mat-content flex flex-col">
+  <section class="tb-scada-symbol-editor-container flex flex-1 flex-col">
+    <div class="tb-scada-symbol-editor-layout flex flex-1 flex-row">
+      <mat-drawer-container class="size-full">
         <mat-drawer class="tb-scada-symbol-editor-details-drawer mat-elevation-z4"
                     disableClose="true"
                     mode="side"
                     opened
                     position="end">
-          <tb-details-panel fxFlex
+          <tb-details-panel class="flex-1"
                             [isReadOnly]="true"
                             [showCloseDetails]="false"
                             headerHeightPx="64"
                             headerTitle="{{symbolData?.imageResource?.title}}">
-            <div class="details-buttons" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+            <div class="details-buttons flex flex-row items-center justify-start gap-4">
               <div tb-help="scadaSymbolDev"></div>
               <button mat-stroked-button
                       [disabled]="scadaSymbolFormGroup.invalid"
@@ -77,7 +77,7 @@
                 </div>
               </div>
             </div>
-            <div [fxShow]="!previewMode" [formGroup]="scadaSymbolFormGroup">
+            <div [class.!hidden]="previewMode" [formGroup]="scadaSymbolFormGroup">
               <tb-scada-symbol-metadata
                 #symbolMetadata
                 [tags]="tags"
@@ -85,7 +85,7 @@
                 [callbacks]="widgetActionCallbacks"
                 formControlName="metadata">
                 <div class="tb-scada-symbol-metadata-header-prefix">
-                  <button fxHide.gt-sm
+                  <button class="gt-sm:!hidden"
                           [disabled]="scadaSymbolFormGroup.invalid || !symbolEditorValid"
                           mat-button color="primary"
                           (click)="enterPreviewMode()">
@@ -93,15 +93,15 @@
                     {{ 'scada.preview' | translate }}
                   </button>
                 </div>
-                <div fxFlex.lt-md class="tb-scada-symbol-metadata-header-suffix" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="12px">
-                  <button fxHide.lt-md
+                <div class="tb-scada-symbol-metadata-header-suffix flex flex-row items-center justify-end gap-3 lt-md:flex-1">
+                  <button class="lt-md:!hidden"
                           [disabled]="scadaSymbolFormGroup.invalid || !symbolEditorValid"
                           mat-button color="primary"
                           (click)="enterPreviewMode()">
                     <mat-icon>visibility</mat-icon>
                     {{ 'scada.preview' | translate }}
                   </button>
-                  <div *ngIf="!readonly" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
+                  <div *ngIf="!readonly" class="flex flex-row items-center justify-start gap-3">
                     <button [disabled]="!(scadaSymbolFormGroup.dirty || symbolEditorDirty)"
                             mat-stroked-button color="primary"
                             (click)="onRevertScadaSymbolConfig()">
diff --git a/ui-ngx/src/app/modules/home/pages/security/security.component.html b/ui-ngx/src/app/modules/home/pages/security/security.component.html
index d512090617..35dc557552 100644
--- a/ui-ngx/src/app/modules/home/pages/security/security.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/security.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div class="profile-container" fxLayout="column" fxLayoutGap="8px">
-  <mat-card appearance="outlined" class="profile-card" fxLayout="column">
+<div class="profile-container flex flex-col gap-2">
+  <mat-card appearance="outlined" class="profile-card flex flex-col">
     <mat-card-title style="margin-bottom: 8px;">
       <span class="mat-headline-5 card-title" translate>profile.jwt-token</span>
     </mat-card-title>
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row items-center justify-between">
       <div class="token-text">{{ 'profile.token-valid-till' | translate }} <span class="date">{{ jwtTokenExpiration | date: 'yyyy-MM-dd HH:mm:ss' }}</span></div>
       <button mat-raised-button
               color="primary"
@@ -30,16 +30,16 @@
       </button>
     </div>
   </mat-card>
-  <mat-card appearance="outlined" class="profile-card" fxLayout="column">
+  <mat-card appearance="outlined" class="profile-card flex flex-col">
     <div class="change-password" tb-toast toastTarget="changePassword">
       <form #changePasswordForm="ngForm" [formGroup]="changePassword" (ngSubmit)="onChangePassword(changePasswordForm)">
-        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="25px" fxLayoutGap.xs="0">
-          <div fxFlex="290px" fxFlex.sm="250px"  fxFlex.xs="100">
+        <div class="flex flex-row gap-6.25 xs:flex-col xs:gap-0">
+          <div class="min-w-72.5 max-w-72.5 flex-1 basis-72.5 xs:min-w-0 xs:max-w-full xs:basis-full sm:min-w-62.5 sm:max-w-62.5 sm:basis-62.5">
             <h3 class="card-title" translate>profile.change-password</h3>
             <mat-form-field class="mat-block same-color" appearance="fill" color="primary">
               <mat-label translate>profile.current-password</mat-label>
               <input matInput type="password" name="current-password" formControlName="currentPassword" autocomplete="current-password"/>
-              <tb-toggle-password [fxShow]="changePassword.get('currentPassword').dirty || changePassword.get('currentPassword').touched" matSuffix></tb-toggle-password>
+              <tb-toggle-password [class.!hidden]="!changePassword.get('currentPassword').dirty && !changePassword.get('currentPassword').touched" matSuffix></tb-toggle-password>
               <mat-error *ngIf="changePassword.get('currentPassword').hasError('differencePassword')">
                 {{ 'security.password-requirement.incorrect-password-try-again' | translate }}
               </mat-error>
@@ -47,7 +47,7 @@
             <mat-form-field class="mat-block same-color" hideRequiredMarker appearance="fill" color="primary" subscriptSizing="dynamic">
               <mat-label translate>login.new-password</mat-label>
               <input matInput type="password" name="new-password" formControlName="newPassword" autocomplete="new-password" required/>
-              <tb-toggle-password [fxShow]="changePassword.get('newPassword').dirty || changePassword.get('newPassword').touched" matSuffix></tb-toggle-password>
+              <tb-toggle-password [class.!hidden]="!changePassword.get('newPassword').dirty && !changePassword.get('newPassword').touched" matSuffix></tb-toggle-password>
               <mat-hint></mat-hint>
               <mat-error *ngIf="changePassword.get('newPassword').errors
                               && !changePassword.get('newPassword').hasError('alreadyUsed')
@@ -65,20 +65,20 @@
                 {{ 'security.password-requirement.password-should-not-contain-spaces' | translate }}
               </mat-error>
             </mat-form-field>
-            <div fxFlex fxHide fxShow.xs fxLayoutAlign="start center">
+            <div class="flex flex-1 items-center justify-start gt-xs:!hidden">
               <ng-container *ngTemplateOutlet="passwordRequirements"></ng-container>
             </div>
             <mat-form-field class="mat-block same-color" hideRequiredMarker appearance="fill" color="primary">
               <mat-label translate>login.new-password-again</mat-label>
               <input matInput type="password" name="new-password" formControlName="newPassword2" autocomplete="new-password" required/>
-              <tb-toggle-password [fxShow]="changePassword.get('newPassword2').dirty || changePassword.get('newPassword2').touched" matSuffix></tb-toggle-password>
+              <tb-toggle-password [class.!hidden]="!changePassword.get('newPassword2').dirty && !changePassword.get('newPassword2').touched" matSuffix></tb-toggle-password>
               <mat-error *ngIf="changePassword.get('newPassword2').hasError('differencePassword')">
                 {{ 'security.password-requirement.new-passwords-not-match' | translate }}
               </mat-error>
             </mat-form-field>
           </div>
           <mat-divider [vertical]="true"></mat-divider>
-          <div fxFlex fxHide.xs fxLayoutAlign="start start">
+          <div class="flex flex-1 items-start justify-start xs:!hidden">
             <ng-container *ngTemplateOutlet="passwordRequirements"></ng-container>
           </div>
         </div>
@@ -125,7 +125,7 @@
             </div>
           </div>
         </ng-template>
-        <div fxLayout="row" fxLayoutGap="8px" style="margin-top: 18px;" [fxShow]="changePassword.dirty || changePassword.touched">
+        <div class="flex flex-row gap-2" style="margin-top: 18px;" [class.!hidden]="!changePassword.dirty && !changePassword.touched">
           <button mat-button color="primary"
                   type="button"
                   (click)="discardChanges(changePasswordForm, $event)"
@@ -153,7 +153,7 @@
       <ng-container *ngFor="let provider of allowTwoFactorProviders; let $last = last; trackBy: trackByProvider">
         <div class="provider">
           <h4 class="provider-title">{{ providersData.get(provider).name | translate }}</h4>
-          <div fxLayout="row" fxLayoutAlign="space-between start">
+          <div class="flex flex-row items-start justify-between">
             <div class="mat-body-2 description" *ngIf="!twoFactorAuth.get(provider).value; else providerInfo">
               {{ providersData.get(provider).description | translate }}
             </div>
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index b5eb1d077f..247ab70326 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -82,14 +82,17 @@ module.exports = {
       flexBasis: {
         '7.5': '1.875rem',
         '25': '6.25rem',
-        '37.5': '9.375rem'
+        '37.5': '9.375rem',
+        '62.5': '15.625rem',
+        '72.5': '18.125rem'
       },
       flex: {
         full: '1 1 100%'
       },
       gap: {
         '0.75': '0.1875rem',
-        '1.25': '0.3125rem'
+        '1.25': '0.3125rem',
+        '6.25': '1.5625rem'
       },
       minHeight: {
         '19': '4.75rem'
@@ -97,7 +100,9 @@ module.exports = {
       minWidth: {
         '7.5': '1.875rem',
         '25': '6.25rem',
-        '37.5': '9.375rem'
+        '37.5': '9.375rem',
+        '62.5': '15.625rem',
+        '72.5': '18.125rem'
       },
       maxWidth: {
         '5%': '5%',
@@ -143,7 +148,9 @@ module.exports = {
         '11/12': '91.666667%',
         '7.5': '1.875rem',
         '25': '6.25rem',
-        '37.5': '9.375rem'
+        '37.5': '9.375rem',
+        '62.5': '15.625rem',
+        '72.5': '18.125rem'
       }
     },
   },