[ACS-8026] Fixed task form rendering (#9742)

* [ACS-8026] Fixed Task form rendering

* [ACS-8026] Fixed task form rendering

lib/core/src/lib/form/components/form-renderer.component.html

@@ -3,7 +3,7 @@
     <div *ngIf="formDefinition.hasTabs()">
         <div *ngIf="hasTabs()" class="alfresco-tabs-widget">
             <mat-tab-group>
-                <mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate">
+                <mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate | uppercase">
                     <ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }"></ng-template>
                 </mat-tab>
             </mat-tab-group>

lib/core/src/lib/form/components/form-renderer.component.scss

@@ -88,7 +88,7 @@
         top: 1.8em;
     }
 
-    #{$mat-form-field} {
+    #{$mat-focused} {
         width: 100%;
 
         #{$mat-text-field-focused} {
@@ -98,7 +98,6 @@
         }
 
         label {
-            transform: scaleX(1);
             transition: transform 150ms linear;
             background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
         }
@@ -113,7 +112,8 @@
         width: 80%;
     }
 
-    adf-form-field {
+    adf-form-field,
+    mat-form-field {
         width: 100%;
     }
 }
@@ -146,7 +146,9 @@
         }
 
         & #{$mat-tab-ink-bar} {
-            height: 4px;
+            #{$mat-tab-indicator-underline} {
+                border-top-width: 4px;
+            }
         }
 
         & #{$mat-form-field-wrapper} {
@@ -217,6 +219,10 @@
         & #{$mat-button} {
             height: 36px;
             border-radius: 5px;
+            width: auto;
+            padding: 0 16px;
+            margin: 0 8px;
+            white-space: nowrap;
         }
 
         & #{$mat-button-label} {

lib/core/src/lib/form/components/widgets/error/error.component.html

@@ -1,4 +1,4 @@
-<div class="adf-error-container">
+<div class="adf-error-container adf-error-widget-container">
     <div *ngIf="error?.isActive()" [@transitionMessages]="subscriptAnimationState" class="adf-error">
         <mat-icon class="adf-error-icon">error_outline</mat-icon>
         <div class="adf-error-text">{{ error.message | translate:translateParameters }}</div>

lib/core/src/lib/form/components/widgets/error/error.component.scss

@@ -1,3 +1,8 @@
 .adf-error {
     display: flex;
+
+    &-widget-container {
+        height: auto;
+        padding: 5px 0;
+    }
 }

lib/core/src/lib/styles/_mat-selectors.scss

@@ -129,6 +129,8 @@ $cdk-overlay-pane: '.cdk-overlay-pane';
 $mat-snackbar: '.mdc-snackbar';
 $mat-snack-bar-container: '.mat-mdc-snack-bar-container';
 $mat-snackbar-label: '.mdc-snackbar__label';
+$mat-datetimepicker-dialog: '.mat-datetimepicker-dialog';
+$mat-tab-indicator-underline: '.mdc-tab-indicator__content--underline';
 $mat-autocomplete-panel: '.mat-mdc-autocomplete-panel';
 $mat-menu-surface: '.mdc-menu-surface';
 $mat-text-field-filled: '.mdc-text-field--filled';

lib/core/src/lib/styles/material.theme.scss

@@ -74,4 +74,12 @@
             color: var(--theme-primary-color);
         }
     }
+
+    #{$mat-datetimepicker-dialog} {
+        #{$mat-dialog-container} {
+            #{$mat-dialog-surface} {
+                padding: 0;
+            }
+        }
+    }
 }