[ACS-7452] - Small screen notification banner [ACS-7418] About page (#3760)

* [ACS-7452] - Small screen notification banner

* [ACS-7452] - Small screen notification banner [ACS-7418] About page

projects/aca-content/src/lib/ui/overrides/adf-about.theme.scss

@@ -3,6 +3,12 @@
   adf-about {
     /* custom ADF About Component Theme */
 
+    .mdc-data-table__header-cell {
+      color: var(--adf-theme-foreground-text-color-054);
+      font-size: 12px;
+      font-weight: 500;
+    }
+
     background-color: var(--theme-about-panel-background-color);
     overflow: auto;
 

projects/aca-content/src/lib/ui/theme.scss

@@ -18,6 +18,14 @@ mat-icon {
   color: var(--theme-secondary-text);
 }
 
+.mat-mdc-button > .mat-icon {
+  padding: 0;
+}
+
+.mdc-button:active {
+  outline: none;
+}
+
 mat-slide-toggle {
   .mdc-switch__icons {
     display: none;
@@ -31,10 +39,6 @@ mat-slide-toggle {
   }
 }
 
-.adf-name-location-cell-location.adf-datatable-cell-value {
-  color: var(--theme-secondary-text);
-}
-
 .mdc-text-field--filled:not(.mdc-text-field--disabled) {
   background-color: transparent;
   padding: 0;

projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.html

@@ -1,12 +1,15 @@
+<div class="aca-open-in-app">
   <div class="aca-mobile-application-container">
     <span>{{ 'APP.DIALOGS.MOBILE_APP.OPEN_ALFRESCO_MOBILE_APP' | translate }}</span>
-  <button mat-button class="aca-cross-button" (click)="onCloseDialog()">
-    <mat-icon class="aca-cross-button-icon">close</mat-icon>
+    <button mat-icon-button mat-dialog-close class="aca-cross-button">
+      <mat-icon (click)="onCloseDialog()" class="aca-cross-button-icon">close</mat-icon>
     </button>
   </div>
 
-<div class="aca-open-in-app-container">
-  <button mat-button (click)="openInApp()" data-automation-id="open-in-app-button" class="aca-open-in-app-container-button" cdkFocusInitial>
+  <div class="aca-open-in-app-button-container">
+    <button mat-button (click)="openInApp()"
+            data-automation-id="open-in-app-button"
+            class="aca-open-in-app-button-container" cdkFocusInitial>
       <span>{{ 'APP.DIALOGS.MOBILE_APP.MOBILE_APP_BUTTON_LABEL' | translate }}</span>
     </button>
   </div>
@@ -16,3 +19,4 @@
       <span>{{ 'APP.DIALOGS.MOBILE_APP.DOWNLOAD_APP_BUTTON_LABEL' | translate }}</span>
     </button>
   </div>
+</div>

projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.scss

@@ -1,31 +1,28 @@
 aca-open-in-app {
-  .aca-open-in-app-container {
+  .aca-open-in-app {
+    .aca-open-in-app-button-container {
       display: flex;
       place-content: center;
       padding: 0;
       border-radius: 8px;
       background-color: var(--theme-primary-color);
-    color: var(--theme-about-panel-background-color);
-    margin-top: 12px;
-
-    &-button {
+      height: 48px;
       overflow-x: hidden;
       font-size: 16px;
-      width: 100%;
-      padding: 0;
-      height: 48px;
+      color: white;
+      font-weight: 600;
 
       &:focus-visible {
         outline: none;
         border-radius: unset;
       }
     }
-  }
 
     .aca-download-app-container {
       display: flex;
       place-content: center;
       margin-top: 12px;
+      margin-bottom: 16px;
 
       &-button {
         background: var(--theme-dialog-background-color);
@@ -41,6 +38,7 @@ aca-open-in-app {
       align-items: center;
       font-size: 14px;
       padding: 6px 0;
+      margin-bottom: 12px;
     }
 
     .aca-cross-button {
@@ -53,8 +51,8 @@ aca-open-in-app {
 
       &-icon {
         font-weight: bold;
-      font-size: 21px;
-      height: 21px;
+        font-size: 20px;
+      }
     }
   }
 }

projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.ts

@@ -23,7 +23,7 @@
  */
 
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatButtonModule } from '@angular/material/button';
@@ -36,7 +36,7 @@ export interface OpenInAppDialogOptions {
 }
 @Component({
   standalone: true,
-  imports: [CommonModule, TranslateModule, MatButtonModule, MatIconModule, A11yModule],
+  imports: [CommonModule, TranslateModule, MatButtonModule, MatIconModule, A11yModule, MatDialogModule],
   selector: 'aca-open-in-app',
   templateUrl: './open-in-app.component.html',
   styleUrls: ['./open-in-app.component.scss'],