added About Design Changes

lib/core/src/lib/about/about-extension-list/about-extension-list.component.html

@@ -1,11 +1,44 @@
-<mat-table [dataSource]="data">
-  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
-    <mat-header-cell *matHeaderCellDef>
-      {{ column.header | translate }}
-    </mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
-  </ng-container>
+<div class="app-extension-list-container">
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <div class="app-extension-list-row">
+
+        <div class="app-extension-list-heading">
+            <div class="app-extension-list-div">
+                <mat-icon class="app-extension-list-icon" (click)="togglesDropdown()">
+                    {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
+                <span class="app-extension-list-title">{{ 'ABOUT.PLUGINS.TITLE' | translate }}
+                </span>
+            </div>
+
+        </div>
+
+
+        <mat-divider class="app-extension-list-divider" *ngIf="serverSettingsDropdown"></mat-divider>
+
+
+        <div *ngIf="serverSettingsDropdown">
+            <div class="app-extension-list-dropdown">
+
+                <div class="app-extension-list-dropdown-details">
+                    <mat-table [dataSource]="data">
+                        <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+                            <mat-header-cell *matHeaderCellDef>
+                                {{ column.header | translate }}
+                            </mat-header-cell>
+                            <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
+                        </ng-container>
+
+                        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+                        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+                    </mat-table>
+                </div>
+
+
+
+            </div>
+        </div>
+
+
+    </div>
+
+</div>

lib/core/src/lib/about/about-extension-list/about-extension-list.component.ts

@@ -15,31 +15,46 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
-import { ExtensionRef } from '@alfresco/adf-extensions';
+import {
+    Component,
+    ChangeDetectionStrategy,
+    Input,
+} from "@angular/core";
+import { ExtensionRef } from "@alfresco/adf-extensions";
 
 @Component({
-  selector: 'adf-about-extension-list',
-  templateUrl: './about-extension-list.component.html',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
+    selector: 'adf-about-extension-list',
+    templateUrl: './about-extension-list.component.htm',
+    styleUrls: ['./about-extention-list.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AboutExtensionListComponent {
-  columns = [
-    {
-      columnDef: 'name',
-      header: 'ABOUT.PLUGINS.NAME',
-      cell: (row: ExtensionRef) => `${row.$name}`
-    },
-    {
-      columnDef: 'version',
-      header: 'ABOUT.PLUGINS.VERSION',
-      cell: (row: ExtensionRef) => `${row.$version}`
+    columns = [
+        {
+            columnDef: "name",
+            header: "ABOUT.PLUGINS.NAME",
+            cell: (row: ExtensionRef) => `${row.$name}`,
+        },
+        {
+            columnDef: "version",
+            header: "ABOUT.PLUGINS.VERSION",
+            cell: (row: ExtensionRef) => `${row.$version}`,
+        },
+    ];
+
+    displayedColumns = this.columns.map((x) => x.columnDef);
+
+    @Input()
+    data: Array<ExtensionRef> = [];
+
+    dropdownExpandedStatus = false;
+    dropdownToggle = true;
+
+    toggleDropdown() {
+        this.dropdownExpandedStatus = !this.dropdownExpandedStatus;
+
+        if (!this.dropdownExpandedStatus) {
+            this.dropdownToggle = true;
+        }
     }
-  ];
-
-  displayedColumns = this.columns.map((x) => x.columnDef);
-
-  @Input()
-  data: Array<ExtensionRef> = [];
 }

lib/core/src/lib/about/about-github-link/about-github-link.component.html

@@ -1,14 +1,39 @@
-<div class="adf-github-link-container">
-    <header data-automation-id="adf-github-source-code-title">{{ 'ABOUT.SOURCE_CODE.TITLE' | translate }}</header>
-    <mat-card class="mat-elevation-z0">
-        <h3 data-automation-id="adf-github-app-title">{{application}}</h3>
-        <p *ngIf="version" data-automation-id="adf-github-version">{{ 'ABOUT.VERSION' | translate }}: {{ version }}</p>
+<div class="app-github-link-container">
+
+    <div class="app-github-link-row">
+
+        <div class="app-github-link-heading">
+            <div class="app-github-link-div">
+                <mat-icon class="app-github-link-icon" (click)="togglesDropdown()">
+                    {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
+                <span class="app-github-link-title">{{ 'ABOUT.SOURCE_CODE.TITLE' | translate }}</span>
+            </div>
+
+        </div>
+
+
+        <mat-divider class="app-github-link-divider" *ngIf="serverSettingsDropdown"></mat-divider>
+
+
+        <div *ngIf="serverSettingsDropdown">
+            <div class="app-github-link-dropdown">
+
+                <div class="app-github-link-dropdown-details">
+                    <div class="app-github-link-dropdown-heading">{{ 'ABOUT.VERSION' | translate }}: {{version}} </div>
+                </div>
+
+                <mat-divider class="app-mat-divider"></mat-divider>
+
+                <div class="app-github-link-dropdown-details">
+                    <div class="app-github-link-dropdown-heading">{{ 'ABOUT.SOURCE_CODE.DESCRIPTION' | translate }}
+                    </div>
+                    <div class="app-github-link-dropdown-details">{{url}}</div>
+                </div>
 
-        <div *ngIf="url">
-            <small>{{ 'ABOUT.SOURCE_CODE.DESCRIPTION' | translate }}</small>
-            <div data-automation-id="adf-github-url">
-                <a [href]="url" target="_blank">{{url}}</a>
             </div>
         </div>
-    </mat-card>
+
+
+    </div>
+
 </div>

lib/core/src/lib/about/about-github-link/about-github-link.component.scss

@@ -1,3 +1,78 @@
-.adf-github-link-container {
-    padding: 10px;
+.app-github-link-container {
+    margin: 0px 0px -24px 0px;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+}
+
+.app-github-link-row {
+    margin: 24px 24px 24px 24px;
+    width: 95%;
+    border: 1px solid rgba(33, 33, 33, 0.12);
+    border-radius: 12px;
+}
+
+.app-github-link-heading {
+    display: flex;
+    padding-left: 1rem;
+
+}
+
+.app-github-link-div {
+    display: flex;
+    width: 60%;
+    cursor: pointer;
+    height: 32px;
+    padding: 24px 0px;
+}
+
+.app-github-link-icon {
+    padding-top: 4px;
+    cursor: pointer;
+    color: var(--theme-grey-color);
+}
+
+.app-github-link-title {
+    margin-left: 0.6rem;
+    margin-top: 4px;
+    letter-spacing: .15px;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 24px;
+}
+
+.app-github-link-divider {
+    color: rgba(33, 33, 33, 0.12);
+    padding-left: -1px;
+    padding-right: 1px;
+}
+
+.app-github-link-dropdown {
+    padding: 0rem 1rem;
+}
+
+.app-github-link-dropdown-heading {
+    display: flex;
+    color: var(--theme-heading-color);
+    width: 100%;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 48px;
+    letter-spacing: .25px;
+}
+
+.app-github-link-dropdown-details {
+    color: var(--theme-heading-color);
+    width: 100%;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 48px;
+    letter-spacing: .25px;
+}
+
+.app-mat-divider {
+    color: rgba(33, 33, 33, 0.12);
 }

lib/core/src/lib/about/about-github-link/about-github-link.component.ts

@@ -15,12 +15,11 @@
  * limitations under the License.
  */
 
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
     selector: 'adf-about-github-link',
     templateUrl: './about-github-link.component.html',
-    encapsulation: ViewEncapsulation.None
 })
 export class AboutGithubLinkComponent {
     /** Commit corresponding to the version of ADF to be used. */
@@ -35,5 +34,16 @@ export class AboutGithubLinkComponent {
     @Input()
     application: string = '';
 
+    dropdownExpandedStatus = false;
+    dropdownToggle = true;
+
     constructor() {}
+
+    toggleDropdown() {
+        this.dropdownExpandedStatus = !this.dropdownExpandedStatus;
+
+        if (!this.dropdownExpandedStatus) {
+            this.dropdownToggle = true;
+        }
+    }
 }

lib/core/src/lib/about/about-license-list/about-license-list.component.html

@@ -1,11 +1,44 @@
-<mat-table [dataSource]="data">
-  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
-    <mat-header-cell *matHeaderCellDef>
-      {{ column.header | translate }}
-    </mat-header-cell>
-    <mat-cell *matCellDef="let row" [innerHTML]="column.cell(row)"></mat-cell>
-  </ng-container>
+<div class="app-license-list-container">
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <div class="app-license-list-row">
+
+        <div class="app-license-list-heading">
+            <div class="app-license-list-div">
+                <mat-icon class="app-license-list-icon" (click)="togglesDropdown()">
+                    {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
+                <span class="app-license-list-title">{{ 'ABOUT.LICENSE.TITLE' | translate }}
+                </span>
+            </div>
+
+        </div>
+
+
+        <mat-divider class="app-license-list-divider" *ngIf="serverSettingsDropdown"></mat-divider>
+
+
+        <div *ngIf="serverSettingsDropdown">
+            <div class="app-license-list-dropdown">
+
+                <div class="app-license-list-dropdown-details">
+                    <mat-table [dataSource]="data">
+                        <ng-container *ngFor="let column of columns" class="cols" [matColumnDef]="column.columnDef">
+                            <mat-header-cell *matHeaderCellDef>
+                                {{ column.header | translate }}
+                            </mat-header-cell>
+                            <mat-cell *matCellDef="let row" [innerHTML]="column.cell(row)"></mat-cell>
+                        </ng-container>
+
+                        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+                        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+                    </mat-table>
+                </div>
+
+
+
+            </div>
+        </div>
+
+
+    </div>
+
+</div>

lib/core/src/lib/about/about-license-list/about-license-list.component.scss

@@ -1,4 +1,107 @@
 mat-cell {
     white-space: pre-line;
-    line-height: 30px;
+    line-height: 48px;
+}
+
+mat-table {
+    width: 100%;
+    font-family: "Open Sans";
+}
+
+mat-row {
+    border: none;
+}
+
+mat-header-row {
+    height: 32px;
+    padding: 8px 0px;
+}
+
+mat-header-cell {
+    flex: 0 1 40%;
+
+}
+
+mat-cell {
+    flex: 0 1 40%;
+
+}
+
+.app-license-list-container {
+    margin: 0px 0px -24px 0px;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+}
+
+.app-license-list-row {
+    margin: 24px 24px 24px 24px;
+    width: 95%;
+    border: 1px solid rgba(33, 33, 33, 0.12);
+    border-radius: 12px;
+}
+
+.app-license-list-heading {
+    display: flex;
+    padding-left: 1rem;
+
+}
+
+.app-license-list-div {
+    display: flex;
+    width: 60%;
+    cursor: pointer;
+    height: 32px;
+    padding: 24px 0px;
+}
+
+.app-license-list-icon {
+    padding-top: 4px;
+    cursor: pointer;
+    color: var(--theme-grey-color);
+}
+
+.app-license-list-title {
+    margin-left: 0.6rem;
+    margin-top: 4px;
+    letter-spacing: .15px;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 24px;
+}
+
+.app-license-list-divider {
+    color: rgba(33, 33, 33, 0.12);
+    padding-left: -1px;
+    padding-right: 1px;
+}
+
+.app-license-list-dropdown {
+    padding: 0rem 1rem;
+}
+
+.app-license-list-dropdown-heading {
+    display: flex;
+    color: var(--theme-heading-color);
+    width: 100%;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 48px;
+    letter-spacing: .25px;
+}
+
+.app-license-list-dropdown-details {
+    color: var(--theme-heading-color);
+    width: 100%;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 48px;
+    letter-spacing: .25px;
+}
+
+.app-mat-divider {
+    color: rgba(33, 33, 33, 0.12);
 }

lib/core/src/lib/about/about-license-list/about-license-list.component.ts

@@ -15,14 +15,13 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
 import { LicenseData } from '../interfaces';
 
 @Component({
     selector: 'adf-about-license-list',
     templateUrl: './about-license-list.component.html',
     styleUrls: ['./about-license-list.component.scss'],
-    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AboutLicenseListComponent {
@@ -43,4 +42,15 @@ export class AboutLicenseListComponent {
 
     @Input()
     data: LicenseData[] = [];
+
+    dropdownExpandedStatus = false;
+    dropdownToggle = true;
+
+    toggleDropdown() {
+        this.dropdownExpandedStatus = !this.dropdownExpandedStatus;
+
+        if (!this.dropdownExpandedStatus) {
+            this.dropdownToggle = true;
+        }
+    }
 }

lib/core/src/lib/about/about-module-list/module-list.component.html

@@ -1,11 +1,44 @@
-<mat-table [dataSource]="data">
-  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
-    <mat-header-cell *matHeaderCellDef>
-      {{ column.header | translate }}
-    </mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
-  </ng-container>
+<div class="app-module-list-container">
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <div class="app-module-list-row">
+
+        <div class="app-module-list-heading">
+            <div class="app-module-list-div">
+                <mat-icon class="app-module-list-icon" (click)="togglesDropdown()">
+                    {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
+                <span class="app-module-list-title">{{ 'ABOUT.MODULES.TITLE' | translate }}
+                </span>
+            </div>
+
+        </div>
+
+
+        <mat-divider class="app-module-list-divider" *ngIf="serverSettingsDropdown"></mat-divider>
+
+
+        <div *ngIf="serverSettingsDropdown">
+            <div class="app-module-list-dropdown">
+
+                <div class="app-module-list-dropdown-details">
+                    <mat-table [dataSource]="data">
+                        <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+                            <mat-header-cell *matHeaderCellDef>
+                                {{ column.header | translate }}
+                            </mat-header-cell>
+                            <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
+                        </ng-container>
+
+                        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+                        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+                    </mat-table>
+                </div>
+
+
+
+            </div>
+        </div>
+
+
+    </div>
+
+</div>

lib/core/src/lib/about/about-module-list/module-list.component.scss

@@ -0,0 +1,107 @@
+mat-cell {
+    white-space: pre-line;
+    line-height: 48px;
+}
+
+mat-table {
+    width: 100%;
+    font-family: "Open Sans";
+}
+
+mat-row {
+    border: none;
+}
+
+mat-header-row {
+    height: 32px;
+    padding: 8px 0px;
+}
+
+mat-header-cell {
+    flex: 0 1 40%;
+
+}
+
+mat-cell {
+    flex: 0 1 40%;
+
+}
+
+.app-module-list-container {
+    margin: 0px 0px -24px 0px;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+}
+
+.app-module-list-row {
+    margin: 24px 24px 24px 24px;
+    width: 95%;
+    border: 1px solid rgba(33, 33, 33, 0.12);
+    border-radius: 12px;
+}
+
+.app-module-list-heading {
+    display: flex;
+    padding-left: 1rem;
+
+}
+
+.app-module-list-div {
+    display: flex;
+    width: 60%;
+    cursor: pointer;
+    height: 32px;
+    padding: 24px 0px;
+}
+
+.app-module-list-icon {
+    padding-top: 4px;
+    cursor: pointer;
+    color: var(--theme-grey-color);
+}
+
+.app-module-list-title {
+    margin-left: 0.6rem;
+    margin-top: 4px;
+    letter-spacing: .15px;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 24px;
+}
+
+.app-module-list-divider {
+    color: rgba(33, 33, 33, 0.12);
+    padding-left: -1px;
+    padding-right: 1px;
+}
+
+.app-module-list-dropdown {
+    padding: 0rem 1rem;
+}
+
+.app-module-list-dropdown-heading {
+    display: flex;
+    color: var(--theme-heading-color);
+    width: 100%;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 48px;
+    letter-spacing: .25px;
+}
+
+.app-module-list-dropdown-details {
+    color: var(--theme-heading-color);
+    width: 100%;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 48px;
+    letter-spacing: .25px;
+}
+
+.app-mat-divider {
+    color: rgba(33, 33, 33, 0.12);
+}

lib/core/src/lib/about/about-module-list/module-list.component.ts

@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
 import { ModuleInfo } from '@alfresco/js-api';
 
 @Component({
   selector: 'adf-about-module-list',
   templateUrl: './module-list.component.html',
-  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./module-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ModuleListComponent {
@@ -42,4 +42,15 @@ export class ModuleListComponent {
 
   @Input()
   data: Array<ModuleInfo> = [];
+
+  dropdownExpandedStatus = false;
+  dropdownToggle = true;
+
+  toggleDropdown() {
+    this.dropdownExpandedStatus = !this.dropdownExpandedStatus;
+
+    if (!this.dropdownExpandedStatus) {
+        this.dropdownToggle = true;
+    }
+}
 }

lib/core/src/lib/about/about-package/package-list.component.html

@@ -1,11 +1,44 @@
-<mat-table [dataSource]="data">
-  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
-    <mat-header-cell *matHeaderCellDef>
-      {{ column.header | translate }}
-    </mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
-  </ng-container>
+<div class="app-package-list-container">
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <div class="app-package-list-row">
+
+        <div class="app-package-list-heading">
+            <div class="app-package-list-div">
+                <mat-icon class="app-package-list-icon" (click)="togglesDropdown()">
+                    {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
+                <span class="app-package-list-title">{{ 'ABOUT.PACKAGES.TITLE' | translate }}
+                </span>
+            </div>
+
+        </div>
+
+
+        <mat-divider class="app-package-list-divider" *ngIf="serverSettingsDropdown"></mat-divider>
+
+
+        <div *ngIf="serverSettingsDropdown">
+            <div class="app-package-list-dropdown">
+
+                <div class="app-package-list-dropdown-details">
+                    <mat-table [dataSource]="data">
+                        <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+                            <mat-header-cell *matHeaderCellDef>
+                                {{ column.header | translate }}
+                            </mat-header-cell>
+                            <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
+                        </ng-container>
+
+                        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+                        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+                    </mat-table>
+                </div>
+
+
+
+            </div>
+        </div>
+
+
+    </div>
+
+</div>

lib/core/src/lib/about/about-package/package-list.component.scss

@@ -0,0 +1,107 @@
+mat-cell {
+    white-space: pre-line;
+    line-height: 48px;
+}
+
+mat-table {
+    width: 100%;
+    font-family: "Open Sans";
+}
+
+mat-row {
+    border: none;
+}
+
+mat-header-row {
+    height: 32px;
+    padding: 8px 0px;
+}
+
+mat-header-cell {
+    flex: 0 1 40%;
+
+}
+
+mat-cell {
+    flex: 0 1 40%;
+
+}
+
+.app-package-list-container {
+    margin: 0px 0px -24px 0px;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+}
+
+.app-package-list-row {
+    margin: 24px 24px 24px 24px;
+    width: 95%;
+    border: 1px solid rgba(33, 33, 33, 0.12);
+    border-radius: 12px;
+}
+
+.app-package-list-heading {
+    display: flex;
+    padding-left: 1rem;
+
+}
+
+.app-package-list-div {
+    display: flex;
+    width: 60%;
+    cursor: pointer;
+    height: 32px;
+    padding: 24px 0px;
+}
+
+.app-package-list-icon {
+    padding-top: 4px;
+    cursor: pointer;
+    color: var(--theme-grey-color);
+}
+
+.app-package-list-title {
+    margin-left: 0.6rem;
+    margin-top: 4px;
+    letter-spacing: .15px;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 24px;
+}
+
+.app-package-list-divider {
+    color: rgba(33, 33, 33, 0.12);
+    padding-left: -1px;
+    padding-right: 1px;
+}
+
+.app-package-list-dropdown {
+    padding: 0rem 1rem;
+}
+
+.app-package-list-dropdown-heading {
+    display: flex;
+    color: var(--theme-heading-color);
+    width: 100%;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 48px;
+    letter-spacing: .25px;
+}
+
+.app-package-list-dropdown-details {
+    color: var(--theme-heading-color);
+    width: 100%;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 48px;
+    letter-spacing: .25px;
+}
+
+.app-mat-divider {
+    color: rgba(33, 33, 33, 0.12);
+}

lib/core/src/lib/about/about-package/package-list.component.ts

@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
 import { PackageInfo } from '../interfaces';
 
 @Component({
   selector: 'adf-about-package-list',
   templateUrl: './package-list.component.html',
-  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./package-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PackageListComponent {
@@ -42,4 +42,15 @@ export class PackageListComponent {
 
   @Input()
   data: Array<PackageInfo> = [];
+
+  dropdownExpandedStatus = false;
+  dropdownToggle = true;
+
+  toggleDropdown() {
+    this.dropdownExpandedStatus = !this.dropdownExpandedStatus;
+
+    if (!this.dropdownExpandedStatus) {
+        this.dropdownToggle = true;
+    }
+}
 }

lib/core/src/lib/about/about-platform-version/about-platform-version.component.html

@@ -1,67 +1,92 @@
-<header data-automation-id="adf-about-product-version-title">{{ 'ABOUT.VERSIONS.TITLE' | translate }}</header>
-<mat-card class="mat-elevation-z0">
+<div class="app-platform-version-container">
 
-    <ng-container *ngIf="process" data-automation-id="adf-about-bpm-service">
-        <article>
-        <div>{{ 'ABOUT.VERSIONS.PROCESS_SERVICE' | translate }}</div>
-        <p data-automation-id="adf-about-bpm-version">
-            {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ process.majorVersion }}.{{
-            process.minorVersion }}.{{ process.revisionVersion }}
-        </p>
-        </article>
-    </ng-container>
-    <br>
-    <ng-container *ngIf="repository" data-automation-id="adf-about-ecm-service">
-        <article>
-            <div>{{ 'ABOUT.VERSIONS.CONTENT_SERVICE' | translate }}</div>
-            <p data-automation-id="adf-about-ecm-edition">
-                {{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate }}: {{ repository.edition }}
-            </p>
-            <p data-automation-id="adf-about-ecm-version">
-                {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ repository.version.display }}
-            </p>
-        </article>
-    </ng-container>
-    <br>
-    <ng-container *ngIf="modeling$ | async as modeling" data-automation-id="adf-about-ecm-service">
-        <article>
-            <div>{{ 'ABOUT.VERSIONS.MODELING_SERVICE' | translate }}</div>
-            <p>
-                {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ modeling.version }}
-            </p>
-        </article>
-    </ng-container>
-    <br>
-    <ng-container *ngIf="deployment$| async as deployment" data-automation-id="adf-about-ecm-service">
-        <article>
-            <div>{{ 'ABOUT.VERSIONS.DEPLOYMENT_SERVICE' | translate }}</div>
-            <p>
-                {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ deployment.version }}
-            </p>
-        </article>
-    </ng-container>
-    <br>
-    <ng-container *ngIf="rb$ | async as rb"  data-automation-id="adf-about-ecm-service">
-        <article>
-            <div>{{ 'ABOUT.VERSIONS.RB' | translate }}</div>
-            <p>
-                {{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate }}: {{ rb.artifact }}
-            </p>
-            <p>
-                {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ rb.version }}
-            </p>
-        </article>
-    </ng-container>
-    <br>
-    <ng-container *ngIf="query$ | async as query" data-automation-id="adf-about-ecm-service">
-        <article>
-            <div>{{ 'ABOUT.VERSIONS.QUERY_SERVICE' | translate }}</div>
-            <p>
-                {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ query.version }}
-            </p>
-        </article>
-    </ng-container>
-</mat-card>
+    <div class="app-platform-version-row">
+
+        <div class="app-platform-version-heading">
+            <div class="app-platform-version-div">
+                <mat-icon class="app-platform-version-icon" (click)="togglesDropdown()">
+                    {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
+                <span class="app-platform-version-title">{{ 'ABOUT.VERSIONS.TITLE' | translate }}</span>
+            </div>
+
+        </div>
 
 
+        <mat-divider class="app-platform-version-divider" *ngIf="serverSettingsDropdown"></mat-divider>
 
+
+        <div *ngIf="serverSettingsDropdown">
+            <div class="app-platform-version-dropdown" data-automation-id="adf-about-bpm-service">
+
+                <div class="app-platform-version-dropdown-details" *ngIf="process">
+                    <div class="app-platform-version-dropdown-heading">{{ 'ABOUT.VERSIONS.PROCESS_SERVICE' | translate
+                        }}</div>
+                    <div class="app-platform-version-dropdown-heading">{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate
+                        }}: 1</div>
+                </div>
+
+                <mat-divider class="app-mat-divider" *ngIf="process"></mat-divider>
+
+                <div class="app-platform-version-dropdown-details" *ngIf="repository"
+                    data-automation-id="adf-about-ecm-service">
+                    <div class="app-platform-version-dropdown-heading">{{ 'ABOUT.VERSIONS.CONTENT_SERVICE' | translate
+                        }}</div>
+                    <div class="app-platform-version-dropdown-heading">{{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate
+                        }}: {{ repository.edition }}</div>
+                    <div class="app-platform-version-dropdown-heading">{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate
+                        }}: {{ repository.version.display }}</div>
+
+                </div>
+
+                <mat-divider class="app-mat-divider" *ngIf="modeling$ | async as modeling"></mat-divider>
+
+
+                <div class="app-platform-version-dropdown-details" *ngIf="modeling$ | async as modeling"
+                    data-automation-id="adf-about-ecm-service">
+                    <div class="app-platform-version-dropdown-heading">{{ 'ABOUT.VERSIONS.MODELING_SERVICE' | translate
+                        }}</div>
+                    <div class="app-platform-version-dropdown-heading">{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate
+                        }}: {{ modeling.version }}</div>
+
+                </div>
+
+                <mat-divider class="app-mat-divider" *ngIf="deployment$ | async as deployment"></mat-divider>
+
+
+                <div class="app-platform-version-dropdown-details" *ngIf="deployment$ | async as deployment"
+                    data-automation-id="adf-about-ecm-service">
+                    <div class="app-platform-version-dropdown-heading">{{ 'ABOUT.VERSIONS.DEPLOYMENT_SERVICE' |
+                        translate }}</div>
+                    <div class="app-platform-version-dropdown-heading">{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate
+                        }}: {{ deployment.version }}</div>
+                </div>
+
+                <mat-divider class="app-mat-divider" *ngIf="rb$ | async as rb"></mat-divider>
+
+                <div class="app-platform-version-dropdown-details" *ngIf="rb$ | async as rb"
+                    data-automation-id="adf-about-ecm-service">
+                    <div class="app-platform-version-dropdown-heading">{{ 'ABOUT.VERSIONS.RB' | translate }}</div>
+                    <div class="app-platform-version-dropdown-heading">{{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate
+                        }}: {{ rb.artifact }}</div>
+                    <div class="app-platform-version-dropdown-heading">{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate
+                        }}: {{ rb.version }}</div>
+                </div>
+
+                <mat-divider class="app-mat-divider" *ngIf="query$ | async as query"></mat-divider>
+
+
+                <div class="app-platform-version-dropdown-details" *ngIf="query$ | async as query"
+                    data-automation-id="adf-about-ecm-service">
+                    <div class="app-platform-version-dropdown-heading">{{ 'ABOUT.VERSIONS.QUERY_SERVICE' | translate }}
+                    </div>
+                    <div class="app-platform-version-dropdown-heading">{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate
+                        }}: {{ query.version }}</div>
+                </div>
+
+            </div>
+        </div>
+
+
+    </div>
+
+</div>

lib/core/src/lib/about/about-platform-version/about-platform-version.component.scss

@@ -0,0 +1,77 @@
+.app-platform-version-container {
+    margin: 0px 0px -24px 0px;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+}
+
+.app-platform-version-row {
+    margin: 24px 24px 24px 24px;
+    width: 95%;
+    border: 1px solid rgba(33, 33, 33, 0.12);
+    border-radius: 12px;
+}
+
+.app-platform-version-heading {
+    display: flex;
+    padding-left: 1rem;
+}
+
+.app-platform-version-div {
+    display: flex;
+    width: 60%;
+    cursor: pointer;
+    height: 32px;
+    padding: 24px 0px;
+}
+
+.app-platform-version-icon {
+    padding-top: 4px;
+    cursor: pointer;
+    color: var(--theme-grey-color);
+}
+
+.app-platform-version-title {
+    margin-left: 0.6rem;
+    margin-top: 4px;
+    letter-spacing: .15px;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 24px;
+}
+
+.app-platform-version-divider {
+    color: rgba(33, 33, 33, 0.12);
+    padding-left: -1px;
+    padding-right: 1px;
+}
+
+.app-platform-version-dropdown {
+    padding: 0rem 1rem;
+}
+
+.app-platform-version-dropdown-heading {
+    display: flex;
+    color: var(--theme-heading-color);
+    width: 100%;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 48px;
+    letter-spacing: .25px;
+}
+
+.app-platform-version-dropdown-details {
+    color: var(--theme-heading-color);
+    width: 100%;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 48px;
+    letter-spacing: .25px;
+}
+
+.app-mat-divider {
+    color: rgba(33, 33, 33, 0.12);
+}

lib/core/src/lib/about/about-platform-version/about-platform-version.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { RepositoryInfo } from '@alfresco/js-api';
 import { Observable } from 'rxjs';
 
@@ -26,7 +26,8 @@ import { AppConfigService } from '../../app-config/app-config.service';
 @Component({
     selector: 'adf-about-platform-version',
     templateUrl: './about-platform-version.component.html',
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ['./about-platform-version.component.scss'],
+
 })
 export class AboutPlatformVersionComponent {
 
@@ -43,12 +44,23 @@ export class AboutPlatformVersionComponent {
     rb$: Observable<ActivitiDependencyInfo>;
     query$: Observable<ActivitiDependencyInfo>;
 
+    dropdownExpandedStatus = false;
+    dropdownToggle = true;
+
     constructor(private aaeInfoService: AaeInfoService, private appConfigService: AppConfigService) {
         this.modelingInfo();
         this.deploymentInfo();
         this.rbInfo();
     }
 
+    toggleDropdown() {
+        this.dropdownExpandedStatus = !this.dropdownExpandedStatus;
+
+        if (!this.dropdownExpandedStatus) {
+            this.dropdownToggle = true;
+        }
+    }
+
     modelingInfo() {
         this.modeling$ = this.aaeInfoService.getServiceVersion('modeling-service');
     }
@@ -64,4 +76,5 @@ export class AboutPlatformVersionComponent {
     queryInfo() {
         this.query$ = this.aaeInfoService.getServiceVersion(`${this.appConfigService.get('oauth2.clientId')}/query`);
     }
+
 }

lib/core/src/lib/about/about-server-settings/about-server-settings.component.html

@@ -1,11 +1,38 @@
-<div class="adf-github-link-container">
-    <header data-automation-id="adf-about-setting-title">{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}</header>
-    <mat-card class="mat-elevation-z0">
-        <p data-automation-id="adf-process-service-host">
-            {{ 'ABOUT.SERVER_SETTINGS.PROCESS_SERVICE_HOST' | translate: {value: bpmHost} }}
-        </p>
-        <p data-automation-id="adf-content-service-host">
-            {{ 'ABOUT.SERVER_SETTINGS.CONTENT_SERVICE_HOST' | translate: {value: ecmHost} }}
-        </p>
-    </mat-card>
+<div class="app-server-settings-container">
+
+    <div class="app-server-settings-row">
+        <div class="app-server-settings-heading">
+            <div class="app-server-settings-div">
+                <mat-icon class="app-server-settings-icon" (click)="togglesDropdown()">
+                    {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
+                <span class="app-server-settings-title">{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}</span>
+            </div>
+
+        </div>
+
+
+        <mat-divider class="app-server-settings-divider" *ngIf="serverSettingsDropdown"></mat-divider>
+
+
+        <div *ngIf="serverSettingsDropdown">
+            <div class="app-server-settings-dropdown">
+
+                <div class="app-server-settings-dropdown-details">
+                    <div class="app-server-settings-dropdown-heading">{{ 'ABOUT.SERVER_SETTINGS.PROCESS_SERVICE_HOST' |
+                        translate: {value: bpmHost} }}</div>
+                </div>
+
+                <mat-divider class="app-mat-divider"></mat-divider>
+
+                <div class="app-server-settings-dropdown-details">
+                    <div class="app-server-settings-dropdown-heading">{{ 'ABOUT.SERVER_SETTINGS.CONTENT_SERVICE_HOST' |
+                        translate: {value: ecmHost} }}</div>
+                </div>
+
+            </div>
+        </div>
+
+
+    </div>
+
 </div>

lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss

@@ -1,3 +1,77 @@
-.adf-github-link-container {
-    padding: 10px;
+.app-server-settings-container {
+    margin: 0px 0px -24px 0px;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+}
+
+.app-server-settings-row {
+    margin: 24px 24px 24px 24px;
+    width: 95%;
+    border: 1px solid rgba(33, 33, 33, 0.12);
+    border-radius: 12px;
+}
+
+.app-server-settings-heading {
+    display: flex;
+    padding-left: 1rem;
+}
+
+.app-server-settings-div {
+    display: flex;
+    width: 60%;
+    cursor: pointer;
+    height: 32px;
+    padding: 24px 0px;
+}
+
+.app-server-settings-icon {
+    padding-top: 4px;
+    cursor: pointer;
+    color: var(--theme-grey-color);
+}
+
+.app-server-settings-title {
+    margin-left: 0.6rem;
+    margin-top: 4px;
+    letter-spacing: .15px;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 24px;
+}
+
+.app-server-settings-divider {
+    color: rgba(33, 33, 33, 0.12);
+    padding-left: -1px;
+    padding-right: 1px;
+}
+
+.app-server-settings-dropdown {
+    padding: 0rem 1rem;
+}
+
+.app-server-settings-dropdown-heading {
+    display: flex;
+    color: var(--theme-heading-color);
+    width: 100%;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 48px;
+    letter-spacing: .25px;
+}
+
+.app-server-settings-dropdown-details {
+    color: var(--theme-heading-color);
+    width: 100%;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 48px;
+    letter-spacing: .25px;
+}
+
+.app-mat-divider {
+    color: rgba(33, 33, 33, 0.12);
 }

lib/core/src/lib/about/about-server-settings/about-server-settings.component.ts

@@ -15,22 +15,32 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { AppConfigService, AppConfigValues } from '../../app-config/app-config.service';
 
 @Component({
     selector: 'adf-about-server-settings',
     templateUrl: './about-server-settings.component.html',
-    encapsulation: ViewEncapsulation.None
 })
 export class AboutServerSettingsComponent implements OnInit {
     ecmHost = '';
     bpmHost = '';
 
+    dropdownExpandedStatus = false;
+    dropdownToggle = true;
+
     constructor(private appConfig: AppConfigService) {}
 
     ngOnInit() {
         this.ecmHost = this.appConfig.get<string>(AppConfigValues.ECMHOST);
         this.bpmHost = this.appConfig.get<string>(AppConfigValues.BPMHOST);
     }
+
+    toggleDropdown() {
+        this.dropdownExpandedStatus = !this.dropdownExpandedStatus;
+
+        if (!this.dropdownExpandedStatus) {
+            this.dropdownToggle = true;
+        }
+    }
 }

lib/core/src/lib/about/about-status-list/about-status-list.component.html

@@ -1,11 +1,44 @@
-<mat-table [dataSource]="data">
-  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
-    <mat-header-cell *matHeaderCellDef>
-      {{ column.header | translate }}
-    </mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
-  </ng-container>
+<div class="app-status-list-container">
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <div class="app-status-list-row">
+
+        <div class="app-status-list-heading">
+            <div class="app-status-list-div">
+                <mat-icon class="app-status-list-icon" (click)="togglesDropdown()">
+                    {{ dropdownExpandedStatus ? 'expand_more' : 'chevron_right'}}</mat-icon>
+                <span class="app-status-list-title">{{ 'ABOUT.STATUS.TITLE' | translate }}
+                </span>
+            </div>
+
+        </div>
+
+
+        <mat-divider class="app-status-list-divider" *ngIf="serverSettingsDropdown"></mat-divider>
+
+
+        <div *ngIf="serverSettingsDropdown">
+            <div class="app-status-list-dropdown">
+
+                <div class="app-status-list-dropdown-details">
+                    <mat-table [dataSource]="data">
+                        <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+                            <mat-header-cell *matHeaderCellDef>
+                                {{ column.header | translate }}
+                            </mat-header-cell>
+                            <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
+                        </ng-container>
+
+                        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+                        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+                    </mat-table>
+                </div>
+
+
+
+            </div>
+        </div>
+
+
+    </div>
+
+</div>

lib/core/src/lib/about/about-status-list/about-status-list.component.scss

@@ -0,0 +1,107 @@
+mat-cell {
+    white-space: pre-line;
+    line-height: 48px;
+}
+
+mat-table {
+    width: 100%;
+    font-family: "Open Sans";
+}
+
+mat-row {
+    border: none;
+}
+
+mat-header-row {
+    height: 32px;
+    padding: 8px 0px;
+}
+
+mat-header-cell {
+    flex: 0 1 40%;
+
+}
+
+mat-cell {
+    flex: 0 1 40%;
+
+}
+
+.app-extension-list-container {
+    margin: 0px 0px -24px 0px;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+}
+
+.app-extension-list-row {
+    margin: 24px 24px 24px 24px;
+    width: 95%;
+    border: 1px solid rgba(33, 33, 33, 0.12);
+    border-radius: 12px;
+}
+
+.app-extension-list-heading {
+    display: flex;
+    padding-left: 1rem;
+
+}
+
+.app-extension-list-div {
+    display: flex;
+    width: 60%;
+    cursor: pointer;
+    height: 32px;
+    padding: 24px 0px;
+}
+
+.app-extension-list-icon {
+    padding-top: 4px;
+    cursor: pointer;
+    color: var(--theme-grey-color);
+}
+
+.app-extension-list-title {
+    margin-left: 0.6rem;
+    margin-top: 4px;
+    letter-spacing: .15px;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 24px;
+}
+
+.app-extension-list-divider {
+    border: 1px solid rgba(33, 33, 33, 0.12);
+    padding-left: -1px;
+    padding-right: 1px;
+}
+
+.app-extension-list-dropdown {
+    padding: 0rem 1rem;
+}
+
+.app-extension-list-dropdown-heading {
+    display: flex;
+    color: var(--theme-heading-color);
+    width: 100%;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 48px;
+    letter-spacing: .25px;
+}
+
+.app-extension-list-dropdown-details {
+    color: var(--theme-heading-color);
+    width: 100%;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 48px;
+    letter-spacing: .25px;
+}
+
+.app-mat-divider {
+    color: rgba(33, 33, 33, 0.12);
+}

lib/core/src/lib/about/about-status-list/about-status-list.component.ts

@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
 import { StatusData } from '../interfaces';
 
 @Component({
     selector: 'adf-about-status-list',
     templateUrl: './about-status-list.component.html',
-    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./about-status-list.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AboutStatusListComponent {
@@ -42,4 +42,15 @@ export class AboutStatusListComponent {
 
     @Input()
     data: StatusData[] = [];
+
+    dropdownExpandedStatus = false;
+    dropdownToggle = true;
+
+    toggleDropdown() {
+        this.dropdownExpandedStatus = !this.dropdownExpandedStatus;
+
+        if (!this.dropdownExpandedStatus) {
+            this.dropdownToggle = true;
+        }
+    }
 }

lib/core/src/lib/about/about.component.html

@@ -11,29 +11,24 @@
     <ng-container *ngIf="repository">
 
         <article *ngIf="licenseEntries">
-            <header>{{ 'ABOUT.LICENSE.TITLE' | translate }}</header>
             <adf-about-license-list [data]="licenseEntries"></adf-about-license-list>
         </article>
 
         <article *ngIf="statusEntries">
-            <header>{{ 'ABOUT.STATUS.TITLE' | translate }}</header>
             <adf-about-status-list [data]="statusEntries"></adf-about-status-list>
         </article>
 
         <article *ngIf="repository?.modules">
-            <header>{{ 'ABOUT.MODULES.TITLE' | translate }}</header>
             <adf-about-module-list [data]="repository.modules"></adf-about-module-list>
         </article>
     </ng-container>
 
     <article *ngIf="dependencyEntries && dev" >
-        <header>{{ 'ABOUT.PACKAGES.TITLE' | translate }}</header>
         <adf-about-package-list [data]="dependencyEntries"></adf-about-package-list>
     </article>
 
     <ng-container *ngIf="extensions$ | async as extensions">
         <article *ngIf="extensions.length > 0">
-            <header>{{ 'ABOUT.PLUGINS.TITLE' | translate }}</header>
             <adf-about-extension-list [data]="extensions"></adf-about-extension-list>
         </article>
     </ng-container>

lib/core/src/lib/about/about.component.scss

@@ -1,6 +1,7 @@
 adf-about {
     .adf-about-container {
-        margin: 10px 0 5px 2px;
+        background-color: white;
+        border-top: 1px solid rgba(33, 33, 33, 0.12) !important;
     }
 
     header {