From 90493c0056c6af10bc838a1ba064246c66e87c72 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@hyland.com>
Date: Fri, 16 Dec 2022 12:24:44 +0000
Subject: [PATCH] [ACS-3751] New About Theme (#2784)

* about theme placeholder

* added adf about styling overrides in ACA

* added about styling overrides

* moved adf-about style override file along with other overrides

Co-authored-by: SheenaMalhotra182 <sheena.malhotra@globallogic.com>
---
 .../app/content-plugin/ui/custom-theme.scss   |  2 +
 .../ui/dynamic-theme/custom-theme.scss.tpl    |  2 +
 .../ui/overrides/adf-about.theme.scss         | 39 +++++++++++++++++++
 .../ui/variables/variables.scss               |  3 ++
 4 files changed, 46 insertions(+)
 create mode 100644 app/src/app/content-plugin/ui/overrides/adf-about.theme.scss

diff --git a/app/src/app/content-plugin/ui/custom-theme.scss b/app/src/app/content-plugin/ui/custom-theme.scss
index 287cee3d4..795db4d72 100644
--- a/app/src/app/content-plugin/ui/custom-theme.scss
+++ b/app/src/app/content-plugin/ui/custom-theme.scss
@@ -2,6 +2,7 @@
 @import './overrides/adf-style-fixes.theme';
 @import './overrides/adf-pagination.theme';
 @import './overrides/ay11';
+@import './overrides/adf-about.theme.scss';
 @import './colors';
 
 $mat-primary-palette: mat.define-palette($aca-primary-blue, A100);
@@ -23,4 +24,5 @@ $custom-theme: mat.define-light-theme($mat-primary-palette,
   @include adf-style-fixes($theme);
   @include adf-pagination-theme($theme);
   @include ay11-theme();
+  @include adf-about-theme($theme);
 }
diff --git a/app/src/app/content-plugin/ui/dynamic-theme/custom-theme.scss.tpl b/app/src/app/content-plugin/ui/dynamic-theme/custom-theme.scss.tpl
index 223e061ef..caab9aa04 100644
--- a/app/src/app/content-plugin/ui/dynamic-theme/custom-theme.scss.tpl
+++ b/app/src/app/content-plugin/ui/dynamic-theme/custom-theme.scss.tpl
@@ -1,6 +1,7 @@
 @import '@angular/material/theming';
 @import './overrides/adf-style-fixes.theme';
 @import './overrides/adf-pagination.theme';
+@import './overrides/adf-about.theme.scss';
 @import "./dynamic-theme/theme-configuration";
 @import "./dynamic-theme/typography";
 @import "./dynamic-theme/custom-theme-palettes";
@@ -55,4 +56,5 @@ $custom-theme: mat-light-theme(
 
   @include adf-style-fixes($theme);
   @include adf-pagination-theme($theme);
+  @include adf-about-theme($theme);
 }
diff --git a/app/src/app/content-plugin/ui/overrides/adf-about.theme.scss b/app/src/app/content-plugin/ui/overrides/adf-about.theme.scss
new file mode 100644
index 000000000..0970d2c41
--- /dev/null
+++ b/app/src/app/content-plugin/ui/overrides/adf-about.theme.scss
@@ -0,0 +1,39 @@
+@mixin adf-about-theme($theme) {
+  adf-about {
+    /* custom ADF About Component Theme */
+
+    background-color: var(--theme-about-panel-background-color);
+    overflow: auto;
+
+    mat-accordion {
+      box-shadow: none !important;
+      border: none !important;
+    }
+
+    mat-expansion-panel {
+      box-shadow: none !important;
+      border-radius: 12px !important;
+      margin: 24px !important;
+      width: 95%;
+      border: 1px solid var(--theme-about-panel-border-color);
+      background-color: var(--theme-about-panel-background-color);
+      border-radius: 12px;
+    }
+
+    mat-expansion-panel-header {
+      display: flex;
+      height: 80px !important;
+      padding: 24px 24px;
+      line-height: 32px;
+    }
+
+    mat-panel-title {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 24px;
+      color: var(--theme-about-panel-title-color);
+    }
+
+  }
+}
\ No newline at end of file
diff --git a/app/src/app/content-plugin/ui/variables/variables.scss b/app/src/app/content-plugin/ui/variables/variables.scss
index 72da2f6a4..51def246b 100644
--- a/app/src/app/content-plugin/ui/variables/variables.scss
+++ b/app/src/app/content-plugin/ui/variables/variables.scss
@@ -70,6 +70,9 @@ $defaults: (
   --theme-dropdown-color: $grey-dropdown-background,
   --theme-grey-divider-color: $grey-divider,
   --theme-pagination-background-color: $pagination-background-color,
+  --theme-about-panel-border-color: $grey-background,
+  --theme-about-panel-background-color: #ffffff,
+  --theme-about-panel-title-color: #212121,
 );
 
 // propagates SCSS variables into the CSS variables scope