From 8b7a33bff2152a032a53d77c771a7c3429e8624a Mon Sep 17 00:00:00 2001
From: Yana De Pauw <yana@atmire.com>
Date: Wed, 3 Mar 2021 11:05:52 +0100
Subject: [PATCH 01/12] 77349: Add themeable components - pt. 1

---
 .../themed-browse-by-switcher.component.ts    | 28 +++++++
 .../+browse-by/browse-by-routing.module.ts    |  4 +-
 src/app/+browse-by/browse-by.module.ts        |  2 +
 .../collection-page-routing.module.ts         |  4 +-
 .../collection-page.module.ts                 |  2 +
 .../themed-collection-page.component.ts       | 27 +++++++
 .../community-page-routing.module.ts          |  4 +-
 .../+community-page/community-page.module.ts  | 17 +++--
 .../themed-community-page.component.ts        | 27 +++++++
 .../lookup-by-id-routing.module.ts            |  4 +-
 src/app/+lookup-by-id/lookup-by-id.module.ts  |  4 +-
 .../themed-objectnotfound.component.ts        | 27 +++++++
 .../search-page-routing.module.ts             |  8 +-
 src/app/+search-page/search-page.module.ts    |  4 +-
 ...med-configuration-search-page.component.ts | 73 +++++++++++++++++++
 .../themed-search-page.component.ts           | 27 +++++++
 src/app/app-routing.module.ts                 |  9 ++-
 src/app/app.module.ts                         |  4 +
 .../community-list-page.module.ts             | 15 +++-
 .../community-list-page.routing.module.ts     |  4 +-
 .../themed-community-list-page.component.ts   | 27 +++++++
 .../forbidden/themed-forbidden.component.ts   | 27 +++++++
 .../themed-end-user-agreement.component.ts    | 28 +++++++
 src/app/info/info-routing.module.ts           |  8 +-
 src/app/info/info.module.ts                   | 19 ++++-
 .../info/privacy/themed-privacy.component.ts  | 27 +++++++
 .../themed-pagenotfound.component.ts          | 27 +++++++
 src/app/shared/shared.module.ts               |  4 +-
 ...ed-collection-statistics-page.component.ts | 27 +++++++
 ...med-community-statistics-page.component.ts | 27 +++++++
 .../themed-item-statistics-page.component.ts  | 27 +++++++
 .../themed-site-statistics-page.component.ts  | 27 +++++++
 .../statistics-page-routing.module.ts         | 17 +++--
 .../statistics-page/statistics-page.module.ts | 10 ++-
 src/environments/environment.common.ts        |  8 +-
 .../browse-by-switcher.component.html         |  0
 .../browse-by-switcher.component.scss         |  0
 .../browse-by-switcher.component.ts           | 15 ++++
 .../collection-page.component.html            |  0
 .../collection-page.component.scss            |  0
 .../collection-page.component.ts              | 17 +++++
 .../community-page.component.html             |  0
 .../community-page.component.scss             |  0
 .../community-page.component.ts               | 17 +++++
 .../objectnotfound.component.html             |  0
 .../objectnotfound.component.scss             |  0
 .../objectnotfound.component.ts               | 16 ++++
 .../configuration-search-page.component.html  |  0
 .../configuration-search-page.component.scss  |  0
 .../configuration-search-page.component.ts    | 15 ++++
 .../+search-page/search-page.component.html   |  0
 .../+search-page/search-page.component.scss   |  0
 .../app/+search-page/search-page.component.ts | 15 ++++
 .../community-list-page.component.html        |  0
 .../community-list-page.component.scss        |  0
 .../community-list-page.component.ts          | 15 ++++
 .../app/forbidden/forbidden.component.html    |  0
 .../app/forbidden/forbidden.component.scss    |  0
 .../app/forbidden/forbidden.component.ts      | 17 +++++
 .../end-user-agreement.component.html         |  0
 .../end-user-agreement.component.scss         |  0
 .../end-user-agreement.component.ts           | 16 ++++
 .../app/info/privacy/privacy.component.html   |  0
 .../app/info/privacy/privacy.component.scss   |  0
 .../app/info/privacy/privacy.component.ts     | 15 ++++
 .../pagenotfound/pagenotfound.component.html  |  0
 .../pagenotfound/pagenotfound.component.scss  |  0
 .../pagenotfound/pagenotfound.component.ts    | 16 ++++
 .../collection-statistics-page.component.html |  0
 .../collection-statistics-page.component.scss |  0
 .../collection-statistics-page.component.ts   | 16 ++++
 .../community-statistics-page.component.html  |  0
 .../community-statistics-page.component.scss  |  0
 .../community-statistics-page.component.ts    | 16 ++++
 .../item-statistics-page.component.html       |  0
 .../item-statistics-page.component.scss       |  0
 .../item-statistics-page.component.ts         | 16 ++++
 .../site-statistics-page.component.html       |  0
 .../site-statistics-page.component.scss       |  0
 .../site-statistics-page.component.ts         | 16 ++++
 src/themes/custom/theme.module.ts             | 42 ++++++++++-
 81 files changed, 833 insertions(+), 51 deletions(-)
 create mode 100644 src/app/+browse-by/+browse-by-switcher/themed-browse-by-switcher.component.ts
 create mode 100644 src/app/+collection-page/themed-collection-page.component.ts
 create mode 100644 src/app/+community-page/themed-community-page.component.ts
 create mode 100644 src/app/+lookup-by-id/objectnotfound/themed-objectnotfound.component.ts
 create mode 100644 src/app/+search-page/themed-configuration-search-page.component.ts
 create mode 100644 src/app/+search-page/themed-search-page.component.ts
 create mode 100644 src/app/community-list-page/themed-community-list-page.component.ts
 create mode 100644 src/app/forbidden/themed-forbidden.component.ts
 create mode 100644 src/app/info/end-user-agreement/themed-end-user-agreement.component.ts
 create mode 100644 src/app/info/privacy/themed-privacy.component.ts
 create mode 100644 src/app/pagenotfound/themed-pagenotfound.component.ts
 create mode 100644 src/app/statistics-page/collection-statistics-page/themed-collection-statistics-page.component.ts
 create mode 100644 src/app/statistics-page/community-statistics-page/themed-community-statistics-page.component.ts
 create mode 100644 src/app/statistics-page/item-statistics-page/themed-item-statistics-page.component.ts
 create mode 100644 src/app/statistics-page/site-statistics-page/themed-site-statistics-page.component.ts
 create mode 100644 src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.html
 create mode 100644 src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.scss
 create mode 100644 src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.ts
 create mode 100644 src/themes/custom/app/+collection-page/collection-page.component.html
 create mode 100644 src/themes/custom/app/+collection-page/collection-page.component.scss
 create mode 100644 src/themes/custom/app/+collection-page/collection-page.component.ts
 create mode 100644 src/themes/custom/app/+community-page/community-page.component.html
 create mode 100644 src/themes/custom/app/+community-page/community-page.component.scss
 create mode 100644 src/themes/custom/app/+community-page/community-page.component.ts
 create mode 100644 src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.html
 create mode 100644 src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.scss
 create mode 100644 src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.ts
 create mode 100644 src/themes/custom/app/+search-page/configuration-search-page.component.html
 create mode 100644 src/themes/custom/app/+search-page/configuration-search-page.component.scss
 create mode 100644 src/themes/custom/app/+search-page/configuration-search-page.component.ts
 create mode 100644 src/themes/custom/app/+search-page/search-page.component.html
 create mode 100644 src/themes/custom/app/+search-page/search-page.component.scss
 create mode 100644 src/themes/custom/app/+search-page/search-page.component.ts
 create mode 100644 src/themes/custom/app/community-list-page/community-list-page.component.html
 create mode 100644 src/themes/custom/app/community-list-page/community-list-page.component.scss
 create mode 100644 src/themes/custom/app/community-list-page/community-list-page.component.ts
 create mode 100644 src/themes/custom/app/forbidden/forbidden.component.html
 create mode 100644 src/themes/custom/app/forbidden/forbidden.component.scss
 create mode 100644 src/themes/custom/app/forbidden/forbidden.component.ts
 create mode 100644 src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.html
 create mode 100644 src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.scss
 create mode 100644 src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.ts
 create mode 100644 src/themes/custom/app/info/privacy/privacy.component.html
 create mode 100644 src/themes/custom/app/info/privacy/privacy.component.scss
 create mode 100644 src/themes/custom/app/info/privacy/privacy.component.ts
 create mode 100644 src/themes/custom/app/pagenotfound/pagenotfound.component.html
 create mode 100644 src/themes/custom/app/pagenotfound/pagenotfound.component.scss
 create mode 100644 src/themes/custom/app/pagenotfound/pagenotfound.component.ts
 create mode 100644 src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.html
 create mode 100644 src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.scss
 create mode 100644 src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.ts
 create mode 100644 src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.html
 create mode 100644 src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.scss
 create mode 100644 src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.ts
 create mode 100644 src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.html
 create mode 100644 src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.scss
 create mode 100644 src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.ts
 create mode 100644 src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.html
 create mode 100644 src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.scss
 create mode 100644 src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.ts

diff --git a/src/app/+browse-by/+browse-by-switcher/themed-browse-by-switcher.component.ts b/src/app/+browse-by/+browse-by-switcher/themed-browse-by-switcher.component.ts
new file mode 100644
index 0000000000..20d27012fe
--- /dev/null
+++ b/src/app/+browse-by/+browse-by-switcher/themed-browse-by-switcher.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { BrowseBySwitcherComponent } from './browse-by-switcher.component';
+
+@Component({
+  selector: 'ds-themed-browse-by-switcher',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html'
+})
+/**
+ * Component for determining what Browse-By component to use depending on the metadata (browse ID) provided
+ */
+export class ThemedBrowseBySwitcherComponent extends ThemedComponent<BrowseBySwitcherComponent> {
+  protected getComponentName(): string {
+    return 'BrowseBySwitcherComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/+browse-by/+browse-by-switcher/browse-by-switcher.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./browse-by-switcher.component`);
+  }
+
+
+}
diff --git a/src/app/+browse-by/browse-by-routing.module.ts b/src/app/+browse-by/browse-by-routing.module.ts
index a686e7007e..8cf989695a 100644
--- a/src/app/+browse-by/browse-by-routing.module.ts
+++ b/src/app/+browse-by/browse-by-routing.module.ts
@@ -1,9 +1,9 @@
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { BrowseByGuard } from './browse-by-guard';
-import { BrowseBySwitcherComponent } from './+browse-by-switcher/browse-by-switcher.component';
 import { BrowseByDSOBreadcrumbResolver } from './browse-by-dso-breadcrumb.resolver';
 import { BrowseByI18nBreadcrumbResolver } from './browse-by-i18n-breadcrumb.resolver';
