UI: Remove flexLayout in mobile center

ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-dialog.component.html

@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 850px;max-height: 100vh;display: grid;grid-template-rows: min-content 4px minmax(auto, 1fr) min-content;">
   <mat-toolbar color="primary">
     <h2>{{ 'mobile.add-application' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div tb-help="mobileApplication"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -29,10 +29,10 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content style="padding: 0">
+  <div mat-dialog-content class="!p-0">
     <tb-mobile-app #mobileAppComponent></tb-mobile-app>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial

ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-header.component.html

@@ -15,14 +15,12 @@
     limitations under the License.
 
 -->
-<div fxFlex="100" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutAlign.xs="start center">
-  <section fxHide fxShow.gt-xs class="tb-entity-title-container">
+<div class="flex flex-full items-center justify-between">
+  <section class="flex items-center xs:!hidden">
     <div tbTruncateWithTooltip translate>mobile.applications</div>
     <div tb-help="mobileApplication"></div>
   </section>
   <button mat-stroked-button color="primary" (click)="createMobile($event)">
-    <div fxLayout="row" fxLayoutAlign="start center">
-      <mat-icon>add</mat-icon>{{ 'mobile.add-application' | translate }}
-    </div>
+    <mat-icon>add</mat-icon>{{ 'mobile.add-application' | translate }}
   </button>
 </div>

ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-header.component.scss

@@ -15,9 +15,4 @@
  */
 :host{
   width: 100000px;
-
-  .tb-entity-title-container {
-    display: flex;
-    align-items: center;
-  }
 }

ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="mat-padding" [formGroup]="entityForm" fxLayout="column">
+<section class="mat-padding flex flex-col" [formGroup]="entityForm">
   <mat-form-field appearance="outline" subscriptSizing="dynamic">
     <mat-label translate>mobile.mobile-package</mat-label>
     <input matInput required formControlName="pkgName">
@@ -82,9 +82,9 @@
   </mat-form-field>
   <section class="tb-form-panel stroked no-padding-bottom" formGroupName="versionInfo" style="margin-bottom: 21px;">
     <div class="tb-form-panel-title" translate>mobile.version-information</div>
-    <section fxLayout="column">
-      <section fxLayout="row" fxLayoutAlign="start start">
-        <mat-form-field fxFlex appearance="outline">
+    <section class="flex flex-col">
+      <section class="flex flex-row">
+        <mat-form-field class="flex-1" appearance="outline">
           <mat-label translate>mobile.min-version</mat-label>
           <input matInput formControlName="minVersion">
         </mat-form-field>
@@ -98,8 +98,8 @@
           <tb-icon>mdi:text-box-edit</tb-icon>
         </button>
       </section>
-      <section fxLayout="row" fxLayoutAlign="start start">
-        <mat-form-field fxFlex appearance="outline">
+      <section class="flex flex-row">
+        <mat-form-field class="flex-1" appearance="outline">
           <mat-label translate>mobile.latest-version</mat-label>
           <input matInput formControlName="latestVersion">
         </mat-form-field>
@@ -117,7 +117,7 @@
   </section>
   <section class="tb-form-panel stroked no-padding-bottom" formGroupName="storeInfo">
     <div class="tb-form-panel-title" translate>mobile.store-information</div>
-    <section fxLayout="column">
+    <section class="flex flex-col">
       <mat-form-field appearance="outline">
         <mat-label>{{
             (entityForm.get('platformType').value === PlatformType.ANDROID ? 'mobile.google-play-link' : 'mobile.app-store-link') | translate

ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/add-mobile-page-dialog.component.html

@@ -15,20 +15,19 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar color="primary" class="justify-between">
   <h2 translate>mobile.add-specific-page</h2>
-  <span fxFlex></span>
   <button mat-icon-button
           (click)="cancel()"
           type="button">
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<div mat-dialog-content fxLayout="column">
+<div mat-dialog-content>
   <tb-mobile-page-item [formControl]="customMobilePage">
   </tb-mobile-page-item>
 </div>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="justify-end">
   <button mat-button color="primary"
           type="button"
           [disabled]="(isLoading$ | async)"

ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/custom-mobile-page.component.html

@@ -21,13 +21,13 @@
       {{ 'mobile.visible' | translate }}
     </mat-slide-toggle>
   </div>
-  <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="center center">
+  <div class="flex items-center justify-center gap-2">
     <tb-material-icon-select asBoxInput
                              required
                              color="#305680"
                              formControlName="icon">
     </tb-material-icon-select>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-label translate>mobile.page-name</mat-label>
       <input required matInput formControlName="label">
     </mat-form-field>
@@ -41,7 +41,7 @@
     </mat-select>
   </mat-form-field>
   <ng-container *ngIf="customMobilePageForm.get('type').value === MobilePageType.DASHBOARD">
-    <tb-dashboard-autocomplete fxFlex
+    <tb-dashboard-autocomplete class="flex-1"
                                formControlName="dashboardId"
                                required
                                label="{{ 'dashboard.dashboard' | translate }}"
@@ -54,13 +54,13 @@
     ></tb-dashboard-autocomplete>
   </ng-container>
   <ng-container *ngIf="customMobilePageForm.get('type').value === MobilePageType.WEB_VIEW">
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-label translate>mobile.url</mat-label>
       <input required matInput formControlName="url">
     </mat-form-field>
   </ng-container>
   <ng-container *ngIf="customMobilePageForm.get('type').value === MobilePageType.CUSTOM">
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-label translate>mobile.path</mat-label>
       <input required matInput formControlName="path">
     </mat-form-field>

ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/default-mobile-page-panel.component.html

@@ -35,12 +35,12 @@
         {{ 'mobile.visible' | translate }}
       </mat-slide-toggle>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="center center">
+    <div class="flex items-center justify-center gap-2">
       <tb-material-icon-select asBoxInput
                                color="#305680"
                                formControlName="icon">
       </tb-material-icon-select>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" floatLabel="always">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic" floatLabel="always">
         <mat-label translate>mobile.page-name</mat-label>
         <input matInput formControlName="label" placeholder="{{ defaultItemName }}">
       </mat-form-field>

ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-layout.component.html

@@ -16,21 +16,19 @@
 
 -->
 <div class="mobile-layout-container">
-  <div class="header">
+  <div class="header flex items-center gap-2">
     <div class="title-section">
       <span tbTruncateWithTooltip class="title-container" translate>mobile.pages</span>
     </div>
-    <span fxFlex></span>
-    <button *ngIf="!readonly" class="tb-mobile-layout-button"
-            fxHide.lt-lg
+    <span class="flex-1"></span>
+    <button *ngIf="!readonly" class="tb-mobile-layout-button lt-lg:!hidden"
             mat-stroked-button
             color="primary"
             (click)="hideAll()">
       <tb-icon matButtonIcon>visibility_off</tb-icon>
       <div tbTruncateWithTooltip>{{ 'mobile.hide-all-pages' | translate }}</div>
     </button>
-    <button *ngIf="!readonly" class="tb-mobile-layout-button"
-            fxHide.lt-lg
+    <button *ngIf="!readonly" class="tb-mobile-layout-button lt-lg:!hidden"
             mat-stroked-button
             color="primary"
             (click)="resetToDefault()">
@@ -38,20 +36,18 @@
       <div tbTruncateWithTooltip>{{ 'mobile.reset-to-default-pages' | translate }}</div>
     </button>
     <button *ngIf="!readonly"
-            fxHide.gt-md
             type="button"
             mat-stroked-button
-            class="tb-box-button"
+            class="tb-box-button gt-md:!hidden"
             matTooltip="{{ 'mobile.hide-all-pages' | translate }}"
             matTooltipPosition="above"
             (click)="hideAll()">
       <tb-icon color="primary" matButtonIcon>visibility_off</tb-icon>
     </button>
     <button *ngIf="!readonly"
-            fxHide.gt-md
             type="button"
             mat-stroked-button
-            class="tb-box-button"
+            class="tb-box-button gt-md:!hidden"
             matTooltip="{{ 'mobile.reset-to-default-pages' | translate }}"
             matTooltipPosition="above"
             (click)="resetToDefault()">

ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-layout.component.scss

@@ -23,12 +23,6 @@
     flex-direction: column;
 
     .header {
-      z-index: 1;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 8px;
-
       .title-section {
         display: flex;
         flex-direction: row;

ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-page-item-row.component.html

@@ -31,8 +31,8 @@
           <div tbTruncateWithTooltip> {{ itemName }} </div>
         </div>
       </div>
-      <div fxHide.xs class="tb-mobile-page-item-input-block">
-        <mat-form-field class="flex tb-suffix-absolute" appearance="outline" subscriptSizing="dynamic">
+      <div class="tb-mobile-page-item-input-block xs:!hidden">
+        <mat-form-field class="tb-suffix-absolute flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput [required]="isCustomMenuItem" formControlName="label" placeholder="{{ itemNamePlaceholder }}">
           <mat-icon matSuffix
                     matTooltipPosition="above"
@@ -44,7 +44,7 @@
           </mat-icon>
         </mat-form-field>
         <mat-form-field *ngIf="isCustomMenuItem"
-                        class="flex tb-mobile-page-item-info" appearance="outline" subscriptSizing="dynamic">
+                        class="tb-mobile-page-item-info flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput readonly [placeholder]="itemInfo">
         </mat-form-field>
       </div>

ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html

@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2>{{ dialogTitle | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div tb-help="ruleNotifications"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -28,7 +28,7 @@
 <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
 </mat-progress-bar>
 <div *ngIf="!(isLoading$ | async)"></div>
-<div mat-dialog-content ngStyle.xs="padding: 0;">
+<div mat-dialog-content class="xs:!p-0">
   <mat-horizontal-stepper [linear]="true" labelPosition="end" #addMobileBundle [orientation]="(stepperOrientation | async)"
                           (selectionChange)="changeStep($event)">
     <ng-template matStepperIcon="edit">
@@ -99,10 +99,10 @@
     </mat-step>
   </mat-horizontal-stepper>
 </div>
-<div mat-dialog-actions fxLayout="row">
+<div mat-dialog-actions>
   <button mat-stroked-button *ngIf="selectedIndex > 0"
           (click)="backStep()">{{ 'action.back' | translate }}</button>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-raised-button
           color="primary"
           (click)="nextStep()">{{ nextStepLabel() | translate }}</button>

ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-header.component.html

@@ -15,14 +15,12 @@
     limitations under the License.
 
 -->
-<div fxFlex="100" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutAlign.xs="start center">
-  <section fxHide fxShow.gt-xs class="tb-entity-title-container">
+<div class="flex flex-full items-center justify-between">
+  <section class="flex items-center xs:!hidden">
     <div tbTruncateWithTooltip translate>mobile.bundles</div>
     <div tb-help="oauth2Settings"></div>
   </section>
   <button mat-stroked-button color="primary" (click)="createBundle($event)">
-    <div fxLayout="row" fxLayoutAlign="start center">
-      <mat-icon>add</mat-icon>{{ 'mobile.add-bundle' | translate }}
-    </div>
+    <mat-icon>add</mat-icon>{{ 'mobile.add-bundle' | translate }}
   </button>
 </div>

ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-header.component.scss

@@ -15,9 +15,4 @@
  */
 :host{
   width: 100000px;
-
-  .tb-entity-title-container {
-    display: flex;
-    align-items: center;
-  }
 }

ui-ngx/src/app/modules/home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.component.html

@@ -37,7 +37,7 @@
         <div class="tb-form-row column-xs" *ngIf="!mobileAppSettingsForm.get('useDefaultApp').value">
           <div class="fixed-title-width-230">{{ 'mobile.bundle' | translate }}</div>
           <tb-entity-autocomplete
-            fxFlex
+            class="flex-1"
             useFullEntityId
             appearance="outline"
             subscriptSizing="dynamic"