From 64f9d0414d88e215c7f886308dd2ff9103a3bb83 Mon Sep 17 00:00:00 2001
From: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Date: Wed, 14 Jun 2023 08:15:49 +0200
Subject: [PATCH] [AAE-15236] Making about component panel styles configurable
 (#8660)

* Rebasing

* AAE-15236: Fixing syntax
---
 lib/core/src/lib/about/about.component.html        |  6 +++---
 lib/core/src/lib/about/about.component.scss        |  9 +++++++++
 lib/core/src/lib/about/about.component.ts          |  1 +
 lib/core/src/lib/styles/_components-variables.scss | 14 ++++++++------
 lib/core/src/lib/styles/_reference-variables.scss  | 12 +++++-------
 5 files changed, 26 insertions(+), 16 deletions(-)
 create mode 100644 lib/core/src/lib/about/about.component.scss

diff --git a/lib/core/src/lib/about/about.component.html b/lib/core/src/lib/about/about.component.html
index 77a94726b4..0b1b553532 100644
--- a/lib/core/src/lib/about/about.component.html
+++ b/lib/core/src/lib/about/about.component.html
@@ -1,8 +1,8 @@
-<mat-accordion [togglePosition]="'before'">
+<mat-accordion [togglePosition]="'before'" class="adf-about-panel">
     <ng-container *ngFor="let panel of panels">
         <mat-expansion-panel>
-            <mat-expansion-panel-header>
-                <mat-panel-title>{{panel.label}}</mat-panel-title>
+            <mat-expansion-panel-header class="adf-about-panel-header">
+                <mat-panel-title class="adf-about-panel-header__title">{{panel.label}}</mat-panel-title>
             </mat-expansion-panel-header>
             <ng-container *ngTemplateOutlet="panel.layoutTemplate"></ng-container>
         </mat-expansion-panel>
diff --git a/lib/core/src/lib/about/about.component.scss b/lib/core/src/lib/about/about.component.scss
new file mode 100644
index 0000000000..6ca79cee1a
--- /dev/null
+++ b/lib/core/src/lib/about/about.component.scss
@@ -0,0 +1,9 @@
+.adf-about-panel {
+    &-header {
+        height: var(--adf-about-panel-header-height);
+
+        &__title {
+            color: var(--adf-about-panel-header-title-color);
+        }
+    }
+}
\ No newline at end of file
diff --git a/lib/core/src/lib/about/about.component.ts b/lib/core/src/lib/about/about.component.ts
index 5e02eaa525..b9a1235f78 100644
--- a/lib/core/src/lib/about/about.component.ts
+++ b/lib/core/src/lib/about/about.component.ts
@@ -21,6 +21,7 @@ import { AboutPanelDirective } from './about-panel.directive';
 @Component({
     selector: 'adf-about',
     templateUrl: './about.component.html',
+    styleUrls: ['about.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class AboutComponent {
diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss
index d857f7445b..9fc7ec8b70 100644
--- a/lib/core/src/lib/styles/_components-variables.scss
+++ b/lib/core/src/lib/styles/_components-variables.scss
@@ -2,15 +2,17 @@
 
 @mixin adf-components-variables() {
     $defaults: (
-        --adf-edit-task-and-service-filter-header-title-color: $adf-ref-edit-task-and-service-filter-header-title-color,
-        --adf-edit-task-and-service-filter-header-description-color: $adf-ref-edit-task-and-service-filter-header-description-color,
-        --adf-edit-task-and-service-filter-content-text-label-color: $adf-ref-edit-task-and-service-filter-content-text-label-color,
-        --adf-edit-task-and-service-filter-content-select-label-color: $adf-ref-edit-task-and-service-filter-content-select-label-color,
-        --adf-edit-task-and-service-filter-header-height: $adf-ref-edit-task-and-service-filter-header-height,
         --adf-card-view-background: $adf-ref-card-background,
         --adf-card-view-border: $adf-ref-card-border,
         --adf-card-view-border-color: $adf-ref-card-border-color,
-        --adf-card-view-border-radius: $adf-ref-card-border-radius
+        --adf-card-view-border-radius: $adf-ref-card-border-radius,
+        --adf-edit-task-and-service-filter-header-title-color: $adf-ref-title-color,
+        --adf-edit-task-and-service-filter-header-description-color: $adf-ref-description-color,
+        --adf-edit-task-and-service-filter-content-text-label-color: $adf-ref-text-field-label-color,
+        --adf-edit-task-and-service-filter-content-select-label-color: $adf-ref-select-field-label-color,
+        --adf-edit-task-and-service-filter-header-height: $adf-ref-height-48,
+        --adf-about-panel-header-height: $adf-ref-height-48,
+        --adf-about-panel-header-title-color: $adf-ref-title-color,
     );
 
     // propagates SCSS variables into the CSS variables scope
diff --git a/lib/core/src/lib/styles/_reference-variables.scss b/lib/core/src/lib/styles/_reference-variables.scss
index 155175cd13..db65bb969a 100644
--- a/lib/core/src/lib/styles/_reference-variables.scss
+++ b/lib/core/src/lib/styles/_reference-variables.scss
@@ -1,11 +1,9 @@
-$adf-ref-edit-task-and-service-filter-header-title-color: rgba(0, 0, 0, 0.87);
-$adf-ref-edit-task-and-service-filter-header-description-color: rgba(0, 0, 0, 0.54);
-$adf-ref-edit-task-and-service-filter-header-height: 48px;
-$adf-ref-edit-task-and-service-filter-content-text-label-color: rgba(0, 0, 0, 0.54);
-$adf-ref-edit-task-and-service-filter-content-text-input-color: rgba(0, 0, 0, 0.87);
-$adf-ref-edit-task-and-service-filter-content-select-label-color: rgba(0, 0, 0, 0.54);
-$adf-ref-edit-task-and-service-filter-content-select-input-color: rgba(0, 0, 0, 0.87);
 $adf-ref-card-background: white;
 $adf-ref-card-border: unset;
 $adf-ref-card-border-color: unset;
 $adf-ref-card-border-radius: 0;
+$adf-ref-height-48: 48px;
+$adf-ref-title-color: rgba(0, 0, 0, 0.87);
+$adf-ref-description-color: rgba(0, 0, 0, 0.54);
+$adf-ref-text-field-label-color: rgba(0, 0, 0, 0.54);
+$adf-ref-select-field-label-color: rgba(0, 0, 0, 0.54);