+import { ThemedBrowseBySwitcherComponent } from './+browse-by-switcher/themed-browse-by-switcher.component';
 
 @NgModule({
   imports: [
@@ -14,7 +14,7 @@ import { BrowseByI18nBreadcrumbResolver } from './browse-by-i18n-breadcrumb.reso
         children: [
           {
             path: ':id',
-            component: BrowseBySwitcherComponent,
+            component: ThemedBrowseBySwitcherComponent,
             canActivate: [BrowseByGuard],
             resolve: { breadcrumb: BrowseByI18nBreadcrumbResolver },
             data: { title: 'browse.title', breadcrumbKey: 'browse.metadata' }
diff --git a/src/app/+browse-by/browse-by.module.ts b/src/app/+browse-by/browse-by.module.ts
index 60574f4074..08b6c5739b 100644
--- a/src/app/+browse-by/browse-by.module.ts
+++ b/src/app/+browse-by/browse-by.module.ts
@@ -5,6 +5,7 @@ import { SharedModule } from '../shared/shared.module';
 import { BrowseByMetadataPageComponent } from './+browse-by-metadata-page/browse-by-metadata-page.component';
 import { BrowseByDatePageComponent } from './+browse-by-date-page/browse-by-date-page.component';
 import { BrowseBySwitcherComponent } from './+browse-by-switcher/browse-by-switcher.component';
+import { ThemedBrowseBySwitcherComponent } from './+browse-by-switcher/themed-browse-by-switcher.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -20,6 +21,7 @@ const ENTRY_COMPONENTS = [
   ],
   declarations: [
     BrowseBySwitcherComponent,
+    ThemedBrowseBySwitcherComponent,
     ...ENTRY_COMPONENTS
   ],
   exports: [
diff --git a/src/app/+collection-page/collection-page-routing.module.ts b/src/app/+collection-page/collection-page-routing.module.ts
index 7e44883a53..5879e523af 100644
--- a/src/app/+collection-page/collection-page-routing.module.ts
+++ b/src/app/+collection-page/collection-page-routing.module.ts
@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { CollectionPageComponent } from './collection-page.component';
 import { CollectionPageResolver } from './collection-page.resolver';
 import { CreateCollectionPageComponent } from './create-collection-page/create-collection-page.component';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
@@ -21,6 +20,7 @@ import {
 import { CollectionPageAdministratorGuard } from './collection-page-administrator.guard';
 import { MenuItemType } from '../shared/menu/initial-menus-state';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
+import { ThemedCollectionPageComponent } from './themed-collection-page.component';
 
 @NgModule({
   imports: [
@@ -62,7 +62,7 @@ import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
           },
           {
             path: '',
-            component: CollectionPageComponent,
+            component: ThemedCollectionPageComponent,
             pathMatch: 'full',
           }
         ],
diff --git a/src/app/+collection-page/collection-page.module.ts b/src/app/+collection-page/collection-page.module.ts
index 83ba12f037..7946e7a1a4 100644
--- a/src/app/+collection-page/collection-page.module.ts
+++ b/src/app/+collection-page/collection-page.module.ts
@@ -13,6 +13,7 @@ import { CollectionItemMapperComponent } from './collection-item-mapper/collecti
 import { SearchService } from '../core/shared/search/search.service';
 import { StatisticsModule } from '../statistics/statistics.module';
 import { CollectionFormModule } from './collection-form/collection-form.module';
+import { ThemedCollectionPageComponent } from './themed-collection-page.component';
 
 @NgModule({
   imports: [
@@ -25,6 +26,7 @@ import { CollectionFormModule } from './collection-form/collection-form.module';
   ],
   declarations: [
     CollectionPageComponent,
+    ThemedCollectionPageComponent,
     CreateCollectionPageComponent,
     DeleteCollectionPageComponent,
     EditItemTemplatePageComponent,
diff --git a/src/app/+collection-page/themed-collection-page.component.ts b/src/app/+collection-page/themed-collection-page.component.ts
new file mode 100644
index 0000000000..7bbc720e30
--- /dev/null
+++ b/src/app/+collection-page/themed-collection-page.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { CollectionPageComponent } from './collection-page.component';
+
+@Component({
+  selector: 'ds-themed-community-page',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class ThemedCollectionPageComponent extends ThemedComponent<CollectionPageComponent> {
+  protected getComponentName(): string {
+    return 'CollectionPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+collection-page/collection-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./collection-page.component`);
+  }
+
+}
diff --git a/src/app/+community-page/community-page-routing.module.ts b/src/app/+community-page/community-page-routing.module.ts
index 571bff7413..ad1b1fd2f2 100644
--- a/src/app/+community-page/community-page-routing.module.ts
+++ b/src/app/+community-page/community-page-routing.module.ts
@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { CommunityPageComponent } from './community-page.component';
 import { CommunityPageResolver } from './community-page.resolver';
 import { CreateCommunityPageComponent } from './create-community-page/create-community-page.component';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
@@ -14,6 +13,7 @@ import { COMMUNITY_EDIT_PATH, COMMUNITY_CREATE_PATH } from './community-page-rou
 import { CommunityPageAdministratorGuard } from './community-page-administrator.guard';
 import { MenuItemType } from '../shared/menu/initial-menus-state';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
+import { ThemedCommunityPageComponent } from './themed-community-page.component';
 
 @NgModule({
   imports: [
@@ -45,7 +45,7 @@ import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
           },
           {
             path: '',
-            component: CommunityPageComponent,
+            component: ThemedCommunityPageComponent,
             pathMatch: 'full',
           }
         ],
diff --git a/src/app/+community-page/community-page.module.ts b/src/app/+community-page/community-page.module.ts
index a9eaef033d..3ae75f166c 100644
--- a/src/app/+community-page/community-page.module.ts
+++ b/src/app/+community-page/community-page.module.ts
@@ -11,6 +11,14 @@ import { CreateCommunityPageComponent } from './create-community-page/create-com
 import { DeleteCommunityPageComponent } from './delete-community-page/delete-community-page.component';
 import { StatisticsModule } from '../statistics/statistics.module';
 import { CommunityFormModule } from './community-form/community-form.module';
+import { ThemedCommunityPageComponent } from './themed-community-page.component';
+
+const DECLARATIONS = [CommunityPageComponent,
+  ThemedCommunityPageComponent,
+  CommunityPageSubCollectionListComponent,
+  CommunityPageSubCommunityListComponent,
+  CreateCommunityPageComponent,
+  DeleteCommunityPageComponent];
 
 @NgModule({
   imports: [
@@ -21,11 +29,10 @@ import { CommunityFormModule } from './community-form/community-form.module';
     CommunityFormModule
   ],
   declarations: [
-    CommunityPageComponent,
-    CommunityPageSubCollectionListComponent,
-    CommunityPageSubCommunityListComponent,
-    CreateCommunityPageComponent,
-    DeleteCommunityPageComponent
+    ...DECLARATIONS
+  ],
+  exports: [
+    ...DECLARATIONS
   ]
 })
 
diff --git a/src/app/+community-page/themed-community-page.component.ts b/src/app/+community-page/themed-community-page.component.ts
new file mode 100644
index 0000000000..b420789c5f
--- /dev/null
+++ b/src/app/+community-page/themed-community-page.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { CommunityPageComponent } from './community-page.component';
+
+@Component({
+  selector: 'ds-themed-community-page',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class ThemedCommunityPageComponent extends ThemedComponent<CommunityPageComponent> {
+  protected getComponentName(): string {
+    return 'CommunityPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+community-page/community-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./community-page.component`);
+  }
+
+}
diff --git a/src/app/+lookup-by-id/lookup-by-id-routing.module.ts b/src/app/+lookup-by-id/lookup-by-id-routing.module.ts
index 76c90ed6d4..52a7c8a358 100644
--- a/src/app/+lookup-by-id/lookup-by-id-routing.module.ts
+++ b/src/app/+lookup-by-id/lookup-by-id-routing.module.ts
@@ -1,8 +1,8 @@
 import { LookupGuard } from './lookup-guard';
 import { NgModule } from '@angular/core';
 import { RouterModule, UrlSegment } from '@angular/router';
-import { ObjectNotFoundComponent } from './objectnotfound/objectnotfound.component';
 import { isNotEmpty } from '../shared/empty.util';
+import { ThemedObjectNotFoundComponent } from './objectnotfound/themed-objectnotfound.component';
 
 @NgModule({
   imports: [
@@ -10,7 +10,7 @@ import { isNotEmpty } from '../shared/empty.util';
       {
         matcher: urlMatcher,
         canActivate: [LookupGuard],
-        component: ObjectNotFoundComponent  }
+        component: ThemedObjectNotFoundComponent  }
     ])
   ],
   providers: [
diff --git a/src/app/+lookup-by-id/lookup-by-id.module.ts b/src/app/+lookup-by-id/lookup-by-id.module.ts
index 1b070c1279..0202a43033 100644
--- a/src/app/+lookup-by-id/lookup-by-id.module.ts
+++ b/src/app/+lookup-by-id/lookup-by-id.module.ts
@@ -4,6 +4,7 @@ import { SharedModule } from '../shared/shared.module';
 import { LookupRoutingModule } from './lookup-by-id-routing.module';
 import { ObjectNotFoundComponent } from './objectnotfound/objectnotfound.component';
 import { DsoRedirectDataService } from '../core/data/dso-redirect-data.service';
+import { ThemedObjectNotFoundComponent } from './objectnotfound/themed-objectnotfound.component';
 
 @NgModule({
   imports: [
@@ -12,7 +13,8 @@ import { DsoRedirectDataService } from '../core/data/dso-redirect-data.service';
     SharedModule,
   ],
   declarations: [
-    ObjectNotFoundComponent
+    ObjectNotFoundComponent,
+    ThemedObjectNotFoundComponent
   ],
   providers: [
     DsoRedirectDataService
diff --git a/src/app/+lookup-by-id/objectnotfound/themed-objectnotfound.component.ts b/src/app/+lookup-by-id/objectnotfound/themed-objectnotfound.component.ts
new file mode 100644
index 0000000000..947a9f4eaa
--- /dev/null
+++ b/src/app/+lookup-by-id/objectnotfound/themed-objectnotfound.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ObjectNotFoundComponent } from './objectnotfound.component';
+
+@Component({
+  selector: 'ds-themed-objnotfound',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class ThemedObjectNotFoundComponent extends ThemedComponent<ObjectNotFoundComponent> {
+  protected getComponentName(): string {
+    return 'ObjectNotFoundComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/+lookup-by-id/objectnotfound/objectnotfound.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./objectnotfound.component`);
+  }
+
+}
diff --git a/src/app/+search-page/search-page-routing.module.ts b/src/app/+search-page/search-page-routing.module.ts
index f71c7b45ee..9e39ad1bc9 100644
--- a/src/app/+search-page/search-page-routing.module.ts
+++ b/src/app/+search-page/search-page-routing.module.ts
@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { ConfigurationSearchPageGuard } from './configuration-search-page.guard';
-import { ConfigurationSearchPageComponent } from './configuration-search-page.component';
-import { SearchPageComponent } from './search-page.component';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 import { I18nBreadcrumbsService } from '../core/breadcrumbs/i18n-breadcrumbs.service';
 import { SearchPageModule } from './search-page.module';
+import { ThemedSearchPageComponent } from './themed-search-page.component';
+import { ThemedConfigurationSearchPageComponent } from './themed-configuration-search-page.component';
 
 @NgModule({
   imports: [
@@ -15,8 +15,8 @@ import { SearchPageModule } from './search-page.module';
         path: '',
         resolve: { breadcrumb: I18nBreadcrumbResolver }, data: { title: 'search.title', breadcrumbKey: 'search' },
         children: [
-          { path: '', component: SearchPageComponent },
-          { path: ':configuration', component: ConfigurationSearchPageComponent, canActivate: [ConfigurationSearchPageGuard] }
+          { path: '', component: ThemedSearchPageComponent },
+          { path: ':configuration', component: ThemedConfigurationSearchPageComponent, canActivate: [ConfigurationSearchPageGuard] }
         ]
       }]
     )
diff --git a/src/app/+search-page/search-page.module.ts b/src/app/+search-page/search-page.module.ts
index 286f1d12be..0cf6164f8a 100644
--- a/src/app/+search-page/search-page.module.ts
+++ b/src/app/+search-page/search-page.module.ts
@@ -13,11 +13,13 @@ import { SearchFilterService } from '../core/shared/search/search-filter.service
 import { SearchConfigurationService } from '../core/shared/search/search-configuration.service';
 import { JournalEntitiesModule } from '../entity-groups/journal-entities/journal-entities.module';
 import { ResearchEntitiesModule } from '../entity-groups/research-entities/research-entities.module';
+import { ThemedSearchPageComponent } from './themed-search-page.component';
 
 const components = [
   SearchPageComponent,
   SearchComponent,
-  SearchTrackerComponent
+  SearchTrackerComponent,
+  ThemedSearchPageComponent
 ];
 
 @NgModule({
diff --git a/src/app/+search-page/themed-configuration-search-page.component.ts b/src/app/+search-page/themed-configuration-search-page.component.ts
new file mode 100644
index 0000000000..3528d3a326
--- /dev/null
+++ b/src/app/+search-page/themed-configuration-search-page.component.ts
@@ -0,0 +1,73 @@
+import { Component, Input } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { ConfigurationSearchPageComponent } from './configuration-search-page.component';
+import { Observable } from 'rxjs';
+import { Context } from '../core/shared/context.model';
+
+@Component({
+  selector: 'ds-themed-configuration-search-page',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class ThemedConfigurationSearchPageComponent extends ThemedComponent<ConfigurationSearchPageComponent> {
+  /**
+   * The configuration to use for the search options
+   * If empty, the configuration will be determined by the route parameter called 'configuration'
+   */
+  @Input() configuration: string;
+
+  /**
+   * The actual query for the fixed filter.
+   * If empty, the query will be determined by the route parameter called 'filter'
+   */
+  @Input() fixedFilterQuery: string;
+
+  /**
+   * True when the search component should show results on the current page
+   */
+  @Input() inPlaceSearch = true;
+
+  /**
+   * Whether or not the search bar should be visible
+   */
+  @Input()
+  searchEnabled = true;
+
+  /**
+   * The width of the sidebar (bootstrap columns)
+   */
+  @Input()
+  sideBarWidth = 3;
+
+  /**
+   * The currently applied configuration (determines title of search)
+   */
+  @Input()
+  configuration$: Observable<string>;
+
+  /**
+   * The current context
+   */
+  @Input()
+  context: Context;
+
+  protected inAndOutputNames: (keyof ConfigurationSearchPageComponent & keyof this)[] =
+    ['configuration', 'fixedFilterQuery', 'inPlaceSearch', 'searchEnabled', 'sideBarWidth', 'configuration$', 'context'];
+
+  protected getComponentName(): string {
+    return 'ConfigurationSearchPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+search-page/configuration-search-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./configuration-search-page.component`);
+  }
+
+}
diff --git a/src/app/+search-page/themed-search-page.component.ts b/src/app/+search-page/themed-search-page.component.ts
new file mode 100644
index 0000000000..b23fff6289
--- /dev/null
+++ b/src/app/+search-page/themed-search-page.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { SearchPageComponent } from './search-page.component';
+
+@Component({
+  selector: 'ds-themed-search-page',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+/**
+ * This component represents the whole search page
+ * It renders search results depending on the current search options
+ */
+export class ThemedSearchPageComponent extends ThemedComponent<SearchPageComponent> {
+
+  protected getComponentName(): string {
+    return 'SearchPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+search-page/search-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./search-page.component`);
+  }
+}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 5e5c5f5413..18ce77df07 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { AuthBlockingGuard } from './core/auth/auth-blocking.guard';
 
-import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
 import { AuthenticatedGuard } from './core/auth/authenticated.guard';
 import { SiteAdministratorGuard } from './core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
 import {
@@ -23,6 +22,8 @@ import { ReloadGuard } from './core/reload/reload.guard';
 import { EndUserAgreementCurrentUserGuard } from './core/end-user-agreement/end-user-agreement-current-user.guard';
 import { SiteRegisterGuard } from './core/data/feature-authorization/feature-authorization-guard/site-register.guard';
 import { ForbiddenComponent } from './forbidden/forbidden.component';
+import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
+import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component';
 
 @NgModule({
   imports: [
@@ -30,7 +31,7 @@ import { ForbiddenComponent } from './forbidden/forbidden.component';
       path: '', canActivate: [AuthBlockingGuard],
         children: [
           { path: '', redirectTo: '/home', pathMatch: 'full' },
-          { path: 'reload/:rnd', component: PageNotFoundComponent, pathMatch: 'full', canActivate: [ReloadGuard] },
+          { path: 'reload/:rnd', component: ThemedPageNotFoundComponent, pathMatch: 'full', canActivate: [ReloadGuard] },
           {
             path: 'home',
             loadChildren: () => import('./+home-page/home-page.module')
@@ -173,14 +174,14 @@ import { ForbiddenComponent } from './forbidden/forbidden.component';
           },
           {
             path: FORBIDDEN_PATH,
-            component: ForbiddenComponent
+            component: ThemedForbiddenComponent
           },
           {
             path: 'statistics',
             loadChildren: () => import('./statistics-page/statistics-page-routing.module')
               .then((m) => m.StatisticsPageRoutingModule),
           },
-          { path: '**', pathMatch: 'full', component: PageNotFoundComponent },
+          { path: '**', pathMatch: 'full', component: ThemedPageNotFoundComponent },
       ]}
     ],{
       onSameUrlNavigation: 'reload',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index cc428483c9..20aaa4ba02 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -46,6 +46,8 @@ import { XsrfInterceptor } from './core/xsrf/xsrf.interceptor';
 import { RootComponent } from './root/root.component';
 import { ThemedRootComponent } from './root/themed-root.component';
 import { ThemedEntryComponentModule } from '../themes/themed-entry-component.module';
+import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
+import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component';
 
 export function getBase() {
   return environment.ui.nameSpace;
@@ -133,11 +135,13 @@ const DECLARATIONS = [
   ExpandableAdminSidebarSectionComponent,
   FooterComponent,
   PageNotFoundComponent,
+  ThemedPageNotFoundComponent,
   NotificationComponent,
   NotificationsBoardComponent,
   SearchNavbarComponent,
   BreadcrumbsComponent,
   ForbiddenComponent,
+  ThemedForbiddenComponent,
 ];
 
 const EXPORTS = [
diff --git a/src/app/community-list-page/community-list-page.module.ts b/src/app/community-list-page/community-list-page.module.ts
index 57b016bc6e..3b009e227c 100644
--- a/src/app/community-list-page/community-list-page.module.ts
+++ b/src/app/community-list-page/community-list-page.module.ts
@@ -4,7 +4,14 @@ import { SharedModule } from '../shared/shared.module';
 import { CommunityListPageComponent } from './community-list-page.component';
 import { CommunityListPageRoutingModule } from './community-list-page.routing.module';
 import { CommunityListComponent } from './community-list/community-list.component';
+import { ThemedCommunityListPageComponent } from './themed-community-list-page.component';
 
+
+const DECLARATIONS = [
+  CommunityListPageComponent,
+  CommunityListComponent,
+  ThemedCommunityListPageComponent
+];
 /**
  * The page which houses a title and the community list, as described in community-list.component
  */
@@ -15,9 +22,11 @@ import { CommunityListComponent } from './community-list/community-list.componen
     CommunityListPageRoutingModule
   ],
   declarations: [
-    CommunityListPageComponent,
-    CommunityListComponent
-  ]
+    ...DECLARATIONS
+  ],
+  exports: [
+    ...DECLARATIONS,
+  ],
 })
 export class CommunityListPageModule {
 
diff --git a/src/app/community-list-page/community-list-page.routing.module.ts b/src/app/community-list-page/community-list-page.routing.module.ts
index fe250cb96d..d618e33269 100644
--- a/src/app/community-list-page/community-list-page.routing.module.ts
+++ b/src/app/community-list-page/community-list-page.routing.module.ts
@@ -2,8 +2,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CdkTreeModule } from '@angular/cdk/tree';
 
-import { CommunityListPageComponent } from './community-list-page.component';
 import { CommunityListService } from './community-list-service';
+import { ThemedCommunityListPageComponent } from './themed-community-list-page.component';
 
 /**
  * RouterModule to help navigate to the page with the community list tree
@@ -13,7 +13,7 @@ import { CommunityListService } from './community-list-service';
     RouterModule.forChild([
       {
         path: '',
-        component: CommunityListPageComponent,
+        component: ThemedCommunityListPageComponent,
         pathMatch: 'full',
         data: { title: 'communityList.tabTitle' }
       }
diff --git a/src/app/community-list-page/themed-community-list-page.component.ts b/src/app/community-list-page/themed-community-list-page.component.ts
new file mode 100644
index 0000000000..6b374fca90
--- /dev/null
+++ b/src/app/community-list-page/themed-community-list-page.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { CommunityListPageComponent } from './community-list-page.component';
+
+/**
+ * Page with title and the community list tree, as described in community-list.component;
+ * navigated to with community-list.page.routing.module
+ */
+@Component({
+  selector: 'ds-themed-community-list-page',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedCommunityListPageComponent extends ThemedComponent<CommunityListPageComponent> {
+  protected getComponentName(): string {
+    return 'CommunityListPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/community-list-page/community-list-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./community-list-page.component`);
+  }
+
+}
diff --git a/src/app/forbidden/themed-forbidden.component.ts b/src/app/forbidden/themed-forbidden.component.ts
new file mode 100644
index 0000000000..bb3694cae2
--- /dev/null
+++ b/src/app/forbidden/themed-forbidden.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { ForbiddenComponent } from './forbidden.component';
+
+@Component({
+  selector: 'ds-themed-forbidden',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class ThemedForbiddenComponent extends ThemedComponent<ForbiddenComponent> {
+  protected getComponentName(): string {
+    return 'ForbiddenComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/forbidden/forbidden.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./forbidden.component`);
+  }
+
+}
diff --git a/src/app/info/end-user-agreement/themed-end-user-agreement.component.ts b/src/app/info/end-user-agreement/themed-end-user-agreement.component.ts
new file mode 100644
index 0000000000..6c76314e06
--- /dev/null
+++ b/src/app/info/end-user-agreement/themed-end-user-agreement.component.ts
@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { EndUserAgreementComponent } from './end-user-agreement.component';
+
+@Component({
+  selector: 'ds-themed-end-user-agreement',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class ThemedEndUserAgreementComponent extends ThemedComponent<EndUserAgreementComponent> {
+
+  protected getComponentName(): string {
+    return 'EndUserAgreementComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/info/end-user-agreement/end-user-agreement.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./end-user-agreement.component`);
+  }
+
+}
diff --git a/src/app/info/info-routing.module.ts b/src/app/info/info-routing.module.ts
index 799572f9b9..f76fb47ff0 100644
--- a/src/app/info/info-routing.module.ts
+++ b/src/app/info/info-routing.module.ts
@@ -1,16 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { EndUserAgreementComponent } from './end-user-agreement/end-user-agreement.component';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
-import { PrivacyComponent } from './privacy/privacy.component';
 import { PRIVACY_PATH, END_USER_AGREEMENT_PATH } from './info-routing-paths';
+import { ThemedEndUserAgreementComponent } from './end-user-agreement/themed-end-user-agreement.component';
+import { ThemedPrivacyComponent } from './privacy/themed-privacy.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
       {
         path: END_USER_AGREEMENT_PATH,
-        component: EndUserAgreementComponent,
+        component: ThemedEndUserAgreementComponent,
         resolve: { breadcrumb: I18nBreadcrumbResolver },
         data: { title: 'info.end-user-agreement.title', breadcrumbKey: 'info.end-user-agreement' }
       }
@@ -18,7 +18,7 @@ import { PRIVACY_PATH, END_USER_AGREEMENT_PATH } from './info-routing-paths';
     RouterModule.forChild([
       {
         path: PRIVACY_PATH,
-        component: PrivacyComponent,
+        component: ThemedPrivacyComponent,
         resolve: { breadcrumb: I18nBreadcrumbResolver },
         data: { title: 'info.privacy.title', breadcrumbKey: 'info.privacy' }
       }
diff --git a/src/app/info/info.module.ts b/src/app/info/info.module.ts
index ae8ef89b27..84ba5a62db 100644
--- a/src/app/info/info.module.ts
+++ b/src/app/info/info.module.ts
@@ -6,6 +6,17 @@ import { InfoRoutingModule } from './info-routing.module';
 import { EndUserAgreementContentComponent } from './end-user-agreement/end-user-agreement-content/end-user-agreement-content.component';
 import { PrivacyComponent } from './privacy/privacy.component';
 import { PrivacyContentComponent } from './privacy/privacy-content/privacy-content.component';
+import { ThemedEndUserAgreementComponent } from './end-user-agreement/themed-end-user-agreement.component';
+import { ThemedPrivacyComponent } from './privacy/themed-privacy.component';
+
+const DECLARATIONS = [
+  EndUserAgreementComponent,
+  ThemedEndUserAgreementComponent,
+  EndUserAgreementContentComponent,
+  PrivacyComponent,
+  PrivacyContentComponent,
+  ThemedPrivacyComponent
+];
 
 @NgModule({
   imports: [
@@ -14,10 +25,10 @@ import { PrivacyContentComponent } from './privacy/privacy-content/privacy-conte
     InfoRoutingModule
   ],
   declarations: [
-    EndUserAgreementComponent,
-    EndUserAgreementContentComponent,
-    PrivacyComponent,
-    PrivacyContentComponent
+    ...DECLARATIONS
+  ],
+  exports: [
+    ...DECLARATIONS
   ]
 })
 export class InfoModule {
diff --git a/src/app/info/privacy/themed-privacy.component.ts b/src/app/info/privacy/themed-privacy.component.ts
new file mode 100644
index 0000000000..5aed8d38af
--- /dev/null
+++ b/src/app/info/privacy/themed-privacy.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { PrivacyComponent } from './privacy.component';
+
+@Component({
+  selector: 'ds-themed-privacy',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class ThemedPrivacyComponent extends ThemedComponent<PrivacyComponent> {
+  protected getComponentName(): string {
+    return 'PrivacyComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/info/privacy/privacy.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./privacy.component`);
+  }
+
+}
diff --git a/src/app/pagenotfound/themed-pagenotfound.component.ts b/src/app/pagenotfound/themed-pagenotfound.component.ts
new file mode 100644
index 0000000000..68b06e2ac0
--- /dev/null
+++ b/src/app/pagenotfound/themed-pagenotfound.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { PageNotFoundComponent } from './pagenotfound.component';
+
+@Component({
+  selector: 'ds-themed-search-page',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+/**
+ * This component represents the whole search page
+ * It renders search results depending on the current search options
+ */
+export class ThemedPageNotFoundComponent extends ThemedComponent<PageNotFoundComponent> {
+
+  protected getComponentName(): string {
+    return 'PageNotFoundComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/pagenotfound/pagenotfound.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./pagenotfound.component`);
+  }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 1065d82833..406c7f92fc 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -232,6 +232,7 @@ import { ConfigurationSearchPageComponent } from '../+search-page/configuration-
 import { LinkMenuItemComponent } from './menu/menu-item/link-menu-item.component';
 import { OnClickMenuItemComponent } from './menu/menu-item/onclick-menu-item.component';
 import { TextMenuItemComponent } from './menu/menu-item/text-menu-item.component';
+import { ThemedConfigurationSearchPageComponent } from '../+search-page/themed-configuration-search-page.component';
 
 /**
  * Declaration needed to make sure all decorator functions are called in time
@@ -516,7 +517,8 @@ const ENTRY_COMPONENTS = [
 ];
 
 const SHARED_SEARCH_PAGE_COMPONENTS = [
-  ConfigurationSearchPageComponent
+  ConfigurationSearchPageComponent,
+  ThemedConfigurationSearchPageComponent
 ];
 
 const SHARED_ITEM_PAGE_COMPONENTS = [
diff --git a/src/app/statistics-page/collection-statistics-page/themed-collection-statistics-page.component.ts b/src/app/statistics-page/collection-statistics-page/themed-collection-statistics-page.component.ts
new file mode 100644
index 0000000000..75cf60437f
--- /dev/null
+++ b/src/app/statistics-page/collection-statistics-page/themed-collection-statistics-page.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { CollectionStatisticsPageComponent } from './collection-statistics-page.component';
+
+@Component({
+  selector: 'ds-themed-collection-statistics-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class ThemedCollectionStatisticsPageComponent extends ThemedComponent<CollectionStatisticsPageComponent> {
+  protected getComponentName(): string {
+    return 'CollectionStatisticsPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/statistics-page/collection-statistics-page/collection-statistics-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./collection-statistics-page.component`);
+  }
+
+}
diff --git a/src/app/statistics-page/community-statistics-page/themed-community-statistics-page.component.ts b/src/app/statistics-page/community-statistics-page/themed-community-statistics-page.component.ts
new file mode 100644
index 0000000000..34dc17e1b3
--- /dev/null
+++ b/src/app/statistics-page/community-statistics-page/themed-community-statistics-page.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { CommunityStatisticsPageComponent } from './community-statistics-page.component';
+
+@Component({
+  selector: 'ds-themed-collection-statistics-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class ThemedCommunityStatisticsPageComponent extends ThemedComponent<CommunityStatisticsPageComponent> {
+  protected getComponentName(): string {
+    return 'CommunityStatisticsPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/statistics-page/community-statistics-page/community-statistics-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./community-statistics-page.component`);
+  }
+
+}
diff --git a/src/app/statistics-page/item-statistics-page/themed-item-statistics-page.component.ts b/src/app/statistics-page/item-statistics-page/themed-item-statistics-page.component.ts
new file mode 100644
index 0000000000..4651269c54
--- /dev/null
+++ b/src/app/statistics-page/item-statistics-page/themed-item-statistics-page.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ItemStatisticsPageComponent } from './item-statistics-page.component';
+
+@Component({
+  selector: 'ds-themed-item-statistics-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class ThemedItemStatisticsPageComponent extends ThemedComponent<ItemStatisticsPageComponent> {
+  protected getComponentName(): string {
+    return 'ItemStatisticsPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/statistics-page/item-statistics-page/item-statistics-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./item-statistics-page.component`);
+  }
+
+}
diff --git a/src/app/statistics-page/site-statistics-page/themed-site-statistics-page.component.ts b/src/app/statistics-page/site-statistics-page/themed-site-statistics-page.component.ts
new file mode 100644
index 0000000000..4238cc788a
--- /dev/null
+++ b/src/app/statistics-page/site-statistics-page/themed-site-statistics-page.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { SiteStatisticsPageComponent } from './site-statistics-page.component';
+
+@Component({
+  selector: 'ds-themed-site-statistics-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class ThemedSiteStatisticsPageComponent extends ThemedComponent<SiteStatisticsPageComponent> {
+  protected getComponentName(): string {
+    return 'SiteStatisticsPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/statistics-page/site-statistics-page/site-statistics-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./site-statistics-page.component`);
+  }
+
+}
diff --git a/src/app/statistics-page/statistics-page-routing.module.ts b/src/app/statistics-page/statistics-page-routing.module.ts
index 44943b94d2..6a133fc9ac 100644
--- a/src/app/statistics-page/statistics-page-routing.module.ts
+++ b/src/app/statistics-page/statistics-page-routing.module.ts
@@ -3,13 +3,13 @@ import { RouterModule } from '@angular/router';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 import { I18nBreadcrumbsService } from '../core/breadcrumbs/i18n-breadcrumbs.service';
 import { StatisticsPageModule } from './statistics-page.module';
-import { SiteStatisticsPageComponent } from './site-statistics-page/site-statistics-page.component';
 import { ItemPageResolver } from '../+item-page/item-page.resolver';
-import { ItemStatisticsPageComponent } from './item-statistics-page/item-statistics-page.component';
 import { CollectionPageResolver } from '../+collection-page/collection-page.resolver';
-import { CollectionStatisticsPageComponent } from './collection-statistics-page/collection-statistics-page.component';
 import { CommunityPageResolver } from '../+community-page/community-page.resolver';
-import { CommunityStatisticsPageComponent } from './community-statistics-page/community-statistics-page.component';
+import { ThemedCollectionStatisticsPageComponent } from './collection-statistics-page/themed-collection-statistics-page.component';
+import { ThemedCommunityStatisticsPageComponent } from './community-statistics-page/themed-community-statistics-page.component';
+import { ThemedItemStatisticsPageComponent } from './item-statistics-page/themed-item-statistics-page.component';
+import { ThemedSiteStatisticsPageComponent } from './site-statistics-page/themed-site-statistics-page.component';
 
 @NgModule({
   imports: [
@@ -27,7 +27,7 @@ import { CommunityStatisticsPageComponent } from './community-statistics-page/co
           children: [
             {
               path: '',
-              component: SiteStatisticsPageComponent,
+              component: ThemedSiteStatisticsPageComponent,
             },
           ]
         },
@@ -41,7 +41,7 @@ import { CommunityStatisticsPageComponent } from './community-statistics-page/co
             title: 'statistics.title',
             breadcrumbKey: 'statistics'
           },
-          component: ItemStatisticsPageComponent,
+          component: ThemedItemStatisticsPageComponent,
         },
         {
           path: `collections/:id`,
@@ -53,7 +53,7 @@ import { CommunityStatisticsPageComponent } from './community-statistics-page/co
             title: 'statistics.title',
             breadcrumbKey: 'statistics'
           },
-          component: CollectionStatisticsPageComponent,
+          component: ThemedCollectionStatisticsPageComponent,
         },
         {
           path: `communities/:id`,
@@ -65,7 +65,7 @@ import { CommunityStatisticsPageComponent } from './community-statistics-page/co
             title: 'statistics.title',
             breadcrumbKey: 'statistics'
           },
-          component: CommunityStatisticsPageComponent,
+          component: ThemedCommunityStatisticsPageComponent,
         },
       ]
     )
@@ -75,6 +75,7 @@ import { CommunityStatisticsPageComponent } from './community-statistics-page/co
     I18nBreadcrumbsService,
     CollectionPageResolver,
     CommunityPageResolver,
+    ItemPageResolver
   ]
 })
 export class StatisticsPageRoutingModule {
diff --git a/src/app/statistics-page/statistics-page.module.ts b/src/app/statistics-page/statistics-page.module.ts
index 9957d4b0d7..863e17fcb5 100644
--- a/src/app/statistics-page/statistics-page.module.ts
+++ b/src/app/statistics-page/statistics-page.module.ts
@@ -10,13 +10,21 @@ import { StatisticsTableComponent } from './statistics-table/statistics-table.co
 import { ItemStatisticsPageComponent } from './item-statistics-page/item-statistics-page.component';
 import { CollectionStatisticsPageComponent } from './collection-statistics-page/collection-statistics-page.component';
 import { CommunityStatisticsPageComponent } from './community-statistics-page/community-statistics-page.component';
+import { ThemedCollectionStatisticsPageComponent } from './collection-statistics-page/themed-collection-statistics-page.component';
+import { ThemedCommunityStatisticsPageComponent } from './community-statistics-page/themed-community-statistics-page.component';
+import { ThemedItemStatisticsPageComponent } from './item-statistics-page/themed-item-statistics-page.component';
+import { ThemedSiteStatisticsPageComponent } from './site-statistics-page/themed-site-statistics-page.component';
 
 const components = [
   StatisticsTableComponent,
   SiteStatisticsPageComponent,
   ItemStatisticsPageComponent,
   CollectionStatisticsPageComponent,
-  CommunityStatisticsPageComponent
+  CommunityStatisticsPageComponent,
+  ThemedCollectionStatisticsPageComponent,
+  ThemedCommunityStatisticsPageComponent,
+  ThemedItemStatisticsPageComponent,
+  ThemedSiteStatisticsPageComponent
 ];
 
 @NgModule({
diff --git a/src/environments/environment.common.ts b/src/environments/environment.common.ts
index c6ae9858e5..bc1f634e19 100644
--- a/src/environments/environment.common.ts
+++ b/src/environments/environment.common.ts
@@ -251,10 +251,10 @@ export const environment: GlobalConfig = {
     //   name: 'custom',
     //   uuid: '0958c910-2037-42a9-81c7-dca80e3892b4'
     // },
-    // {
-    //   // A theme with only a name will match every route
-    //   name: 'custom'
-    // },
+    {
+      // A theme with only a name will match every route
+      name: 'custom'
+    },
 
     {
       // This theme will use the default bootstrap styling for DSpace components
diff --git a/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.html b/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.scss b/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.ts b/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.ts
new file mode 100644
index 0000000000..b772701ad0
--- /dev/null
+++ b/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { BrowseBySwitcherComponent as BaseComponent } from '../../../../../app/+browse-by/+browse-by-switcher/browse-by-switcher.component';
+
+@Component({
+  selector: 'ds-browse-by-switcher',
+  // styleUrls: ['./browse-by-switcher.component.scss'],
+  // templateUrl: './browse-by-switcher.component.html'
+  templateUrl: '../../../../../app/+browse-by/+browse-by-switcher/browse-by-switcher.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class BrowseBySwitcherComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/+collection-page/collection-page.component.html b/src/themes/custom/app/+collection-page/collection-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+collection-page/collection-page.component.scss b/src/themes/custom/app/+collection-page/collection-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+collection-page/collection-page.component.ts b/src/themes/custom/app/+collection-page/collection-page.component.ts
new file mode 100644
index 0000000000..f38a90631f
--- /dev/null
+++ b/src/themes/custom/app/+collection-page/collection-page.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { CollectionPageComponent as BaseComponent} from '../../../../app/+collection-page/collection-page.component';
+
+/**
+ * This component representing the `Forbidden` DSpace page.
+ */
+@Component({
+  selector: 'ds-collection-page',
+  // templateUrl: './collection-page.component.html',
+  templateUrl: '../../../../app/+collection-page/collection-page.component.html',
+  // styleUrls: ['./collection-page.component.scss']
+  styleUrls: ['../../../../app/+collection-page/collection-page.component.scss']
+})
+/**
+ * Component to render the news section on the home page
+ */
+export class CollectionPageComponent extends BaseComponent {}
diff --git a/src/themes/custom/app/+community-page/community-page.component.html b/src/themes/custom/app/+community-page/community-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+community-page/community-page.component.scss b/src/themes/custom/app/+community-page/community-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+community-page/community-page.component.ts b/src/themes/custom/app/+community-page/community-page.component.ts
new file mode 100644
index 0000000000..2df33a0b9e
--- /dev/null
+++ b/src/themes/custom/app/+community-page/community-page.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { CommunityPageComponent as BaseComponent} from '../../../../app/+community-page/community-page.component';
+
+/**
+ * This component representing the `Forbidden` DSpace page.
+ */
+@Component({
+  selector: 'ds-community-page',
+  // templateUrl: './community-page.component.html',
+  templateUrl: '../../../../app/+community-page/community-page.component.html',
+  // styleUrls: ['./community-page.component.scss']
+  styleUrls: ['../../../../app/+community-page/community-page.component.scss']
+})
+/**
+ * Component to render the news section on the home page
+ */
+export class CommunityPageComponent extends BaseComponent {}
diff --git a/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.html b/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.scss b/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.ts b/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.ts
new file mode 100644
index 0000000000..f41553ff00
--- /dev/null
+++ b/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { ObjectNotFoundComponent as BaseComponent } from '../../../../../app/+lookup-by-id/objectnotfound/objectnotfound.component';
+
+@Component({
+  selector: 'ds-objnotfound',
+  // styleUrls: ['./objectnotfound.component.scss'],
+  styleUrls: ['../../../../../app/+lookup-by-id/objectnotfound/objectnotfound.component.scss'],
+  // templateUrl: './objectnotfound.component.html',
+  templateUrl: '../../../../../app/+lookup-by-id/objectnotfound/objectnotfound.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class ObjectNotFoundComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/+search-page/configuration-search-page.component.html b/src/themes/custom/app/+search-page/configuration-search-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+search-page/configuration-search-page.component.scss b/src/themes/custom/app/+search-page/configuration-search-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+search-page/configuration-search-page.component.ts b/src/themes/custom/app/+search-page/configuration-search-page.component.ts
new file mode 100644
index 0000000000..96c3915d39
--- /dev/null
+++ b/src/themes/custom/app/+search-page/configuration-search-page.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { SearchPageComponent as BaseComponent } from '../../../../app/+search-page/search-page.component';
+
+@Component({
+  selector: 'ds-configuration-search-page',
+  // styleUrls: ['./configuration-search-page.component.html'],
+  // templateUrl: './configuration-search-page.component.html'
+  templateUrl: '../../../../app/+search-page/search.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class ConfigurationSearchPageComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/+search-page/search-page.component.html b/src/themes/custom/app/+search-page/search-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+search-page/search-page.component.scss b/src/themes/custom/app/+search-page/search-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+search-page/search-page.component.ts b/src/themes/custom/app/+search-page/search-page.component.ts
new file mode 100644
index 0000000000..1b7c912260
--- /dev/null
+++ b/src/themes/custom/app/+search-page/search-page.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { SearchPageComponent as BaseComponent } from '../../../../app/+search-page/search-page.component';
+
+@Component({
+  selector: 'ds-search-page',
+  // styleUrls: ['./search-page.component.scss'],
+  // templateUrl: './search-page.component.html'
+  templateUrl: '../../../../app/+search-page/search-page.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class SearchPageComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/community-list-page/community-list-page.component.html b/src/themes/custom/app/community-list-page/community-list-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/community-list-page/community-list-page.component.scss b/src/themes/custom/app/community-list-page/community-list-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/community-list-page/community-list-page.component.ts b/src/themes/custom/app/community-list-page/community-list-page.component.ts
new file mode 100644
index 0000000000..87e8be0a96
--- /dev/null
+++ b/src/themes/custom/app/community-list-page/community-list-page.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { CommunityListPageComponent as BaseComponent } from '../../../../app/community-list-page/community-list-page.component';
+
+@Component({
+  selector: 'ds-community-list-page',
+  // styleUrls: ['./community-list-page.component.scss'],
+  // templateUrl: './community-list-page.component.html'
+  templateUrl: '../../../../app/community-list-page/community-list-page.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class CommunityListPageComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/forbidden/forbidden.component.html b/src/themes/custom/app/forbidden/forbidden.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/forbidden/forbidden.component.scss b/src/themes/custom/app/forbidden/forbidden.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/forbidden/forbidden.component.ts b/src/themes/custom/app/forbidden/forbidden.component.ts
new file mode 100644
index 0000000000..e374d67508
--- /dev/null
+++ b/src/themes/custom/app/forbidden/forbidden.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { ForbiddenComponent as BaseComponent } from '../../../../app/forbidden/forbidden.component';
+
+/**
+ * This component representing the `Forbidden` DSpace page.
+ */
+@Component({
+  selector: 'ds-forbidden',
+  // templateUrl: './forbidden.component.html',
+  templateUrl: '../../../../app/forbidden/forbidden.component.html',
+  // styleUrls: ['./forbidden.component.scss']
+  styleUrls: ['../../../../app/forbidden/forbidden.component.scss']
+})
+/**
+ * Component to render the news section on the home page
+ */
+export class ForbiddenComponent extends BaseComponent {}
diff --git a/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.html b/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.scss b/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.ts b/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.ts
new file mode 100644
index 0000000000..7e4f490023
--- /dev/null
+++ b/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { EndUserAgreementComponent as BaseComponent } from '../../../../../app/info/end-user-agreement/end-user-agreement.component';
+
+@Component({
+  selector: 'ds-home-news',
+  // styleUrls: ['./end-user-agreement.component.scss'],
+  styleUrls: ['../../../../../app/info/end-user-agreement/end-user-agreement.component.scss'],
+  // templateUrl: './end-user-agreement.component.html'
+  templateUrl: '../../../../../app/info/end-user-agreement/end-user-agreement.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class EndUserAgreementComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/info/privacy/privacy.component.html b/src/themes/custom/app/info/privacy/privacy.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/info/privacy/privacy.component.scss b/src/themes/custom/app/info/privacy/privacy.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/info/privacy/privacy.component.ts b/src/themes/custom/app/info/privacy/privacy.component.ts
new file mode 100644
index 0000000000..fb7f193f4e
--- /dev/null
+++ b/src/themes/custom/app/info/privacy/privacy.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { PrivacyComponent as BaseComponent } from '../../../../../app/info/privacy/privacy.component';
+
+@Component({
+  selector: 'ds-privacy',
+  // styleUrls: ['./privacy.component.scss'],
+  styleUrls: ['../../../../../app/info/privacy/privacy.component.scss'],
+  // templateUrl: './privacy.component.html'
+  templateUrl: '../../../../../app/info/privacy/privacy.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class PrivacyComponent extends BaseComponent {}
diff --git a/src/themes/custom/app/pagenotfound/pagenotfound.component.html b/src/themes/custom/app/pagenotfound/pagenotfound.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/pagenotfound/pagenotfound.component.scss b/src/themes/custom/app/pagenotfound/pagenotfound.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/pagenotfound/pagenotfound.component.ts b/src/themes/custom/app/pagenotfound/pagenotfound.component.ts
new file mode 100644
index 0000000000..565b648172
--- /dev/null
+++ b/src/themes/custom/app/pagenotfound/pagenotfound.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { PageNotFoundComponent as BaseComponent } from '../../../../app/pagenotfound/pagenotfound.component';
+
+@Component({
+  selector: 'ds-pagenotfound',
+  // styleUrls: ['./pagenotfound.component.scss'],
+  styleUrls: ['../../../../app/pagenotfound/pagenotfound.component.scss'],
+  // templateUrl: './pagenotfound.component.html'
+  templateUrl: '../../../../app/pagenotfound/pagenotfound.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class PageNotFoundComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.html b/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.scss b/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.ts b/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.ts
new file mode 100644
index 0000000000..0d637fa44d
--- /dev/null
+++ b/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { CollectionStatisticsPageComponent as BaseComponent } from '../../../../../app/statistics-page/collection-statistics-page/collection-statistics-page.component';
+
+@Component({
+  selector: 'ds-collection-statistics-page',
+  // styleUrls: ['./collection-statistics-page.component.scss'],
+  styleUrls: ['../../../../../app/statistics-page/collection-statistics-page/collection-statistics-page.component.scss'],
+  // templateUrl: './collection-statistics-page.component.html',
+  templateUrl: '../../../../../app/statistics-page/statistics-page/statistics-page.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class CollectionStatisticsPageComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.html b/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.scss b/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.ts b/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.ts
new file mode 100644
index 0000000000..7094d944c9
--- /dev/null
+++ b/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { CommunityStatisticsPageComponent as BaseComponent } from '../../../../../app/statistics-page/community-statistics-page/community-statistics-page.component';
+
+@Component({
+  selector: 'ds-collection-statistics-page',
+  // styleUrls: ['./community-statistics-page.component.scss'],
+  styleUrls: ['../../../../../app/statistics-page/community-statistics-page/community-statistics-page.component.scss'],
+  // templateUrl: './community-statistics-page.component.html',
+  templateUrl: '../../../../../app/statistics-page/statistics-page/statistics-page.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class CommunityStatisticsPageComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.html b/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.scss b/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.ts b/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.ts
new file mode 100644
index 0000000000..f436d7ea9f
--- /dev/null
+++ b/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { ItemStatisticsPageComponent as BaseComponent } from '../../../../../app/statistics-page/item-statistics-page/item-statistics-page.component';
+
+@Component({
+  selector: 'ds-item-statistics-page',
+  // styleUrls: ['./item-statistics-page.component.scss'],
+  styleUrls: ['../../../../../app/statistics-page/item-statistics-page/item-statistics-page.component.scss'],
+  // templateUrl: './item-statistics-page.component.html',
+  templateUrl: '../../../../../app/statistics-page/statistics-page/statistics-page.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class ItemStatisticsPageComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.html b/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.scss b/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.ts b/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.ts
new file mode 100644
index 0000000000..3634a55ada
--- /dev/null
+++ b/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { SiteStatisticsPageComponent as BaseComponent } from '../../../../../app/statistics-page/site-statistics-page/site-statistics-page.component';
+
+@Component({
+  selector: 'ds-site-statistics-page',
+  // styleUrls: ['./site-statistics-page.component.scss'],
+  styleUrls: ['../../../../../app/statistics-page/site-statistics-page/site-statistics-page.component.scss'],
+  // templateUrl: './site-statistics-page.component.html',
+  templateUrl: '../../../../../app/statistics-page/statistics-page/statistics-page.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class SiteStatisticsPageComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index 1f451df1bc..18a048275a 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -37,12 +37,47 @@ import { AppModule } from '../../app/app.module';
 import { PublicationComponent } from './app/+item-page/simple/item-types/publication/publication.component';
 import { ItemPageModule } from '../../app/+item-page/item-page.module';
 import { RouterModule } from '@angular/router';
+import { BrowseBySwitcherComponent } from './app/+browse-by/+browse-by-switcher/browse-by-switcher.component';
+import { CommunityListPageComponent } from './app/community-list-page/community-list-page.component';
+import { CommunityListPageModule } from '../../app/community-list-page/community-list-page.module';
+import { SearchPageComponent } from './app/+search-page/search-page.component';
+import { InfoModule } from '../../app/info/info.module';
+import { EndUserAgreementComponent } from './app/info/end-user-agreement/end-user-agreement.component';
+import { PageNotFoundComponent } from './app/pagenotfound/pagenotfound.component';
+import { ObjectNotFoundComponent } from './app/+lookup-by-id/objectnotfound/objectnotfound.component';
+import { ForbiddenComponent } from './app/forbidden/forbidden.component';
+import { PrivacyComponent } from './app/info/privacy/privacy.component';
+import { CollectionStatisticsPageComponent } from './app/statistics-page/collection-statistics-page/collection-statistics-page.component';
+import { CommunityStatisticsPageComponent } from './app/statistics-page/community-statistics-page/community-statistics-page.component';
+import { StatisticsPageModule } from '../../app/statistics-page/statistics-page.module';
+import { ItemStatisticsPageComponent } from './app/statistics-page/item-statistics-page/item-statistics-page.component';
+import { SiteStatisticsPageComponent } from './app/statistics-page/site-statistics-page/site-statistics-page.component';
+import { CommunityPageComponent } from './app/+community-page/community-page.component';
+import { CollectionPageComponent } from './app/+collection-page/collection-page.component';
+import { CommunityPageModule } from '../../app/+community-page/community-page.module';
+import { CollectionPageModule } from '../../app/+collection-page/collection-page.module';
+import { ConfigurationSearchPageComponent } from './app/+search-page/configuration-search-page.component';
 
 const DECLARATIONS = [
   HomePageComponent,
   HomeNewsComponent,
   RootComponent,
-  PublicationComponent
+  PublicationComponent,
+  BrowseBySwitcherComponent,
+  CommunityListPageComponent,
+  SearchPageComponent,
+  ConfigurationSearchPageComponent,
+  EndUserAgreementComponent,
+  PageNotFoundComponent,
+  ObjectNotFoundComponent,
+  ForbiddenComponent,
+  PrivacyComponent,
+  CollectionStatisticsPageComponent,
+  CommunityStatisticsPageComponent,
+  ItemStatisticsPageComponent,
+  SiteStatisticsPageComponent,
+  CommunityPageComponent,
+  CollectionPageComponent
 ];
 
 @NgModule({
@@ -55,8 +90,11 @@ const DECLARATIONS = [
     BitstreamFormatsModule,
     BrowseByModule,
     CollectionFormModule,
+    CollectionPageModule,
     CommonModule,
     CommunityFormModule,
+    CommunityListPageModule,
+    CommunityPageModule,
     CoreModule,
     DragDropModule,
     ItemPageModule,
@@ -65,6 +103,7 @@ const DECLARATIONS = [
     HomePageModule,
     HttpClientModule,
     IdlePreloadModule,
+    InfoModule,
     JournalEntitiesModule,
     MenuModule,
     MyDspaceSearchModule,
@@ -78,6 +117,7 @@ const DECLARATIONS = [
     SearchPageModule,
     SharedModule,
     StatisticsModule,
+    StatisticsPageModule,
     StoreModule,
     StoreRouterConnectingModule,
     TranslateModule,

From 2a354c87e14194d23c2e04a915be4a51f9d2176c Mon Sep 17 00:00:00 2001
From: Art Lowel <art@atmire.com>
Date: Wed, 3 Mar 2021 15:19:55 +0100
Subject: [PATCH 02/12] fix issue with themed ConfigurationSearchPageComponent

---
 .../configuration-search-page.component.ts    | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/themes/custom/app/+search-page/configuration-search-page.component.ts b/src/themes/custom/app/+search-page/configuration-search-page.component.ts
index 96c3915d39..88e9746b71 100644
--- a/src/themes/custom/app/+search-page/configuration-search-page.component.ts
+++ b/src/themes/custom/app/+search-page/configuration-search-page.component.ts
@@ -1,11 +1,23 @@
-import { Component } from '@angular/core';
-import { SearchPageComponent as BaseComponent } from '../../../../app/+search-page/search-page.component';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { pushInOut } from '../../../../app/shared/animations/push';
+import { SEARCH_CONFIG_SERVICE } from '../../../../app/+my-dspace-page/my-dspace-page.component';
+import { SearchConfigurationService } from '../../../../app/core/shared/search/search-configuration.service';
+import { ConfigurationSearchPageComponent as BaseComponent } from '../../../../app/+search-page/configuration-search-page.component';
 
 @Component({
   selector: 'ds-configuration-search-page',
-  // styleUrls: ['./configuration-search-page.component.html'],
+  // styleUrls: ['./configuration-search-page.component.scss'],
+  styleUrls: ['../../../../app/+search-page/search.component.scss'],
   // templateUrl: './configuration-search-page.component.html'
-  templateUrl: '../../../../app/+search-page/search.component.html'
+  templateUrl: '../../../../app/+search-page/search.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [pushInOut],
+  providers: [
+    {
+      provide: SEARCH_CONFIG_SERVICE,
+      useClass: SearchConfigurationService
+    }
+  ]
 })
 
 /**

From 1c4763b409843e17ff10fbab23778d4a64a712f8 Mon Sep 17 00:00:00 2001
From: Yana De Pauw <yana@atmire.com>
Date: Thu, 4 Mar 2021 09:07:58 +0100
Subject: [PATCH 03/12] 77349: Add additional properties and update comment

---
 .../browse-by-switcher.component.ts              |  2 +-
 .../collection-page.component.ts                 | 16 ++++++++++------
 .../+community-page/community-page.component.ts  | 13 +++++++------
 .../objectnotfound/objectnotfound.component.ts   |  7 ++++---
 .../configuration-search-page.component.ts       |  2 +-
 .../app/+search-page/search-page.component.ts    |  3 ++-
 .../community-list-page.component.ts             |  3 ++-
 .../custom/app/forbidden/forbidden.component.ts  |  6 ++----
 .../end-user-agreement.component.ts              |  2 +-
 .../custom/app/info/privacy/privacy.component.ts |  2 +-
 .../app/pagenotfound/pagenotfound.component.ts   |  7 ++++---
 .../collection-statistics-page.component.ts      |  2 +-
 .../community-statistics-page.component.ts       |  2 +-
 .../item-statistics-page.component.ts            |  2 +-
 .../site-statistics-page.component.ts            |  2 +-
 15 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.ts b/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.ts
index b772701ad0..58fee73779 100644
--- a/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.ts
+++ b/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.ts
@@ -9,7 +9,7 @@ import { BrowseBySwitcherComponent as BaseComponent } from '../../../../../app/+
 })
 
 /**
- * Component to render the news section on the home page
+ * Component for determining what Browse-By component to use depending on the metadata (browse ID) provided
  */
 export class BrowseBySwitcherComponent extends BaseComponent {}
 
diff --git a/src/themes/custom/app/+collection-page/collection-page.component.ts b/src/themes/custom/app/+collection-page/collection-page.component.ts
index f38a90631f..9d1d5f03f9 100644
--- a/src/themes/custom/app/+collection-page/collection-page.component.ts
+++ b/src/themes/custom/app/+collection-page/collection-page.component.ts
@@ -1,17 +1,21 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { CollectionPageComponent as BaseComponent} from '../../../../app/+collection-page/collection-page.component';
+import { fadeIn, fadeInOut } from '../../../../app/shared/animations/fade';
+
 
-/**
- * This component representing the `Forbidden` DSpace page.
- */
 @Component({
   selector: 'ds-collection-page',
   // templateUrl: './collection-page.component.html',
   templateUrl: '../../../../app/+collection-page/collection-page.component.html',
   // styleUrls: ['./collection-page.component.scss']
-  styleUrls: ['../../../../app/+collection-page/collection-page.component.scss']
+  styleUrls: ['../../../../app/+collection-page/collection-page.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    fadeIn,
+    fadeInOut
+  ]
 })
 /**
- * Component to render the news section on the home page
+ * This component represents a detail page for a single collection
  */
 export class CollectionPageComponent extends BaseComponent {}
diff --git a/src/themes/custom/app/+community-page/community-page.component.ts b/src/themes/custom/app/+community-page/community-page.component.ts
index 2df33a0b9e..54e9352eb8 100644
--- a/src/themes/custom/app/+community-page/community-page.component.ts
+++ b/src/themes/custom/app/+community-page/community-page.component.ts
@@ -1,17 +1,18 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { CommunityPageComponent as BaseComponent} from '../../../../app/+community-page/community-page.component';
+import { fadeInOut } from '../../../../app/shared/animations/fade';
+
 
-/**
- * This component representing the `Forbidden` DSpace page.
- */
 @Component({
   selector: 'ds-community-page',
   // templateUrl: './community-page.component.html',
   templateUrl: '../../../../app/+community-page/community-page.component.html',
   // styleUrls: ['./community-page.component.scss']
-  styleUrls: ['../../../../app/+community-page/community-page.component.scss']
+  styleUrls: ['../../../../app/+community-page/community-page.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [fadeInOut]
 })
 /**
- * Component to render the news section on the home page
+ * This component represents a detail page for a single community
  */
 export class CommunityPageComponent extends BaseComponent {}
diff --git a/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.ts b/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.ts
index f41553ff00..2c10ddde53 100644
--- a/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.ts
+++ b/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ObjectNotFoundComponent as BaseComponent } from '../../../../../app/+lookup-by-id/objectnotfound/objectnotfound.component';
 
 @Component({
@@ -6,11 +6,12 @@ import { ObjectNotFoundComponent as BaseComponent } from '../../../../../app/+lo
   // styleUrls: ['./objectnotfound.component.scss'],
   styleUrls: ['../../../../../app/+lookup-by-id/objectnotfound/objectnotfound.component.scss'],
   // templateUrl: './objectnotfound.component.html',
-  templateUrl: '../../../../../app/+lookup-by-id/objectnotfound/objectnotfound.component.html'
+  templateUrl: '../../../../../app/+lookup-by-id/objectnotfound/objectnotfound.component.html',
+  changeDetection: ChangeDetectionStrategy.Default
 })
 
 /**
- * Component to render the news section on the home page
+ * This component representing the `PageNotFound` DSpace page.
  */
 export class ObjectNotFoundComponent extends BaseComponent {}
 
diff --git a/src/themes/custom/app/+search-page/configuration-search-page.component.ts b/src/themes/custom/app/+search-page/configuration-search-page.component.ts
index 88e9746b71..42e8dbf2d0 100644
--- a/src/themes/custom/app/+search-page/configuration-search-page.component.ts
+++ b/src/themes/custom/app/+search-page/configuration-search-page.component.ts
@@ -21,7 +21,7 @@ import { ConfigurationSearchPageComponent as BaseComponent } from '../../../../a
 })
 
 /**
- * Component to render the news section on the home page
+ * This component renders a search page using a configuration as input.
  */
 export class ConfigurationSearchPageComponent extends BaseComponent {}
 
diff --git a/src/themes/custom/app/+search-page/search-page.component.ts b/src/themes/custom/app/+search-page/search-page.component.ts
index 1b7c912260..c9bcd65349 100644
--- a/src/themes/custom/app/+search-page/search-page.component.ts
+++ b/src/themes/custom/app/+search-page/search-page.component.ts
@@ -9,7 +9,8 @@ import { SearchPageComponent as BaseComponent } from '../../../../app/+search-pa
 })
 
 /**
- * Component to render the news section on the home page
+ * This component represents the whole search page
+ * It renders search results depending on the current search options
  */
 export class SearchPageComponent extends BaseComponent {}
 
diff --git a/src/themes/custom/app/community-list-page/community-list-page.component.ts b/src/themes/custom/app/community-list-page/community-list-page.component.ts
index 87e8be0a96..1dbfa15b40 100644
--- a/src/themes/custom/app/community-list-page/community-list-page.component.ts
+++ b/src/themes/custom/app/community-list-page/community-list-page.component.ts
@@ -9,7 +9,8 @@ import { CommunityListPageComponent as BaseComponent } from '../../../../app/com
 })
 
 /**
- * Component to render the news section on the home page
+ * Page with title and the community list tree, as described in community-list.component;
+ * navigated to with community-list.page.routing.module
  */
 export class CommunityListPageComponent extends BaseComponent {}
 
diff --git a/src/themes/custom/app/forbidden/forbidden.component.ts b/src/themes/custom/app/forbidden/forbidden.component.ts
index e374d67508..915cf651cb 100644
--- a/src/themes/custom/app/forbidden/forbidden.component.ts
+++ b/src/themes/custom/app/forbidden/forbidden.component.ts
@@ -1,9 +1,7 @@
 import { Component } from '@angular/core';
 import { ForbiddenComponent as BaseComponent } from '../../../../app/forbidden/forbidden.component';
 
-/**
- * This component representing the `Forbidden` DSpace page.
- */
+
 @Component({
   selector: 'ds-forbidden',
   // templateUrl: './forbidden.component.html',
@@ -12,6 +10,6 @@ import { ForbiddenComponent as BaseComponent } from '../../../../app/forbidden/f
   styleUrls: ['../../../../app/forbidden/forbidden.component.scss']
 })
 /**
- * Component to render the news section on the home page
+ * This component representing the `Forbidden` DSpace page.
  */
 export class ForbiddenComponent extends BaseComponent {}
diff --git a/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.ts b/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.ts
index 7e4f490023..e3e5ac8d19 100644
--- a/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.ts
+++ b/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.ts
@@ -10,7 +10,7 @@ import { EndUserAgreementComponent as BaseComponent } from '../../../../../app/i
 })
 
 /**
- * Component to render the news section on the home page
+ * Component displaying the End User Agreement and an option to accept it
  */
 export class EndUserAgreementComponent extends BaseComponent {}
 
diff --git a/src/themes/custom/app/info/privacy/privacy.component.ts b/src/themes/custom/app/info/privacy/privacy.component.ts
index fb7f193f4e..f261c64c14 100644
--- a/src/themes/custom/app/info/privacy/privacy.component.ts
+++ b/src/themes/custom/app/info/privacy/privacy.component.ts
@@ -10,6 +10,6 @@ import { PrivacyComponent as BaseComponent } from '../../../../../app/info/priva
 })
 
 /**
- * Component to render the news section on the home page
+ * Component displaying the Privacy Statement
  */
 export class PrivacyComponent extends BaseComponent {}
diff --git a/src/themes/custom/app/pagenotfound/pagenotfound.component.ts b/src/themes/custom/app/pagenotfound/pagenotfound.component.ts
index 565b648172..71dc7332d4 100644
--- a/src/themes/custom/app/pagenotfound/pagenotfound.component.ts
+++ b/src/themes/custom/app/pagenotfound/pagenotfound.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { PageNotFoundComponent as BaseComponent } from '../../../../app/pagenotfound/pagenotfound.component';
 
 @Component({
@@ -6,11 +6,12 @@ import { PageNotFoundComponent as BaseComponent } from '../../../../app/pagenotf
   // styleUrls: ['./pagenotfound.component.scss'],
   styleUrls: ['../../../../app/pagenotfound/pagenotfound.component.scss'],
   // templateUrl: './pagenotfound.component.html'
-  templateUrl: '../../../../app/pagenotfound/pagenotfound.component.html'
+  templateUrl: '../../../../app/pagenotfound/pagenotfound.component.html',
+  changeDetection: ChangeDetectionStrategy.Default
 })
 
 /**
- * Component to render the news section on the home page
+ * This component representing the `PageNotFound` DSpace page.
  */
 export class PageNotFoundComponent extends BaseComponent {}
 
diff --git a/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.ts b/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.ts
index 0d637fa44d..f3fa9d3e42 100644
--- a/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.ts
+++ b/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.ts
@@ -10,7 +10,7 @@ import { CollectionStatisticsPageComponent as BaseComponent } from '../../../../
 })
 
 /**
- * Component to render the news section on the home page
+ * Component representing the statistics page for a collection.
  */
 export class CollectionStatisticsPageComponent extends BaseComponent {}
 
diff --git a/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.ts b/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.ts
index 7094d944c9..76aac6aa15 100644
--- a/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.ts
+++ b/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.ts
@@ -10,7 +10,7 @@ import { CommunityStatisticsPageComponent as BaseComponent } from '../../../../.
 })
 
 /**
- * Component to render the news section on the home page
+ * Component representing the statistics page for a community.
  */
 export class CommunityStatisticsPageComponent extends BaseComponent {}
 
diff --git a/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.ts b/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.ts
index f436d7ea9f..f2adbc9c21 100644
--- a/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.ts
+++ b/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.ts
@@ -10,7 +10,7 @@ import { ItemStatisticsPageComponent as BaseComponent } from '../../../../../app
 })
 
 /**
- * Component to render the news section on the home page
+ * Component representing the statistics page for an item.
  */
 export class ItemStatisticsPageComponent extends BaseComponent {}
 
diff --git a/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.ts b/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.ts
index 3634a55ada..30dc6502ea 100644
--- a/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.ts
+++ b/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.ts
@@ -10,7 +10,7 @@ import { SiteStatisticsPageComponent as BaseComponent } from '../../../../../app
 })
 
 /**
- * Component to render the news section on the home page
+ * Component representing the site-wide statistics page.
  */
 export class SiteStatisticsPageComponent extends BaseComponent {}
 

From cddbdbfed7a4b875201bc29b97e60af90c78a207 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Tue, 2 Mar 2021 18:22:02 +0100
Subject: [PATCH 04/12] 77350: wip

---
 .../full/full-item-page.component.ts          |  3 +--
 .../full/themed-full-item-page.component.ts   | 25 +++++++++++++++++
 .../+item-page/item-page-routing.module.ts    | 10 +++----
 src/app/+item-page/item-page.module.ts        |  4 +++
 .../simple/themed-item-page.component.ts      | 27 +++++++++++++++++++
 .../+login-page/login-page-routing.module.ts  |  5 ++--
 src/app/+login-page/login-page.module.ts      |  4 ++-
 .../themed-login-page.component.ts            | 25 +++++++++++++++++
 .../logout-page-routing.module.ts             |  5 ++--
 src/app/+logout-page/logout-page.module.ts    |  4 ++-
 .../themed-logout-page.component.ts           | 25 +++++++++++++++++
 .../themed-forgot-email.component.ts          | 26 ++++++++++++++++++
 .../themed-forgot-password-form.component.ts  | 25 +++++++++++++++++
 .../forgot-password-routing.module.ts         | 10 +++----
 .../forgot-password/forgot-password.module.ts |  6 ++++-
 .../profile-page-routing.module.ts            |  4 +--
 src/app/profile-page/profile-page.module.ts   |  2 ++
 .../themed-profile-page.component.ts          | 25 +++++++++++++++++
 .../themed-create-profile.component.ts        | 25 +++++++++++++++++
 .../register-page-routing.module.ts           |  3 ++-
 src/app/register-page/register-page.module.ts |  4 ++-
 21 files changed, 242 insertions(+), 25 deletions(-)
 create mode 100644 src/app/+item-page/full/themed-full-item-page.component.ts
 create mode 100644 src/app/+item-page/simple/themed-item-page.component.ts
 create mode 100644 src/app/+login-page/themed-login-page.component.ts
 create mode 100644 src/app/+logout-page/themed-logout-page.component.ts
 create mode 100644 src/app/forgot-password/forgot-password-email/themed-forgot-email.component.ts
 create mode 100644 src/app/forgot-password/forgot-password-form/themed-forgot-password-form.component.ts
 create mode 100644 src/app/profile-page/themed-profile-page.component.ts
 create mode 100644 src/app/register-page/create-profile/themed-create-profile.component.ts

diff --git a/src/app/+item-page/full/full-item-page.component.ts b/src/app/+item-page/full/full-item-page.component.ts
index 741f1e76a7..aea350e58e 100644
--- a/src/app/+item-page/full/full-item-page.component.ts
+++ b/src/app/+item-page/full/full-item-page.component.ts
@@ -18,9 +18,8 @@ import { hasValue } from '../../shared/empty.util';
 import { AuthService } from '../../core/auth/auth.service';
 
 /**
- * This component renders a simple item page.
+ * This component renders a full item page.
  * The route parameter 'id' is used to request the item it represents.
- * All fields of the item that should be displayed, are defined in its template.
  */
 
 @Component({
diff --git a/src/app/+item-page/full/themed-full-item-page.component.ts b/src/app/+item-page/full/themed-full-item-page.component.ts
new file mode 100644
index 0000000000..3d89f489ff
--- /dev/null
+++ b/src/app/+item-page/full/themed-full-item-page.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { FullItemPageComponent } from './full-item-page.component';
+
+/**
+ * Themed wrapper for FullItemPageComponent
+ */
+@Component({
+  selector: 'ds-themed-full-item-page',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html',
+})
+export class ThemedFullItemPageComponent extends ThemedComponent<FullItemPageComponent> {
+  protected getComponentName(): string {
+    return 'FullItemPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+item-page/full/full-item-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./full-item-page.component`);
+  }
+}
diff --git a/src/app/+item-page/item-page-routing.module.ts b/src/app/+item-page/item-page-routing.module.ts
index b04a783b2f..b259f57dcb 100644
--- a/src/app/+item-page/item-page-routing.module.ts
+++ b/src/app/+item-page/item-page-routing.module.ts
@@ -1,7 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-
-import { ItemPageComponent } from './simple/item-page.component';
 import { FullItemPageComponent } from './full/full-item-page.component';
 import { ItemPageResolver } from './item-page.resolver';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
@@ -9,10 +7,12 @@ import { ItemBreadcrumbResolver } from '../core/breadcrumbs/item-breadcrumb.reso
 import { DSOBreadcrumbsService } from '../core/breadcrumbs/dso-breadcrumbs.service';
 import { LinkService } from '../core/cache/builders/link.service';
 import { UploadBitstreamComponent } from './bitstreams/upload/upload-bitstream.component';
-import { UPLOAD_BITSTREAM_PATH, ITEM_EDIT_PATH } from './item-page-routing-paths';
+import { ITEM_EDIT_PATH, UPLOAD_BITSTREAM_PATH } from './item-page-routing-paths';
 import { ItemPageAdministratorGuard } from './item-page-administrator.guard';
 import { MenuItemType } from '../shared/menu/initial-menus-state';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
+import { ThemedItemPageComponent } from './simple/themed-item-page.component';
+import { ThemedFullItemPageComponent } from './full/themed-full-item-page.component';
 
 @NgModule({
   imports: [
@@ -27,12 +27,12 @@ import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
         children: [
           {
             path: '',
-            component: ItemPageComponent,
+            component: ThemedItemPageComponent,
             pathMatch: 'full',
           },
           {
             path: 'full',
-            component: FullItemPageComponent,
+            component: ThemedFullItemPageComponent,
           },
           {
             path: ITEM_EDIT_PATH,
diff --git a/src/app/+item-page/item-page.module.ts b/src/app/+item-page/item-page.module.ts
index ed8d872b36..af95411cef 100644
--- a/src/app/+item-page/item-page.module.ts
+++ b/src/app/+item-page/item-page.module.ts
@@ -25,6 +25,8 @@ import { AbstractIncrementalListComponent } from './simple/abstract-incremental-
 import { UntypedItemComponent } from './simple/item-types/untyped-item/untyped-item.component';
 import { JournalEntitiesModule } from '../entity-groups/journal-entities/journal-entities.module';
 import { ResearchEntitiesModule } from '../entity-groups/research-entities/research-entities.module';
+import { ThemedItemPageComponent } from './simple/themed-item-page.component';
+import { ThemedFullItemPageComponent } from './full/themed-full-item-page.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -34,7 +36,9 @@ const ENTRY_COMPONENTS = [
 
 const DECLARATIONS = [
   ItemPageComponent,
+  ThemedItemPageComponent,
   FullItemPageComponent,
+  ThemedFullItemPageComponent,
   MetadataUriValuesComponent,
   ItemPageAuthorFieldComponent,
   ItemPageDateFieldComponent,
diff --git a/src/app/+item-page/simple/themed-item-page.component.ts b/src/app/+item-page/simple/themed-item-page.component.ts
new file mode 100644
index 0000000000..3d04f04acd
--- /dev/null
+++ b/src/app/+item-page/simple/themed-item-page.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ItemPageComponent } from './item-page.component';
+
+/**
+ * Themed wrapper for ItemPageComponent
+ */
+@Component({
+  selector: 'ds-themed-item-page',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html',
+})
+
+export class ThemedItemPageComponent extends ThemedComponent<ItemPageComponent> {
+  protected getComponentName(): string {
+    return 'ItemPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/+item-page/simple/item-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./item-page.component`);
+  }
+
+}
diff --git a/src/app/+login-page/login-page-routing.module.ts b/src/app/+login-page/login-page-routing.module.ts
index 9fa4a9e5ad..3a48852625 100644
--- a/src/app/+login-page/login-page-routing.module.ts
+++ b/src/app/+login-page/login-page-routing.module.ts
@@ -1,14 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-
-import { LoginPageComponent } from './login-page.component';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 import { I18nBreadcrumbsService } from '../core/breadcrumbs/i18n-breadcrumbs.service';
+import { ThemedLoginPageComponent } from './themed-login-page.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
-      { path: '', pathMatch: 'full', component: LoginPageComponent, resolve: { breadcrumb: I18nBreadcrumbResolver }, data: { breadcrumbKey: 'login', title: 'login.title' } }
+      { path: '', pathMatch: 'full', component: ThemedLoginPageComponent, resolve: { breadcrumb: I18nBreadcrumbResolver }, data: { breadcrumbKey: 'login', title: 'login.title' } }
     ])
   ],
   providers: [
diff --git a/src/app/+login-page/login-page.module.ts b/src/app/+login-page/login-page.module.ts
index 4d3f726c40..4facc82df1 100644
--- a/src/app/+login-page/login-page.module.ts
+++ b/src/app/+login-page/login-page.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { LoginPageComponent } from './login-page.component';
 import { LoginPageRoutingModule } from './login-page-routing.module';
+import { ThemedLoginPageComponent } from './themed-login-page.component';
 
 @NgModule({
   imports: [
@@ -11,7 +12,8 @@ import { LoginPageRoutingModule } from './login-page-routing.module';
     SharedModule,
   ],
   declarations: [
-    LoginPageComponent
+    LoginPageComponent,
+    ThemedLoginPageComponent
   ]
 })
 export class LoginPageModule {
diff --git a/src/app/+login-page/themed-login-page.component.ts b/src/app/+login-page/themed-login-page.component.ts
new file mode 100644
index 0000000000..cdf5932802
--- /dev/null
+++ b/src/app/+login-page/themed-login-page.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { LoginPageComponent } from './login-page.component';
+
+/**
+ * Themed wrapper for LoginPageComponent
+ */
+@Component({
+  selector: 'ds-themed-login-page',
+  styleUrls: [],
+  templateUrl: './../shared/theme-support/themed.component.html'
+})
+export class ThemedLoginPageComponent extends ThemedComponent<LoginPageComponent> {
+  protected getComponentName(): string {
+    return 'LoginPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+login-page/login-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./login-page.component`);
+  }
+}
diff --git a/src/app/+logout-page/logout-page-routing.module.ts b/src/app/+logout-page/logout-page-routing.module.ts
index 64894c1f87..a5df0fe580 100644
--- a/src/app/+logout-page/logout-page-routing.module.ts
+++ b/src/app/+logout-page/logout-page-routing.module.ts
@@ -1,8 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-
-import { LogoutPageComponent } from './logout-page.component';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
+import { ThemedLogoutPageComponent } from './themed-logout-page.component';
 
 @NgModule({
   imports: [
@@ -10,7 +9,7 @@ import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
       {
         canActivate: [AuthenticatedGuard],
         path: '',
-        component: LogoutPageComponent,
+        component: ThemedLogoutPageComponent,
         data: { title: 'logout.title' }
       }
     ])
diff --git a/src/app/+logout-page/logout-page.module.ts b/src/app/+logout-page/logout-page.module.ts
index b085a5117b..59a5459e7f 100644
--- a/src/app/+logout-page/logout-page.module.ts
+++ b/src/app/+logout-page/logout-page.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { LogoutPageComponent } from './logout-page.component';
 import { LogoutPageRoutingModule } from './logout-page-routing.module';
+import { ThemedLogoutPageComponent } from './themed-logout-page.component';
 
 @NgModule({
   imports: [
@@ -11,7 +12,8 @@ import { LogoutPageRoutingModule } from './logout-page-routing.module';
     SharedModule,
   ],
   declarations: [
-    LogoutPageComponent
+    LogoutPageComponent,
+    ThemedLogoutPageComponent
   ]
 })
 export class LogoutPageModule {
diff --git a/src/app/+logout-page/themed-logout-page.component.ts b/src/app/+logout-page/themed-logout-page.component.ts
new file mode 100644
index 0000000000..19e1e2d1d1
--- /dev/null
+++ b/src/app/+logout-page/themed-logout-page.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { LogoutPageComponent } from './logout-page.component';
+
+/**
+ * Themed wrapper for LogoutPageComponent
+ */
+@Component({
+  selector: 'ds-themed-logout-page',
+  styleUrls: [],
+  templateUrl: './../shared/theme-support/themed.component.html'
+})
+export class ThemedLogoutPageComponent extends ThemedComponent<LogoutPageComponent> {
+  protected getComponentName(): string {
+    return 'LogoutPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+logout-page/logout-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./logout-page.component`);
+  }
+}
diff --git a/src/app/forgot-password/forgot-password-email/themed-forgot-email.component.ts b/src/app/forgot-password/forgot-password-email/themed-forgot-email.component.ts
new file mode 100644
index 0000000000..68fcf9302f
--- /dev/null
+++ b/src/app/forgot-password/forgot-password-email/themed-forgot-email.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ForgotEmailComponent } from './forgot-email.component';
+
+/**
+ * Themed wrapper for ForgotEmailComponent
+ */
+@Component({
+  selector: 'ds-themed-forgot-email',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedForgotEmailComponent extends ThemedComponent<ForgotEmailComponent> {
+  protected getComponentName(): string {
+    return 'ForgotEmailComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/forgot-password/forgot-password-email/forgot-email.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./forgot-email.component`);
+  }
+
+}
diff --git a/src/app/forgot-password/forgot-password-form/themed-forgot-password-form.component.ts b/src/app/forgot-password/forgot-password-form/themed-forgot-password-form.component.ts
new file mode 100644
index 0000000000..523f81312a
--- /dev/null
+++ b/src/app/forgot-password/forgot-password-form/themed-forgot-password-form.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ForgotPasswordFormComponent } from './forgot-password-form.component';
+
+/**
+ * Themed wrapper for ForgotPasswordFormComponent
+ */
+@Component({
+  selector: 'ds-themed-forgot-password-form',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedForgotPasswordFormComponent extends ThemedComponent<ForgotPasswordFormComponent> {
+  protected getComponentName(): string {
+    return 'ForgotPasswordFormComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/forgot-password/forgot-password-form/forgot-password-form.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./forgot-password-form.component`);
+  }
+}
diff --git a/src/app/forgot-password/forgot-password-routing.module.ts b/src/app/forgot-password/forgot-password-routing.module.ts
index 702de03a9d..2496c4eec6 100644
--- a/src/app/forgot-password/forgot-password-routing.module.ts
+++ b/src/app/forgot-password/forgot-password-routing.module.ts
@@ -2,27 +2,27 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { ItemPageResolver } from '../+item-page/item-page.resolver';
 import { RegistrationResolver } from '../register-email-form/registration.resolver';
-import { ForgotPasswordFormComponent } from './forgot-password-form/forgot-password-form.component';
-import { ForgotEmailComponent } from './forgot-password-email/forgot-email.component';
+import { ThemedForgotPasswordFormComponent } from './forgot-password-form/themed-forgot-password-form.component';
+import { ThemedForgotEmailComponent } from './forgot-password-email/themed-forgot-email.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
       {
         path: '',
-        component: ForgotEmailComponent,
+        component: ThemedForgotEmailComponent,
         data: {title: 'forgot-password.title'},
       },
       {
         path: ':token',
-        component: ForgotPasswordFormComponent,
+        component: ThemedForgotPasswordFormComponent,
         resolve: {registration: RegistrationResolver}
       }
     ])
   ],
   providers: [
     RegistrationResolver,
-    ItemPageResolver
+    ItemPageResolver,
   ]
 })
 /**
diff --git a/src/app/forgot-password/forgot-password.module.ts b/src/app/forgot-password/forgot-password.module.ts
index 94fb482db9..593149d2a5 100644
--- a/src/app/forgot-password/forgot-password.module.ts
+++ b/src/app/forgot-password/forgot-password.module.ts
@@ -6,6 +6,8 @@ import { ForgotPasswordRoutingModule } from './forgot-password-routing.module';
 import { RegisterEmailFormModule } from '../register-email-form/register-email-form.module';
 import { ForgotPasswordFormComponent } from './forgot-password-form/forgot-password-form.component';
 import { ProfilePageModule } from '../profile-page/profile-page.module';
+import { ThemedForgotPasswordFormComponent } from './forgot-password-form/themed-forgot-password-form.component';
+import { ThemedForgotEmailComponent } from './forgot-password-email/themed-forgot-email.component';
 
 @NgModule({
   imports: [
@@ -17,7 +19,9 @@ import { ProfilePageModule } from '../profile-page/profile-page.module';
   ],
   declarations: [
     ForgotEmailComponent,
-    ForgotPasswordFormComponent
+    ThemedForgotEmailComponent,
+    ForgotPasswordFormComponent,
+    ThemedForgotPasswordFormComponent,
   ],
   providers: []
 })
diff --git a/src/app/profile-page/profile-page-routing.module.ts b/src/app/profile-page/profile-page-routing.module.ts
index 4b9f2b7fff..695a78837f 100644
--- a/src/app/profile-page/profile-page-routing.module.ts
+++ b/src/app/profile-page/profile-page-routing.module.ts
@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
-import { ProfilePageComponent } from './profile-page.component';
+import { ThemedProfilePageComponent } from './themed-profile-page.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
-      { path: '', pathMatch: 'full', component: ProfilePageComponent, resolve: { breadcrumb: I18nBreadcrumbResolver }, data: { breadcrumbKey: 'profile', title: 'profile.title' } }
+      { path: '', pathMatch: 'full', component: ThemedProfilePageComponent, resolve: { breadcrumb: I18nBreadcrumbResolver }, data: { breadcrumbKey: 'profile', title: 'profile.title' } }
     ])
   ]
 })
diff --git a/src/app/profile-page/profile-page.module.ts b/src/app/profile-page/profile-page.module.ts
index 54b59c97ce..6fd0c8e4aa 100644
--- a/src/app/profile-page/profile-page.module.ts
+++ b/src/app/profile-page/profile-page.module.ts
@@ -5,6 +5,7 @@ import { ProfilePageRoutingModule } from './profile-page-routing.module';
 import { ProfilePageComponent } from './profile-page.component';
 import { ProfilePageMetadataFormComponent } from './profile-page-metadata-form/profile-page-metadata-form.component';
 import { ProfilePageSecurityFormComponent } from './profile-page-security-form/profile-page-security-form.component';
+import { ThemedProfilePageComponent } from './themed-profile-page.component';
 
 @NgModule({
   imports: [
@@ -17,6 +18,7 @@ import { ProfilePageSecurityFormComponent } from './profile-page-security-form/p
   ],
   declarations: [
     ProfilePageComponent,
+    ThemedProfilePageComponent,
     ProfilePageMetadataFormComponent,
     ProfilePageSecurityFormComponent
   ]
diff --git a/src/app/profile-page/themed-profile-page.component.ts b/src/app/profile-page/themed-profile-page.component.ts
new file mode 100644
index 0000000000..2348d416cf
--- /dev/null
+++ b/src/app/profile-page/themed-profile-page.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { ProfilePageComponent } from './profile-page.component';
+
+/**
+ * Themed wrapper for ProfilePageComponent
+ */
+@Component({
+  selector: 'ds-themed-profile-page',
+  styleUrls: [],
+  templateUrl: './../shared/theme-support/themed.component.html'
+})
+export class ThemedProfilePageComponent extends ThemedComponent<ProfilePageComponent> {
+  protected getComponentName(): string {
+    return 'ProfilePageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/profile-page/profile-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./profile-page.component`);
+  }
+}
diff --git a/src/app/register-page/create-profile/themed-create-profile.component.ts b/src/app/register-page/create-profile/themed-create-profile.component.ts
new file mode 100644
index 0000000000..3cbc4ad553
--- /dev/null
+++ b/src/app/register-page/create-profile/themed-create-profile.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { CreateProfileComponent } from './create-profile.component';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+
+/**
+ * Themed wrapper for CreateProfileComponent
+ */
+@Component({
+  selector: 'ds-themed-create-profile',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedCreateProfileComponent extends ThemedComponent<CreateProfileComponent> {
+  protected getComponentName(): string {
+    return 'CreateProfileComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/register-page/create-profile/create-profile.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./create-profile.component`);
+  }
+}
diff --git a/src/app/register-page/register-page-routing.module.ts b/src/app/register-page/register-page-routing.module.ts
index 7954d7963a..0fdb92b4ec 100644
--- a/src/app/register-page/register-page-routing.module.ts
+++ b/src/app/register-page/register-page-routing.module.ts
@@ -5,6 +5,7 @@ import { CreateProfileComponent } from './create-profile/create-profile.componen
 import { ItemPageResolver } from '../+item-page/item-page.resolver';
 import { RegistrationResolver } from '../register-email-form/registration.resolver';
 import { EndUserAgreementCookieGuard } from '../core/end-user-agreement/end-user-agreement-cookie.guard';
+import { ThemedCreateProfileComponent } from './create-profile/themed-create-profile.component';
 
 @NgModule({
   imports: [
@@ -16,7 +17,7 @@ import { EndUserAgreementCookieGuard } from '../core/end-user-agreement/end-user
       },
       {
         path: ':token',
-        component: CreateProfileComponent,
+        component: ThemedCreateProfileComponent,
         resolve: {registration: RegistrationResolver},
         canActivate: [EndUserAgreementCookieGuard]
       }
diff --git a/src/app/register-page/register-page.module.ts b/src/app/register-page/register-page.module.ts
index 34f890afe8..b13dbb6afb 100644
--- a/src/app/register-page/register-page.module.ts
+++ b/src/app/register-page/register-page.module.ts
@@ -6,6 +6,7 @@ import { RegisterEmailComponent } from './register-email/register-email.componen
 import { CreateProfileComponent } from './create-profile/create-profile.component';
 import { RegisterEmailFormModule } from '../register-email-form/register-email-form.module';
 import { ProfilePageModule } from '../profile-page/profile-page.module';
+import { ThemedCreateProfileComponent } from './create-profile/themed-create-profile.component';
 
 @NgModule({
   imports: [
@@ -17,7 +18,8 @@ import { ProfilePageModule } from '../profile-page/profile-page.module';
   ],
   declarations: [
     RegisterEmailComponent,
-    CreateProfileComponent
+    CreateProfileComponent,
+    ThemedCreateProfileComponent
   ],
   providers: []
 })

From d3dd8fb5654a1597d23553fa5b8fd1052e38ef30 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Thu, 4 Mar 2021 14:00:37 +0100
Subject: [PATCH 05/12] Finished themeable components

---
 .../import-external-routing.module.ts         |  4 +-
 .../full/themed-full-item-page.component.ts   |  2 +-
 .../my-dspace-page-routing.module.ts          |  5 +-
 .../+my-dspace-page/my-dspace-page.module.ts  | 19 +++---
 .../themed-my-dspace-page.component.ts        | 27 ++++++++
 .../submit-page-routing.module.ts             |  4 +-
 .../themed-workflow-item-delete.component.ts  | 26 ++++++++
 ...hemed-workflow-item-send-back.component.ts | 26 ++++++++
 .../workflowitems-edit-page-routing.module.ts | 18 +++---
 .../workflowitems-edit-page.module.ts         |  4 +-
 ...workspaceitems-edit-page-routing.module.ts |  4 +-
 .../forgot-email.component.scss               |  0
 .../forgot-email.component.ts                 |  1 +
 .../themed-forgot-email.component.ts          |  2 +-
 .../forgot-password-form.component.scss       |  0
 .../forgot-password-form.component.ts         |  1 +
 .../themed-forgot-password-form.component.ts  |  2 +-
 .../profile-page/profile-page.component.scss  |  0
 .../profile-page/profile-page.component.ts    |  1 +
 .../create-profile.component.scss             |  0
 .../create-profile.component.ts               |  1 +
 .../themed-create-profile.component.ts        |  2 +-
 .../register-email.component.scss             |  0
 .../register-email.component.ts               |  1 +
 .../edit/themed-submission-edit.component.ts  | 25 ++++++++
 ...ed-submission-import-external.component.ts | 25 ++++++++
 src/app/submission/submission.module.ts       | 61 ++++++++++---------
 .../themed-submission-submit.component.ts     | 25 ++++++++
 src/environments/environment.common.ts        |  8 +--
 .../full/full-item-page.component.html        |  0
 .../full/full-item-page.component.scss        |  0
 .../full/full-item-page.component.ts          | 20 ++++++
 .../simple/item-page.component.html           |  0
 .../simple/item-page.component.scss           |  0
 .../+item-page/simple/item-page.component.ts  | 21 +++++++
 .../app/+login-page/login-page.component.html | 10 +++
 .../app/+login-page/login-page.component.scss |  4 ++
 .../app/+login-page/login-page.component.ts   | 15 +++++
 .../+logout-page/logout-page.component.html   |  9 +++
 .../+logout-page/logout-page.component.scss   |  1 +
 .../app/+logout-page/logout-page.component.ts | 12 ++++
 .../my-dspace-page.component.html             |  0
 .../my-dspace-page.component.scss             |  0
 .../my-dspace-page.component.ts               | 25 ++++++++
 .../workflow-item-delete.component.html       |  0
 .../workflow-item-delete.component.scss       |  0
 .../workflow-item-delete.component.ts         | 14 +++++
 .../workflow-item-send-back.component.html    |  0
 .../workflow-item-send-back.component.scss    |  0
 .../workflow-item-send-back.component.ts      | 14 +++++
 .../forgot-email.component.html               |  0
 .../forgot-email.component.scss               |  0
 .../forgot-email.component.ts                 | 15 +++++
 .../forgot-password-form.component.html       |  0
 .../forgot-password-form.component.scss       |  0
 .../forgot-password-form.component.ts         | 15 +++++
 .../profile-page/profile-page.component.html  |  0
 .../profile-page/profile-page.component.scss  |  0
 .../profile-page/profile-page.component.ts    | 14 +++++
 .../create-profile.component.html             |  0
 .../create-profile.component.scss             |  0
 .../create-profile.component.ts               | 15 +++++
 .../register-email.component.html             |  0
 .../register-email.component.scss             |  0
 .../register-email.component.ts               | 15 +++++
 .../edit/submission-edit.component.html       |  0
 .../edit/submission-edit.component.scss       |  0
 .../edit/submission-edit.component.ts         | 15 +++++
 .../submission-import-external.component.html |  0
 .../submission-import-external.component.scss |  0
 .../submission-import-external.component.ts   | 18 ++++++
 .../submit/submission-submit.component.html   |  0
 .../submit/submission-submit.component.scss   |  0
 .../submit/submission-submit.component.ts     | 15 +++++
 src/themes/custom/theme.module.ts             | 52 +++++++++++++---
 75 files changed, 540 insertions(+), 73 deletions(-)
 create mode 100644 src/app/+my-dspace-page/themed-my-dspace-page.component.ts
 create mode 100644 src/app/+workflowitems-edit-page/workflow-item-delete/themed-workflow-item-delete.component.ts
 create mode 100644 src/app/+workflowitems-edit-page/workflow-item-send-back/themed-workflow-item-send-back.component.ts
 create mode 100644 src/app/forgot-password/forgot-password-email/forgot-email.component.scss
 create mode 100644 src/app/forgot-password/forgot-password-form/forgot-password-form.component.scss
 create mode 100644 src/app/profile-page/profile-page.component.scss
 create mode 100644 src/app/register-page/create-profile/create-profile.component.scss
 create mode 100644 src/app/register-page/register-email/register-email.component.scss
 create mode 100644 src/app/submission/edit/themed-submission-edit.component.ts
 create mode 100644 src/app/submission/import-external/themed-submission-import-external.component.ts
 create mode 100644 src/app/submission/submit/themed-submission-submit.component.ts
 create mode 100644 src/themes/custom/app/+item-page/full/full-item-page.component.html
 create mode 100644 src/themes/custom/app/+item-page/full/full-item-page.component.scss
 create mode 100644 src/themes/custom/app/+item-page/full/full-item-page.component.ts
 create mode 100644 src/themes/custom/app/+item-page/simple/item-page.component.html
 create mode 100644 src/themes/custom/app/+item-page/simple/item-page.component.scss
 create mode 100644 src/themes/custom/app/+item-page/simple/item-page.component.ts
 create mode 100644 src/themes/custom/app/+login-page/login-page.component.html
 create mode 100644 src/themes/custom/app/+login-page/login-page.component.scss
 create mode 100644 src/themes/custom/app/+login-page/login-page.component.ts
 create mode 100644 src/themes/custom/app/+logout-page/logout-page.component.html
 create mode 100644 src/themes/custom/app/+logout-page/logout-page.component.scss
 create mode 100644 src/themes/custom/app/+logout-page/logout-page.component.ts
 create mode 100644 src/themes/custom/app/+my-dspace-page/my-dspace-page.component.html
 create mode 100644 src/themes/custom/app/+my-dspace-page/my-dspace-page.component.scss
 create mode 100644 src/themes/custom/app/+my-dspace-page/my-dspace-page.component.ts
 create mode 100644 src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.html
 create mode 100644 src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.scss
 create mode 100644 src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.ts
 create mode 100644 src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.html
 create mode 100644 src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.scss
 create mode 100644 src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.ts
 create mode 100644 src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.html
 create mode 100644 src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.scss
 create mode 100644 src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.ts
 create mode 100644 src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.html
 create mode 100644 src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.scss
 create mode 100644 src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
 create mode 100644 src/themes/custom/app/profile-page/profile-page.component.html
 create mode 100644 src/themes/custom/app/profile-page/profile-page.component.scss
 create mode 100644 src/themes/custom/app/profile-page/profile-page.component.ts
 create mode 100644 src/themes/custom/app/register-page/create-profile/create-profile.component.html
 create mode 100644 src/themes/custom/app/register-page/create-profile/create-profile.component.scss
 create mode 100644 src/themes/custom/app/register-page/create-profile/create-profile.component.ts
 create mode 100644 src/themes/custom/app/register-page/register-email/register-email.component.html
 create mode 100644 src/themes/custom/app/register-page/register-email/register-email.component.scss
 create mode 100644 src/themes/custom/app/register-page/register-email/register-email.component.ts
 create mode 100644 src/themes/custom/app/submission/edit/submission-edit.component.html
 create mode 100644 src/themes/custom/app/submission/edit/submission-edit.component.scss
 create mode 100644 src/themes/custom/app/submission/edit/submission-edit.component.ts
 create mode 100644 src/themes/custom/app/submission/import-external/submission-import-external.component.html
 create mode 100644 src/themes/custom/app/submission/import-external/submission-import-external.component.scss
 create mode 100644 src/themes/custom/app/submission/import-external/submission-import-external.component.ts
 create mode 100644 src/themes/custom/app/submission/submit/submission-submit.component.html
 create mode 100644 src/themes/custom/app/submission/submit/submission-submit.component.scss
 create mode 100644 src/themes/custom/app/submission/submit/submission-submit.component.ts

diff --git a/src/app/+import-external-page/import-external-routing.module.ts b/src/app/+import-external-page/import-external-routing.module.ts
index 91cdbf9877..e5c6da5b21 100644
--- a/src/app/+import-external-page/import-external-routing.module.ts
+++ b/src/app/+import-external-page/import-external-routing.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
-import { SubmissionImportExternalComponent } from '../submission/import-external/submission-import-external.component';
+import { ThemedSubmissionImportExternalComponent } from '../submission/import-external/themed-submission-import-external.component';
 
 @NgModule({
   imports: [
@@ -9,7 +9,7 @@ import { SubmissionImportExternalComponent } from '../submission/import-external
       {
         canActivate: [ AuthenticatedGuard ],
         path: '',
-        component: SubmissionImportExternalComponent,
+        component: ThemedSubmissionImportExternalComponent,
         pathMatch: 'full',
         data: {
           title: 'submission.import-external.page.title'
diff --git a/src/app/+item-page/full/themed-full-item-page.component.ts b/src/app/+item-page/full/themed-full-item-page.component.ts
index 3d89f489ff..c184d0a4e4 100644
--- a/src/app/+item-page/full/themed-full-item-page.component.ts
+++ b/src/app/+item-page/full/themed-full-item-page.component.ts
@@ -16,7 +16,7 @@ export class ThemedFullItemPageComponent extends ThemedComponent<FullItemPageCom
   }
 
   protected importThemedComponent(themeName: string): Promise<any> {
-    return import(`../../themes/${themeName}/app/+item-page/full/full-item-page.component`);
+    return import(`../../../themes/${themeName}/app/+item-page/full/full-item-page.component`);
   }
 
   protected importUnthemedComponent(): Promise<any> {
diff --git a/src/app/+my-dspace-page/my-dspace-page-routing.module.ts b/src/app/+my-dspace-page/my-dspace-page-routing.module.ts
index d70a007e3a..46deb36e20 100644
--- a/src/app/+my-dspace-page/my-dspace-page-routing.module.ts
+++ b/src/app/+my-dspace-page/my-dspace-page-routing.module.ts
@@ -1,15 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-
-import { MyDSpacePageComponent } from './my-dspace-page.component';
 import { MyDSpaceGuard } from './my-dspace.guard';
+import { ThemedMyDSpacePageComponent } from './themed-my-dspace-page.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
       {
         path: '',
-        component: MyDSpacePageComponent,
+        component: ThemedMyDSpacePageComponent,
         data: { title: 'mydspace.title' },
         canActivate: [
           MyDSpaceGuard
diff --git a/src/app/+my-dspace-page/my-dspace-page.module.ts b/src/app/+my-dspace-page/my-dspace-page.module.ts
index 40bbcc903c..52c80c90b0 100644
--- a/src/app/+my-dspace-page/my-dspace-page.module.ts
+++ b/src/app/+my-dspace-page/my-dspace-page.module.ts
@@ -11,6 +11,15 @@ import { MyDSpaceGuard } from './my-dspace.guard';
 import { MyDSpaceConfigurationService } from './my-dspace-configuration.service';
 import { CollectionSelectorComponent } from './collection-selector/collection-selector.component';
 import { MyDspaceSearchModule } from './my-dspace-search.module';
+import { ThemedMyDSpacePageComponent } from './themed-my-dspace-page.component';
+
+const DECLARATIONS = [
+  MyDSpacePageComponent,
+  ThemedMyDSpacePageComponent,
+  MyDSpaceResultsComponent,
+  MyDSpaceNewSubmissionComponent,
+  CollectionSelectorComponent
+];
 
 @NgModule({
   imports: [
@@ -19,16 +28,12 @@ import { MyDspaceSearchModule } from './my-dspace-search.module';
     MyDspacePageRoutingModule,
     MyDspaceSearchModule.withEntryComponents()
   ],
-  declarations: [
-    MyDSpacePageComponent,
-    MyDSpaceResultsComponent,
-    MyDSpaceNewSubmissionComponent,
-    CollectionSelectorComponent
-  ],
+  declarations: DECLARATIONS,
   providers: [
     MyDSpaceGuard,
     MyDSpaceConfigurationService
-  ]
+  ],
+  exports: DECLARATIONS,
 })
 
 /**
diff --git a/src/app/+my-dspace-page/themed-my-dspace-page.component.ts b/src/app/+my-dspace-page/themed-my-dspace-page.component.ts
new file mode 100644
index 0000000000..47275496ca
--- /dev/null
+++ b/src/app/+my-dspace-page/themed-my-dspace-page.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { MyDSpacePageComponent } from './my-dspace-page.component';
+
+/**
+ * Themed wrapper for MyDSpacePageComponent
+ */
+@Component({
+  selector: 'ds-themed-my-dspace-page',
+  styleUrls: [],
+  templateUrl: './../shared/theme-support/themed.component.html'
+})
+export class ThemedMyDSpacePageComponent extends ThemedComponent<MyDSpacePageComponent> {
+  protected inAndOutputNames: (keyof MyDSpacePageComponent & keyof this)[];
+
+  protected getComponentName(): string {
+    return 'MyDSpacePageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+my-dspace-page/my-dspace-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./my-dspace-page.component`);
+  }
+}
diff --git a/src/app/+submit-page/submit-page-routing.module.ts b/src/app/+submit-page/submit-page-routing.module.ts
index 7a123bfc31..92c9bd8cdf 100644
--- a/src/app/+submit-page/submit-page-routing.module.ts
+++ b/src/app/+submit-page/submit-page-routing.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
-import { SubmissionSubmitComponent } from '../submission/submit/submission-submit.component';
+import { ThemedSubmissionSubmitComponent } from '../submission/submit/themed-submission-submit.component';
 
 @NgModule({
   imports: [
@@ -11,7 +11,7 @@ import { SubmissionSubmitComponent } from '../submission/submit/submission-submi
         canActivate: [AuthenticatedGuard],
         path: '',
         pathMatch: 'full',
-        component: SubmissionSubmitComponent,
+        component: ThemedSubmissionSubmitComponent,
         data: { title: 'submission.submit.title' }
       }
     ])
diff --git a/src/app/+workflowitems-edit-page/workflow-item-delete/themed-workflow-item-delete.component.ts b/src/app/+workflowitems-edit-page/workflow-item-delete/themed-workflow-item-delete.component.ts
new file mode 100644
index 0000000000..498975075f
--- /dev/null
+++ b/src/app/+workflowitems-edit-page/workflow-item-delete/themed-workflow-item-delete.component.ts
@@ -0,0 +1,26 @@
+import { WorkflowItemDeleteComponent } from './workflow-item-delete.component';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { Component } from '@angular/core';
+
+/**
+ * Themed wrapper for WorkflowItemDeleteComponent
+ */
+
+@Component({
+  selector: 'ds-themed-workflow-item-delete',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedWorkflowItemDeleteComponent extends ThemedComponent<WorkflowItemDeleteComponent> {
+  protected getComponentName(): string {
+    return 'WorkflowItemDeleteComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./workflow-item-delete.component`);
+  }
+}
diff --git a/src/app/+workflowitems-edit-page/workflow-item-send-back/themed-workflow-item-send-back.component.ts b/src/app/+workflowitems-edit-page/workflow-item-send-back/themed-workflow-item-send-back.component.ts
new file mode 100644
index 0000000000..a2cc68ac74
--- /dev/null
+++ b/src/app/+workflowitems-edit-page/workflow-item-send-back/themed-workflow-item-send-back.component.ts
@@ -0,0 +1,26 @@
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { Component } from '@angular/core';
+import { WorkflowItemSendBackComponent } from './workflow-item-send-back.component';
+
+/**
+ * Themed wrapper for WorkflowItemActionPageComponent
+ */
+
+@Component({
+  selector: 'ds-themed-workflow-item-send-back',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedWorkflowItemSendBackComponent extends ThemedComponent<WorkflowItemSendBackComponent> {
+  protected getComponentName(): string {
+    return 'WorkflowItemSendBackComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./workflow-item-send-back.component`);
+  }
+}
diff --git a/src/app/+workflowitems-edit-page/workflowitems-edit-page-routing.module.ts b/src/app/+workflowitems-edit-page/workflowitems-edit-page-routing.module.ts
index 27b7fe1199..2d104cf376 100644
--- a/src/app/+workflowitems-edit-page/workflowitems-edit-page-routing.module.ts
+++ b/src/app/+workflowitems-edit-page/workflowitems-edit-page-routing.module.ts
@@ -2,15 +2,11 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
-import { SubmissionEditComponent } from '../submission/edit/submission-edit.component';
-import { WorkflowItemDeleteComponent } from './workflow-item-delete/workflow-item-delete.component';
 import { WorkflowItemPageResolver } from './workflow-item-page.resolver';
-import { WorkflowItemSendBackComponent } from './workflow-item-send-back/workflow-item-send-back.component';
-import {
-  WORKFLOW_ITEM_SEND_BACK_PATH,
-  WORKFLOW_ITEM_DELETE_PATH,
-  WORKFLOW_ITEM_EDIT_PATH
-} from './workflowitems-edit-page-routing-paths';
+import { WORKFLOW_ITEM_DELETE_PATH, WORKFLOW_ITEM_EDIT_PATH, WORKFLOW_ITEM_SEND_BACK_PATH } from './workflowitems-edit-page-routing-paths';
+import { ThemedSubmissionEditComponent } from '../submission/edit/themed-submission-edit.component';
+import { ThemedWorkflowItemDeleteComponent } from './workflow-item-delete/themed-workflow-item-delete.component';
+import { ThemedWorkflowItemSendBackComponent } from './workflow-item-send-back/themed-workflow-item-send-back.component';
 
 @NgModule({
   imports: [
@@ -22,19 +18,19 @@ import {
           {
             canActivate: [AuthenticatedGuard],
             path: WORKFLOW_ITEM_EDIT_PATH,
-            component: SubmissionEditComponent,
+            component: ThemedSubmissionEditComponent,
             data: { title: 'submission.edit.title' }
           },
           {
             canActivate: [AuthenticatedGuard],
             path: WORKFLOW_ITEM_DELETE_PATH,
-            component: WorkflowItemDeleteComponent,
+            component: ThemedWorkflowItemDeleteComponent,
             data: { title: 'workflow-item.delete.title' }
           },
           {
             canActivate: [AuthenticatedGuard],
             path: WORKFLOW_ITEM_SEND_BACK_PATH,
-            component: WorkflowItemSendBackComponent,
+            component: ThemedWorkflowItemSendBackComponent,
             data: { title: 'workflow-item.send-back.title' }
           }
         ]
diff --git a/src/app/+workflowitems-edit-page/workflowitems-edit-page.module.ts b/src/app/+workflowitems-edit-page/workflowitems-edit-page.module.ts
index ef1e49abf5..6e4b3212e8 100644
--- a/src/app/+workflowitems-edit-page/workflowitems-edit-page.module.ts
+++ b/src/app/+workflowitems-edit-page/workflowitems-edit-page.module.ts
@@ -5,6 +5,8 @@ import { WorkflowItemsEditPageRoutingModule } from './workflowitems-edit-page-ro
 import { SubmissionModule } from '../submission/submission.module';
 import { WorkflowItemDeleteComponent } from './workflow-item-delete/workflow-item-delete.component';
 import { WorkflowItemSendBackComponent } from './workflow-item-send-back/workflow-item-send-back.component';
+import { ThemedWorkflowItemDeleteComponent } from './workflow-item-delete/themed-workflow-item-delete.component';
+import { ThemedWorkflowItemSendBackComponent } from './workflow-item-send-back/themed-workflow-item-send-back.component';
 
 @NgModule({
   imports: [
@@ -13,7 +15,7 @@ import { WorkflowItemSendBackComponent } from './workflow-item-send-back/workflo
     SharedModule,
     SubmissionModule,
   ],
-  declarations: [WorkflowItemDeleteComponent, WorkflowItemSendBackComponent]
+  declarations: [WorkflowItemDeleteComponent, ThemedWorkflowItemDeleteComponent, WorkflowItemSendBackComponent, ThemedWorkflowItemSendBackComponent]
 })
 /**
  * This module handles all modules that need to access the workflowitems edit page.
diff --git a/src/app/+workspaceitems-edit-page/workspaceitems-edit-page-routing.module.ts b/src/app/+workspaceitems-edit-page/workspaceitems-edit-page-routing.module.ts
index d10c53e138..791bb4f9aa 100644
--- a/src/app/+workspaceitems-edit-page/workspaceitems-edit-page-routing.module.ts
+++ b/src/app/+workspaceitems-edit-page/workspaceitems-edit-page-routing.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
-import { SubmissionEditComponent } from '../submission/edit/submission-edit.component';
+import { ThemedSubmissionEditComponent } from '../submission/edit/themed-submission-edit.component';
 
 @NgModule({
   imports: [
@@ -11,7 +11,7 @@ import { SubmissionEditComponent } from '../submission/edit/submission-edit.comp
       {
         canActivate: [AuthenticatedGuard],
         path: ':id/edit',
-        component: SubmissionEditComponent,
+        component: ThemedSubmissionEditComponent,
         data: { title: 'submission.edit.title' }
       }
     ])
diff --git a/src/app/forgot-password/forgot-password-email/forgot-email.component.scss b/src/app/forgot-password/forgot-password-email/forgot-email.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/forgot-password/forgot-password-email/forgot-email.component.ts b/src/app/forgot-password/forgot-password-email/forgot-email.component.ts
index 5e18aff113..af482bdb67 100644
--- a/src/app/forgot-password/forgot-password-email/forgot-email.component.ts
+++ b/src/app/forgot-password/forgot-password-email/forgot-email.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ds-forgot-email',
+  styleUrls: ['./forgot-email.component.scss'],
   templateUrl: './forgot-email.component.html'
 })
 /**
diff --git a/src/app/forgot-password/forgot-password-email/themed-forgot-email.component.ts b/src/app/forgot-password/forgot-password-email/themed-forgot-email.component.ts
index 68fcf9302f..da3848db1d 100644
--- a/src/app/forgot-password/forgot-password-email/themed-forgot-email.component.ts
+++ b/src/app/forgot-password/forgot-password-email/themed-forgot-email.component.ts
@@ -16,7 +16,7 @@ export class ThemedForgotEmailComponent extends ThemedComponent<ForgotEmailCompo
   }
 
   protected importThemedComponent(themeName: string): Promise<any> {
-    return import(`../../themes/${themeName}/app/forgot-password/forgot-password-email/forgot-email.component`);
+    return import(`../../../themes/${themeName}/app/forgot-password/forgot-password-email/forgot-email.component`);
   }
 
   protected importUnthemedComponent(): Promise<any> {
diff --git a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.scss b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
index 8bfed0b2eb..98188a07e8 100644
--- a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
+++ b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
@@ -14,6 +14,7 @@ import { EPerson } from '../../core/eperson/models/eperson.model';
 
 @Component({
   selector: 'ds-forgot-password-form',
+  styleUrls: ['./forgot-password-form.component.scss'],
   templateUrl: './forgot-password-form.component.html'
 })
 /**
diff --git a/src/app/forgot-password/forgot-password-form/themed-forgot-password-form.component.ts b/src/app/forgot-password/forgot-password-form/themed-forgot-password-form.component.ts
index 523f81312a..3fb1b67e01 100644
--- a/src/app/forgot-password/forgot-password-form/themed-forgot-password-form.component.ts
+++ b/src/app/forgot-password/forgot-password-form/themed-forgot-password-form.component.ts
@@ -16,7 +16,7 @@ export class ThemedForgotPasswordFormComponent extends ThemedComponent<ForgotPas
   }
 
   protected importThemedComponent(themeName: string): Promise<any> {
-    return import(`../../themes/${themeName}/app/forgot-password/forgot-password-form/forgot-password-form.component`);
+    return import(`../../../themes/${themeName}/app/forgot-password/forgot-password-form/forgot-password-form.component`);
   }
 
   protected importUnthemedComponent(): Promise<any> {
diff --git a/src/app/profile-page/profile-page.component.scss b/src/app/profile-page/profile-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/profile-page/profile-page.component.ts b/src/app/profile-page/profile-page.component.ts
index 5b7697ed48..e9c4dec832 100644
--- a/src/app/profile-page/profile-page.component.ts
+++ b/src/app/profile-page/profile-page.component.ts
@@ -21,6 +21,7 @@ import { Operation } from 'fast-json-patch';
 
 @Component({
   selector: 'ds-profile-page',
+  styleUrls: ['./profile-page.component.scss'],
   templateUrl: './profile-page.component.html'
 })
 /**
diff --git a/src/app/register-page/create-profile/create-profile.component.scss b/src/app/register-page/create-profile/create-profile.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/register-page/create-profile/create-profile.component.ts b/src/app/register-page/create-profile/create-profile.component.ts
index 5f02556248..790e1d6fc5 100644
--- a/src/app/register-page/create-profile/create-profile.component.ts
+++ b/src/app/register-page/create-profile/create-profile.component.ts
@@ -26,6 +26,7 @@ import { getFirstCompletedRemoteData } from '../../core/shared/operators';
  */
 @Component({
   selector: 'ds-create-profile',
+  styleUrls: ['./create-profile.component.scss'],
   templateUrl: './create-profile.component.html'
 })
 export class CreateProfileComponent implements OnInit {
diff --git a/src/app/register-page/create-profile/themed-create-profile.component.ts b/src/app/register-page/create-profile/themed-create-profile.component.ts
index 3cbc4ad553..cc968bfbe2 100644
--- a/src/app/register-page/create-profile/themed-create-profile.component.ts
+++ b/src/app/register-page/create-profile/themed-create-profile.component.ts
@@ -16,7 +16,7 @@ export class ThemedCreateProfileComponent extends ThemedComponent<CreateProfileC
   }
 
   protected importThemedComponent(themeName: string): Promise<any> {
-    return import(`../../themes/${themeName}/app/register-page/create-profile/create-profile.component`);
+    return import(`../../../themes/${themeName}/app/register-page/create-profile/create-profile.component`);
   }
 
   protected importUnthemedComponent(): Promise<any> {
diff --git a/src/app/register-page/register-email/register-email.component.scss b/src/app/register-page/register-email/register-email.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/register-page/register-email/register-email.component.ts b/src/app/register-page/register-email/register-email.component.ts
index ac221c109a..7b7b0f631b 100644
--- a/src/app/register-page/register-email/register-email.component.ts
+++ b/src/app/register-page/register-email/register-email.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ds-register-email',
+  styleUrls: ['./register-email.component.scss'],
   templateUrl: './register-email.component.html'
 })
 /**
diff --git a/src/app/submission/edit/themed-submission-edit.component.ts b/src/app/submission/edit/themed-submission-edit.component.ts
new file mode 100644
index 0000000000..bbaf432c13
--- /dev/null
+++ b/src/app/submission/edit/themed-submission-edit.component.ts
@@ -0,0 +1,25 @@
+/**
+ * Themed wrapper for SubmissionEditComponent
+ */
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { SubmissionEditComponent } from './submission-edit.component';
+
+@Component({
+  selector: 'ds-themed-submission-edit',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedSubmissionEditComponent extends ThemedComponent<SubmissionEditComponent> {
+  protected getComponentName(): string {
+    return 'SubmissionEditComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/submission/edit/submission-edit.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./submission-edit.component`);
+  }
+}
diff --git a/src/app/submission/import-external/themed-submission-import-external.component.ts b/src/app/submission/import-external/themed-submission-import-external.component.ts
new file mode 100644
index 0000000000..698a64842d
--- /dev/null
+++ b/src/app/submission/import-external/themed-submission-import-external.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { SubmissionImportExternalComponent } from './submission-import-external.component';
+
+/**
+ * Themed wrapper for SubmissionImportExternalComponent
+ */
+@Component({
+  selector: 'ds-themed-submission-import-external',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedSubmissionImportExternalComponent extends ThemedComponent<SubmissionImportExternalComponent> {
+  protected getComponentName(): string {
+    return 'SubmissionImportExternalComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/submission/import-external/submission-import-external.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./submission-import-external.component`);
+  }
+}
diff --git a/src/app/submission/submission.module.ts b/src/app/submission/submission.module.ts
index 32c11d6673..13cf2016dd 100644
--- a/src/app/submission/submission.module.ts
+++ b/src/app/submission/submission.module.ts
@@ -34,6 +34,36 @@ import { SubmissionImportExternalCollectionComponent } from './import-external/i
 import { SubmissionSectionCcLicensesComponent } from './sections/cc-license/submission-section-cc-licenses.component';
 import { JournalEntitiesModule } from '../entity-groups/journal-entities/journal-entities.module';
 import { ResearchEntitiesModule } from '../entity-groups/research-entities/research-entities.module';
+import { ThemedSubmissionEditComponent } from './edit/themed-submission-edit.component';
+import { ThemedSubmissionSubmitComponent } from './submit/themed-submission-submit.component';
+import { ThemedSubmissionImportExternalComponent } from './import-external/themed-submission-import-external.component';
+
+const DECLARATIONS = [
+  SubmissionSectionUploadAccessConditionsComponent,
+  SubmissionSectionUploadComponent,
+  SubmissionSectionformComponent,
+  SubmissionSectionLicenseComponent,
+  SubmissionSectionCcLicensesComponent,
+  SectionsDirective,
+  SubmissionEditComponent,
+  ThemedSubmissionEditComponent,
+  SubmissionFormSectionAddComponent,
+  SubmissionFormCollectionComponent,
+  SubmissionFormComponent,
+  SubmissionFormFooterComponent,
+  SubmissionSubmitComponent,
+  ThemedSubmissionSubmitComponent,
+  SubmissionUploadFilesComponent,
+  SubmissionSectionContainerComponent,
+  SubmissionSectionUploadFileComponent,
+  SubmissionSectionUploadFileEditComponent,
+  SubmissionSectionUploadFileViewComponent,
+  SubmissionImportExternalComponent,
+  ThemedSubmissionImportExternalComponent,
+  SubmissionImportExternalSearchbarComponent,
+  SubmissionImportExternalPreviewComponent,
+  SubmissionImportExternalCollectionComponent
+];
 
 @NgModule({
   imports: [
@@ -45,35 +75,8 @@ import { ResearchEntitiesModule } from '../entity-groups/research-entities/resea
     JournalEntitiesModule.withEntryComponents(),
     ResearchEntitiesModule.withEntryComponents(),
   ],
-  declarations: [
-    SubmissionSectionUploadAccessConditionsComponent,
-    SubmissionSectionUploadComponent,
-    SubmissionSectionformComponent,
-    SubmissionSectionLicenseComponent,
-    SubmissionSectionCcLicensesComponent,
-    SectionsDirective,
-    SubmissionEditComponent,
-    SubmissionFormSectionAddComponent,
-    SubmissionFormCollectionComponent,
-    SubmissionFormComponent,
-    SubmissionFormFooterComponent,
-    SubmissionSubmitComponent,
-    SubmissionUploadFilesComponent,
-    SubmissionSectionContainerComponent,
-    SubmissionSectionUploadFileComponent,
-    SubmissionSectionUploadFileEditComponent,
-    SubmissionSectionUploadFileViewComponent,
-    SubmissionImportExternalComponent,
-    SubmissionImportExternalSearchbarComponent,
-    SubmissionImportExternalPreviewComponent,
-    SubmissionImportExternalCollectionComponent
-  ],
-  exports: [
-    SubmissionEditComponent,
-    SubmissionFormComponent,
-    SubmissionSubmitComponent,
-    SubmissionImportExternalComponent
-  ],
+  declarations: DECLARATIONS,
+  exports: DECLARATIONS,
   providers: [
     SectionUploadService,
     SectionsService,
diff --git a/src/app/submission/submit/themed-submission-submit.component.ts b/src/app/submission/submit/themed-submission-submit.component.ts
new file mode 100644
index 0000000000..ad313bf7bb
--- /dev/null
+++ b/src/app/submission/submit/themed-submission-submit.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { SubmissionSubmitComponent } from './submission-submit.component';
+
+/**
+ * Themed wrapper for SubmissionSubmitComponent
+ */
+@Component({
+  selector: 'ds-themed-submission-submit',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedSubmissionSubmitComponent extends ThemedComponent<SubmissionSubmitComponent> {
+  protected getComponentName(): string {
+    return 'SubmissionImportExternalComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/submission/submit/submission-submit.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./submission-submit.component`);
+  }
+}
diff --git a/src/environments/environment.common.ts b/src/environments/environment.common.ts
index bc1f634e19..c6ae9858e5 100644
--- a/src/environments/environment.common.ts
+++ b/src/environments/environment.common.ts
@@ -251,10 +251,10 @@ export const environment: GlobalConfig = {
     //   name: 'custom',
     //   uuid: '0958c910-2037-42a9-81c7-dca80e3892b4'
     // },
-    {
-      // A theme with only a name will match every route
-      name: 'custom'
-    },
+    // {
+    //   // A theme with only a name will match every route
+    //   name: 'custom'
+    // },
 
     {
       // This theme will use the default bootstrap styling for DSpace components
diff --git a/src/themes/custom/app/+item-page/full/full-item-page.component.html b/src/themes/custom/app/+item-page/full/full-item-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+item-page/full/full-item-page.component.scss b/src/themes/custom/app/+item-page/full/full-item-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+item-page/full/full-item-page.component.ts b/src/themes/custom/app/+item-page/full/full-item-page.component.ts
new file mode 100644
index 0000000000..1e6230132b
--- /dev/null
+++ b/src/themes/custom/app/+item-page/full/full-item-page.component.ts
@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { fadeInOut } from '../../../../../app/shared/animations/fade';
+import { FullItemPageComponent as BaseComponent } from '../../../../../app/+item-page/full/full-item-page.component';
+
+/**
+ * This component renders a full item page.
+ * The route parameter 'id' is used to request the item it represents.
+ */
+
+@Component({
+  selector: 'ds-full-item-page',
+  // styleUrls: ['./full-item-page.component.scss'],
+  styleUrls: ['../../../../../app/+item-page/full/full-item-page.component.scss'],
+  // templateUrl: './full-item-page.component.html',
+  templateUrl: '../../../../../app/+item-page/full/full-item-page.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [fadeInOut]
+})
+export class FullItemPageComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/+item-page/simple/item-page.component.html b/src/themes/custom/app/+item-page/simple/item-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+item-page/simple/item-page.component.scss b/src/themes/custom/app/+item-page/simple/item-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+item-page/simple/item-page.component.ts b/src/themes/custom/app/+item-page/simple/item-page.component.ts
new file mode 100644
index 0000000000..1ba534972e
--- /dev/null
+++ b/src/themes/custom/app/+item-page/simple/item-page.component.ts
@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ItemPageComponent as BaseComponent } from '../../../../../app/+item-page/simple/item-page.component';
+import { fadeInOut } from '../../../../../app/shared/animations/fade';
+
+/**
+ * This component renders a simple item page.
+ * The route parameter 'id' is used to request the item it represents.
+ * All fields of the item that should be displayed, are defined in its template.
+ */
+@Component({
+  selector: 'ds-item-page',
+  // styleUrls: ['../item-page.component.scss'],
+  styleUrls: ['../../../../../app/+item-page/simple/item-page.component.scss'],
+  // templateUrl: './item-page.component.html',
+  templateUrl: '../../../../../app/+item-page/simple/item-page.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [fadeInOut]
+})
+export class ItemPageComponent extends BaseComponent {
+
+}
diff --git a/src/themes/custom/app/+login-page/login-page.component.html b/src/themes/custom/app/+login-page/login-page.component.html
new file mode 100644
index 0000000000..84059877f4
--- /dev/null
+++ b/src/themes/custom/app/+login-page/login-page.component.html
@@ -0,0 +1,10 @@
+<div class="container w-100 h-100">
+  <div class="text-center mt-5 row justify-content-center">
+    <div>
+      <img class="mb-4 login-logo" src="assets/images/dspace-logo.png">
+      <h1 class="h3 mb-0 font-weight-normal">{{"login.form.header" | translate}}</h1>
+      <ds-log-in
+      [isStandalonePage]="true"></ds-log-in>
+    </div>
+  </div>
+</div>
diff --git a/src/themes/custom/app/+login-page/login-page.component.scss b/src/themes/custom/app/+login-page/login-page.component.scss
new file mode 100644
index 0000000000..d628a5089f
--- /dev/null
+++ b/src/themes/custom/app/+login-page/login-page.component.scss
@@ -0,0 +1,4 @@
+.login-logo {
+  height: var(--ds-login-logo-height);
+  width: var(--ds-login-logo-width);
+}
diff --git a/src/themes/custom/app/+login-page/login-page.component.ts b/src/themes/custom/app/+login-page/login-page.component.ts
new file mode 100644
index 0000000000..4c5922c8fd
--- /dev/null
+++ b/src/themes/custom/app/+login-page/login-page.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { LoginPageComponent as BaseComponent } from '../../../../app/+login-page/login-page.component';
+
+/**
+ * This component represents the login page
+ */
+@Component({
+  selector: 'ds-login-page',
+  // styleUrls: ['./login-page.component.scss'],
+  styleUrls: ['../../../../app/+login-page/login-page.component.scss'],
+  // templateUrl: './login-page.component.html'
+  templateUrl: '../../../../app/+login-page/login-page.component.html'
+})
+export class LoginPageComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/+logout-page/logout-page.component.html b/src/themes/custom/app/+logout-page/logout-page.component.html
new file mode 100644
index 0000000000..b5012ed53b
--- /dev/null
+++ b/src/themes/custom/app/+logout-page/logout-page.component.html
@@ -0,0 +1,9 @@
+<div class="container w-100 h-100">
+  <div class="text-center mt-5 row justify-content-md-center">
+    <div class="mx-auto">
+      <img class="mb-4 login-logo" src="assets/images/dspace-logo.png">
+      <h1 class="h3 mb-0 font-weight-normal">{{"logout.form.header" | translate}}</h1>
+      <ds-log-out></ds-log-out>
+    </div>
+  </div>
+</div>
diff --git a/src/themes/custom/app/+logout-page/logout-page.component.scss b/src/themes/custom/app/+logout-page/logout-page.component.scss
new file mode 100644
index 0000000000..7e594c0d9b
--- /dev/null
+++ b/src/themes/custom/app/+logout-page/logout-page.component.scss
@@ -0,0 +1 @@
+@import '../+login-page/login-page.component.scss';
diff --git a/src/themes/custom/app/+logout-page/logout-page.component.ts b/src/themes/custom/app/+logout-page/logout-page.component.ts
new file mode 100644
index 0000000000..5b94d906c0
--- /dev/null
+++ b/src/themes/custom/app/+logout-page/logout-page.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { LogoutPageComponent as BaseComponent} from '../../../../app/+logout-page/logout-page.component';
+
+@Component({
+  selector: 'ds-logout-page',
+  // styleUrls: ['./logout-page.component.scss'],
+  styleUrls: ['../../../../app/+logout-page/logout-page.component.scss'],
+  // templateUrl: './logout-page.component.html'
+  templateUrl: '../../../../app/+logout-page/logout-page.component.html'
+})
+export class LogoutPageComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/+my-dspace-page/my-dspace-page.component.html b/src/themes/custom/app/+my-dspace-page/my-dspace-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+my-dspace-page/my-dspace-page.component.scss b/src/themes/custom/app/+my-dspace-page/my-dspace-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+my-dspace-page/my-dspace-page.component.ts b/src/themes/custom/app/+my-dspace-page/my-dspace-page.component.ts
new file mode 100644
index 0000000000..8ea24a041d
--- /dev/null
+++ b/src/themes/custom/app/+my-dspace-page/my-dspace-page.component.ts
@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { pushInOut } from '../../../../app/shared/animations/push';
+import { MyDSpacePageComponent as BaseComponent, SEARCH_CONFIG_SERVICE } from '../../../../app/+my-dspace-page/my-dspace-page.component';
+import { MyDSpaceConfigurationService } from '../../../../app/+my-dspace-page/my-dspace-configuration.service';
+
+/**
+ * This component represents the whole mydspace page
+ */
+@Component({
+  selector: 'ds-my-dspace-page',
+  // styleUrls: ['./my-dspace-page.component.scss'],
+  styleUrls: ['../../../../app/+my-dspace-page/my-dspace-page.component.scss'],
+  // templateUrl: './my-dspace-page.component.html',
+  templateUrl: '../../../../app/+my-dspace-page/my-dspace-page.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [pushInOut],
+  providers: [
+    {
+      provide: SEARCH_CONFIG_SERVICE,
+      useClass: MyDSpaceConfigurationService
+    }
+  ]
+})
+export class MyDSpacePageComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.html b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.scss b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.ts b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.ts
new file mode 100644
index 0000000000..c9c140835a
--- /dev/null
+++ b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { WorkflowItemDeleteComponent as BaseComponent } from '../../../../../app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component';
+
+@Component({
+  selector: 'ds-workflow-item-delete',
+  // styleUrls: ['workflow-item-delete.component.scss'],
+  // templateUrl: './workflow-item-delete.component.html'
+  templateUrl: '../../../../../app/+workflowitems-edit-page/workflow-item-action-page.component.html'
+})
+/**
+ * Component representing a page to delete a workflow item
+ */
+export class WorkflowItemDeleteComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.html b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.scss b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.ts b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.ts
new file mode 100644
index 0000000000..343faf765c
--- /dev/null
+++ b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { WorkflowItemSendBackComponent as BaseComponent } from '../../../../../app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component';
+
+@Component({
+  selector: 'ds-workflow-item-send-back',
+  // styleUrls: ['workflow-item-send-back.component.scss'],
+  // templateUrl: './workflow-item-send-back.component.html'
+  templateUrl: '../../../../../app/+workflowitems-edit-page/workflow-item-action-page.component.html'
+})
+/**
+ * Component representing a page to send back a workflow item to the submitter
+ */
+export class WorkflowItemSendBackComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.html b/src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.scss b/src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.ts b/src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.ts
new file mode 100644
index 0000000000..8eaa2bb0fa
--- /dev/null
+++ b/src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { ForgotEmailComponent as BaseComponent } from '../../../../../app/forgot-password/forgot-password-email/forgot-email.component';
+
+@Component({
+  selector: 'ds-forgot-email',
+  // styleUrls: ['./forgot-email.component.scss'],
+  styleUrls: ['../../../../../app/forgot-password/forgot-password-email/forgot-email.component.scss'],
+  // templateUrl: './forgot-email.component.html'
+  templateUrl: '../../../../../app/forgot-password/forgot-password-email/forgot-email.component.html'
+})
+/**
+ * Component responsible the forgot password email step
+ */
+export class ForgotEmailComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.html b/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.scss b/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.ts b/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
new file mode 100644
index 0000000000..d64d925f71
--- /dev/null
+++ b/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { ForgotPasswordFormComponent as BaseComponent } from '../../../../../app/forgot-password/forgot-password-form/forgot-password-form.component';
+
+@Component({
+  selector: 'ds-forgot-password-form',
+  // styleUrls: ['./forgot-password-form.component.scss'],
+  styleUrls: ['../../../../../app/forgot-password/forgot-password-form/forgot-password-form.component.scss'],
+  // templateUrl: './forgot-password-form.component.html'
+  templateUrl: '../../../../../app/forgot-password/forgot-password-form/forgot-password-form.component.html'
+})
+/**
+ * Component for a user to enter a new password for a forgot token.
+ */
+export class ForgotPasswordFormComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/profile-page/profile-page.component.html b/src/themes/custom/app/profile-page/profile-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/profile-page/profile-page.component.scss b/src/themes/custom/app/profile-page/profile-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/profile-page/profile-page.component.ts b/src/themes/custom/app/profile-page/profile-page.component.ts
new file mode 100644
index 0000000000..fe25f0685b
--- /dev/null
+++ b/src/themes/custom/app/profile-page/profile-page.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { ProfilePageComponent as BaseComponent } from '../../../../app/profile-page/profile-page.component';
+
+@Component({
+  selector: 'ds-profile-page',
+  styleUrls: ['./profile-page.component.scss'],
+  templateUrl: './profile-page.component.html'
+})
+/**
+ * Component for a user to edit their profile information
+ */
+export class ProfilePageComponent extends BaseComponent {
+
+}
diff --git a/src/themes/custom/app/register-page/create-profile/create-profile.component.html b/src/themes/custom/app/register-page/create-profile/create-profile.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/register-page/create-profile/create-profile.component.scss b/src/themes/custom/app/register-page/create-profile/create-profile.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/register-page/create-profile/create-profile.component.ts b/src/themes/custom/app/register-page/create-profile/create-profile.component.ts
new file mode 100644
index 0000000000..0cffa3288d
--- /dev/null
+++ b/src/themes/custom/app/register-page/create-profile/create-profile.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { CreateProfileComponent as BaseComponent } from '../../../../../app/register-page/create-profile/create-profile.component';
+
+/**
+ * Component that renders the create profile page to be used by a user registering through a token
+ */
+@Component({
+  selector: 'ds-create-profile',
+  // styleUrls: ['./create-profile.component.scss'],
+  styleUrls: ['../../../../../app/register-page/create-profile/create-profile.component.scss'],
+  // templateUrl: './create-profile.component.html'
+  templateUrl: '../../../../../app/register-page/create-profile/create-profile.component.html'
+})
+export class CreateProfileComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/register-page/register-email/register-email.component.html b/src/themes/custom/app/register-page/register-email/register-email.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/register-page/register-email/register-email.component.scss b/src/themes/custom/app/register-page/register-email/register-email.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/register-page/register-email/register-email.component.ts b/src/themes/custom/app/register-page/register-email/register-email.component.ts
new file mode 100644
index 0000000000..6e85a61732
--- /dev/null
+++ b/src/themes/custom/app/register-page/register-email/register-email.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { RegisterEmailComponent as BaseComponent } from '../../../../../app/register-page/register-email/register-email.component';
+
+@Component({
+  selector: 'ds-register-email',
+  // styleUrls: ['./register-email.component.scss'],
+  styleUrls: ['../../../../../app/register-page/register-email/register-email.component.scss'],
+  // templateUrl: './register-email.component.html'
+  templateUrl: '../../../../../app/register-page/register-email/register-email.component.html'
+})
+/**
+ * Component responsible the email registration step when registering as a new user
+ */
+export class RegisterEmailComponent extends BaseComponent{
+}
diff --git a/src/themes/custom/app/submission/edit/submission-edit.component.html b/src/themes/custom/app/submission/edit/submission-edit.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/submission/edit/submission-edit.component.scss b/src/themes/custom/app/submission/edit/submission-edit.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/submission/edit/submission-edit.component.ts b/src/themes/custom/app/submission/edit/submission-edit.component.ts
new file mode 100644
index 0000000000..88559d30b4
--- /dev/null
+++ b/src/themes/custom/app/submission/edit/submission-edit.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { SubmissionEditComponent as BaseComponent } from '../../../../../app/submission/edit/submission-edit.component';
+
+/**
+ * This component allows to edit an existing workspaceitem/workflowitem.
+ */
+@Component({
+  selector: 'ds-submission-edit',
+  // styleUrls: ['./submission-edit.component.scss'],
+  styleUrls: ['../../../../../app/submission/edit/submission-edit.component.scss'],
+  // templateUrl: './submission-edit.component.html'
+  templateUrl: '../../../../../app/submission/edit/submission-edit.component.html'
+})
+export class SubmissionEditComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/submission/import-external/submission-import-external.component.html b/src/themes/custom/app/submission/import-external/submission-import-external.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/submission/import-external/submission-import-external.component.scss b/src/themes/custom/app/submission/import-external/submission-import-external.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/submission/import-external/submission-import-external.component.ts b/src/themes/custom/app/submission/import-external/submission-import-external.component.ts
new file mode 100644
index 0000000000..cf541b85c9
--- /dev/null
+++ b/src/themes/custom/app/submission/import-external/submission-import-external.component.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { fadeIn } from '../../../../../app/shared/animations/fade';
+import { SubmissionImportExternalComponent as BaseComponent } from '../../../../../app/submission/import-external/submission-import-external.component';
+
+/**
+ * This component allows to submit a new workspaceitem importing the data from an external source.
+ */
+@Component({
+  selector: 'ds-submission-import-external',
+  // styleUrls: ['./submission-import-external.component.scss'],
+  styleUrls: ['../../../../../app/submission/import-external/submission-import-external.component.scss'],
+  // templateUrl: './submission-import-external.component.html',
+  templateUrl: '../../../../../app/submission/import-external/submission-import-external.component.html',
+  animations: [fadeIn]
+})
+export class SubmissionImportExternalComponent extends BaseComponent {
+
+}
diff --git a/src/themes/custom/app/submission/submit/submission-submit.component.html b/src/themes/custom/app/submission/submit/submission-submit.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/submission/submit/submission-submit.component.scss b/src/themes/custom/app/submission/submit/submission-submit.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/submission/submit/submission-submit.component.ts b/src/themes/custom/app/submission/submit/submission-submit.component.ts
new file mode 100644
index 0000000000..1273e26069
--- /dev/null
+++ b/src/themes/custom/app/submission/submit/submission-submit.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { SubmissionSubmitComponent as BaseComponent } from '../../../../../app/submission/submit/submission-submit.component';
+
+/**
+ * This component allows to submit a new workspaceitem.
+ */
+@Component({
+  selector: 'ds-submission-submit',
+  // styleUrls: ['./submission-submit.component.scss'],
+  styleUrls: ['../../../../../app/submission/submit/submission-submit.component.scss'],
+  // templateUrl: './submission-submit.component.html'
+  templateUrl: '../../../../../app/submission/submit/submission-submit.component.html'
+})
+export class SubmissionSubmitComponent extends BaseComponent{
+}
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index 18a048275a..6192451692 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -57,6 +57,23 @@ import { CollectionPageComponent } from './app/+collection-page/collection-page.
 import { CommunityPageModule } from '../../app/+community-page/community-page.module';
 import { CollectionPageModule } from '../../app/+collection-page/collection-page.module';
 import { ConfigurationSearchPageComponent } from './app/+search-page/configuration-search-page.component';
+import { ItemPageComponent } from './app/+item-page/simple/item-page.component';
+import { FullItemPageComponent } from './app/+item-page/full/full-item-page.component';
+import { LoginPageComponent } from './app/+login-page/login-page.component';
+import { LogoutPageComponent } from './app/+logout-page/logout-page.component';
+import { CreateProfileComponent } from './app/register-page/create-profile/create-profile.component';
+import { ForgotEmailComponent } from './app/forgot-password/forgot-password-email/forgot-email.component';
+import { ForgotPasswordFormComponent } from './app/forgot-password/forgot-password-form/forgot-password-form.component';
+import { ProfilePageComponent } from './app/profile-page/profile-page.component';
+import { RegisterEmailComponent } from './app/register-page/register-email/register-email.component';
+import { SubmissionEditComponent } from './app/submission/edit/submission-edit.component';
+import { SubmissionImportExternalComponent } from './app/submission/import-external/submission-import-external.component';
+import { SubmissionSubmitComponent } from './app/submission/submit/submission-submit.component';
+import { MyDSpacePageComponent } from './app/+my-dspace-page/my-dspace-page.component';
+import { WorkflowItemSendBackComponent } from './app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component';
+import { WorkflowItemDeleteComponent } from './app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component';
+import { SubmissionModule } from '../../app/submission/submission.module';
+import { MyDSpacePageModule } from '../../app/+my-dspace-page/my-dspace-page.module';
 
 const DECLARATIONS = [
   HomePageComponent,
@@ -77,7 +94,23 @@ const DECLARATIONS = [
   ItemStatisticsPageComponent,
   SiteStatisticsPageComponent,
   CommunityPageComponent,
-  CollectionPageComponent
+  CollectionPageComponent,
+  ItemPageComponent,
+  FullItemPageComponent,
+  LoginPageComponent,
+  LogoutPageComponent,
+  CreateProfileComponent,
+  ForgotEmailComponent,
+  ForgotPasswordFormComponent,
+  ProfilePageComponent,
+  RegisterEmailComponent,
+  MyDSpacePageComponent,
+  SubmissionEditComponent,
+  SubmissionImportExternalComponent,
+  SubmissionSubmitComponent,
+  WorkflowItemDeleteComponent,
+  WorkflowItemSendBackComponent
+
 ];
 
 @NgModule({
@@ -121,16 +154,19 @@ const DECLARATIONS = [
     StoreModule,
     StoreRouterConnectingModule,
     TranslateModule,
+    SubmissionModule,
+    MyDSpacePageModule,
+    MyDspaceSearchModule,
   ],
   declarations: DECLARATIONS
 })
 
-/**
- * This module serves as an index for all the components in this theme.
- * It should import all other modules, so the compiler knows where to find any components referenced
- * from a component in this theme
- * It is purposefully not exported, it should never be imported anywhere else, its only purpose is
- * to give lazily loaded components a context in which they can be compiled successfully
- */
+  /**
+   * This module serves as an index for all the components in this theme.
+   * It should import all other modules, so the compiler knows where to find any components referenced
+   * from a component in this theme
+   * It is purposefully not exported, it should never be imported anywhere else, its only purpose is
+   * to give lazily loaded components a context in which they can be compiled successfully
+   */
 class ThemeModule {
 }

From 05aaa5400df71eb0f0bf7640c64a78e4ee243390 Mon Sep 17 00:00:00 2001
From: Art Lowel <art@atmire.com>
Date: Thu, 4 Mar 2021 14:21:55 +0100
Subject: [PATCH 06/12] fix lint issues

---
 .../register-page/register-email/register-email.component.ts    | 2 +-
 .../custom/app/submission/submit/submission-submit.component.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/themes/custom/app/register-page/register-email/register-email.component.ts b/src/themes/custom/app/register-page/register-email/register-email.component.ts
index 6e85a61732..66becd1b6b 100644
--- a/src/themes/custom/app/register-page/register-email/register-email.component.ts
+++ b/src/themes/custom/app/register-page/register-email/register-email.component.ts
@@ -11,5 +11,5 @@ import { RegisterEmailComponent as BaseComponent } from '../../../../../app/regi
 /**
  * Component responsible the email registration step when registering as a new user
  */
-export class RegisterEmailComponent extends BaseComponent{
+export class RegisterEmailComponent extends BaseComponent {
 }
diff --git a/src/themes/custom/app/submission/submit/submission-submit.component.ts b/src/themes/custom/app/submission/submit/submission-submit.component.ts
index 1273e26069..05c3389cb7 100644
--- a/src/themes/custom/app/submission/submit/submission-submit.component.ts
+++ b/src/themes/custom/app/submission/submit/submission-submit.component.ts
@@ -11,5 +11,5 @@ import { SubmissionSubmitComponent as BaseComponent } from '../../../../../app/s
   // templateUrl: './submission-submit.component.html'
   templateUrl: '../../../../../app/submission/submit/submission-submit.component.html'
 })
-export class SubmissionSubmitComponent extends BaseComponent{
+export class SubmissionSubmitComponent extends BaseComponent {
 }

From f5a34bb14eaaa4c9d5e17da3acbd12d3aea2ccb2 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Thu, 4 Mar 2021 14:48:52 +0100
Subject: [PATCH 07/12] fixed lgtm issues

---
 .../themed-browse-by-switcher.component.ts           |  2 +-
 src/app/+item-page/item-page-routing.module.ts       |  1 -
 src/app/app-routing.module.ts                        | 12 +-----------
 .../register-page/register-page-routing.module.ts    |  1 -
 4 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/app/+browse-by/+browse-by-switcher/themed-browse-by-switcher.component.ts b/src/app/+browse-by/+browse-by-switcher/themed-browse-by-switcher.component.ts
index 20d27012fe..9fbf1979b5 100644
--- a/src/app/+browse-by/+browse-by-switcher/themed-browse-by-switcher.component.ts
+++ b/src/app/+browse-by/+browse-by-switcher/themed-browse-by-switcher.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { BrowseBySwitcherComponent } from './browse-by-switcher.component';
diff --git a/src/app/+item-page/item-page-routing.module.ts b/src/app/+item-page/item-page-routing.module.ts
index b259f57dcb..c9f2c402bb 100644
--- a/src/app/+item-page/item-page-routing.module.ts
+++ b/src/app/+item-page/item-page-routing.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { FullItemPageComponent } from './full/full-item-page.component';
 import { ItemPageResolver } from './item-page.resolver';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
 import { ItemBreadcrumbResolver } from '../core/breadcrumbs/item-breadcrumb.resolver';
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 18ce77df07..13e1133d82 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -4,16 +4,7 @@ import { AuthBlockingGuard } from './core/auth/auth-blocking.guard';
 
 import { AuthenticatedGuard } from './core/auth/authenticated.guard';
 import { SiteAdministratorGuard } from './core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
-import {
-  ADMIN_MODULE_PATH,
-  BITSTREAM_MODULE_PATH,
-  FORBIDDEN_PATH,
-  FORGOT_PASSWORD_PATH,
-  INFO_MODULE_PATH,
-  PROFILE_MODULE_PATH,
-  REGISTER_PATH,
-  WORKFLOW_ITEM_MODULE_PATH
-} from './app-routing-paths';
+import { ADMIN_MODULE_PATH, BITSTREAM_MODULE_PATH, FORBIDDEN_PATH, FORGOT_PASSWORD_PATH, INFO_MODULE_PATH, PROFILE_MODULE_PATH, REGISTER_PATH, WORKFLOW_ITEM_MODULE_PATH } from './app-routing-paths';
 import { COLLECTION_MODULE_PATH } from './+collection-page/collection-page-routing-paths';
 import { COMMUNITY_MODULE_PATH } from './+community-page/community-page-routing-paths';
 import { ITEM_MODULE_PATH } from './+item-page/item-page-routing-paths';
@@ -21,7 +12,6 @@ import { PROCESS_MODULE_PATH } from './process-page/process-page-routing.paths';
 import { ReloadGuard } from './core/reload/reload.guard';
 import { EndUserAgreementCurrentUserGuard } from './core/end-user-agreement/end-user-agreement-current-user.guard';
 import { SiteRegisterGuard } from './core/data/feature-authorization/feature-authorization-guard/site-register.guard';
-import { ForbiddenComponent } from './forbidden/forbidden.component';
 import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
 import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component';
 
diff --git a/src/app/register-page/register-page-routing.module.ts b/src/app/register-page/register-page-routing.module.ts
index 0fdb92b4ec..f623643a8d 100644
--- a/src/app/register-page/register-page-routing.module.ts
+++ b/src/app/register-page/register-page-routing.module.ts
@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { RegisterEmailComponent } from './register-email/register-email.component';
-import { CreateProfileComponent } from './create-profile/create-profile.component';
 import { ItemPageResolver } from '../+item-page/item-page.resolver';
 import { RegistrationResolver } from '../register-email-form/registration.resolver';
 import { EndUserAgreementCookieGuard } from '../core/end-user-agreement/end-user-agreement-cookie.guard';

From 1d4c77e48557eead566dda2f2f65ba04df2df851 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Wed, 17 Mar 2021 11:32:59 +0100
Subject: [PATCH 08/12] Added themable header, footer and navbar

---
 src/app/app.module.ts                         |  4 +++
 src/app/footer/themed-footer.component.ts     | 25 ++++++++++++++++
 .../header-navbar-wrapper.component.html      |  6 ++--
 src/app/header/themed-header.component.ts     | 29 +++++++++++++++++++
 src/app/navbar/navbar.module.ts               |  4 ++-
 src/app/navbar/themed-navbar.component.ts     | 25 ++++++++++++++++
 src/app/root/root.component.html              |  2 +-
 .../custom/app/footer/footer.component.html   |  0
 .../custom/app/footer/footer.component.scss   |  0
 .../custom/app/footer/footer.component.ts     | 12 ++++++++
 .../custom/app/header/header.component.html   |  0
 .../custom/app/header/header.component.scss   |  0
 .../custom/app/header/header.component.ts     | 15 ++++++++++
 .../custom/app/navbar/navbar.component.html   |  0
 .../custom/app/navbar/navbar.component.scss   |  0
 .../custom/app/navbar/navbar.component.ts     | 17 +++++++++++
 src/themes/custom/theme.module.ts             |  8 ++++-
 17 files changed, 141 insertions(+), 6 deletions(-)
 create mode 100644 src/app/footer/themed-footer.component.ts
 create mode 100644 src/app/header/themed-header.component.ts
 create mode 100644 src/app/navbar/themed-navbar.component.ts
 create mode 100644 src/themes/custom/app/footer/footer.component.html
 create mode 100644 src/themes/custom/app/footer/footer.component.scss
 create mode 100644 src/themes/custom/app/footer/footer.component.ts
 create mode 100644 src/themes/custom/app/header/header.component.html
 create mode 100644 src/themes/custom/app/header/header.component.scss
 create mode 100644 src/themes/custom/app/header/header.component.ts
 create mode 100644 src/themes/custom/app/navbar/navbar.component.html
 create mode 100644 src/themes/custom/app/navbar/navbar.component.scss
 create mode 100644 src/themes/custom/app/navbar/navbar.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 20aaa4ba02..827c837ce7 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -48,6 +48,8 @@ import { ThemedRootComponent } from './root/themed-root.component';
 import { ThemedEntryComponentModule } from '../themes/themed-entry-component.module';
 import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
 import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component';
+import { ThemedHeaderComponent } from './header/themed-header.component';
+import { ThemedFooterComponent } from './footer/themed-footer.component';
 
 export function getBase() {
   return environment.ui.nameSpace;
@@ -129,11 +131,13 @@ const DECLARATIONS = [
   RootComponent,
   ThemedRootComponent,
   HeaderComponent,
+  ThemedHeaderComponent,
   HeaderNavbarWrapperComponent,
   AdminSidebarComponent,
   AdminSidebarSectionComponent,
   ExpandableAdminSidebarSectionComponent,
   FooterComponent,
+  ThemedFooterComponent,
   PageNotFoundComponent,
   ThemedPageNotFoundComponent,
   NotificationComponent,
diff --git a/src/app/footer/themed-footer.component.ts b/src/app/footer/themed-footer.component.ts
new file mode 100644
index 0000000000..c52a0af29f
--- /dev/null
+++ b/src/app/footer/themed-footer.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { FooterComponent } from './footer.component';
+
+/**
+ * Themed wrapper for FooterComponent
+ */
+@Component({
+  selector: 'ds-themed-footer',
+  styleUrls: ['footer.component.scss'],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedFooterComponent extends ThemedComponent<FooterComponent> {
+  protected getComponentName(): string {
+    return 'FooterComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/footer/footer.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./footer.component`);
+  }
+}
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
index 931ab36749..f99070b738 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -1,4 +1,4 @@
 <div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
-    <ds-header></ds-header>
-    <ds-navbar></ds-navbar>
-</div>
\ No newline at end of file
+    <ds-themed-header></ds-themed-header>
+    <ds-themed-navbar></ds-themed-navbar>
+</div>
diff --git a/src/app/header/themed-header.component.ts b/src/app/header/themed-header.component.ts
new file mode 100644
index 0000000000..8bf43e8ea1
--- /dev/null
+++ b/src/app/header/themed-header.component.ts
@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+import { MenuService } from '../shared/menu/menu.service';
+import { MenuID } from '../shared/menu/initial-menus-state';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { CommunityListPageComponent } from '../community-list-page/community-list-page.component';
+import { HeaderComponent } from './header.component';
+
+/**
+ * Themed wrapper for HeaderComponent
+ */
+@Component({
+  selector: 'ds-themed-header',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedHeaderComponent extends ThemedComponent<HeaderComponent> {
+  protected getComponentName(): string {
+    return 'HeaderComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/header/header.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./header.component`);
+  }
+}
diff --git a/src/app/navbar/navbar.module.ts b/src/app/navbar/navbar.module.ts
index 5e1e11d10f..5299c6cfc3 100644
--- a/src/app/navbar/navbar.module.ts
+++ b/src/app/navbar/navbar.module.ts
@@ -10,6 +10,7 @@ import { ExpandableNavbarSectionComponent } from './expandable-navbar-section/ex
 import { NavbarComponent } from './navbar.component';
 import { MenuModule } from '../shared/menu/menu.module';
 import { FormsModule } from '@angular/forms';
+import { ThemedNavbarComponent } from './themed-navbar.component';
 
 const effects = [
   NavbarEffects
@@ -31,6 +32,7 @@ const ENTRY_COMPONENTS = [
   ],
   declarations: [
     NavbarComponent,
+    ThemedNavbarComponent,
     NavbarSectionComponent,
     ExpandableNavbarSectionComponent
   ],
@@ -42,7 +44,7 @@ const ENTRY_COMPONENTS = [
     ExpandableNavbarSectionComponent
   ],
   exports: [
-    NavbarComponent,
+    ThemedNavbarComponent,
     NavbarSectionComponent,
     ExpandableNavbarSectionComponent
   ]
diff --git a/src/app/navbar/themed-navbar.component.ts b/src/app/navbar/themed-navbar.component.ts
new file mode 100644
index 0000000000..43efdc181e
--- /dev/null
+++ b/src/app/navbar/themed-navbar.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { NavbarComponent } from './navbar.component';
+
+/**
+ * Themed wrapper for NavbarComponent
+ */
+@Component({
+  selector: 'ds-themed-navbar',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedNavbarComponent  extends ThemedComponent<NavbarComponent> {
+  protected getComponentName(): string {
+    return 'NavbarComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/navbar/navbar.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./navbar.component`);
+  }
+}
diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html
index 96439cd999..a0aa4dc1a3 100644
--- a/src/app/root/root.component.html
+++ b/src/app/root/root.component.html
@@ -20,7 +20,7 @@
       <router-outlet></router-outlet>
     </main>
 
-    <ds-footer></ds-footer>
+    <ds-themed-footer></ds-themed-footer>
   </div>
 </div>
 <ng-template #authLoader>
diff --git a/src/themes/custom/app/footer/footer.component.html b/src/themes/custom/app/footer/footer.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/footer/footer.component.scss b/src/themes/custom/app/footer/footer.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/footer/footer.component.ts b/src/themes/custom/app/footer/footer.component.ts
new file mode 100644
index 0000000000..de80ceb311
--- /dev/null
+++ b/src/themes/custom/app/footer/footer.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { FooterComponent as BaseComponent } from '../../../../app/footer/footer.component';
+
+@Component({
+  selector: 'ds-footer',
+  // styleUrls: ['footer.component.scss'],
+  styleUrls: ['../../../../app/footer/footer.component.scss'],
+  // templateUrl: 'footer.component.html'
+  templateUrl: '../../../../app/footer/footer.component.html'
+})
+export class FooterComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/header/header.component.html b/src/themes/custom/app/header/header.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/header/header.component.scss b/src/themes/custom/app/header/header.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/header/header.component.ts b/src/themes/custom/app/header/header.component.ts
new file mode 100644
index 0000000000..866072f3b6
--- /dev/null
+++ b/src/themes/custom/app/header/header.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { HeaderComponent as BaseComponent } from '../../../../app/header/header.component';
+
+/**
+ * Represents the header with the logo and simple navigation
+ */
+@Component({
+  selector: 'ds-header',
+  // styleUrls: ['header.component.scss'],
+  styleUrls: ['../../../../app/header/header.component.scss'],
+  // templateUrl: 'header.component.html',
+  templateUrl: '../../../../app/header/header.component.html',
+})
+export class HeaderComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/navbar/navbar.component.html b/src/themes/custom/app/navbar/navbar.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/navbar/navbar.component.scss b/src/themes/custom/app/navbar/navbar.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/navbar/navbar.component.ts b/src/themes/custom/app/navbar/navbar.component.ts
new file mode 100644
index 0000000000..e163f096e9
--- /dev/null
+++ b/src/themes/custom/app/navbar/navbar.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { NavbarComponent as BaseComponent } from '../../../../app/navbar/navbar.component';
+import { slideMobileNav } from '../../../../app/shared/animations/slide';
+
+/**
+ * Component representing the public navbar
+ */
+@Component({
+  selector: 'ds-navbar',
+  // styleUrls: ['./navbar.component.scss'],
+  styleUrls: ['../../../../app/navbar/navbar.component.scss'],
+  // templateUrl: './navbar.component.html',
+  templateUrl: '../../../../app/navbar/navbar.component.html',
+  animations: [slideMobileNav]
+})
+export class NavbarComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index 6192451692..0e1096f957 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -74,6 +74,9 @@ import { WorkflowItemSendBackComponent } from './app/+workflowitems-edit-page/wo
 import { WorkflowItemDeleteComponent } from './app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component';
 import { SubmissionModule } from '../../app/submission/submission.module';
 import { MyDSpacePageModule } from '../../app/+my-dspace-page/my-dspace-page.module';
+import { NavbarComponent } from './app/navbar/navbar.component';
+import { HeaderComponent } from './app/header/header.component';
+import { FooterComponent } from './app/footer/footer.component';
 
 const DECLARATIONS = [
   HomePageComponent,
@@ -109,7 +112,10 @@ const DECLARATIONS = [
   SubmissionImportExternalComponent,
   SubmissionSubmitComponent,
   WorkflowItemDeleteComponent,
-  WorkflowItemSendBackComponent
+  WorkflowItemSendBackComponent,
+  FooterComponent,
+  HeaderComponent,
+  NavbarComponent
 
 ];
 

From d50bef9c8a3a1bb018fd561b035ca48daf35bcd8 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Wed, 17 Mar 2021 11:51:08 +0100
Subject: [PATCH 09/12] Fixed LGTM import issues

---
 src/app/header/themed-header.component.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/app/header/themed-header.component.ts b/src/app/header/themed-header.component.ts
index 8bf43e8ea1..51c817b63d 100644
--- a/src/app/header/themed-header.component.ts
+++ b/src/app/header/themed-header.component.ts
@@ -1,9 +1,5 @@
 import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { MenuService } from '../shared/menu/menu.service';
-import { MenuID } from '../shared/menu/initial-menus-state';
 import { ThemedComponent } from '../shared/theme-support/themed.component';
-import { CommunityListPageComponent } from '../community-list-page/community-list-page.component';
 import { HeaderComponent } from './header.component';
 
 /**

From b12e616ff61651bc08ecff992da9bb08cdb511da Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Wed, 17 Mar 2021 11:51:35 +0100
Subject: [PATCH 10/12] Added themable breadcrumbs

---
 src/app/app.module.ts                         |  2 ++
 .../themed-breadcrumbs.component.ts           | 25 +++++++++++++++++++
 src/app/root/root.component.html              |  2 +-
 .../breadcrumbs/breadcrumbs.component.html    |  0
 .../breadcrumbs/breadcrumbs.component.scss    |  0
 .../app/breadcrumbs/breadcrumbs.component.ts  | 15 +++++++++++
 src/themes/custom/theme.module.ts             |  5 ++--
 7 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 src/app/breadcrumbs/themed-breadcrumbs.component.ts
 create mode 100644 src/themes/custom/app/breadcrumbs/breadcrumbs.component.html
 create mode 100644 src/themes/custom/app/breadcrumbs/breadcrumbs.component.scss
 create mode 100644 src/themes/custom/app/breadcrumbs/breadcrumbs.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 827c837ce7..5bfa593ef1 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -50,6 +50,7 @@ import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.
 import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component';
 import { ThemedHeaderComponent } from './header/themed-header.component';
 import { ThemedFooterComponent } from './footer/themed-footer.component';
+import { ThemedBreadcrumbsComponent } from './breadcrumbs/themed-breadcrumbs.component';
 
 export function getBase() {
   return environment.ui.nameSpace;
@@ -144,6 +145,7 @@ const DECLARATIONS = [
   NotificationsBoardComponent,
   SearchNavbarComponent,
   BreadcrumbsComponent,
+  ThemedBreadcrumbsComponent,
   ForbiddenComponent,
   ThemedForbiddenComponent,
 ];
diff --git a/src/app/breadcrumbs/themed-breadcrumbs.component.ts b/src/app/breadcrumbs/themed-breadcrumbs.component.ts
new file mode 100644
index 0000000000..1869a440b9
--- /dev/null
+++ b/src/app/breadcrumbs/themed-breadcrumbs.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { BreadcrumbsComponent } from './breadcrumbs.component';
+
+/**
+ * Themed wrapper for BreadcrumbsComponent
+ */
+@Component({
+  selector: 'ds-themed-breadcrumbs',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedBreadcrumbsComponent extends ThemedComponent<BreadcrumbsComponent> {
+  protected getComponentName(): string {
+    return 'BreadcrumbsComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/breadcrumbs/breadcrumbs.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./breadcrumbs.component`);
+  }
+}
diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html
index a0aa4dc1a3..af59e0d2ad 100644
--- a/src/app/root/root.component.html
+++ b/src/app/root/root.component.html
@@ -11,7 +11,7 @@
     </ds-notifications-board>
     <main class="main-content">
       <div class="container">
-        <ds-breadcrumbs></ds-breadcrumbs>
+        <ds-themed-breadcrumbs></ds-themed-breadcrumbs>
       </div>
 
       <div class="container" *ngIf="isLoading">
diff --git a/src/themes/custom/app/breadcrumbs/breadcrumbs.component.html b/src/themes/custom/app/breadcrumbs/breadcrumbs.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/breadcrumbs/breadcrumbs.component.scss b/src/themes/custom/app/breadcrumbs/breadcrumbs.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/breadcrumbs/breadcrumbs.component.ts b/src/themes/custom/app/breadcrumbs/breadcrumbs.component.ts
new file mode 100644
index 0000000000..32d00fc8b6
--- /dev/null
+++ b/src/themes/custom/app/breadcrumbs/breadcrumbs.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { BreadcrumbsComponent as BaseComponent } from '../../../../app/breadcrumbs/breadcrumbs.component';
+
+/**
+ * Component representing the breadcrumbs of a page
+ */
+@Component({
+  selector: 'ds-breadcrumbs',
+  // templateUrl: './breadcrumbs.component.html',
+  templateUrl: '../../../../app/breadcrumbs/breadcrumbs.component.html',
+  // styleUrls: ['./breadcrumbs.component.scss']
+  styleUrls: ['../../../../app/breadcrumbs/breadcrumbs.component.scss']
+})
+export class BreadcrumbsComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index 0e1096f957..b9bba225a7 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -77,6 +77,7 @@ import { MyDSpacePageModule } from '../../app/+my-dspace-page/my-dspace-page.mod
 import { NavbarComponent } from './app/navbar/navbar.component';
 import { HeaderComponent } from './app/header/header.component';
 import { FooterComponent } from './app/footer/footer.component';
+import { BreadcrumbsComponent } from './app/breadcrumbs/breadcrumbs.component';
 
 const DECLARATIONS = [
   HomePageComponent,
@@ -115,8 +116,8 @@ const DECLARATIONS = [
   WorkflowItemSendBackComponent,
   FooterComponent,
   HeaderComponent,
-  NavbarComponent
-
+  NavbarComponent,
+  BreadcrumbsComponent
 ];
 
 @NgModule({

From c19ee0d49ebf752a5ea58e7960c659a85bdf7878 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Wed, 17 Mar 2021 12:09:50 +0100
Subject: [PATCH 11/12] Updated TypeDoc for themed components

---
 .../themed-browse-by-switcher.component.ts                 | 6 +++---
 .../+collection-page/themed-collection-page.component.ts   | 7 +++----
 src/app/+community-page/themed-community-page.component.ts | 7 +++----
 .../objectnotfound/themed-objectnotfound.component.ts      | 7 +++----
 .../themed-configuration-search-page.component.ts          | 7 +++----
 src/app/+search-page/themed-search-page.component.ts       | 7 +++----
 .../themed-community-list-page.component.ts                | 3 +--
 src/app/forbidden/themed-forbidden.component.ts            | 7 +++----
 .../themed-end-user-agreement.component.ts                 | 7 +++----
 src/app/info/privacy/themed-privacy.component.ts           | 7 +++----
 src/app/pagenotfound/themed-pagenotfound.component.ts      | 7 +++----
 .../themed-collection-statistics-page.component.ts         | 7 +++----
 .../themed-community-statistics-page.component.ts          | 7 +++----
 .../themed-item-statistics-page.component.ts               | 7 +++----
 .../themed-site-statistics-page.component.ts               | 7 +++----
 15 files changed, 43 insertions(+), 57 deletions(-)

diff --git a/src/app/+browse-by/+browse-by-switcher/themed-browse-by-switcher.component.ts b/src/app/+browse-by/+browse-by-switcher/themed-browse-by-switcher.component.ts
index 9fbf1979b5..e92fe30ba9 100644
--- a/src/app/+browse-by/+browse-by-switcher/themed-browse-by-switcher.component.ts
+++ b/src/app/+browse-by/+browse-by-switcher/themed-browse-by-switcher.component.ts
@@ -3,14 +3,14 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { BrowseBySwitcherComponent } from './browse-by-switcher.component';
 
+/**
+ * Themed wrapper for BrowseBySwitcherComponent
+ */
 @Component({
   selector: 'ds-themed-browse-by-switcher',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html'
 })
-/**
- * Component for determining what Browse-By component to use depending on the metadata (browse ID) provided
- */
 export class ThemedBrowseBySwitcherComponent extends ThemedComponent<BrowseBySwitcherComponent> {
   protected getComponentName(): string {
     return 'BrowseBySwitcherComponent';
diff --git a/src/app/+collection-page/themed-collection-page.component.ts b/src/app/+collection-page/themed-collection-page.component.ts
index 7bbc720e30..4ad9ed87e3 100644
--- a/src/app/+collection-page/themed-collection-page.component.ts
+++ b/src/app/+collection-page/themed-collection-page.component.ts
@@ -2,15 +2,14 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../shared/theme-support/themed.component';
 import { CollectionPageComponent } from './collection-page.component';
 
+/**
+ * Themed wrapper for CollectionPageComponent
+ */
 @Component({
   selector: 'ds-themed-community-page',
   styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
 })
-
-/**
- * Component to render the news section on the home page
- */
 export class ThemedCollectionPageComponent extends ThemedComponent<CollectionPageComponent> {
   protected getComponentName(): string {
     return 'CollectionPageComponent';
diff --git a/src/app/+community-page/themed-community-page.component.ts b/src/app/+community-page/themed-community-page.component.ts
index b420789c5f..97dd59821c 100644
--- a/src/app/+community-page/themed-community-page.component.ts
+++ b/src/app/+community-page/themed-community-page.component.ts
@@ -2,15 +2,14 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../shared/theme-support/themed.component';
 import { CommunityPageComponent } from './community-page.component';
 
+/**
+ * Themed wrapper for CommunityPageComponent
+ */
 @Component({
   selector: 'ds-themed-community-page',
   styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
 })
-
-/**
- * Component to render the news section on the home page
- */
 export class ThemedCommunityPageComponent extends ThemedComponent<CommunityPageComponent> {
   protected getComponentName(): string {
     return 'CommunityPageComponent';
diff --git a/src/app/+lookup-by-id/objectnotfound/themed-objectnotfound.component.ts b/src/app/+lookup-by-id/objectnotfound/themed-objectnotfound.component.ts
index 947a9f4eaa..e1bec33dfd 100644
--- a/src/app/+lookup-by-id/objectnotfound/themed-objectnotfound.component.ts
+++ b/src/app/+lookup-by-id/objectnotfound/themed-objectnotfound.component.ts
@@ -2,15 +2,14 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { ObjectNotFoundComponent } from './objectnotfound.component';
 
+/**
+ * Themed wrapper for ObjectNotFoundComponent
+ */
 @Component({
   selector: 'ds-themed-objnotfound',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
 })
-
-/**
- * Component to render the news section on the home page
- */
 export class ThemedObjectNotFoundComponent extends ThemedComponent<ObjectNotFoundComponent> {
   protected getComponentName(): string {
     return 'ObjectNotFoundComponent';
diff --git a/src/app/+search-page/themed-configuration-search-page.component.ts b/src/app/+search-page/themed-configuration-search-page.component.ts
index 3528d3a326..9f7277be0e 100644
--- a/src/app/+search-page/themed-configuration-search-page.component.ts
+++ b/src/app/+search-page/themed-configuration-search-page.component.ts
@@ -4,15 +4,14 @@ import { ConfigurationSearchPageComponent } from './configuration-search-page.co
 import { Observable } from 'rxjs';
 import { Context } from '../core/shared/context.model';
 
+/**
+ * Themed wrapper for ConfigurationSearchPageComponent
+ */
 @Component({
   selector: 'ds-themed-configuration-search-page',
   styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
 })
-
-/**
- * Component to render the news section on the home page
- */
 export class ThemedConfigurationSearchPageComponent extends ThemedComponent<ConfigurationSearchPageComponent> {
   /**
    * The configuration to use for the search options
diff --git a/src/app/+search-page/themed-search-page.component.ts b/src/app/+search-page/themed-search-page.component.ts
index b23fff6289..0b2f673373 100644
--- a/src/app/+search-page/themed-search-page.component.ts
+++ b/src/app/+search-page/themed-search-page.component.ts
@@ -2,15 +2,14 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../shared/theme-support/themed.component';
 import { SearchPageComponent } from './search-page.component';
 
+/**
+ * Themed wrapper for SearchPageComponent
+ */
 @Component({
   selector: 'ds-themed-search-page',
   styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
 })
-/**
- * This component represents the whole search page
- * It renders search results depending on the current search options
- */
 export class ThemedSearchPageComponent extends ThemedComponent<SearchPageComponent> {
 
   protected getComponentName(): string {
diff --git a/src/app/community-list-page/themed-community-list-page.component.ts b/src/app/community-list-page/themed-community-list-page.component.ts
index 6b374fca90..20fa97bedd 100644
--- a/src/app/community-list-page/themed-community-list-page.component.ts
+++ b/src/app/community-list-page/themed-community-list-page.component.ts
@@ -3,8 +3,7 @@ import { ThemedComponent } from '../shared/theme-support/themed.component';
 import { CommunityListPageComponent } from './community-list-page.component';
 
 /**
- * Page with title and the community list tree, as described in community-list.component;
- * navigated to with community-list.page.routing.module
+ * Themed wrapper for CommunityListPageComponent
  */
 @Component({
   selector: 'ds-themed-community-list-page',
diff --git a/src/app/forbidden/themed-forbidden.component.ts b/src/app/forbidden/themed-forbidden.component.ts
index bb3694cae2..830529c8fa 100644
--- a/src/app/forbidden/themed-forbidden.component.ts
+++ b/src/app/forbidden/themed-forbidden.component.ts
@@ -2,15 +2,14 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../shared/theme-support/themed.component';
 import { ForbiddenComponent } from './forbidden.component';
 
+/**
+ * Themed wrapper for ForbiddenComponent
+ */
 @Component({
   selector: 'ds-themed-forbidden',
   styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
 })
-
-/**
- * Component to render the news section on the home page
- */
 export class ThemedForbiddenComponent extends ThemedComponent<ForbiddenComponent> {
   protected getComponentName(): string {
     return 'ForbiddenComponent';
diff --git a/src/app/info/end-user-agreement/themed-end-user-agreement.component.ts b/src/app/info/end-user-agreement/themed-end-user-agreement.component.ts
index 6c76314e06..74eb545b8a 100644
--- a/src/app/info/end-user-agreement/themed-end-user-agreement.component.ts
+++ b/src/app/info/end-user-agreement/themed-end-user-agreement.component.ts
@@ -2,15 +2,14 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { EndUserAgreementComponent } from './end-user-agreement.component';
 
+/**
+ * Themed wrapper for EndUserAgreementComponent
+ */
 @Component({
   selector: 'ds-themed-end-user-agreement',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
 })
-
-/**
- * Component to render the news section on the home page
- */
 export class ThemedEndUserAgreementComponent extends ThemedComponent<EndUserAgreementComponent> {
 
   protected getComponentName(): string {
diff --git a/src/app/info/privacy/themed-privacy.component.ts b/src/app/info/privacy/themed-privacy.component.ts
index 5aed8d38af..7f2ee80ffc 100644
--- a/src/app/info/privacy/themed-privacy.component.ts
+++ b/src/app/info/privacy/themed-privacy.component.ts
@@ -2,15 +2,14 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { PrivacyComponent } from './privacy.component';
 
+/**
+ * Themed wrapper for PrivacyComponent
+ */
 @Component({
   selector: 'ds-themed-privacy',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
 })
-
-/**
- * Component to render the news section on the home page
- */
 export class ThemedPrivacyComponent extends ThemedComponent<PrivacyComponent> {
   protected getComponentName(): string {
     return 'PrivacyComponent';
diff --git a/src/app/pagenotfound/themed-pagenotfound.component.ts b/src/app/pagenotfound/themed-pagenotfound.component.ts
index 68b06e2ac0..e6ef9eb700 100644
--- a/src/app/pagenotfound/themed-pagenotfound.component.ts
+++ b/src/app/pagenotfound/themed-pagenotfound.component.ts
@@ -2,15 +2,14 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../shared/theme-support/themed.component';
 import { PageNotFoundComponent } from './pagenotfound.component';
 
+/**
+ * Themed wrapper for PageNotFoundComponent
+ */
 @Component({
   selector: 'ds-themed-search-page',
   styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
 })
-/**
- * This component represents the whole search page
- * It renders search results depending on the current search options
- */
 export class ThemedPageNotFoundComponent extends ThemedComponent<PageNotFoundComponent> {
 
   protected getComponentName(): string {
diff --git a/src/app/statistics-page/collection-statistics-page/themed-collection-statistics-page.component.ts b/src/app/statistics-page/collection-statistics-page/themed-collection-statistics-page.component.ts
index 75cf60437f..dab96aef04 100644
--- a/src/app/statistics-page/collection-statistics-page/themed-collection-statistics-page.component.ts
+++ b/src/app/statistics-page/collection-statistics-page/themed-collection-statistics-page.component.ts
@@ -2,15 +2,14 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { CollectionStatisticsPageComponent } from './collection-statistics-page.component';
 
+/**
+ * Themed wrapper for CollectionStatisticsPageComponent
+ */
 @Component({
   selector: 'ds-themed-collection-statistics-page',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
 })
-
-/**
- * Component to render the news section on the home page
- */
 export class ThemedCollectionStatisticsPageComponent extends ThemedComponent<CollectionStatisticsPageComponent> {
   protected getComponentName(): string {
     return 'CollectionStatisticsPageComponent';
diff --git a/src/app/statistics-page/community-statistics-page/themed-community-statistics-page.component.ts b/src/app/statistics-page/community-statistics-page/themed-community-statistics-page.component.ts
index 34dc17e1b3..17f185f786 100644
--- a/src/app/statistics-page/community-statistics-page/themed-community-statistics-page.component.ts
+++ b/src/app/statistics-page/community-statistics-page/themed-community-statistics-page.component.ts
@@ -2,15 +2,14 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { CommunityStatisticsPageComponent } from './community-statistics-page.component';
 
+/**
+ * Themed wrapper for CommunityStatisticsPageComponent
+ */
 @Component({
   selector: 'ds-themed-collection-statistics-page',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
 })
-
-/**
- * Component to render the news section on the home page
- */
 export class ThemedCommunityStatisticsPageComponent extends ThemedComponent<CommunityStatisticsPageComponent> {
   protected getComponentName(): string {
     return 'CommunityStatisticsPageComponent';
diff --git a/src/app/statistics-page/item-statistics-page/themed-item-statistics-page.component.ts b/src/app/statistics-page/item-statistics-page/themed-item-statistics-page.component.ts
index 4651269c54..50e26329a9 100644
--- a/src/app/statistics-page/item-statistics-page/themed-item-statistics-page.component.ts
+++ b/src/app/statistics-page/item-statistics-page/themed-item-statistics-page.component.ts
@@ -2,15 +2,14 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { ItemStatisticsPageComponent } from './item-statistics-page.component';
 
+/**
+ * Themed wrapper for ItemStatisticsPageComponent
+ */
 @Component({
   selector: 'ds-themed-item-statistics-page',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
 })
-
-/**
- * Component to render the news section on the home page
- */
 export class ThemedItemStatisticsPageComponent extends ThemedComponent<ItemStatisticsPageComponent> {
   protected getComponentName(): string {
     return 'ItemStatisticsPageComponent';
diff --git a/src/app/statistics-page/site-statistics-page/themed-site-statistics-page.component.ts b/src/app/statistics-page/site-statistics-page/themed-site-statistics-page.component.ts
index 4238cc788a..3f841163ed 100644
--- a/src/app/statistics-page/site-statistics-page/themed-site-statistics-page.component.ts
+++ b/src/app/statistics-page/site-statistics-page/themed-site-statistics-page.component.ts
@@ -2,15 +2,14 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { SiteStatisticsPageComponent } from './site-statistics-page.component';
 
+/**
+ * Themed wrapper for SiteStatisticsPageComponent
+ */
 @Component({
   selector: 'ds-themed-site-statistics-page',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
 })
-
-/**
- * Component to render the news section on the home page
- */
 export class ThemedSiteStatisticsPageComponent extends ThemedComponent<SiteStatisticsPageComponent> {
   protected getComponentName(): string {
     return 'SiteStatisticsPageComponent';

From 6cc56176b2b721ae1259be57effc0fbd0f208fbb Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Thu, 25 Mar 2021 17:27:34 +0100
Subject: [PATCH 12/12] fixed path for custom theme item-page

---
 src/themes/custom/app/+item-page/simple/item-page.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/themes/custom/app/+item-page/simple/item-page.component.ts b/src/themes/custom/app/+item-page/simple/item-page.component.ts
index 1ba534972e..dfd792b3e2 100644
--- a/src/themes/custom/app/+item-page/simple/item-page.component.ts
+++ b/src/themes/custom/app/+item-page/simple/item-page.component.ts
@@ -9,7 +9,7 @@ import { fadeInOut } from '../../../../../app/shared/animations/fade';
  */
 @Component({
   selector: 'ds-item-page',
-  // styleUrls: ['../item-page.component.scss'],
+  // styleUrls: ['./item-page.component.scss'],
   styleUrls: ['../../../../../app/+item-page/simple/item-page.component.scss'],
   // templateUrl: './item-page.component.html',
   templateUrl: '../../../../../app/+item-page/simple/item-page.component.html',