[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
Alfresco · Jun 6, 2024 · 31403aa · 31403aa
1 parent 716ab70
commit 31403aa
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 62 deletions.
diff --git a/projects/aca-content/src/lib/ui/overrides/adf-about.theme.scss b/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;
 

diff --git a/projects/aca-content/src/lib/ui/theme.scss b/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;

diff --git a/projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.html b/projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.html
@@ -1,18 +1,22 @@
-<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>
-</div>
+<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-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>
-    <span>{{ 'APP.DIALOGS.MOBILE_APP.MOBILE_APP_BUTTON_LABEL' | translate }}</span>
-  </button>
-</div>
+  <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>
 
-<div class="aca-download-app-container" *ngIf="appStoreUrl">
-  <button mat-button data-automation-id="download-app-button" class="aca-download-app-container-button" (click)="downloadIosApp()">
-    <span>{{ 'APP.DIALOGS.MOBILE_APP.DOWNLOAD_APP_BUTTON_LABEL' | translate }}</span>
-  </button>
+  <div class="aca-download-app-container" *ngIf="appStoreUrl">
+    <button mat-button data-automation-id="download-app-button" class="aca-download-app-container-button" (click)="downloadIosApp()">
+      <span>{{ 'APP.DIALOGS.MOBILE_APP.DOWNLOAD_APP_BUTTON_LABEL' | translate }}</span>
+    </button>
+  </div>
 </div>
diff --git a/projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.scss b/projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.scss
@@ -1,60 +1,58 @@
 aca-open-in-app {
-  .aca-open-in-app-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 {
-      overflow-x: hidden;
-      font-size: 16px;
-      width: 100%;
+  .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);
       height: 48px;
+      overflow-x: hidden;
+      font-size: 16px;
+      color: white;
+      font-weight: 600;
 
       &:focus-visible {
         outline: none;
         border-radius: unset;
       }
     }
-  }
 
-  .aca-download-app-container {
-    display: flex;
-    place-content: center;
-    margin-top: 12px;
+    .aca-download-app-container {
+      display: flex;
+      place-content: center;
+      margin-top: 12px;
+      margin-bottom: 16px;
 
-    &-button {
-      background: var(--theme-dialog-background-color);
-      color: var(--theme-primary-color);
-      font-size: 14px;
+      &-button {
+        background: var(--theme-dialog-background-color);
+        color: var(--theme-primary-color);
+        font-size: 14px;
+      }
     }
-  }
 
-  .aca-mobile-application-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 14px;
-    padding: 6px 0;
-  }
+    .aca-mobile-application-container {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 14px;
+      padding: 6px 0;
+      margin-bottom: 12px;
+    }
 
-  .aca-cross-button {
-    padding-right: 0;
+    .aca-cross-button {
+      padding-right: 0;
 
-    &:focus-visible {
-      outline: none;
-      border-radius: unset;
-    }
+      &:focus-visible {
+        outline: none;
+        border-radius: unset;
+      }
 
-    &-icon {
-      font-weight: bold;
-      font-size: 21px;
-      height: 21px;
+      &-icon {
+        font-weight: bold;
+        font-size: 20px;
+      }
     }
   }
 }
diff --git a/projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.ts b/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'],