From 31403aad51b90b83a4ae6548c57a4f95902efe48 Mon Sep 17 00:00:00 2001 From: jacekpluta <73617938+jacekpluta@users.noreply.github.com> Date: Fri, 5 Apr 2024 13:17:52 +0200 Subject: [PATCH] [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 --- .../src/lib/ui/overrides/adf-about.theme.scss | 6 ++ projects/aca-content/src/lib/ui/theme.scss | 12 ++- .../open-in-app/open-in-app.component.html | 34 ++++---- .../open-in-app/open-in-app.component.scss | 80 +++++++++---------- .../open-in-app/open-in-app.component.ts | 4 +- 5 files changed, 74 insertions(+), 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 index 6aadd8a85a..b00fa652b1 100644 --- 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 index 5569b7dd73..fcdc28a0ea 100644 --- 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 index 81d2d56329..ec6a2d2d2a 100644 --- 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 @@ -
- {{ 'APP.DIALOGS.MOBILE_APP.OPEN_ALFRESCO_MOBILE_APP' | translate }} - -
+
+
+ {{ 'APP.DIALOGS.MOBILE_APP.OPEN_ALFRESCO_MOBILE_APP' | translate }} + +
-
- -
+
+ +
-
- +
+ +
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 index 6943d0a893..469a786424 100644 --- 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 index 15aba1cf3c..ef0ab59d72 100644 --- 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'],