From 2b17bb8f1e5ebdb1c1bcb49beffcab7ff265133f Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 7 Apr 2022 11:29:22 +0200
Subject: [PATCH 01/33] 89676: Themeable browse-by-page decorator &
 search-results component

---
 .../browse-by-switcher/browse-by-decorator.ts | 27 ++++++--
 .../browse-by-switcher.component.ts           |  6 +-
 .../themed-search-results.component.ts        | 64 +++++++++++++++++++
 src/app/shared/search/search.component.html   |  4 +-
 src/app/shared/search/search.module.ts        |  4 +-
 5 files changed, 93 insertions(+), 12 deletions(-)
 create mode 100644 src/app/shared/search/search-results/themed-search-results.component.ts

diff --git a/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts b/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts
index 1ebaa7face..ceb4c6a6c6 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts
@@ -1,6 +1,10 @@
 import { hasNoValue } from '../../shared/empty.util';
 import { InjectionToken } from '@angular/core';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
+import {
+  DEFAULT_THEME,
+  resolveTheme
+} from '../../shared/object-collection/shared/listable-object/listable-object.decorator';
 
 export enum BrowseByDataType {
   Title = 'title',
@@ -10,7 +14,7 @@ export enum BrowseByDataType {
 
 export const DEFAULT_BROWSE_BY_TYPE = BrowseByDataType.Metadata;
 
-export const BROWSE_BY_COMPONENT_FACTORY = new InjectionToken<(browseByType) => GenericConstructor<any>>('getComponentByBrowseByType', {
+export const BROWSE_BY_COMPONENT_FACTORY = new InjectionToken<(browseByType, theme) => GenericConstructor<any>>('getComponentByBrowseByType', {
   providedIn: 'root',
   factory: () => getComponentByBrowseByType
 });
@@ -20,13 +24,17 @@ const map = new Map();
 /**
  * Decorator used for rendering Browse-By pages by type
  * @param browseByType  The type of page
+ * @param theme The optional theme for the component
  */
-export function rendersBrowseBy(browseByType: BrowseByDataType) {
+export function rendersBrowseBy(browseByType: BrowseByDataType, theme = DEFAULT_THEME) {
   return function decorator(component: any) {
     if (hasNoValue(map.get(browseByType))) {
-      map.set(browseByType, component);
+      map.set(browseByType, new Map());
+    }
+    if (hasNoValue(map.get(browseByType).get(theme))) {
+      map.get(browseByType).set(theme, component);
     } else {
-      throw new Error(`There can't be more than one component to render Browse-By of type "${browseByType}"`);
+      throw new Error(`There can't be more than one component to render Browse-By of type "${browseByType}" and theme "${theme}"`);
     }
   };
 }
@@ -34,11 +42,16 @@ export function rendersBrowseBy(browseByType: BrowseByDataType) {
 /**
  * Get the component used for rendering a Browse-By page by type
  * @param browseByType  The type of page
+ * @param theme the theme to match
  */
-export function getComponentByBrowseByType(browseByType) {
-  const comp = map.get(browseByType);
+export function getComponentByBrowseByType(browseByType, theme) {
+  let themeMap = map.get(browseByType);
+  if (hasNoValue(themeMap)) {
+    themeMap = map.get(DEFAULT_BROWSE_BY_TYPE);
+  }
+  const comp = resolveTheme(themeMap, theme);
   if (hasNoValue(comp)) {
-    map.get(DEFAULT_BROWSE_BY_TYPE);
+    return themeMap.get(DEFAULT_THEME);
   }
   return comp;
 }
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
index cf4c1d9856..0d3a35bebf 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
@@ -5,6 +5,7 @@ import { map } from 'rxjs/operators';
 import { BROWSE_BY_COMPONENT_FACTORY } from './browse-by-decorator';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
 import { BrowseDefinition } from '../../core/shared/browse-definition.model';
+import { ThemeService } from '../../shared/theme-support/theme.service';
 
 @Component({
   selector: 'ds-browse-by-switcher',
@@ -21,7 +22,8 @@ export class BrowseBySwitcherComponent implements OnInit {
   browseByComponent: Observable<any>;
 
   public constructor(protected route: ActivatedRoute,
-                     @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType) => GenericConstructor<any>) {
+                     protected themeService: ThemeService,
+                     @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType, theme) => GenericConstructor<any>) {
   }
 
   /**
@@ -29,7 +31,7 @@ export class BrowseBySwitcherComponent implements OnInit {
    */
   ngOnInit(): void {
     this.browseByComponent = this.route.data.pipe(
-      map((data: { browseDefinition: BrowseDefinition }) => this.getComponentByBrowseByType(data.browseDefinition.dataType))
+      map((data: { browseDefinition: BrowseDefinition }) => this.getComponentByBrowseByType(data.browseDefinition.dataType, this.themeService.getThemeName()))
     );
   }
 
diff --git a/src/app/shared/search/search-results/themed-search-results.component.ts b/src/app/shared/search/search-results/themed-search-results.component.ts
new file mode 100644
index 0000000000..19a8fc55e8
--- /dev/null
+++ b/src/app/shared/search/search-results/themed-search-results.component.ts
@@ -0,0 +1,64 @@
+import { ThemedComponent } from '../../theme-support/themed.component';
+import { SearchResultsComponent, SelectionConfig } from './search-results.component';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CollectionElementLinkType } from '../../object-collection/collection-element-link.type';
+import { RemoteData } from '../../../core/data/remote-data';
+import { PaginatedList } from '../../../core/data/paginated-list.model';
+import { SearchResult } from '../models/search-result.model';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { PaginatedSearchOptions } from '../models/paginated-search-options.model';
+import { SortOptions } from '../../../core/cache/models/sort-options.model';
+import { ViewMode } from '../../../core/shared/view-mode.model';
+import { Context } from '../../../core/shared/context.model';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+
+/**
+ * Themed wrapper for SearchResultsComponent
+ */
+@Component({
+  selector: 'ds-themed-search-results',
+  styleUrls: [],
+  templateUrl: '../../theme-support/themed.component.html',
+})
+export class ThemedSearchResultsComponent extends ThemedComponent<SearchResultsComponent> {
+  protected inAndOutputNames: (keyof SearchResultsComponent & keyof this)[] = ['linkType', 'searchResults', 'searchConfig', 'sortConfig', 'viewMode', 'configuration', 'disableHeader', 'selectable', 'context', 'hidePaginationDetail', 'selectionConfig', 'deselectObject', 'selectObject'];
+
+  @Input() linkType: CollectionElementLinkType;
+
+  @Input() searchResults: RemoteData<PaginatedList<SearchResult<DSpaceObject>>>;
+
+  @Input() searchConfig: PaginatedSearchOptions;
+
+  @Input() sortConfig: SortOptions;
+
+  @Input() viewMode: ViewMode;
+
+  @Input() configuration: string;
+
+  @Input() disableHeader = false;
+
+  @Input() selectable = false;
+
+  @Input() context: Context;
+
+  @Input() hidePaginationDetail = false;
+
+  @Input() selectionConfig: SelectionConfig = null;
+
+  @Output() deselectObject: EventEmitter<ListableObject> = new EventEmitter<ListableObject>();
+
+  @Output() selectObject: EventEmitter<ListableObject> = new EventEmitter<ListableObject>();
+
+  protected getComponentName(): string {
+    return 'SearchResultsComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../../themes/${themeName}/app/shared/search/search-results/search-results.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./search-results.component');
+  }
+
+}
diff --git a/src/app/shared/search/search.component.html b/src/app/shared/search/search.component.html
index 5ca3e925a5..aac77b3570 100644
--- a/src/app/shared/search/search.component.html
+++ b/src/app/shared/search/search.component.html
@@ -29,7 +29,7 @@
                         | translate}}
                 </button>
             </div>
-            <ds-search-results [searchResults]="resultsRD$ | async"
+            <ds-themed-search-results [searchResults]="resultsRD$ | async"
                                [searchConfig]="searchOptions$ | async"
                                [configuration]="(currentConfiguration$ | async)"
                                [disableHeader]="!searchEnabled"
@@ -38,7 +38,7 @@
                                [selectable]="selectable"
                                [selectionConfig]="selectionConfig"
                                (deselectObject)="deselectObject.emit($event)"
-                               (selectObject)="selectObject.emit($event)"></ds-search-results>
+                               (selectObject)="selectObject.emit($event)"></ds-themed-search-results>
         </div>
     </div>
 </ng-template>
diff --git a/src/app/shared/search/search.module.ts b/src/app/shared/search/search.module.ts
index 668d260c23..991fad409b 100644
--- a/src/app/shared/search/search.module.ts
+++ b/src/app/shared/search/search.module.ts
@@ -28,6 +28,7 @@ import { MissingTranslationHelper } from '../translate/missing-translation.helpe
 import { SharedModule } from '../shared.module';
 import { SearchResultsComponent } from './search-results/search-results.component';
 import { SearchComponent } from './search.component';
+import { ThemedSearchResultsComponent } from './search-results/themed-search-results.component';
 
 const COMPONENTS = [
   SearchComponent,
@@ -50,7 +51,8 @@ const COMPONENTS = [
   SearchAuthorityFilterComponent,
   SearchSwitchConfigurationComponent,
   ConfigurationSearchPageComponent,
-  ThemedConfigurationSearchPageComponent
+  ThemedConfigurationSearchPageComponent,
+  ThemedSearchResultsComponent,
 ];
 
 const ENTRY_COMPONENTS = [

From 0ed7f2e0aa0d1b43f9ed82f5cadf8cc74c5b7cb6 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Fri, 8 Apr 2022 11:12:26 +0200
Subject: [PATCH 02/33] 89676: Test fixes

---
 .../browse-by-switcher.component.spec.ts           | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts
index cb82ddb7c4..c2e1c9cb68 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts
@@ -4,7 +4,8 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { BROWSE_BY_COMPONENT_FACTORY, BrowseByDataType } from './browse-by-decorator';
 import { BrowseDefinition } from '../../core/shared/browse-definition.model';
-import { BehaviorSubject, of as observableOf } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
+import { ThemeService } from '../../shared/theme-support/theme.service';
 
 describe('BrowseBySwitcherComponent', () => {
   let comp: BrowseBySwitcherComponent;
@@ -44,11 +45,20 @@ describe('BrowseBySwitcherComponent', () => {
     data
   };
 
+  let themeService: ThemeService;
+  let themeName: string;
+
   beforeEach(waitForAsync(() => {
+    themeName = 'dspace';
+    themeService = jasmine.createSpyObj('themeService', {
+      getThemeName: themeName,
+    });
+
     TestBed.configureTestingModule({
       declarations: [BrowseBySwitcherComponent],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: ThemeService, useValue: themeService },
         { provide: BROWSE_BY_COMPONENT_FACTORY, useValue: jasmine.createSpy('getComponentByBrowseByType').and.returnValue(null) }
       ],
       schemas: [NO_ERRORS_SCHEMA]
@@ -68,7 +78,7 @@ describe('BrowseBySwitcherComponent', () => {
       });
 
       it(`should call getComponentByBrowseByType with type "${type.dataType}"`, () => {
-        expect((comp as any).getComponentByBrowseByType).toHaveBeenCalledWith(type.dataType);
+        expect((comp as any).getComponentByBrowseByType).toHaveBeenCalledWith(type.dataType, themeName);
       });
     });
   });

From 155db64c63363d7e69fd342a0aabf686697a4291 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 12 Apr 2022 09:36:18 +0200
Subject: [PATCH 03/33] 86526: Added themable AuthNavMenuComponent

---
 src/app/header/header.component.html          |  2 +-
 .../themed-auth-nav-menu.component.ts         | 25 +++++++++++++++++++
 src/app/shared/shared.module.ts               |  2 ++
 .../dspace/app/header/header.component.html   |  2 +-
 .../dspace/app/navbar/navbar.component.html   |  2 +-
 5 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 src/app/shared/auth-nav-menu/themed-auth-nav-menu.component.ts

diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index c7b979d266..e5d5f38971 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -8,7 +8,7 @@
       <nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
         <ds-search-navbar></ds-search-navbar>
         <ds-lang-switch></ds-lang-switch>
-        <ds-auth-nav-menu></ds-auth-nav-menu>
+        <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
         <ds-impersonate-navbar></ds-impersonate-navbar>
         <div class="pl-2">
           <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
diff --git a/src/app/shared/auth-nav-menu/themed-auth-nav-menu.component.ts b/src/app/shared/auth-nav-menu/themed-auth-nav-menu.component.ts
new file mode 100644
index 0000000000..14ea45d236
--- /dev/null
+++ b/src/app/shared/auth-nav-menu/themed-auth-nav-menu.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../theme-support/themed.component';
+import { AuthNavMenuComponent } from './auth-nav-menu.component';
+
+/**
+ * Themed wrapper for {@link AuthNavMenuComponent}
+ */
+@Component({
+  selector: 'ds-themed-auth-nav-menu',
+  styleUrls: [],
+  templateUrl: '../theme-support/themed.component.html',
+})
+export class ThemedAuthNavMenuComponent extends ThemedComponent<AuthNavMenuComponent> {
+  protected getComponentName(): string {
+    return 'AuthNavMenuComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/shared/auth-nav-menu/auth-nav-menu.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./auth-nav-menu.component`);
+  }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 9b993e551f..34ee541773 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -48,6 +48,7 @@ import { SearchResultGridElementComponent } from './object-grid/search-result-gr
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
 import { VarDirective } from './utils/var.directive';
 import { AuthNavMenuComponent } from './auth-nav-menu/auth-nav-menu.component';
+import { ThemedAuthNavMenuComponent } from './auth-nav-menu/themed-auth-nav-menu.component';
 import { LogOutComponent } from './log-out/log-out.component';
 import { FormComponent } from './form/form.component';
 import { DsDynamicOneboxComponent } from './form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component';
@@ -292,6 +293,7 @@ const COMPONENTS = [
   // put shared components here
   AlertComponent,
   AuthNavMenuComponent,
+  ThemedAuthNavMenuComponent,
   UserMenuComponent,
   ChipsComponent,
   ComcolPageContentComponent,
diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
index cf691ea6c4..0fd4d42518 100644
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -8,7 +8,7 @@
     <div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
       <ds-search-navbar class="navbar-search"></ds-search-navbar>
       <ds-lang-switch></ds-lang-switch>
-      <ds-auth-nav-menu></ds-auth-nav-menu>
+      <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
       <ds-impersonate-navbar></ds-impersonate-navbar>
       <div class="pl-2">
         <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
index 5af30db632..e66c0a6718 100644
--- a/src/themes/dspace/app/navbar/navbar.component.html
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -17,7 +17,7 @@
     </div>
     <ds-search-navbar class="navbar-collapsed"></ds-search-navbar>
     <ds-lang-switch class="navbar-collapsed"></ds-lang-switch>
-    <ds-auth-nav-menu class="navbar-collapsed"></ds-auth-nav-menu>
+    <ds-themed-auth-nav-menu class="navbar-collapsed"></ds-themed-auth-nav-menu>
     <ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
   </div>
 </nav>

From 7480a19a656fa954da162ff665b955bc86acecff Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Thu, 28 Apr 2022 12:18:14 +0200
Subject: [PATCH 04/33] 89720: Added ThemedItemMetadataComponent

---
 .../edit-item-template-page.component.html    |  2 +-
 .../edit-item-page/edit-item-page.module.ts   |  5 ++-
 .../themed-item-metadata.component.ts         | 34 +++++++++++++++++++
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/app/item-page/edit-item-page/item-metadata/themed-item-metadata.component.ts

diff --git a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
index f8c5c92e96..aa6b71f588 100644
--- a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
+++ b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
@@ -3,7 +3,7 @@
     <div class="col-12" *ngVar="(itemRD$ | async) as itemRD">
       <ng-container *ngIf="itemRD?.hasSucceeded">
         <h2 class="border-bottom">{{ 'collection.edit.template.head' | translate:{ collection: collection?.name } }}</h2>
-        <ds-item-metadata [updateService]="itemTemplateService" [item]="itemRD?.payload"></ds-item-metadata>
+        <ds-themed-item-metadata [updateService]="itemTemplateService" [item]="itemRD?.payload"></ds-themed-item-metadata>
         <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
       </ng-container>
       <ds-loading *ngIf="itemRD?.isLoading" [message]="'collection.edit.template.loading' | translate"></ds-loading>
diff --git a/src/app/item-page/edit-item-page/edit-item-page.module.ts b/src/app/item-page/edit-item-page/edit-item-page.module.ts
index 97901bd7c8..67cf31c6ed 100644
--- a/src/app/item-page/edit-item-page/edit-item-page.module.ts
+++ b/src/app/item-page/edit-item-page/edit-item-page.module.ts
@@ -15,6 +15,7 @@ import { ItemPrivateComponent } from './item-private/item-private.component';
 import { ItemPublicComponent } from './item-public/item-public.component';
 import { ItemDeleteComponent } from './item-delete/item-delete.component';
 import { ItemMetadataComponent } from './item-metadata/item-metadata.component';
+import { ThemedItemMetadataComponent } from './item-metadata/themed-item-metadata.component';
 import { EditInPlaceFieldComponent } from './item-metadata/edit-in-place-field/edit-in-place-field.component';
 import { ItemBitstreamsComponent } from './item-bitstreams/item-bitstreams.component';
 import { ItemEditBitstreamComponent } from './item-bitstreams/item-edit-bitstream/item-edit-bitstream.component';
@@ -62,6 +63,7 @@ import { ResourcePoliciesModule } from '../../shared/resource-policies/resource-
     ItemDeleteComponent,
     ItemStatusComponent,
     ItemMetadataComponent,
+    ThemedItemMetadataComponent,
     ItemRelationshipsComponent,
     ItemBitstreamsComponent,
     ItemVersionHistoryComponent,
@@ -83,7 +85,8 @@ import { ResourcePoliciesModule } from '../../shared/resource-policies/resource-
     ObjectValuesPipe
   ],
   exports: [
-    ItemMetadataComponent
+    EditInPlaceFieldComponent,
+    ThemedItemMetadataComponent,
   ]
 })
 export class EditItemPageModule {
diff --git a/src/app/item-page/edit-item-page/item-metadata/themed-item-metadata.component.ts b/src/app/item-page/edit-item-page/item-metadata/themed-item-metadata.component.ts
new file mode 100644
index 0000000000..53f0120015
--- /dev/null
+++ b/src/app/item-page/edit-item-page/item-metadata/themed-item-metadata.component.ts
@@ -0,0 +1,34 @@
+import { Component, Input } from '@angular/core';
+import { Item } from '../../../core/shared/item.model';
+import { UpdateDataService } from '../../../core/data/update-data.service';
+import { ItemMetadataComponent } from './item-metadata.component';
+import { ThemedComponent } from '../../../shared/theme-support/themed.component';
+
+@Component({
+  selector: 'ds-themed-item-metadata',
+  styleUrls: [],
+  templateUrl: './../../../shared/theme-support/themed.component.html',
+})
+/**
+ * Component for displaying an item's metadata edit page
+ */
+export class ThemedItemMetadataComponent extends ThemedComponent<ItemMetadataComponent> {
+
+  @Input() item: Item;
+
+  @Input() updateService: UpdateDataService<Item>;
+
+  protected inAndOutputNames: (keyof ItemMetadataComponent & keyof this)[] = ['item', 'updateService'];
+
+  protected getComponentName(): string {
+    return 'ItemMetadataComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../../themes/${themeName}/app/item-page/edit-item-page/item-metadata/item-metadata.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./item-metadata.component`);
+  }
+}

From 2f84d0294be4582fdc5c6db8c0fe059b42eeddfa Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 29 Apr 2022 10:27:26 +0200
Subject: [PATCH 05/33] 89720: Added ThemedEditItemTemplatePageComponent

---
 .../collection-page-routing.module.ts         |  4 +--
 .../collection-page/collection-page.module.ts |  2 ++
 ...hemed-edit-item-template-page.component.ts | 25 +++++++++++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 src/app/collection-page/edit-item-template-page/themed-edit-item-template-page.component.ts

diff --git a/src/app/collection-page/collection-page-routing.module.ts b/src/app/collection-page/collection-page-routing.module.ts
index 5879e523af..0574958037 100644
--- a/src/app/collection-page/collection-page-routing.module.ts
+++ b/src/app/collection-page/collection-page-routing.module.ts
@@ -6,7 +6,7 @@ import { CreateCollectionPageComponent } from './create-collection-page/create-c
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
 import { CreateCollectionPageGuard } from './create-collection-page/create-collection-page.guard';
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
-import { EditItemTemplatePageComponent } from './edit-item-template-page/edit-item-template-page.component';
+import { ThemedEditItemTemplatePageComponent } from './edit-item-template-page/themed-edit-item-template-page.component';
 import { ItemTemplatePageResolver } from './edit-item-template-page/item-template-page.resolver';
 import { CollectionBreadcrumbResolver } from '../core/breadcrumbs/collection-breadcrumb.resolver';
 import { DSOBreadcrumbsService } from '../core/breadcrumbs/dso-breadcrumbs.service';
@@ -52,7 +52,7 @@ import { ThemedCollectionPageComponent } from './themed-collection-page.componen
           },
           {
             path: ITEMTEMPLATE_PATH,
-            component: EditItemTemplatePageComponent,
+            component: ThemedEditItemTemplatePageComponent,
             canActivate: [AuthenticatedGuard],
             resolve: {
               item: ItemTemplatePageResolver,
diff --git a/src/app/collection-page/collection-page.module.ts b/src/app/collection-page/collection-page.module.ts
index 3652823200..c35ebf9021 100644
--- a/src/app/collection-page/collection-page.module.ts
+++ b/src/app/collection-page/collection-page.module.ts
@@ -8,6 +8,7 @@ import { CollectionPageRoutingModule } from './collection-page-routing.module';
 import { CreateCollectionPageComponent } from './create-collection-page/create-collection-page.component';
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
 import { EditItemTemplatePageComponent } from './edit-item-template-page/edit-item-template-page.component';
+import { ThemedEditItemTemplatePageComponent } from './edit-item-template-page/themed-edit-item-template-page.component';
 import { EditItemPageModule } from '../item-page/edit-item-page/edit-item-page.module';
 import { CollectionItemMapperComponent } from './collection-item-mapper/collection-item-mapper.component';
 import { SearchService } from '../core/shared/search/search.service';
@@ -32,6 +33,7 @@ import { ComcolModule } from '../shared/comcol/comcol.module';
     CreateCollectionPageComponent,
     DeleteCollectionPageComponent,
     EditItemTemplatePageComponent,
+    ThemedEditItemTemplatePageComponent,
     CollectionItemMapperComponent
   ],
   providers: [
diff --git a/src/app/collection-page/edit-item-template-page/themed-edit-item-template-page.component.ts b/src/app/collection-page/edit-item-template-page/themed-edit-item-template-page.component.ts
new file mode 100644
index 0000000000..b53f4e6c45
--- /dev/null
+++ b/src/app/collection-page/edit-item-template-page/themed-edit-item-template-page.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { EditItemTemplatePageComponent } from './edit-item-template-page.component';
+
+@Component({
+  selector: 'ds-themed-edit-item-template-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+/**
+ * Component for editing the item template of a collection
+ */
+export class ThemedEditItemTemplatePageComponent extends ThemedComponent<EditItemTemplatePageComponent> {
+  protected getComponentName(): string {
+    return 'EditItemTemplatePageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/collection-page/edit-item-template-page/edit-item-template-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./edit-item-template-page.component');
+  }
+}

From b9b5b50999a3e3173a97709e403c4773839116a5 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 3 May 2022 08:56:37 +0200
Subject: [PATCH 06/33] 89741: Added ThemedExpandableNavbarSectionComponent

---
 ...med-expandable-navbar-section.component.ts | 29 +++++++++++++++++++
 src/app/navbar/navbar.module.ts               | 11 +++----
 2 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 src/app/navbar/expandable-navbar-section/themed-expandable-navbar-section.component.ts

diff --git a/src/app/navbar/expandable-navbar-section/themed-expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/themed-expandable-navbar-section.component.ts
new file mode 100644
index 0000000000..744eeb5a02
--- /dev/null
+++ b/src/app/navbar/expandable-navbar-section/themed-expandable-navbar-section.component.ts
@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ExpandableNavbarSectionComponent } from './expandable-navbar-section.component';
+import { rendersSectionForMenu } from '../../shared/menu/menu-section.decorator';
+import { MenuID } from '../../shared/menu/initial-menus-state';
+
+/**
+ * Themed wrapper for ExpandableNavbarSectionComponent
+ */
+@Component({
+  /* tslint:disable:component-selector */
+  selector: 'li[ds-themed-expandable-navbar-section]',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+@rendersSectionForMenu(MenuID.PUBLIC, true)
+export class ThemedExpandableNavbarSectionComponent  extends ThemedComponent<ExpandableNavbarSectionComponent> {
+  protected getComponentName(): string {
+    return 'ExpandableNavbarSectionComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/navbar/expandable-navbar-section/expandable-navbar-section.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./expandable-navbar-section.component`);
+  }
+}
diff --git a/src/app/navbar/navbar.module.ts b/src/app/navbar/navbar.module.ts
index c84e732fd5..95641de41b 100644
--- a/src/app/navbar/navbar.module.ts
+++ b/src/app/navbar/navbar.module.ts
@@ -7,6 +7,7 @@ import { CoreModule } from '../core/core.module';
 import { NavbarEffects } from './navbar.effects';
 import { NavbarSectionComponent } from './navbar-section/navbar-section.component';
 import { ExpandableNavbarSectionComponent } from './expandable-navbar-section/expandable-navbar-section.component';
+import { ThemedExpandableNavbarSectionComponent } from './expandable-navbar-section/themed-expandable-navbar-section.component';
 import { NavbarComponent } from './navbar.component';
 import { MenuModule } from '../shared/menu/menu.module';
 import { SharedModule } from '../shared/shared.module';
@@ -20,7 +21,7 @@ const effects = [
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
   NavbarSectionComponent,
-  ExpandableNavbarSectionComponent,
+  ThemedExpandableNavbarSectionComponent,
 ];
 
 @NgModule({
@@ -36,19 +37,19 @@ const ENTRY_COMPONENTS = [
     NavbarComponent,
     ThemedNavbarComponent,
     NavbarSectionComponent,
-    ExpandableNavbarSectionComponent
+    ExpandableNavbarSectionComponent,
+    ThemedExpandableNavbarSectionComponent,
   ],
   providers: [
 
   ],
   entryComponents: [
-    NavbarSectionComponent,
-    ExpandableNavbarSectionComponent
+    ...ENTRY_COMPONENTS,
   ],
   exports: [
     ThemedNavbarComponent,
     NavbarSectionComponent,
-    ExpandableNavbarSectionComponent
+    ThemedExpandableNavbarSectionComponent,
   ]
 })
 

From 870a36180c4836108c23f790e5e49c04460a99b4 Mon Sep 17 00:00:00 2001
From: Yana De Pauw <yana@atmire.com>
Date: Mon, 25 Apr 2022 17:26:12 +0200
Subject: [PATCH 07/33] 89984: Add ThemedLoadingComponent

---
 .../epeople-registry.component.html           |  2 +-
 .../eperson-form/eperson-form.component.html  |  4 +--
 .../groups-registry.component.html            |  2 +-
 .../edit-bitstream-page.component.html        |  4 +--
 .../browse-by-metadata-page.component.html    |  2 +-
 .../collection-page.component.html            |  8 ++---
 .../collection-source.component.html          |  2 +-
 .../edit-item-template-page.component.html    |  2 +-
 .../community-list.component.html             |  6 ++--
 .../community-page.component.html             |  2 +-
 ...ty-page-sub-collection-list.component.html |  2 +-
 ...ity-page-sub-community-list.component.html |  2 +-
 .../top-level-community-list.component.html   |  2 +-
 .../item-bitstreams.component.html            |  2 +-
 ...rag-and-drop-bitstream-list.component.html |  2 +-
 .../edit-relationship-list.component.html     |  2 +-
 .../item-relationships.component.html         |  2 +-
 .../full/full-item-page.component.html        |  2 +-
 .../media-viewer/media-viewer.component.html  |  4 +--
 .../media-viewer.component.spec.ts            |  2 +-
 .../file-section/file-section.component.html  |  2 +-
 .../file-section.component.spec.ts            |  2 +-
 .../item-page/simple/item-page.component.html |  2 +-
 .../simple/item-page.component.spec.ts        |  2 +-
 ...etadata-representation-list.component.html |  2 +-
 .../related-items.component.html              |  2 +-
 .../detail/process-detail.component.html      |  2 +-
 .../deny-request-copy.component.html          |  2 +-
 .../grant-deny-request-copy.component.html    |  2 +-
 .../grant-request-copy.component.html         |  2 +-
 src/app/root/root.component.html              |  4 +--
 .../user-menu/user-menu.component.html        |  2 +-
 .../shared/browse-by/browse-by.component.html |  2 +-
 .../browse-by/browse-by.component.spec.ts     |  2 +-
 .../collection-dropdown.component.html        |  4 +--
 .../comcol-role/comcol-role.component.html    |  2 +-
 .../dso-selector/dso-selector.component.html  |  2 +-
 .../entity-dropdown.component.html            |  4 +--
 ...sting-metadata-list-element.component.html |  2 +-
 ...sting-relation-list-element.component.html |  2 +-
 .../dynamic-relation-group.component.html     |  2 +-
 ...namic-lookup-relation-modal.component.html |  2 +-
 ...elation-external-source-tab.component.html |  4 +--
 ...tion-external-source-tab.component.spec.ts |  4 +--
 .../loading/themed-loading.component.ts       | 31 +++++++++++++++++++
 src/app/shared/log-in/log-in.component.html   |  2 +-
 .../object-detail.component.html              |  2 +-
 .../object-grid/object-grid.component.html    |  2 +-
 ...-search-result-list-element.component.html |  4 +--
 ...-search-result-list-element.component.html |  4 +--
 .../collection-select.component.html          |  2 +-
 .../item-select/item-select.component.html    |  2 +-
 .../search-results.component.html             |  2 +-
 src/app/shared/shared.module.ts               |  2 ++
 .../vocabulary-treeview.component.html        |  2 +-
 .../statistics-page.component.html            |  2 +-
 .../form/submission-form.component.html       |  2 +-
 ...-import-external-collection.component.html |  2 +-
 .../submission-import-external.component.html |  4 +--
 ...mission-section-cc-licenses.component.html |  4 +--
 .../sections/form/section-form.component.html |  2 +-
 src/app/thumbnail/thumbnail.component.html    |  4 +--
 src/app/thumbnail/thumbnail.component.spec.ts |  2 +-
 63 files changed, 112 insertions(+), 79 deletions(-)
 create mode 100644 src/app/shared/loading/themed-loading.component.ts

diff --git a/src/app/access-control/epeople-registry/epeople-registry.component.html b/src/app/access-control/epeople-registry/epeople-registry.component.html
index 7ef02a76cf..2d87f21d26 100644
--- a/src/app/access-control/epeople-registry/epeople-registry.component.html
+++ b/src/app/access-control/epeople-registry/epeople-registry.component.html
@@ -45,7 +45,7 @@
           </div>
         </form>
 
-        <ds-loading *ngIf="searching$ | async"></ds-loading>
+        <ds-themed-loading *ngIf="searching$ | async"></ds-themed-loading>
         <ds-pagination
           *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(searching$ | async)"
           [paginationOptions]="config"
diff --git a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
index 41ae67423c..e9cc48aee3 100644
--- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
@@ -36,12 +36,12 @@
   </button>
 </ds-form>
 
-<ds-loading [showMessage]="false" *ngIf="!formGroup"></ds-loading>
+<ds-themed-loading [showMessage]="false" *ngIf="!formGroup"></ds-themed-loading>
 
 <div *ngIf="epersonService.getActiveEPerson() | async">
   <h5>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h5>
 
-  <ds-loading [showMessage]="false" *ngIf="!(groups | async)"></ds-loading>
+  <ds-themed-loading [showMessage]="false" *ngIf="!(groups | async)"></ds-themed-loading>
 
   <ds-pagination
     *ngIf="(groups | async)?.payload?.totalElements > 0"
diff --git a/src/app/access-control/group-registry/groups-registry.component.html b/src/app/access-control/group-registry/groups-registry.component.html
index e791b7f2a0..fa7b0ea672 100644
--- a/src/app/access-control/group-registry/groups-registry.component.html
+++ b/src/app/access-control/group-registry/groups-registry.component.html
@@ -33,7 +33,7 @@
         </div>
       </form>
 
-      <ds-loading *ngIf="loading$ | async"></ds-loading>
+      <ds-themed-loading *ngIf="loading$ | async"></ds-themed-loading>
       <ds-pagination
         *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(loading$ | async)"
         [paginationOptions]="config"
diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
index 4d3b948a58..6454198340 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
@@ -27,7 +27,7 @@
       </div>
     </div>
     <ds-error *ngIf="bitstreamRD?.hasFailed" message="{{'error.bitstream' | translate}}"></ds-error>
-    <ds-loading *ngIf="!bitstreamRD || !formatsRD || bitstreamRD?.isLoading || formatsRD?.isLoading"
-                message="{{'loading.bitstream' | translate}}"></ds-loading>
+    <ds-themed-loading *ngIf="!bitstreamRD || !formatsRD || bitstreamRD?.isLoading || formatsRD?.isLoading"
+                message="{{'loading.bitstream' | translate}}"></ds-themed-loading>
   </div>
 </ng-container>
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
index 2321da0204..c0741891eb 100644
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
+++ b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
@@ -35,7 +35,7 @@
       (prev)="goPrev()"
       (next)="goNext()">
     </ds-browse-by>
-    <ds-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-loading>
+    <ds-themed-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
   </div>
   </section>
   <ng-container *ngVar="(parent$ | async) as parent">
diff --git a/src/app/collection-page/collection-page.component.html b/src/app/collection-page/collection-page.component.html
index 9d598a3b69..4f5422e300 100644
--- a/src/app/collection-page/collection-page.component.html
+++ b/src/app/collection-page/collection-page.component.html
@@ -57,8 +57,8 @@
                 </div>
                 <ds-error *ngIf="itemRD?.hasFailed"
                           message="{{'error.recent-submissions' | translate}}"></ds-error>
-                <ds-loading *ngIf="!itemRD || itemRD.isLoading"
-                            message="{{'loading.recent-submissions' | translate}}"></ds-loading>
+                <ds-themed-loading *ngIf="!itemRD || itemRD.isLoading"
+                            message="{{'loading.recent-submissions' | translate}}"></ds-themed-loading>
                 <div *ngIf="!itemRD?.isLoading && itemRD?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
                         {{'collection.page.browse.recent.empty' | translate}}
                 </div>
@@ -75,7 +75,7 @@
     </div>
         <ds-error *ngIf="collectionRD?.hasFailed"
             message="{{'error.collection' | translate}}"></ds-error>
-        <ds-loading *ngIf="collectionRD?.isLoading"
-            message="{{'loading.collection' | translate}}"></ds-loading>
+        <ds-themed-loading *ngIf="collectionRD?.isLoading"
+            message="{{'loading.collection' | translate}}"></ds-themed-loading>
   </div>
 </div>
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
index b67ee9a1bd..847ccefdda 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
@@ -25,7 +25,7 @@
         <label class="form-check-label"
                for="externalSourceCheck">{{ 'collection.edit.tabs.source.external' | translate }}</label>
     </div>
-    <ds-loading *ngIf="!contentSource" [message]="'loading.content-source' | translate"></ds-loading>
+    <ds-themed-loading *ngIf="!contentSource" [message]="'loading.content-source' | translate"></ds-themed-loading>
     <h4 *ngIf="contentSource && (contentSource?.harvestType !== harvestTypeNone)">{{ 'collection.edit.tabs.source.form.head' | translate }}</h4>
 </div>
 <div class="row">
diff --git a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
index f8c5c92e96..37258cd057 100644
--- a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
+++ b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
@@ -6,7 +6,7 @@
         <ds-item-metadata [updateService]="itemTemplateService" [item]="itemRD?.payload"></ds-item-metadata>
         <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
       </ng-container>
-      <ds-loading *ngIf="itemRD?.isLoading" [message]="'collection.edit.template.loading' | translate"></ds-loading>
+      <ds-themed-loading *ngIf="itemRD?.isLoading" [message]="'collection.edit.template.loading' | translate"></ds-themed-loading>
       <ds-alert *ngIf="itemRD?.hasFailed" [type]="AlertTypeEnum.Error" [content]="'collection.edit.template.error' | translate"></ds-alert>
     </div>
   </div>
diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html
index f441dfa36e..5d53633c4e 100644
--- a/src/app/community-list-page/community-list/community-list.component.html
+++ b/src/app/community-list-page/community-list/community-list.component.html
@@ -1,4 +1,4 @@
-<ds-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-loading"></ds-loading>
+<ds-themed-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-themed-loading"></ds-themed-loading>
 <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
   <!-- This is the tree node template for show more node -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
@@ -12,7 +12,7 @@
            class="btn btn-outline-primary btn-sm" role="button">
            <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
         </a>
-        <ds-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-loading"></ds-loading>
+        <ds-themed-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-themed-loading>
       </div>
     </div>
     <div class="text-muted" cdkTreeNodePadding>
@@ -57,7 +57,7 @@
         <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
               aria-hidden="true"></span>
       </button>
-      <ds-loading class="ds-loading"></ds-loading>
+      <ds-themed-loading class="ds-themed-loading"></ds-themed-loading>
     </div>
   </cdk-tree-node>
   <!-- This is the tree node template for leaf nodes (collections and (sub)coms without children) -->
diff --git a/src/app/community-page/community-page.component.html b/src/app/community-page/community-page.component.html
index cf7282eb4b..95755fdaf1 100644
--- a/src/app/community-page/community-page.component.html
+++ b/src/app/community-page/community-page.component.html
@@ -41,5 +41,5 @@
   </div>
 
   <ds-error *ngIf="communityRD?.hasFailed" message="{{'error.community' | translate}}"></ds-error>
-  <ds-loading *ngIf="communityRD?.isLoading" message="{{'loading.community' | translate}}"></ds-loading>
+  <ds-themed-loading *ngIf="communityRD?.isLoading" message="{{'loading.community' | translate}}"></ds-themed-loading>
 </div>
diff --git a/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.html b/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.html
index 9928ebd18a..69f16ee3ac 100644
--- a/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.html
+++ b/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.html
@@ -9,5 +9,5 @@
     </ds-viewable-collection>
   </div>
   <ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>
-  <ds-loading *ngIf="subCollectionsRD?.isLoading" message="{{'loading.sub-collections' | translate}}"></ds-loading>
+  <ds-themed-loading *ngIf="subCollectionsRD?.isLoading" message="{{'loading.sub-collections' | translate}}"></ds-themed-loading>
 </ng-container>
diff --git a/src/app/community-page/sub-community-list/community-page-sub-community-list.component.html b/src/app/community-page/sub-community-list/community-page-sub-community-list.component.html
index 2d14dce60a..be2788a9f4 100644
--- a/src/app/community-page/sub-community-list/community-page-sub-community-list.component.html
+++ b/src/app/community-page/sub-community-list/community-page-sub-community-list.component.html
@@ -9,5 +9,5 @@
     </ds-viewable-collection>
   </div>
   <ds-error *ngIf="subCommunitiesRD?.hasFailed" message="{{'error.sub-communities' | translate}}"></ds-error>
-  <ds-loading *ngIf="subCommunitiesRD?.isLoading" message="{{'loading.sub-communities' | translate}}"></ds-loading>
+  <ds-themed-loading *ngIf="subCommunitiesRD?.isLoading" message="{{'loading.sub-communities' | translate}}"></ds-themed-loading>
 </ng-container>
diff --git a/src/app/home-page/top-level-community-list/top-level-community-list.component.html b/src/app/home-page/top-level-community-list/top-level-community-list.component.html
index dbea87a175..788db6ea4f 100644
--- a/src/app/home-page/top-level-community-list/top-level-community-list.component.html
+++ b/src/app/home-page/top-level-community-list/top-level-community-list.component.html
@@ -10,4 +10,4 @@
   </ds-viewable-collection>
 </div>
 <ds-error *ngIf="communitiesRD?.hasFailed " message="{{'error.top-level-communites' | translate}}"></ds-error>
-<ds-loading *ngIf="communitiesRD?.isLoading " message="{{'loading.top-level-communities' | translate}}"></ds-loading></ng-container>
+<ds-themed-loading *ngIf="communitiesRD?.isLoading " message="{{'loading.top-level-communities' | translate}}"></ds-themed-loading></ng-container>
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
index 315498378a..0d6a609e74 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
@@ -44,7 +44,7 @@
        class="alert alert-info w-100 d-inline-block mt-4" role="alert">
     {{'item.edit.bitstreams.empty' | translate}}
   </div>
-  <ds-loading *ngIf="!bundles" message="{{'loading.bitstreams' | translate}}"></ds-loading>
+  <ds-themed-loading *ngIf="!bundles" message="{{'loading.bitstreams' | translate}}"></ds-themed-loading>
 
   <div class="button-row bottom">
     <div class="mt-4 float-right">
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.html
index f7904f6cc8..f54aa73597 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.html
@@ -29,5 +29,5 @@
       </ng-container>
     </div>
   </ng-container>
-  <ds-loading *ngIf="(loading$ | async)" [message]="'loading.bitstreams' | translate"></ds-loading>
+  <ds-themed-loading *ngIf="(loading$ | async)" [message]="'loading.bitstreams' | translate"></ds-themed-loading>
 </ds-pagination>
diff --git a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html
index 86ab93662e..7cdc903f24 100644
--- a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html
+++ b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html
@@ -31,5 +31,5 @@
           <div *ngIf="updateValues.length === 0">{{"item.edit.relationships.no-relationships" | translate}}</div>
         </ng-container>
     </ng-container>
-    <ds-loading *ngIf="loading$ | async"></ds-loading>
+    <ds-themed-loading *ngIf="loading$ | async"></ds-themed-loading>
 </ng-container>
diff --git a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html
index 4a53445a6d..f19ab21871 100644
--- a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html
+++ b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html
@@ -32,7 +32,7 @@
             ></ds-edit-relationship-list>
           </div>
         </ng-container>
-        <ds-loading *ngIf="!relationshipTypes"></ds-loading>
+        <ds-themed-loading *ngIf="!relationshipTypes"></ds-themed-loading>
       </ng-container>
       <div class="button-row bottom">
         <div class="float-right">
diff --git a/src/app/item-page/full/full-item-page.component.html b/src/app/item-page/full/full-item-page.component.html
index d2655c4ad0..ea97a3957c 100644
--- a/src/app/item-page/full/full-item-page.component.html
+++ b/src/app/item-page/full/full-item-page.component.html
@@ -37,5 +37,5 @@
     </div>
   </div>
   <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.item' | translate}}"></ds-error>
-  <ds-loading *ngIf="itemRD?.isLoading" message="{{'loading.item' | translate}}"></ds-loading>
+  <ds-themed-loading *ngIf="itemRD?.isLoading" message="{{'loading.item' | translate}}"></ds-themed-loading>
 </div>
diff --git a/src/app/item-page/media-viewer/media-viewer.component.html b/src/app/item-page/media-viewer/media-viewer.component.html
index b79b91629f..4259af5250 100644
--- a/src/app/item-page/media-viewer/media-viewer.component.html
+++ b/src/app/item-page/media-viewer/media-viewer.component.html
@@ -1,9 +1,9 @@
 <ng-container *ngVar="mediaList$ | async as mediaList">
-  <ds-loading
+  <ds-themed-loading
     *ngIf="isLoading"
     message="{{ 'loading.default' | translate }}"
     [showMessage]="false"
-  ></ds-loading>
+  ></ds-themed-loading>
   <div class="media-viewer" *ngIf="!isLoading">
     <ng-container *ngIf="mediaList.length > 0">
       <ng-container *ngIf="videoOptions">
diff --git a/src/app/item-page/media-viewer/media-viewer.component.spec.ts b/src/app/item-page/media-viewer/media-viewer.component.spec.ts
index cfd72bf416..39a35ebe61 100644
--- a/src/app/item-page/media-viewer/media-viewer.component.spec.ts
+++ b/src/app/item-page/media-viewer/media-viewer.component.spec.ts
@@ -110,7 +110,7 @@ describe('MediaViewerComponent', () => {
     });
 
     it('should display a loading component', () => {
-      const loading = fixture.debugElement.query(By.css('ds-loading'));
+      const loading = fixture.debugElement.query(By.css('ds-themed-loading'));
       expect(loading.nativeElement).toBeDefined();
     });
   });
diff --git a/src/app/item-page/simple/field-components/file-section/file-section.component.html b/src/app/item-page/simple/field-components/file-section/file-section.component.html
index 3d093f83c9..5fa5e5096f 100644
--- a/src/app/item-page/simple/field-components/file-section/file-section.component.html
+++ b/src/app/item-page/simple/field-components/file-section/file-section.component.html
@@ -6,7 +6,7 @@
         <span>({{(file?.sizeBytes) | dsFileSize }})</span>
         <span *ngIf="!last" innerHTML="{{separator}}"></span>
       </ds-file-download-link>
-      <ds-loading *ngIf="isLoading" message="{{'loading.default' | translate}}" [showMessage]="false"></ds-loading>
+      <ds-themed-loading *ngIf="isLoading" message="{{'loading.default' | translate}}" [showMessage]="false"></ds-themed-loading>
       <div *ngIf="!isLastPage" class="mt-1" id="view-more">
         <a class="bitstream-view-more btn btn-outline-secondary btn-sm" [routerLink]="" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</a>
       </div>
diff --git a/src/app/item-page/simple/field-components/file-section/file-section.component.spec.ts b/src/app/item-page/simple/field-components/file-section/file-section.component.spec.ts
index fdd6d14e7d..2d185aef9c 100644
--- a/src/app/item-page/simple/field-components/file-section/file-section.component.spec.ts
+++ b/src/app/item-page/simple/field-components/file-section/file-section.component.spec.ts
@@ -86,7 +86,7 @@ describe('FileSectionComponent', () => {
     });
 
     it('should display a loading component', () => {
-      const loading = fixture.debugElement.query(By.css('ds-loading'));
+      const loading = fixture.debugElement.query(By.css('ds-themed-loading'));
       expect(loading.nativeElement).toBeDefined();
     });
   });
diff --git a/src/app/item-page/simple/item-page.component.html b/src/app/item-page/simple/item-page.component.html
index 74b61fd976..d91f4b501d 100644
--- a/src/app/item-page/simple/item-page.component.html
+++ b/src/app/item-page/simple/item-page.component.html
@@ -9,5 +9,5 @@
     </div>
   </div>
   <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.item' | translate}}"></ds-error>
-  <ds-loading *ngIf="itemRD?.isLoading" message="{{'loading.item' | translate}}"></ds-loading>
+  <ds-themed-loading *ngIf="itemRD?.isLoading" message="{{'loading.item' | translate}}"></ds-themed-loading>
 </div>
diff --git a/src/app/item-page/simple/item-page.component.spec.ts b/src/app/item-page/simple/item-page.component.spec.ts
index ff5a1e38d5..0b0f1e1724 100644
--- a/src/app/item-page/simple/item-page.component.spec.ts
+++ b/src/app/item-page/simple/item-page.component.spec.ts
@@ -85,7 +85,7 @@ describe('ItemPageComponent', () => {
     });
 
     it('should display a loading component', () => {
-      const loading = fixture.debugElement.query(By.css('ds-loading'));
+      const loading = fixture.debugElement.query(By.css('ds-themed-loading'));
       expect(loading.nativeElement).toBeDefined();
     });
   });
diff --git a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
index d1281f450a..e1559cb129 100644
--- a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
+++ b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
@@ -4,7 +4,7 @@
       <ds-metadata-representation-loader *ngFor="let rep of representations"
                                          [mdRepresentation]="rep">
       </ds-metadata-representation-loader>
-      <ds-loading *ngIf="(i + 1) === objects.length && (i > 0) && (!representations || representations?.length === 0)" message="{{'loading.default' | translate}}"></ds-loading>
+      <ds-themed-loading *ngIf="(i + 1) === objects.length && (i > 0) && (!representations || representations?.length === 0)" message="{{'loading.default' | translate}}"></ds-themed-loading>
       <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && representations?.length > 0">
         <div *ngIf="(objects.length * incrementBy) < total" class="float-left">
           <a [routerLink]="" (click)="increase()">{{'item.page.related-items.view-more' |
diff --git a/src/app/item-page/simple/related-items/related-items.component.html b/src/app/item-page/simple/related-items/related-items.component.html
index 11cedc4040..bfa4ce105b 100644
--- a/src/app/item-page/simple/related-items/related-items.component.html
+++ b/src/app/item-page/simple/related-items/related-items.component.html
@@ -4,7 +4,7 @@
       <ds-listable-object-component-loader *ngFor="let item of itemsRD?.payload?.page"
                                            [object]="item" [viewMode]="viewMode">
       </ds-listable-object-component-loader>
-      <ds-loading *ngIf="(i + 1) === objects.length && (itemsRD || i > 0) && !(itemsRD?.hasSucceeded && itemsRD?.payload && itemsRD?.payload?.page?.length > 0)" message="{{'loading.default' | translate}}"></ds-loading>
+      <ds-themed-loading *ngIf="(i + 1) === objects.length && (itemsRD || i > 0) && !(itemsRD?.hasSucceeded && itemsRD?.payload && itemsRD?.payload?.page?.length > 0)" message="{{'loading.default' | translate}}"></ds-themed-loading>
       <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && itemsRD?.payload?.page?.length > 0">
         <div *ngIf="itemsRD?.payload?.totalPages > objects.length" class="float-left" id="view-more">
           <a [routerLink]="" (click)="increase()">{{'item.page.related-items.view-more' |
diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
index ddf6a0aadc..995e56e081 100644
--- a/src/app/process-page/detail/process-detail.component.html
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -38,7 +38,7 @@
       <button *ngIf="!showOutputLogs && process?._links?.output?.href != undefined" id="showOutputButton" class="btn btn-primary" (click)="showProcessOutputLogs()">
         {{ 'process.detail.logs.button' | translate }}
       </button>
-      <ds-loading *ngIf="retrievingOutputLogs$ | async" class="ds-loading" message="{{ 'process.detail.logs.loading' | translate }}"></ds-loading>
+      <ds-themed-loading *ngIf="retrievingOutputLogs$ | async" class="ds-themed-loading" message="{{ 'process.detail.logs.loading' | translate }}"></ds-themed-loading>
       <pre class="font-weight-bold text-secondary bg-light p-3"
            *ngIf="showOutputLogs && (outputLogs$ | async)?.length > 0">{{ (outputLogs$ | async) }}</pre>
       <p id="no-output-logs-message" *ngIf="(!(retrievingOutputLogs$ | async) && showOutputLogs)
diff --git a/src/app/request-copy/deny-request-copy/deny-request-copy.component.html b/src/app/request-copy/deny-request-copy/deny-request-copy.component.html
index b00bc079dd..c9e909ccf1 100644
--- a/src/app/request-copy/deny-request-copy/deny-request-copy.component.html
+++ b/src/app/request-copy/deny-request-copy/deny-request-copy.component.html
@@ -5,5 +5,5 @@
 
     <ds-email-request-copy [subject]="subject$ | async" [message]="message$ | async" (send)="deny($event)"></ds-email-request-copy>
   </div>
-  <ds-loading *ngIf="!itemRequestRD || itemRequestRD?.isLoading"></ds-loading>
+  <ds-themed-loading *ngIf="!itemRequestRD || itemRequestRD?.isLoading"></ds-themed-loading>
 </div>
diff --git a/src/app/request-copy/grant-deny-request-copy/grant-deny-request-copy.component.html b/src/app/request-copy/grant-deny-request-copy/grant-deny-request-copy.component.html
index 37b275d8f8..4837e0dcda 100644
--- a/src/app/request-copy/grant-deny-request-copy/grant-deny-request-copy.component.html
+++ b/src/app/request-copy/grant-deny-request-copy/grant-deny-request-copy.component.html
@@ -26,5 +26,5 @@
       </p>
     </div>
   </div>
-  <ds-loading *ngIf="!itemRequestRD || itemRequestRD?.isLoading"></ds-loading>
+  <ds-themed-loading *ngIf="!itemRequestRD || itemRequestRD?.isLoading"></ds-themed-loading>
 </div>
diff --git a/src/app/request-copy/grant-request-copy/grant-request-copy.component.html b/src/app/request-copy/grant-request-copy/grant-request-copy.component.html
index d2c2cfc3c8..5cb4dbac36 100644
--- a/src/app/request-copy/grant-request-copy/grant-request-copy.component.html
+++ b/src/app/request-copy/grant-request-copy/grant-request-copy.component.html
@@ -13,5 +13,5 @@
       </form>
     </ds-email-request-copy>
   </div>
-  <ds-loading *ngIf="!itemRequestRD || itemRequestRD?.isLoading"></ds-loading>
+  <ds-themed-loading *ngIf="!itemRequestRD || itemRequestRD?.isLoading"></ds-themed-loading>
 </div>
diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html
index 898074352c..d0465af69f 100644
--- a/src/app/root/root.component.html
+++ b/src/app/root/root.component.html
@@ -13,7 +13,7 @@
       <ds-themed-breadcrumbs></ds-themed-breadcrumbs>
 
       <div class="container d-flex justify-content-center align-items-center h-100" *ngIf="shouldShowRouteLoader">
-        <ds-loading [showMessage]="false"></ds-loading>
+        <ds-themed-loading [showMessage]="false"></ds-themed-loading>
       </div>
       <div [class.d-none]="shouldShowRouteLoader">
         <router-outlet></router-outlet>
@@ -25,6 +25,6 @@
 </div>
 <ng-template #fullScreenLoader>
   <div class="ds-full-screen-loader">
-    <ds-loading [showMessage]="false"></ds-loading>
+    <ds-themed-loading [showMessage]="false"></ds-themed-loading>
   </div>
 </ng-template>
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
index ac55a211e9..736d39d318 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
@@ -1,4 +1,4 @@
-<ds-loading *ngIf="(loading$ | async)"></ds-loading>
+<ds-themed-loading *ngIf="(loading$ | async)"></ds-themed-loading>
 <div *ngIf="!(loading$ | async)">
   <span class="dropdown-item-text">{{(user$ | async)?.name}} ({{(user$ | async)?.email}})</span>
   <a class="dropdown-item" [routerLink]="[profileRoute]" routerLinkActive="active">{{'nav.profile' | translate}}</a>
diff --git a/src/app/shared/browse-by/browse-by.component.html b/src/app/shared/browse-by/browse-by.component.html
index 6d1422293d..645a987abe 100644
--- a/src/app/shared/browse-by/browse-by.component.html
+++ b/src/app/shared/browse-by/browse-by.component.html
@@ -34,7 +34,7 @@
       </div>
     </div>
   </div>
-  <ds-loading *ngIf="!objects || objects?.isLoading" message="{{'loading.browse-by' | translate}}"></ds-loading>
+  <ds-themed-loading *ngIf="!objects || objects?.isLoading" message="{{'loading.browse-by' | translate}}"></ds-themed-loading>
   <ds-error *ngIf="objects?.hasFailed" message="{{'error.browse-by' | translate}}"></ds-error>
   <div *ngIf="!objects?.isLoading && objects?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
     {{'browse.empty' | translate}}
diff --git a/src/app/shared/browse-by/browse-by.component.spec.ts b/src/app/shared/browse-by/browse-by.component.spec.ts
index 896537b63a..e25058399c 100644
--- a/src/app/shared/browse-by/browse-by.component.spec.ts
+++ b/src/app/shared/browse-by/browse-by.component.spec.ts
@@ -114,7 +114,7 @@ describe('BrowseByComponent', () => {
   it('should display a loading message when objects is empty', () => {
     (comp as any).objects = undefined;
     fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('ds-loading'))).toBeDefined();
+    expect(fixture.debugElement.query(By.css('ds-themed-loading'))).toBeDefined();
   });
 
   it('should display results when objects is not empty', () => {
diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.html b/src/app/shared/collection-dropdown/collection-dropdown.component.html
index 87337d9084..db6c1fb41d 100644
--- a/src/app/shared/collection-dropdown/collection-dropdown.component.html
+++ b/src/app/shared/collection-dropdown/collection-dropdown.component.html
@@ -35,8 +35,8 @@
     </button>
   </ng-container>
   <button class="dropdown-item disabled" *ngIf="(isLoading | async)">
-    <ds-loading message="{{'loading.default' | translate}}">
-    </ds-loading>
+    <ds-themed-loading message="{{'loading.default' | translate}}">
+    </ds-themed-loading>
   </button>
 
 </div>
diff --git a/src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html b/src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html
index b0a319b4ff..440785b89b 100644
--- a/src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html
+++ b/src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html
@@ -13,7 +13,7 @@
 
     <div class="d-flex flex-md-row justify-content-between flex-column">
       <div class="w-100 d-flex align-items-center">
-        <ds-loading *ngIf="!(groupRD$ | async)"></ds-loading>
+        <ds-themed-loading *ngIf="!(groupRD$ | async)"></ds-themed-loading>
         <div *ngIf="hasNoGroup$ | async">
           {{'comcol-role.edit.no-group' | translate}}
         </div>
diff --git a/src/app/shared/dso-selector/dso-selector/dso-selector.component.html b/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
index 4b46d3bc3f..d4283246d8 100644
--- a/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
+++ b/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
@@ -31,7 +31,7 @@
     </ng-container>
     <button *ngIf="loading"
             class="list-group-item list-group-item-action border-0 list-entry">
-      <ds-loading [showMessage]="false"></ds-loading>
+      <ds-themed-loading [showMessage]="false"></ds-themed-loading>
     </button>
   </div>
 </div>
diff --git a/src/app/shared/entity-dropdown/entity-dropdown.component.html b/src/app/shared/entity-dropdown/entity-dropdown.component.html
index 59c242ef97..a4d539625f 100644
--- a/src/app/shared/entity-dropdown/entity-dropdown.component.html
+++ b/src/app/shared/entity-dropdown/entity-dropdown.component.html
@@ -21,8 +21,8 @@
       </ul>
     </button>
     <button class="dropdown-item disabled" *ngIf="(isLoadingList | async)" >
-      <ds-loading message="{{'loading.default' | translate}}">
-      </ds-loading>
+      <ds-themed-loading message="{{'loading.default' | translate}}">
+      </ds-themed-loading>
     </button>
 
 </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
index 07ea131a00..62d34a8625 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
@@ -1,7 +1,7 @@
 <div class="d-flex">
     <span class="mr-auto text-contents">
         <ng-container *ngIf="!(metadataRepresentation$ | async)">
-            <ds-loading [showMessage]="false"></ds-loading>
+            <ds-themed-loading [showMessage]="false"></ds-themed-loading>
         </ng-container>
         <ng-container *ngIf="(metadataRepresentation$ | async)">
             <ds-metadata-representation-loader [mdRepresentation]="metadataRepresentation$ | async"></ds-metadata-representation-loader>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html
index 15087d2553..ff91b18e1c 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html
@@ -1,7 +1,7 @@
 <div class="d-flex">
     <span class="mr-auto text-contents">
         <ng-container *ngIf="!(relatedItem$ | async)">
-            <ds-loading [showMessage]="false"></ds-loading>
+            <ds-themed-loading [showMessage]="false"></ds-themed-loading>
         </ng-container>
         <ng-container *ngIf="(relatedItem$ | async)">
             <ds-listable-object-component-loader [showLabel]="false" [viewMode]="viewType" [object]="(relatedItem$ | async)"></ds-listable-object-component-loader>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html
index 84bc0f4ffe..05f443aad5 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html
@@ -57,7 +57,7 @@
   </div>
 
   <div class="d-flex">
-    <ds-loading *ngIf="!chips" [showMessage]="false"></ds-loading>
+    <ds-themed-loading *ngIf="!chips" [showMessage]="false"></ds-themed-loading>
     <div *ngIf="chips && !chips.hasItems()">
       <input type="text"
              class="border-0 form-control-plaintext tag-input mt-1 mb-1 pl-2 text-muted"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
index f95cd98c65..fa1d103b67 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
@@ -6,7 +6,7 @@
     </button>
 </div>
 <div class="modal-body">
-    <ds-loading *ngIf="!item || !collection"></ds-loading>
+    <ds-themed-loading *ngIf="!item || !collection"></ds-themed-loading>
     <ng-container *ngIf="item && collection">
         <ul ngbNav #nav="ngbNav" class="nav-tabs">
             <li ngbNavItem>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.html
index 61be99cbf2..dac0e03444 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.html
@@ -21,8 +21,8 @@
                                 [importConfig]="importConfig"
                                 (importObject)="import($event)">
         </ds-viewable-collection>
-        <ds-loading *ngIf="!entriesRD || entriesRD?.isLoading"
-                    message="{{'loading.search-results' | translate}}"></ds-loading>
+        <ds-themed-loading *ngIf="!entriesRD || entriesRD?.isLoading"
+                    message="{{'loading.search-results' | translate}}"></ds-themed-loading>
         <ds-error   *ngIf="entriesRD?.hasFailed && (!entriesRD?.errorMessage || entriesRD?.statusCode != 400)"
                     message="{{'error.search-results' | translate}}"></ds-error>
         <div *ngIf="entriesRD?.payload?.page?.length == 0 || entriesRD?.statusCode == 400" id="empty-external-entry-list">
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.spec.ts
index 00b0527af6..705e679dfd 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.spec.ts
@@ -145,8 +145,8 @@ describe('DsDynamicLookupRelationExternalSourceTabComponent', () => {
       expect(viewableCollection).toBeNull();
     });
 
-    it('should display a ds-loading component', () => {
-      const loading = fixture.debugElement.query(By.css('ds-loading'));
+    it('should display a ds-themed-loading component', () => {
+      const loading = fixture.debugElement.query(By.css('ds-themed-loading'));
       expect(loading).not.toBeNull();
     });
   });
diff --git a/src/app/shared/loading/themed-loading.component.ts b/src/app/shared/loading/themed-loading.component.ts
new file mode 100644
index 0000000000..2b6aa6212c
--- /dev/null
+++ b/src/app/shared/loading/themed-loading.component.ts
@@ -0,0 +1,31 @@
+import { Component, Input } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { LoadingComponent } from './loading.component';
+
+/**
+ * Themed wrapper for LoadingComponent
+ */
+@Component({
+  selector: 'ds-themed-loading',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedLoadingComponent extends ThemedComponent<LoadingComponent> {
+
+  @Input() message: string;
+  @Input() showMessage = true;
+
+  protected inAndOutputNames: (keyof LoadingComponent & keyof this)[] = ['message', 'showMessage'];
+
+  protected getComponentName(): string {
+    return 'LoadingComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/shared/loading/loading.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./loading.component');
+  }
+}
diff --git a/src/app/shared/log-in/log-in.component.html b/src/app/shared/log-in/log-in.component.html
index 8fb5a33954..98bfcb4f43 100644
--- a/src/app/shared/log-in/log-in.component.html
+++ b/src/app/shared/log-in/log-in.component.html
@@ -1,4 +1,4 @@
-<ds-loading *ngIf="(loading | async) || (isAuthenticated | async)" class="m-5"></ds-loading>
+<ds-themed-loading *ngIf="(loading | async) || (isAuthenticated | async)" class="m-5"></ds-themed-loading>
 <div *ngIf="!(loading | async) && !(isAuthenticated | async)" class="px-4 py-3 login-container">
   <ng-container *ngFor="let authMethod of (authMethods | async); let i = index">
     <div *ngIf="i === 1" class="text-center mt-2">
diff --git a/src/app/shared/object-detail/object-detail.component.html b/src/app/shared/object-detail/object-detail.component.html
index 7fef7d9689..3d086fc85e 100644
--- a/src/app/shared/object-detail/object-detail.component.html
+++ b/src/app/shared/object-detail/object-detail.component.html
@@ -18,5 +18,5 @@
       </div>
     </div>
   <ds-error *ngIf="objects.hasFailed" message="{{'error.objects' | translate}}"></ds-error>
-  <ds-loading *ngIf="objects.isLoading" message="{{'loading.objects' | translate}}"></ds-loading>
+  <ds-themed-loading *ngIf="objects.isLoading" message="{{'loading.objects' | translate}}"></ds-themed-loading>
 </ds-pagination>
diff --git a/src/app/shared/object-grid/object-grid.component.html b/src/app/shared/object-grid/object-grid.component.html
index 0afd623d86..84745f9831 100644
--- a/src/app/shared/object-grid/object-grid.component.html
+++ b/src/app/shared/object-grid/object-grid.component.html
@@ -19,6 +19,6 @@
       </div>
     </div>
   <ds-error *ngIf="objects.hasFailed" message="{{'error.objects' | translate}}"></ds-error>
-  <ds-loading *ngIf="objects.isLoading" message="{{'loading.objects' | translate}}"></ds-loading>
+  <ds-themed-loading *ngIf="objects.isLoading" message="{{'loading.objects' | translate}}"></ds-themed-loading>
 </ds-pagination>
 
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.html b/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.html
index 74fc5fd06d..f26de733b2 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.html
+++ b/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.html
@@ -6,6 +6,6 @@
 
   <ds-workflowitem-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-workflowitem-actions>
 </ng-container>
-<ds-loading
+<ds-themed-loading
   *ngIf="!(item$ | async)"
-  [showMessage]="false"></ds-loading>
+  [showMessage]="false"></ds-themed-loading>
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.html b/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.html
index 41d95b87af..2f0b04ef12 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.html
+++ b/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.html
@@ -6,6 +6,6 @@
 
   <ds-workspaceitem-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-workspaceitem-actions>
 </ng-container>
-<ds-loading
+<ds-themed-loading
   *ngIf="!(item$ | async)"
-  [showMessage]="false"></ds-loading>
+  [showMessage]="false"></ds-themed-loading>
diff --git a/src/app/shared/object-select/collection-select/collection-select.component.html b/src/app/shared/object-select/collection-select/collection-select.component.html
index 27ebcd9643..8ed41c5226 100644
--- a/src/app/shared/object-select/collection-select/collection-select.component.html
+++ b/src/app/shared/object-select/collection-select/collection-select.component.html
@@ -28,7 +28,7 @@
     {{'collection.select.empty' | translate}}
   </div>
   <ds-error *ngIf="collectionsRD?.hasFailed" message="{{'error.collections' | translate}}"></ds-error>
-  <ds-loading *ngIf="!collectionsRD || collectionsRD?.isLoading" message="{{'loading.collections' | translate}}"></ds-loading>
+  <ds-themed-loading *ngIf="!collectionsRD || collectionsRD?.isLoading" message="{{'loading.collections' | translate}}"></ds-themed-loading>
   <div *ngVar="(selectedIds$ | async) as selectedIds">
     <button class="btn collection-confirm float-right"
             [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
diff --git a/src/app/shared/object-select/item-select/item-select.component.html b/src/app/shared/object-select/item-select/item-select.component.html
index e53f2af99b..b7fce78289 100644
--- a/src/app/shared/object-select/item-select/item-select.component.html
+++ b/src/app/shared/object-select/item-select/item-select.component.html
@@ -36,7 +36,7 @@
     {{'item.select.empty' | translate}}
   </div>
   <ds-error *ngIf="itemsRD?.hasFailed" message="{{'error.items' | translate}}"></ds-error>
-  <ds-loading *ngIf="!itemsRD || itemsRD?.isLoading" message="{{'loading.items' | translate}}"></ds-loading>
+  <ds-themed-loading *ngIf="!itemsRD || itemsRD?.isLoading" message="{{'loading.items' | translate}}"></ds-themed-loading>
   <div *ngVar="(selectedIds$ | async) as selectedIds">
     <button class="btn btn-outline-secondary item-cancel float-left" (click)="onCancel()">{{cancelButton | translate}}</button>
     <button class="btn item-confirm float-right"
diff --git a/src/app/shared/search/search-results/search-results.component.html b/src/app/shared/search/search-results/search-results.component.html
index c383a2fa1a..153f34b132 100644
--- a/src/app/shared/search/search-results/search-results.component.html
+++ b/src/app/shared/search/search-results/search-results.component.html
@@ -15,7 +15,7 @@
             >
     </ds-viewable-collection>
 </div>
-<ds-loading *ngIf="isLoading()" message="{{'loading.search-results' | translate}}"></ds-loading>
+<ds-themed-loading *ngIf="isLoading()" message="{{'loading.search-results' | translate}}"></ds-themed-loading>
 <ds-error
         *ngIf="showError()"
         message="{{errorMessageLabel() | translate}}"></ds-error>
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 715ee66a99..f9391afdb4 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -177,6 +177,7 @@ import { ScopeSelectorModalComponent } from './search-form/scope-selector-modal/
 import { BitstreamRequestACopyPageComponent } from './bitstream-request-a-copy-page/bitstream-request-a-copy-page.component';
 import { DsSelectComponent } from './ds-select/ds-select.component';
 import { LogInOidcComponent } from './log-in/methods/oidc/log-in-oidc.component';
+import { ThemedLoadingComponent } from './loading/themed-loading.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -234,6 +235,7 @@ const COMPONENTS = [
   FileSectionComponent,
   LangSwitchComponent,
   LoadingComponent,
+  ThemedLoadingComponent,
   LogInComponent,
   LogOutComponent,
   NumberPickerComponent,
diff --git a/src/app/shared/vocabulary-treeview/vocabulary-treeview.component.html b/src/app/shared/vocabulary-treeview/vocabulary-treeview.component.html
index 3f57e6a4c3..39c62d6e53 100644
--- a/src/app/shared/vocabulary-treeview/vocabulary-treeview.component.html
+++ b/src/app/shared/vocabulary-treeview/vocabulary-treeview.component.html
@@ -23,7 +23,7 @@
       </div>
     </div>
     <div class="treeview-container">
-      <ds-loading *ngIf="loading | async" [showMessage]="false"></ds-loading>
+      <ds-themed-loading *ngIf="loading | async" [showMessage]="false"></ds-themed-loading>
       <h4 *ngIf="!(loading | async) && dataSource.data.length === 0" class="text-center text-muted mt-4" >
         <span>{{'vocabulary-treeview.search.no-result' | translate}}</span>
       </h4>
diff --git a/src/app/statistics-page/statistics-page/statistics-page.component.html b/src/app/statistics-page/statistics-page/statistics-page.component.html
index 5cf1e9c8b5..c6938c7582 100644
--- a/src/app/statistics-page/statistics-page/statistics-page.component.html
+++ b/src/app/statistics-page/statistics-page/statistics-page.component.html
@@ -11,7 +11,7 @@
   <ng-container *ngVar="reports$ | async as reports">
 
     <ng-container *ngIf="!reports">
-      <ds-loading></ds-loading>
+      <ds-themed-loading></ds-themed-loading>
     </ng-container>
 
     <ng-container *ngIf="reports">
diff --git a/src/app/submission/form/submission-form.component.html b/src/app/submission/form/submission-form.component.html
index c86d4e0195..a80fe35f4e 100644
--- a/src/app/submission/form/submission-form.component.html
+++ b/src/app/submission/form/submission-form.component.html
@@ -22,7 +22,7 @@
     </div>
 
     <div class="submission-form-content">
-        <ds-loading *ngIf="(isLoading() | async)" message="Loading..."></ds-loading>
+        <ds-themed-loading *ngIf="(isLoading() | async)" message="Loading..."></ds-themed-loading>
         <ng-container *ngFor="let object of (submissionSections | async)">
             <ds-submission-section-container [collectionId]="collectionId"
                                              [submissionId]="submissionId"
diff --git a/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.html b/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.html
index 6fb6ab3382..29c99732c3 100644
--- a/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.html
+++ b/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.html
@@ -5,7 +5,7 @@
     </button>
   </div>
   <div class="modal-body">
-    <ds-loading *ngIf="isLoading()"></ds-loading>
+    <ds-themed-loading *ngIf="isLoading()"></ds-themed-loading>
     <ds-collection-dropdown [ngClass]="{'d-none': isLoading()}"
                             (selectionChange)="selectObject($event)"
                             (searchComplete)="searchComplete()"
diff --git a/src/app/submission/import-external/submission-import-external.component.html b/src/app/submission/import-external/submission-import-external.component.html
index 8c13a697a5..19499b4be8 100644
--- a/src/app/submission/import-external/submission-import-external.component.html
+++ b/src/app/submission/import-external/submission-import-external.component.html
@@ -22,8 +22,8 @@
                                 [importConfig]="importConfig"
                                 (importObject)="import($event)">
         </ds-viewable-collection>
-        <ds-loading *ngIf="(isLoading$ | async)"
-                    message="{{'loading.search-results' | translate}}"></ds-loading>
+        <ds-themed-loading *ngIf="(isLoading$ | async)"
+                    message="{{'loading.search-results' | translate}}"></ds-themed-loading>
         <div *ngIf="!(isLoading$ | async) && entriesRD?.payload?.page?.length === 0" id="empty-external-entry-list">
           <ds-alert [type]="'alert-info'">{{ 'search.results.empty' | translate }}</ds-alert>
         </div>
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
index 20743540a8..6b9d542abc 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
@@ -4,7 +4,7 @@
 
     <ng-container class="selection">
       <span *ngIf="!submissionCcLicenses">
-        <ds-loading></ds-loading>
+        <ds-themed-loading></ds-themed-loading>
       </span>
       <span *ngIf="getSelectedCcLicense()">
         {{ getSelectedCcLicense().name }}
@@ -121,7 +121,7 @@
 <ng-container *ngIf="getCcLicenseLink$()">
   <ng-container *ngVar="getCcLicenseLink$() | async as licenseLink">
     <div *ngIf="!licenseLink">
-      <ds-loading></ds-loading>
+      <ds-themed-loading></ds-themed-loading>
     </div>
     <div *ngIf="licenseLink"
          class="mt-2 p-4 bg-light text-dark">
diff --git a/src/app/submission/sections/form/section-form.component.html b/src/app/submission/sections/form/section-form.component.html
index cd7b45bb00..675b550b57 100644
--- a/src/app/submission/sections/form/section-form.component.html
+++ b/src/app/submission/sections/form/section-form.component.html
@@ -1,4 +1,4 @@
-<ds-loading *ngIf="isLoading" message="Loading..."></ds-loading>
+<ds-themed-loading *ngIf="isLoading" message="Loading..."></ds-themed-loading>
 <ds-form *ngIf="!isLoading && formModel" #formRef="formComponent"
          [formId]="formId"
          [formModel]="formModel"
diff --git a/src/app/thumbnail/thumbnail.component.html b/src/app/thumbnail/thumbnail.component.html
index bf70928392..aedfd95c5a 100644
--- a/src/app/thumbnail/thumbnail.component.html
+++ b/src/app/thumbnail/thumbnail.component.html
@@ -1,7 +1,7 @@
 <div class="thumbnail" [class.limit-width]="limitWidth">
-  <ds-loading *ngIf="isLoading; else showThumbnail" class="thumbnail-content" [showMessage]="false">
+  <ds-themed-loading *ngIf="isLoading; else showThumbnail" class="thumbnail-content" [showMessage]="false">
     text-content
-  </ds-loading>
+  </ds-themed-loading>
   <ng-template #showThumbnail>
     <img *ngIf="src !== null" class="thumbnail-content img-fluid"
          [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()">
diff --git a/src/app/thumbnail/thumbnail.component.spec.ts b/src/app/thumbnail/thumbnail.component.spec.ts
index eea585f9f8..a89a8b0a72 100644
--- a/src/app/thumbnail/thumbnail.component.spec.ts
+++ b/src/app/thumbnail/thumbnail.component.spec.ts
@@ -115,7 +115,7 @@ describe('ThumbnailComponent', () => {
         comp.thumbnail = thumbnail;
         comp.ngOnChanges();
         fixture.detectChanges();
-        expect(de.query(By.css('ds-loading'))).toBeTruthy();
+        expect(de.query(By.css('ds-themed-loading'))).toBeTruthy();
       });
     });
 

From d6be2e86517afd0e35b93a5c37bfa893f523a94f Mon Sep 17 00:00:00 2001
From: Yana De Pauw <yana@atmire.com>
Date: Mon, 25 Apr 2022 17:40:22 +0200
Subject: [PATCH 08/33] 89984: Add themable menu section

---
 .../admin-sidebar/admin-sidebar.component.ts     |  6 ++++--
 src/app/navbar/navbar.component.ts               |  6 ++++--
 src/app/shared/menu/menu-section.decorator.ts    | 16 ++++++++++++----
 src/app/shared/menu/menu.component.ts            |  7 +++++--
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
index c81b2e6e93..55d5fd4374 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
@@ -22,6 +22,7 @@ import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../core/data/feature-authorization/feature-id';
 import { Router, ActivatedRoute } from '@angular/router';
+import { ThemeService } from '../../shared/theme-support/theme.service';
 
 /**
  * Component representing the admin sidebar
@@ -70,9 +71,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
     private modalService: NgbModal,
     public authorizationService: AuthorizationDataService,
     private scriptDataService: ScriptDataService,
-    public route: ActivatedRoute
+    public route: ActivatedRoute,
+    protected themeService: ThemeService
   ) {
-    super(menuService, injector, authorizationService, route);
+    super(menuService, injector, authorizationService, route, themeService);
     this.inFocus$ = new BehaviorSubject(false);
   }
 
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index 836f94781a..1d070b17c2 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -13,6 +13,7 @@ import { BrowseDefinition } from '../core/shared/browse-definition.model';
 import { RemoteData } from '../core/data/remote-data';
 import { ActivatedRoute } from '@angular/router';
 import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
+import { ThemeService } from '../shared/theme-support/theme.service';
 
 /**
  * Component representing the public navbar
@@ -35,9 +36,10 @@ export class NavbarComponent extends MenuComponent {
               public windowService: HostWindowService,
               public browseService: BrowseService,
               public authorizationService: AuthorizationDataService,
-              public route: ActivatedRoute
+              public route: ActivatedRoute,
+              protected themeService: ThemeService
   ) {
-    super(menuService, injector, authorizationService, route);
+    super(menuService, injector, authorizationService, route, themeService);
   }
 
   ngOnInit(): void {
diff --git a/src/app/shared/menu/menu-section.decorator.ts b/src/app/shared/menu/menu-section.decorator.ts
index c27e870e13..94a0469a7e 100644
--- a/src/app/shared/menu/menu-section.decorator.ts
+++ b/src/app/shared/menu/menu-section.decorator.ts
@@ -1,4 +1,6 @@
+import { DEFAULT_THEME } from '../object-collection/shared/listable-object/listable-object.decorator';
 import { MenuID } from './initial-menus-state';
+import { hasNoValue } from '../empty.util';
 
 const menuComponentMap = new Map();
 
@@ -8,7 +10,7 @@ const menuComponentMap = new Map();
  * @param {boolean} expandable True when the section should be expandable, false when if should not
  * @returns {(menuSectionWrapperComponent: GenericConstructor) => void}
  */
-export function rendersSectionForMenu(menuID: MenuID, expandable: boolean) {
+export function rendersSectionForMenu(menuID: MenuID, expandable: boolean, theme = DEFAULT_THEME) {
   return function decorator(menuSectionWrapperComponent: any) {
     if (!menuSectionWrapperComponent) {
       return;
@@ -16,7 +18,10 @@ export function rendersSectionForMenu(menuID: MenuID, expandable: boolean) {
     if (!menuComponentMap.get(menuID)) {
       menuComponentMap.set(menuID, new Map());
     }
-    menuComponentMap.get(menuID).set(expandable, menuSectionWrapperComponent);
+    if (!menuComponentMap.get(menuID).get(expandable)) {
+        menuComponentMap.get(menuID).set(expandable, new Map());
+    }
+    menuComponentMap.get(menuID).get(expandable).set(theme, menuSectionWrapperComponent);
   };
 }
 
@@ -26,6 +31,9 @@ export function rendersSectionForMenu(menuID: MenuID, expandable: boolean) {
  * @param {boolean} expandable True when the section should be expandable, false when if should not
  * @returns {GenericConstructor} The constructor of the matching Component
  */
-export function getComponentForMenu(menuID: MenuID, expandable: boolean) {
-  return menuComponentMap.get(menuID).get(expandable);
+export function getComponentForMenu(menuID: MenuID, expandable: boolean, theme: string) {
+  const comp = menuComponentMap.get(menuID).get(expandable).get(theme);
+  if (hasNoValue(comp)) {
+    return menuComponentMap.get(menuID).get(expandable).get(DEFAULT_THEME);
+  }
 }
diff --git a/src/app/shared/menu/menu.component.ts b/src/app/shared/menu/menu.component.ts
index e5e899805b..e520ddc93c 100644
--- a/src/app/shared/menu/menu.component.ts
+++ b/src/app/shared/menu/menu.component.ts
@@ -12,6 +12,7 @@ import { compareArraysUsingIds } from '../../item-page/simple/item-types/shared/
 import { ActivatedRoute } from '@angular/router';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../core/data/feature-authorization/feature-id';
+import { ThemeService } from '../theme-support/theme.service';
 
 /**
  * A basic implementation of a MenuComponent
@@ -72,7 +73,9 @@ export class MenuComponent implements OnInit, OnDestroy {
 
   private activatedRouteLastChild: ActivatedRoute;
 
-  constructor(protected menuService: MenuService, protected injector: Injector, public authorizationService: AuthorizationDataService, public route: ActivatedRoute) {
+  constructor(protected menuService: MenuService, protected injector: Injector, public authorizationService: AuthorizationDataService,
+              public route: ActivatedRoute, protected themeService: ThemeService
+  ) {
   }
 
   /**
@@ -215,7 +218,7 @@ export class MenuComponent implements OnInit, OnDestroy {
   private getSectionComponent(section: MenuSection): Observable<GenericConstructor<MenuSectionComponent>> {
     return this.menuService.hasSubSections(this.menuID, section.id).pipe(
       map((expandable: boolean) => {
-        return getComponentForMenu(this.menuID, expandable);
+        return getComponentForMenu(this.menuID, expandable, this.themeService.getThemeName());
       }
       ),
     );

From c63a25b18e86c539aec7268247ecfc6f15c3e998 Mon Sep 17 00:00:00 2001
From: Yana De Pauw <yana@atmire.com>
Date: Tue, 26 Apr 2022 14:42:53 +0200
Subject: [PATCH 09/33] 89984: Fix getComponentForMenu themed method

---
 src/app/shared/menu/menu-section.decorator.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/menu/menu-section.decorator.ts b/src/app/shared/menu/menu-section.decorator.ts
index 94a0469a7e..9374ab3c0d 100644
--- a/src/app/shared/menu/menu-section.decorator.ts
+++ b/src/app/shared/menu/menu-section.decorator.ts
@@ -1,6 +1,6 @@
 import { DEFAULT_THEME } from '../object-collection/shared/listable-object/listable-object.decorator';
 import { MenuID } from './initial-menus-state';
-import { hasNoValue } from '../empty.util';
+import { hasNoValue, hasValue } from '../empty.util';
 
 const menuComponentMap = new Map();
 
@@ -33,7 +33,9 @@ export function rendersSectionForMenu(menuID: MenuID, expandable: boolean, theme
  */
 export function getComponentForMenu(menuID: MenuID, expandable: boolean, theme: string) {
   const comp = menuComponentMap.get(menuID).get(expandable).get(theme);
-  if (hasNoValue(comp)) {
+  if (hasValue(comp)) {
+    return comp;
+  } else {
     return menuComponentMap.get(menuID).get(expandable).get(DEFAULT_THEME);
   }
 }

From d8b6e65f6f56768a221544f2362d13636dc28689 Mon Sep 17 00:00:00 2001
From: Yana De Pauw <yana@atmire.com>
Date: Tue, 26 Apr 2022 16:40:38 +0200
Subject: [PATCH 10/33] Fix tests

---
 .../admin/admin-sidebar/admin-sidebar.component.spec.ts   | 3 +++
 .../import-external-page.component.spec.ts                | 5 +++++
 .../item-relationships.component.spec.ts                  | 3 +++
 src/app/navbar/navbar.component.spec.ts                   | 3 +++
 src/app/shared/browse-by/browse-by.component.spec.ts      | 8 +++-----
 src/app/shared/menu/menu.component.spec.ts                | 3 +++
 6 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
index 65026c1504..9a685d9cf6 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
@@ -20,6 +20,8 @@ import { FeatureID } from '../../core/data/feature-authorization/feature-id';
 import createSpy = jasmine.createSpy;
 import { createSuccessfulRemoteDataObject } from '../../shared/remote-data.utils';
 import { Item } from '../../core/shared/item.model';
+import { ThemeService } from '../../shared/theme-support/theme.service';
+import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
 
 describe('AdminSidebarComponent', () => {
   let comp: AdminSidebarComponent;
@@ -60,6 +62,7 @@ describe('AdminSidebarComponent', () => {
       declarations: [AdminSidebarComponent],
       providers: [
         Injector,
+        { provide: ThemeService, useValue: getMockThemeService() },
         { provide: MenuService, useValue: menuService },
         { provide: CSSVariableService, useClass: CSSVariableServiceStub },
         { provide: AuthService, useClass: AuthServiceStub },
diff --git a/src/app/import-external-page/import-external-page.component.spec.ts b/src/app/import-external-page/import-external-page.component.spec.ts
index a19c22d71e..00bdd4be28 100644
--- a/src/app/import-external-page/import-external-page.component.spec.ts
+++ b/src/app/import-external-page/import-external-page.component.spec.ts
@@ -1,6 +1,8 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ImportExternalPageComponent } from './import-external-page.component';
+import { ThemeService } from '../shared/theme-support/theme.service';
+import { getMockThemeService } from '../shared/mocks/theme-service.mock';
 
 describe('ImportExternalPageComponent', () => {
   let component: ImportExternalPageComponent;
@@ -9,6 +11,9 @@ describe('ImportExternalPageComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ImportExternalPageComponent ],
+      providers:[
+        { provide: ThemeService, useValue: getMockThemeService() },
+      ],
       schemas: [NO_ERRORS_SCHEMA]
     })
     .compileComponents();
diff --git a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.spec.ts b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.spec.ts
index 59cf9762a4..50fb57ab6b 100644
--- a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.spec.ts
+++ b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.spec.ts
@@ -27,6 +27,8 @@ import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } f
 import { createPaginatedList } from '../../../shared/testing/utils.test';
 import { RelationshipTypeService } from '../../../core/data/relationship-type.service';
 import { relationshipTypes } from '../../../shared/testing/relationship-types.mock';
+import { ThemeService } from '../../../shared/theme-support/theme.service';
+import { getMockThemeService } from '../../../shared/mocks/theme-service.mock';
 
 let comp: any;
 let fixture: ComponentFixture<ItemRelationshipsComponent>;
@@ -211,6 +213,7 @@ describe('ItemRelationshipsComponent', () => {
       imports: [SharedModule, TranslateModule.forRoot()],
       declarations: [ItemRelationshipsComponent],
       providers: [
+        { provide: ThemeService, useValue: getMockThemeService() },
         { provide: ItemDataService, useValue: itemService },
         { provide: ObjectUpdatesService, useValue: objectUpdatesService },
         { provide: Router, useValue: router },
diff --git a/src/app/navbar/navbar.component.spec.ts b/src/app/navbar/navbar.component.spec.ts
index 659107080c..9a9d2210be 100644
--- a/src/app/navbar/navbar.component.spec.ts
+++ b/src/app/navbar/navbar.component.spec.ts
@@ -20,6 +20,8 @@ import { BrowseDefinition } from '../core/shared/browse-definition.model';
 import { BrowseByDataType } from '../browse-by/browse-by-switcher/browse-by-decorator';
 import { Item } from '../core/shared/item.model';
 import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
+import { ThemeService } from '../shared/theme-support/theme.service';
+import { getMockThemeService } from '../shared/mocks/theme-service.mock';
 
 let comp: NavbarComponent;
 let fixture: ComponentFixture<NavbarComponent>;
@@ -91,6 +93,7 @@ describe('NavbarComponent', () => {
       declarations: [NavbarComponent],
       providers: [
         Injector,
+        { provide: ThemeService, useValue: getMockThemeService() },
         { provide: MenuService, useValue: menuService },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
         { provide: ActivatedRoute, useValue: routeStub },
diff --git a/src/app/shared/browse-by/browse-by.component.spec.ts b/src/app/shared/browse-by/browse-by.component.spec.ts
index e25058399c..b9617aa28e 100644
--- a/src/app/shared/browse-by/browse-by.component.spec.ts
+++ b/src/app/shared/browse-by/browse-by.component.spec.ts
@@ -31,6 +31,7 @@ import { BrowseEntry } from '../../core/shared/browse-entry.model';
 import { ITEM } from '../../core/shared/item.resource-type';
 import { ThemeService } from '../theme-support/theme.service';
 import SpyObj = jasmine.SpyObj;
+import { getMockThemeService } from '../mocks/theme-service.mock';
 
 @listableObjectComponent(BrowseEntry, ViewMode.ListElement, DEFAULT_CONTEXT, 'custom')
 @Component({
@@ -73,13 +74,10 @@ describe('BrowseByComponent', () => {
   });
   const paginationService = new PaginationServiceStub(paginationConfig);
 
-  let themeService: SpyObj<ThemeService>;
+  let themeService;
 
   beforeEach(waitForAsync(() => {
-    themeService = jasmine.createSpyObj('themeService', {
-      getThemeName: 'dspace',
-      getThemeName$: observableOf('dspace'),
-    });
+    themeService = getMockThemeService('dspace');
     TestBed.configureTestingModule({
       imports: [
         CommonModule,
diff --git a/src/app/shared/menu/menu.component.spec.ts b/src/app/shared/menu/menu.component.spec.ts
index b84fad2b33..5e649a479d 100644
--- a/src/app/shared/menu/menu.component.spec.ts
+++ b/src/app/shared/menu/menu.component.spec.ts
@@ -13,6 +13,8 @@ import { MenuID } from './initial-menus-state';
 import { Item } from '../../core/shared/item.model';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { createSuccessfulRemoteDataObject } from '../remote-data.utils';
+import { ThemeService } from '../theme-support/theme.service';
+import { getMockThemeService } from '../mocks/theme-service.mock';
 
 describe('MenuComponent', () => {
   let comp: MenuComponent;
@@ -57,6 +59,7 @@ describe('MenuComponent', () => {
       declarations: [MenuComponent],
       providers: [
         Injector,
+        { provide: ThemeService, useValue: getMockThemeService() },
         { provide: MenuService, useClass: MenuServiceStub },
         { provide: AuthorizationDataService, useValue: authorizationService },
         { provide: ActivatedRoute, useValue: routeStub },

From aac41a76cf488b3a04ed8c52bbd9d73f3363ba4d Mon Sep 17 00:00:00 2001
From: Yana De Pauw <yana@atmire.com>
Date: Tue, 26 Apr 2022 17:34:05 +0200
Subject: [PATCH 11/33] Potential test fix

---
 src/app/shared/browse-by/browse-by.component.spec.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app/shared/browse-by/browse-by.component.spec.ts b/src/app/shared/browse-by/browse-by.component.spec.ts
index b9617aa28e..e961fd40a4 100644
--- a/src/app/shared/browse-by/browse-by.component.spec.ts
+++ b/src/app/shared/browse-by/browse-by.component.spec.ts
@@ -102,12 +102,9 @@ describe('BrowseByComponent', () => {
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
-  }));
-
-  beforeEach(() => {
     fixture = TestBed.createComponent(BrowseByComponent);
     comp = fixture.componentInstance;
-  });
+  }));
 
   it('should display a loading message when objects is empty', () => {
     (comp as any).objects = undefined;

From f2e4a005a235f1fe895e2c29f39d2e8138e49826 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Tue, 10 May 2022 17:31:43 +0200
Subject: [PATCH 12/33] 89676: themed custom search-results

---
 .../search-results/search-results.component.ts   | 16 ++++++++++++++++
 src/themes/custom/theme.module.ts                |  4 +++-
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 src/themes/custom/app/shared/search/search-results/search-results.component.ts

diff --git a/src/themes/custom/app/shared/search/search-results/search-results.component.ts b/src/themes/custom/app/shared/search/search-results/search-results.component.ts
new file mode 100644
index 0000000000..bdfeea15a5
--- /dev/null
+++ b/src/themes/custom/app/shared/search/search-results/search-results.component.ts
@@ -0,0 +1,16 @@
+import { SearchResultsComponent as BaseComponent } from '../../../../../../app/shared/search/search-results/search-results.component';
+import { Component } from '@angular/core';
+import { fadeIn, fadeInOut } from '../../../../../../app/shared/animations/fade';
+
+@Component({
+  selector: 'ds-search-results',
+  // templateUrl: './search-results.component.html',
+  templateUrl: '../../../../../../app/shared/search/search-results/search-results.component.html',
+  animations: [
+    fadeIn,
+    fadeInOut
+  ]
+})
+export class SearchResultsComponent extends BaseComponent {
+
+}
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index e2e97b9087..38f9db649e 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -84,6 +84,7 @@ import { SearchModule } from '../../app/shared/search/search.module';
 import { ResourcePoliciesModule } from '../../app/shared/resource-policies/resource-policies.module';
 import { ComcolModule } from '../../app/shared/comcol/comcol.module';
 import { FeedbackComponent } from './app/info/feedback/feedback.component';
+import { SearchResultsComponent } from './app/shared/search/search-results/search-results.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -126,7 +127,8 @@ const DECLARATIONS = [
   NavbarComponent,
   HeaderNavbarWrapperComponent,
   BreadcrumbsComponent,
-  FeedbackComponent
+  FeedbackComponent,
+  SearchResultsComponent,
 ];
 
 @NgModule({

From 5c9510993ca7e3db6c34b6b811d5296f527ef3da Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 10 May 2022 20:59:04 +0200
Subject: [PATCH 13/33] 91202: Themed ExpandableNavbarSectionComponent

---
 .../expandable-navbar-section.component.html  |  0
 .../expandable-navbar-section.component.scss  |  0
 .../expandable-navbar-section.component.ts    | 23 +++++++++++++++++++
 src/themes/custom/theme.module.ts             |  6 ++++-
 4 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
 create mode 100644 src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
 create mode 100644 src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts

diff --git a/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
new file mode 100644
index 0000000000..283b9ca6f6
--- /dev/null
+++ b/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import {
+  ExpandableNavbarSectionComponent as BaseComponent
+} from '../../../../../app/navbar/expandable-navbar-section/expandable-navbar-section.component';
+import { slide } from '../../../../../app/shared/animations/slide';
+import { rendersSectionForMenu } from '../../../../../app/shared/menu/menu-section.decorator';
+import { MenuID } from '../../../../../app/shared/menu/initial-menus-state';
+
+/**
+ * Represents an expandable section in the navbar
+ */
+@Component({
+  /* tslint:disable:component-selector */
+  selector: 'li[ds-expandable-navbar-section]',
+  // templateUrl: './expandable-navbar-section.component.html',
+  templateUrl: '../../../../../app/navbar/expandable-navbar-section/expandable-navbar-section.component.html',
+  // styleUrls: ['./expandable-navbar-section.component.scss'],
+  styleUrls: ['../../../../../app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss'],
+  animations: [slide]
+})
+@rendersSectionForMenu(MenuID.PUBLIC, true)
+export class ExpandableNavbarSectionComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index e2e97b9087..7206e6e714 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -84,6 +84,9 @@ import { SearchModule } from '../../app/shared/search/search.module';
 import { ResourcePoliciesModule } from '../../app/shared/resource-policies/resource-policies.module';
 import { ComcolModule } from '../../app/shared/comcol/comcol.module';
 import { FeedbackComponent } from './app/info/feedback/feedback.component';
+import {
+  ExpandableNavbarSectionComponent
+} from './app/navbar/expandable-navbar-section/expandable-navbar-section.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -126,7 +129,8 @@ const DECLARATIONS = [
   NavbarComponent,
   HeaderNavbarWrapperComponent,
   BreadcrumbsComponent,
-  FeedbackComponent
+  FeedbackComponent,
+  ExpandableNavbarSectionComponent,
 ];
 
 @NgModule({

From 55005d3fa4419c3651fda4bfdf0e06e44907b5b1 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Wed, 11 May 2022 09:45:17 +0200
Subject: [PATCH 14/33] 86526: Themed AuthNavMenuComponent

---
 .../auth-nav-menu.component.html              |  0
 .../auth-nav-menu.component.scss              |  0
 .../auth-nav-menu/auth-nav-menu.component.ts  | 19 +++++++++++++++++++
 src/themes/custom/theme.module.ts             |  4 +++-
 4 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.html
 create mode 100644 src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.scss
 create mode 100644 src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.ts

diff --git a/src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.scss b/src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.ts b/src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.ts
new file mode 100644
index 0000000000..af54aacd44
--- /dev/null
+++ b/src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import {
+  AuthNavMenuComponent as BaseComponent,
+} from '../../../../../app/shared/auth-nav-menu/auth-nav-menu.component';
+import { fadeInOut, fadeOut } from '../../../../../app/shared/animations/fade';
+
+/**
+ * Component representing the {@link AuthNavMenuComponent} of a page
+ */
+@Component({
+  selector: 'ds-auth-nav-menu',
+  // templateUrl: 'auth-nav-menu.component.html',
+  templateUrl: '../../../../../app/shared/auth-nav-menu/auth-nav-menu.component.html',
+  // styleUrls: ['auth-nav-menu.component.scss'],
+  styleUrls: ['../../../../../app/shared/auth-nav-menu/auth-nav-menu.component.scss'],
+  animations: [fadeInOut, fadeOut]
+})
+export class AuthNavMenuComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index dac941546b..db42294675 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -79,6 +79,7 @@ import { HeaderComponent } from './app/header/header.component';
 import { FooterComponent } from './app/footer/footer.component';
 import { BreadcrumbsComponent } from './app/breadcrumbs/breadcrumbs.component';
 import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component';
+import { AuthNavMenuComponent } from './app/shared/auth-nav-menu/auth-nav-menu.component';
 
 const DECLARATIONS = [
   HomePageComponent,
@@ -119,7 +120,8 @@ const DECLARATIONS = [
   HeaderComponent,
   NavbarComponent,
   HeaderNavbarWrapperComponent,
-  BreadcrumbsComponent
+  BreadcrumbsComponent,
+  AuthNavMenuComponent,
 ];
 
 @NgModule({

From cbf0db5342156f0053b719cc0a4d4c7bd39d96bf Mon Sep 17 00:00:00 2001
From: Yana De Pauw <yana@atmire.com>
Date: Wed, 11 May 2022 11:30:25 +0200
Subject: [PATCH 15/33] Add themed loading component in custom theme and fix
 issues

---
 src/app/navbar/navbar.component.html                |  4 ++--
 src/app/shared/menu/menu-section.decorator.ts       |  2 +-
 src/app/shared/theme-support/themed.component.ts    |  1 +
 .../app/shared/loading/loading.component.html       |  0
 .../app/shared/loading/loading.component.scss       |  0
 .../custom/app/shared/loading/loading.component.ts  | 13 +++++++++++++
 src/themes/custom/theme.module.ts                   |  4 +++-
 7 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 src/themes/custom/app/shared/loading/loading.component.html
 create mode 100644 src/themes/custom/app/shared/loading/loading.component.scss
 create mode 100644 src/themes/custom/app/shared/loading/loading.component.ts

diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index fc5d1a2ef3..8531543361 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -6,10 +6,10 @@
             <div id="collapsingNav">
                 <ul class="navbar-nav mr-auto shadow-none">
                     <ng-container *ngFor="let section of (sections | async)">
-                        <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
+                        <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
                     </ng-container>
                 </ul>
             </div>
         </div>
     </div>
-</nav>
\ No newline at end of file
+</nav>
diff --git a/src/app/shared/menu/menu-section.decorator.ts b/src/app/shared/menu/menu-section.decorator.ts
index 9374ab3c0d..18eedd1cf4 100644
--- a/src/app/shared/menu/menu-section.decorator.ts
+++ b/src/app/shared/menu/menu-section.decorator.ts
@@ -1,6 +1,6 @@
 import { DEFAULT_THEME } from '../object-collection/shared/listable-object/listable-object.decorator';
 import { MenuID } from './initial-menus-state';
-import { hasNoValue, hasValue } from '../empty.util';
+import { hasValue } from '../empty.util';
 
 const menuComponentMap = new Map();
 
diff --git a/src/app/shared/theme-support/themed.component.ts b/src/app/shared/theme-support/themed.component.ts
index 2ff0713f46..79ed914c5d 100644
--- a/src/app/shared/theme-support/themed.component.ts
+++ b/src/app/shared/theme-support/themed.component.ts
@@ -70,6 +70,7 @@ export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges
 
     this.lazyLoadSub = this.resolveThemedComponent(this.themeService.getThemeName()).pipe(
       switchMap((themedFile: any) => {
+        console.log(themedFile);
         if (hasValue(themedFile) && hasValue(themedFile[this.getComponentName()])) {
           // if the file is not null, and exports a component with the specified name,
           // return that component
diff --git a/src/themes/custom/app/shared/loading/loading.component.html b/src/themes/custom/app/shared/loading/loading.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/shared/loading/loading.component.scss b/src/themes/custom/app/shared/loading/loading.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/shared/loading/loading.component.ts b/src/themes/custom/app/shared/loading/loading.component.ts
new file mode 100644
index 0000000000..43249a4624
--- /dev/null
+++ b/src/themes/custom/app/shared/loading/loading.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { LoadingComponent as BaseComponent } from '../../../../../app/shared/loading/loading.component';
+
+@Component({
+  selector: 'ds-loading',
+  styleUrls: ['../../../../../app/shared/loading/loading.component.scss'],
+  // styleUrls: ['./loading.component.scss'],
+  templateUrl: '../../../../app/shared/loading/loading.component.html'
+  // templateUrl: './loading.component.html'
+})
+export class LoadingComponent extends BaseComponent {
+
+}
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index e2e97b9087..67ad6028ce 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -84,6 +84,7 @@ import { SearchModule } from '../../app/shared/search/search.module';
 import { ResourcePoliciesModule } from '../../app/shared/resource-policies/resource-policies.module';
 import { ComcolModule } from '../../app/shared/comcol/comcol.module';
 import { FeedbackComponent } from './app/info/feedback/feedback.component';
+import { LoadingComponent } from './app/shared/loading/loading.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -126,7 +127,8 @@ const DECLARATIONS = [
   NavbarComponent,
   HeaderNavbarWrapperComponent,
   BreadcrumbsComponent,
-  FeedbackComponent
+  FeedbackComponent,
+  LoadingComponent
 ];
 
 @NgModule({

From 166a163c24fd0e6b05aa6a49fc8474c10c9a1600 Mon Sep 17 00:00:00 2001
From: Yana De Pauw <yana@atmire.com>
Date: Wed, 11 May 2022 12:34:44 +0200
Subject: [PATCH 16/33] Fix custom loading components template url

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

diff --git a/src/themes/custom/app/shared/loading/loading.component.ts b/src/themes/custom/app/shared/loading/loading.component.ts
index 43249a4624..fb1a291dc0 100644
--- a/src/themes/custom/app/shared/loading/loading.component.ts
+++ b/src/themes/custom/app/shared/loading/loading.component.ts
@@ -5,7 +5,7 @@ import { LoadingComponent as BaseComponent } from '../../../../../app/shared/loa
   selector: 'ds-loading',
   styleUrls: ['../../../../../app/shared/loading/loading.component.scss'],
   // styleUrls: ['./loading.component.scss'],
-  templateUrl: '../../../../app/shared/loading/loading.component.html'
+  templateUrl: '../../../../../app/shared/loading/loading.component.html'
   // templateUrl: './loading.component.html'
 })
 export class LoadingComponent extends BaseComponent {

From 67ffa89c472bc7f86283fd8e0bcd735f481d4bc6 Mon Sep 17 00:00:00 2001
From: Yana De Pauw <yana@atmire.com>
Date: Wed, 11 May 2022 13:30:11 +0200
Subject: [PATCH 17/33] Remove console.log

---
 src/app/shared/theme-support/themed.component.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/shared/theme-support/themed.component.ts b/src/app/shared/theme-support/themed.component.ts
index 79ed914c5d..2ff0713f46 100644
--- a/src/app/shared/theme-support/themed.component.ts
+++ b/src/app/shared/theme-support/themed.component.ts
@@ -70,7 +70,6 @@ export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges
 
     this.lazyLoadSub = this.resolveThemedComponent(this.themeService.getThemeName()).pipe(
       switchMap((themedFile: any) => {
-        console.log(themedFile);
         if (hasValue(themedFile) && hasValue(themedFile[this.getComponentName()])) {
           // if the file is not null, and exports a component with the specified name,
           // return that component

From 5b4ecb9fc23633aad3224a9002cb56d85fc028c8 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Wed, 11 May 2022 13:46:03 +0200
Subject: [PATCH 18/33] 89720: Themed ItemMetadataComponent

---
 .../item-metadata/item-metadata.component.html  |  0
 .../item-metadata/item-metadata.component.scss  |  0
 .../item-metadata/item-metadata.component.ts    | 17 +++++++++++++++++
 src/themes/custom/theme.module.ts               |  4 +++-
 4 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.html
 create mode 100644 src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.scss
 create mode 100644 src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.ts

diff --git a/src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.html b/src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.scss b/src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.ts b/src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.ts
new file mode 100644
index 0000000000..d6d7c4b8fb
--- /dev/null
+++ b/src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import {
+  ItemMetadataComponent as BaseComponent
+} from '../../../../../../app/item-page/edit-item-page/item-metadata/item-metadata.component';
+
+@Component({
+  selector: 'ds-item-metadata',
+  // styleUrls: ['./item-metadata.component.scss'],
+  styleUrls: ['../../../../../../app/item-page/edit-item-page/item-metadata/item-metadata.component.scss'],
+  // templateUrl: './item-metadata.component.html',
+  templateUrl: '../../../../../../app/item-page/edit-item-page/item-metadata/item-metadata.component.html',
+})
+/**
+ * Component for displaying an item's metadata edit page
+ */
+export class ItemMetadataComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index e2e97b9087..ce259b5841 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -84,6 +84,7 @@ import { SearchModule } from '../../app/shared/search/search.module';
 import { ResourcePoliciesModule } from '../../app/shared/resource-policies/resource-policies.module';
 import { ComcolModule } from '../../app/shared/comcol/comcol.module';
 import { FeedbackComponent } from './app/info/feedback/feedback.component';
+import { ItemMetadataComponent } from './app/item-page/edit-item-page/item-metadata/item-metadata.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -126,7 +127,8 @@ const DECLARATIONS = [
   NavbarComponent,
   HeaderNavbarWrapperComponent,
   BreadcrumbsComponent,
-  FeedbackComponent
+  FeedbackComponent,
+  ItemMetadataComponent,
 ];
 
 @NgModule({

From a89375f67babaad5db95d9e661c8a89210940806 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Wed, 11 May 2022 14:28:16 +0200
Subject: [PATCH 19/33] 89720: Themed EditItemTemplatePageComponent

---
 .../edit-item-template-page.component.html       |  0
 .../edit-item-template-page.component.scss       |  0
 .../edit-item-template-page.component.ts         | 16 ++++++++++++++++
 src/themes/custom/theme.module.ts                |  4 ++++
 4 files changed, 20 insertions(+)
 create mode 100644 src/themes/custom/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
 create mode 100644 src/themes/custom/app/collection-page/edit-item-template-page/edit-item-template-page.component.scss
 create mode 100644 src/themes/custom/app/collection-page/edit-item-template-page/edit-item-template-page.component.ts

diff --git a/src/themes/custom/app/collection-page/edit-item-template-page/edit-item-template-page.component.html b/src/themes/custom/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/collection-page/edit-item-template-page/edit-item-template-page.component.scss b/src/themes/custom/app/collection-page/edit-item-template-page/edit-item-template-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/collection-page/edit-item-template-page/edit-item-template-page.component.ts b/src/themes/custom/app/collection-page/edit-item-template-page/edit-item-template-page.component.ts
new file mode 100644
index 0000000000..ad9f515dcf
--- /dev/null
+++ b/src/themes/custom/app/collection-page/edit-item-template-page/edit-item-template-page.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import {
+  EditItemTemplatePageComponent as BaseComponent
+} from '../../../../../app/collection-page/edit-item-template-page/edit-item-template-page.component';
+
+@Component({
+  selector: 'ds-edit-item-template-page',
+  styleUrls: ['./edit-item-template-page.component.scss'],
+  // templateUrl: './edit-item-template-page.component.html',
+  templateUrl: '../../../../../app/collection-page/edit-item-template-page/edit-item-template-page.component.html',
+})
+/**
+ * Component for editing the item template of a collection
+ */
+export class EditItemTemplatePageComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index ce259b5841..af3dee50c0 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -85,6 +85,9 @@ import { ResourcePoliciesModule } from '../../app/shared/resource-policies/resou
 import { ComcolModule } from '../../app/shared/comcol/comcol.module';
 import { FeedbackComponent } from './app/info/feedback/feedback.component';
 import { ItemMetadataComponent } from './app/item-page/edit-item-page/item-metadata/item-metadata.component';
+import {
+  EditItemTemplatePageComponent
+} from './app/collection-page/edit-item-template-page/edit-item-template-page.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -129,6 +132,7 @@ const DECLARATIONS = [
   BreadcrumbsComponent,
   FeedbackComponent,
   ItemMetadataComponent,
+  EditItemTemplatePageComponent,
 ];
 
 @NgModule({

From db375b8f4702acc19c14480d3f27a26ae023957c Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Thu, 12 May 2022 12:05:17 +0200
Subject: [PATCH 20/33] 91131: Added parent constructor to
 ThemedLoadingComponent

---
 src/app/shared/loading/themed-loading.component.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/loading/themed-loading.component.ts b/src/app/shared/loading/themed-loading.component.ts
index 2b6aa6212c..0f887a025f 100644
--- a/src/app/shared/loading/themed-loading.component.ts
+++ b/src/app/shared/loading/themed-loading.component.ts
@@ -1,6 +1,7 @@
-import { Component, Input } from '@angular/core';
-import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { Component, Input, ComponentFactoryResolver, ChangeDetectorRef } from '@angular/core';
+import { ThemedComponent } from '../theme-support/themed.component';
 import { LoadingComponent } from './loading.component';
+import { ThemeService } from '../theme-support/theme.service';
 
 /**
  * Themed wrapper for LoadingComponent
@@ -17,6 +18,14 @@ export class ThemedLoadingComponent extends ThemedComponent<LoadingComponent> {
 
   protected inAndOutputNames: (keyof LoadingComponent & keyof this)[] = ['message', 'showMessage'];
 
+  constructor(
+    protected resolver: ComponentFactoryResolver,
+    protected cdr: ChangeDetectorRef,
+    protected themeService: ThemeService
+  ) {
+    super(resolver, cdr, themeService);
+  }
+
   protected getComponentName(): string {
     return 'LoadingComponent';
   }

From 5682c81217c5da5090ad6cbb4cb561cbca5cd84c Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 13 May 2022 13:45:49 +0200
Subject: [PATCH 21/33] 91272: Fixed import statements and position of
 expandable navbar button

---
 .../themed-expandable-navbar-section.component.ts             | 4 ++--
 src/app/navbar/navbar.component.html                          | 4 ++--
 .../expandable-navbar-section.component.ts                    | 4 ++--
 src/themes/dspace/app/navbar/navbar.component.html            | 4 ++--
 src/themes/dspace/styles/_global-styles.scss                  | 3 +--
 5 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/app/navbar/expandable-navbar-section/themed-expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/themed-expandable-navbar-section.component.ts
index 744eeb5a02..e33dca4104 100644
--- a/src/app/navbar/expandable-navbar-section/themed-expandable-navbar-section.component.ts
+++ b/src/app/navbar/expandable-navbar-section/themed-expandable-navbar-section.component.ts
@@ -2,13 +2,13 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { ExpandableNavbarSectionComponent } from './expandable-navbar-section.component';
 import { rendersSectionForMenu } from '../../shared/menu/menu-section.decorator';
-import { MenuID } from '../../shared/menu/initial-menus-state';
+import { MenuID } from '../../shared/menu/menu-id.model';
 
 /**
  * Themed wrapper for ExpandableNavbarSectionComponent
  */
 @Component({
-  /* tslint:disable:component-selector */
+  /* eslint-disable @angular-eslint/component-selector */
   selector: 'li[ds-themed-expandable-navbar-section]',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 63f308fb32..b41f2ea706 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -4,7 +4,7 @@
     <div class="container">
         <div class="reset-padding-md w-100">
             <div id="collapsingNav">
-                <ul class="navbar-nav mr-auto shadow-none">
+                <ul class="navbar-nav navbar-navigation mr-auto shadow-none">
                     <ng-container *ngFor="let section of (sections | async)">
                         <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
                     </ng-container>
@@ -12,4 +12,4 @@
             </div>
         </div>
     </div>
-</nav>
\ No newline at end of file
+</nav>
diff --git a/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
index 283b9ca6f6..f7efd1fdca 100644
--- a/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
+++ b/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -4,13 +4,13 @@ import {
 } from '../../../../../app/navbar/expandable-navbar-section/expandable-navbar-section.component';
 import { slide } from '../../../../../app/shared/animations/slide';
 import { rendersSectionForMenu } from '../../../../../app/shared/menu/menu-section.decorator';
-import { MenuID } from '../../../../../app/shared/menu/initial-menus-state';
+import { MenuID } from '../../../../../app/shared/menu/menu-id.model';
 
 /**
  * Represents an expandable section in the navbar
  */
 @Component({
-  /* tslint:disable:component-selector */
+  /* eslint-disable @angular-eslint/component-selector */
   selector: 'li[ds-expandable-navbar-section]',
   // templateUrl: './expandable-navbar-section.component.html',
   templateUrl: '../../../../../app/navbar/expandable-navbar-section/expandable-navbar-section.component.html',
diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
index 218fc368ba..6b71728494 100644
--- a/src/themes/dspace/app/navbar/navbar.component.html
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -6,7 +6,7 @@
     </a>
 
     <div id="collapsingNav" class="w-100 h-100">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
+      <ul class="navbar-nav navbar-navigation me-auto mb-2 mb-lg-0 h-100">
         <ng-container *ngFor="let section of (sections | async)">
           <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
         </ng-container>
@@ -17,4 +17,4 @@
     <ds-themed-auth-nav-menu class="navbar-collapsed"></ds-themed-auth-nav-menu>
     <ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
   </div>
-</nav>
\ No newline at end of file
+</nav>
diff --git a/src/themes/dspace/styles/_global-styles.scss b/src/themes/dspace/styles/_global-styles.scss
index 8682e3dcdf..3271f15bf2 100644
--- a/src/themes/dspace/styles/_global-styles.scss
+++ b/src/themes/dspace/styles/_global-styles.scss
@@ -23,8 +23,7 @@
 }
 
 header {
-  li > .navbar-section,
-  li > .expandable-navbar-section {
+  .navbar-navigation > li {
     display: flex;
     flex-direction: column;
     justify-content: center;

From e197e496b51aad5d05e4e6684a84cf435a1e15d4 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 13 May 2022 17:19:42 +0200
Subject: [PATCH 22/33] 91272: Fixed accessibility violation

---
 .../admin-sidebar-section/admin-sidebar-section.component.ts   | 2 ++
 .../expandable-admin-sidebar-section.component.ts              | 2 ++
 .../expandable-navbar-section.component.ts                     | 3 +--
 src/app/navbar/navbar-section/navbar-section.component.ts      | 2 ++
 .../expandable-navbar-section.component.ts                     | 3 +--
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
index 47f693cb99..422431d2c5 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
@@ -14,6 +14,8 @@ import { Router } from '@angular/router';
 @Component({
   /* eslint-disable @angular-eslint/component-selector */
   selector: 'li[ds-admin-sidebar-section]',
+  // To theme this element remove the surrounding li[] in this component but leave it in the new
+  // ThemedAdminSidebarSectionComponent
   templateUrl: './admin-sidebar-section.component.html',
   styleUrls: ['./admin-sidebar-section.component.scss'],
 
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
index 7cd20b15d2..28cadcac5f 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
@@ -17,6 +17,8 @@ import { Router } from '@angular/router';
 @Component({
   /* eslint-disable @angular-eslint/component-selector */
   selector: 'li[ds-expandable-admin-sidebar-section]',
+  // To theme this element remove the surrounding li[] in this component but leave it in the new
+  // ThemedExpandableAdminSidebarSectionComponent
   templateUrl: './expandable-admin-sidebar-section.component.html',
   styleUrls: ['./expandable-admin-sidebar-section.component.scss'],
   animations: [rotate, slide, bgColor]
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
index a6d3a52cd2..5bc69bcbb4 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -11,8 +11,7 @@ import { MenuID } from '../../shared/menu/menu-id.model';
  * Represents an expandable section in the navbar
  */
 @Component({
-  /* eslint-disable @angular-eslint/component-selector */
-  selector: 'li[ds-expandable-navbar-section]',
+  selector: 'ds-expandable-navbar-section',
   templateUrl: './expandable-navbar-section.component.html',
   styleUrls: ['./expandable-navbar-section.component.scss'],
   animations: [slide]
diff --git a/src/app/navbar/navbar-section/navbar-section.component.ts b/src/app/navbar/navbar-section/navbar-section.component.ts
index 9f75a96f6e..20d5299584 100644
--- a/src/app/navbar/navbar-section/navbar-section.component.ts
+++ b/src/app/navbar/navbar-section/navbar-section.component.ts
@@ -10,6 +10,8 @@ import { MenuID } from '../../shared/menu/menu-id.model';
 @Component({
   /* eslint-disable @angular-eslint/component-selector */
   selector: 'li[ds-navbar-section]',
+  // To theme this element remove the surrounding li[] in this component but leave it in the new
+  // ThemedNavbarSectionComponent
   templateUrl: './navbar-section.component.html',
   styleUrls: ['./navbar-section.component.scss']
 })
diff --git a/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
index f7efd1fdca..3e11271bf0 100644
--- a/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
+++ b/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -10,8 +10,7 @@ import { MenuID } from '../../../../../app/shared/menu/menu-id.model';
  * Represents an expandable section in the navbar
  */
 @Component({
-  /* eslint-disable @angular-eslint/component-selector */
-  selector: 'li[ds-expandable-navbar-section]',
+  selector: 'ds-expandable-navbar-section',
   // templateUrl: './expandable-navbar-section.component.html',
   templateUrl: '../../../../../app/navbar/expandable-navbar-section/expandable-navbar-section.component.html',
   // styleUrls: ['./expandable-navbar-section.component.scss'],

From 460efa42c732dc80979e8733793c439282141c1e Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 13 May 2022 19:33:40 +0200
Subject: [PATCH 23/33] 91272: Fix merge request

---
 src/app/admin/admin-sidebar/admin-sidebar.component.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
index 5febf93deb..d4071b91ed 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
@@ -41,7 +41,6 @@ import { FeatureID } from '../../core/data/feature-authorization/feature-id';
 import { MenuID } from '../../shared/menu/menu-id.model';
 import { MenuItemType } from '../../shared/menu/menu-item-type.model';
 import { ActivatedRoute } from '@angular/router';
-import { Router, ActivatedRoute } from '@angular/router';
 import { ThemeService } from '../../shared/theme-support/theme.service';
 
 /**

From 743513cf848a7db3c5ec1fc97817a07fd6cdc134 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 13 May 2022 20:35:08 +0200
Subject: [PATCH 24/33] 89676: Added empty SearchResultsComponent files

---
 .../shared/search/search-results/search-results.component.html   | 0
 .../shared/search/search-results/search-results.component.scss   | 0
 .../app/shared/search/search-results/search-results.component.ts | 1 +
 3 files changed, 1 insertion(+)
 create mode 100644 src/themes/custom/app/shared/search/search-results/search-results.component.html
 create mode 100644 src/themes/custom/app/shared/search/search-results/search-results.component.scss

diff --git a/src/themes/custom/app/shared/search/search-results/search-results.component.html b/src/themes/custom/app/shared/search/search-results/search-results.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/shared/search/search-results/search-results.component.scss b/src/themes/custom/app/shared/search/search-results/search-results.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/shared/search/search-results/search-results.component.ts b/src/themes/custom/app/shared/search/search-results/search-results.component.ts
index bdfeea15a5..5084d4d405 100644
--- a/src/themes/custom/app/shared/search/search-results/search-results.component.ts
+++ b/src/themes/custom/app/shared/search/search-results/search-results.component.ts
@@ -6,6 +6,7 @@ import { fadeIn, fadeInOut } from '../../../../../../app/shared/animations/fade'
   selector: 'ds-search-results',
   // templateUrl: './search-results.component.html',
   templateUrl: '../../../../../../app/shared/search/search-results/search-results.component.html',
+  // styleUrls: ['./search-results.component.scss'],
   animations: [
     fadeIn,
     fadeInOut

From 3a483c393ddeeb94c90113bbd36320bf8abb3800 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 27 May 2022 16:32:23 +0200
Subject: [PATCH 25/33] 89721: Themed UntypedItemComponent

---
 .../untyped-item/untyped-item.component.html  |  0
 .../untyped-item/untyped-item.component.scss  |  0
 .../untyped-item/untyped-item.component.ts    | 25 +++++++++++++++++++
 src/themes/custom/entry-components.ts         |  4 ++-
 src/themes/custom/theme.module.ts             | 22 ++++++++++++----
 5 files changed, 45 insertions(+), 6 deletions(-)
 create mode 100644 src/themes/custom/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
 create mode 100644 src/themes/custom/app/item-page/simple/item-types/untyped-item/untyped-item.component.scss
 create mode 100644 src/themes/custom/app/item-page/simple/item-types/untyped-item/untyped-item.component.ts

diff --git a/src/themes/custom/app/item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/themes/custom/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/item-page/simple/item-types/untyped-item/untyped-item.component.scss b/src/themes/custom/app/item-page/simple/item-types/untyped-item/untyped-item.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/item-page/simple/item-types/untyped-item/untyped-item.component.ts b/src/themes/custom/app/item-page/simple/item-types/untyped-item/untyped-item.component.ts
new file mode 100644
index 0000000000..1d1676e92f
--- /dev/null
+++ b/src/themes/custom/app/item-page/simple/item-types/untyped-item/untyped-item.component.ts
@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Item } from '../../../../../../../app/core/shared/item.model';
+import { ViewMode } from '../../../../../../../app/core/shared/view-mode.model';
+import {
+  listableObjectComponent
+} from '../../../../../../../app/shared/object-collection/shared/listable-object/listable-object.decorator';
+import { Context } from '../../../../../../../app/core/shared/context.model';
+import {
+  UntypedItemComponent as BaseComponent
+} from '../../../../../../../app/item-page/simple/item-types/untyped-item/untyped-item.component';
+
+/**
+ * Component that represents an untyped Item page
+ */
+@listableObjectComponent(Item, ViewMode.StandalonePage, Context.Any, 'custom')
+@Component({
+  selector: 'ds-untyped-item',
+  // styleUrls: ['./untyped-item.component.scss'],
+  styleUrls: ['../../../../../../../app/item-page/simple/item-types/untyped-item/untyped-item.component.scss'],
+  // templateUrl: './untyped-item.component.html',
+  templateUrl: '../../../../../../../app/item-page/simple/item-types/untyped-item/untyped-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UntypedItemComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/entry-components.ts b/src/themes/custom/entry-components.ts
index b518e4cc45..9a9c0624a4 100644
--- a/src/themes/custom/entry-components.ts
+++ b/src/themes/custom/entry-components.ts
@@ -1,5 +1,7 @@
 import { PublicationComponent } from './app/item-page/simple/item-types/publication/publication.component';
+import { UntypedItemComponent } from './app/item-page/simple/item-types/untyped-item/untyped-item.component';
 
 export const ENTRY_COMPONENTS = [
-  PublicationComponent
+  PublicationComponent,
+  UntypedItemComponent,
 ];
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index e2e97b9087..c5d5e5a1c4 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -34,6 +34,7 @@ import { HomePageModule } from '../../app/home-page/home-page.module';
 import { RootComponent } from './app/root/root.component';
 import { AppModule } from '../../app/app.module';
 import { PublicationComponent } from './app/item-page/simple/item-types/publication/publication.component';
+import { UntypedItemComponent } from './app/item-page/simple/item-types/untyped-item/untyped-item.component';
 import { ItemPageModule } from '../../app/item-page/item-page.module';
 import { RouterModule } from '@angular/router';
 import { AccessControlModule } from '../../app/access-control/access-control.module';
@@ -47,8 +48,12 @@ 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 {
+  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';
@@ -67,11 +72,17 @@ import { ForgotPasswordFormComponent } from './app/forgot-password/forgot-passwo
 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 {
+  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 {
+  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';
 import { NavbarComponent } from './app/navbar/navbar.component';
@@ -91,6 +102,7 @@ const DECLARATIONS = [
   HomeNewsComponent,
   RootComponent,
   PublicationComponent,
+  UntypedItemComponent,
   BrowseBySwitcherComponent,
   CommunityListPageComponent,
   SearchPageComponent,

From 533e4c982f43f2859951479c1302b3343226941d Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Thu, 2 Jun 2022 10:22:46 +0200
Subject: [PATCH 26/33] 91272: Small fixes

---
 .../listable-object-component-loader.component.ts               | 2 ++
 .../app/info/end-user-agreement/end-user-agreement.component.ts | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts b/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts
index 8adbcbeec3..9c7ad5f659 100644
--- a/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts
+++ b/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts
@@ -128,6 +128,8 @@ export class ListableObjectComponentLoaderComponent implements OnInit, OnChanges
       'context',
       'viewMode',
       'value',
+      'hideBadges',
+      'contentChange',
     ];
 
   constructor(
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 e3e5ac8d19..50e196bfaf 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
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { EndUserAgreementComponent as BaseComponent } from '../../../../../app/info/end-user-agreement/end-user-agreement.component';
 
 @Component({
-  selector: 'ds-home-news',
+  selector: 'ds-end-user-agreement',
   // styleUrls: ['./end-user-agreement.component.scss'],
   styleUrls: ['../../../../../app/info/end-user-agreement/end-user-agreement.component.scss'],
   // templateUrl: './end-user-agreement.component.html'

From 2441db16e93a500f8ed4849537be918d86696086 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 27 May 2022 18:53:56 +0200
Subject: [PATCH 27/33] 89721: Themed JournalIssueComponent

---
 .../journal-issue.component.html              |  0
 .../journal-issue.component.scss              |  0
 .../journal-issue/journal-issue.component.ts  | 23 +++++++++++++++++++
 src/themes/custom/entry-components.ts         |  4 ++++
 src/themes/custom/theme.module.ts             |  6 ++++-
 5 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
 create mode 100644 src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.scss
 create mode 100644 src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.ts

diff --git a/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html b/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.scss b/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.ts b/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.ts
new file mode 100644
index 0000000000..a9f23c25f6
--- /dev/null
+++ b/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { ViewMode } from '../../../../../../../app/core/shared/view-mode.model';
+import {
+  listableObjectComponent
+} from '../../../../../../../app/shared/object-collection/shared/listable-object/listable-object.decorator';
+import {
+  JournalIssueComponent as BaseComponent
+} from '../../../../../../../app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component';
+import { Context } from '../../../../../../../app/core/shared/context.model';
+
+@listableObjectComponent('JournalIssue', ViewMode.StandalonePage, Context.Any, 'custom')
+@Component({
+  selector: 'ds-journal-issue',
+  // styleUrls: ['./journal-issue.component.scss'],
+  styleUrls: ['../../../../../../../app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.scss'],
+  // templateUrl: './journal-issue.component.html',
+  templateUrl: '../../../../../../../app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html',
+})
+/**
+ * The component for displaying metadata and relations of an item of the type Journal Issue
+ */
+export class JournalIssueComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/entry-components.ts b/src/themes/custom/entry-components.ts
index 9a9c0624a4..b5c4469718 100644
--- a/src/themes/custom/entry-components.ts
+++ b/src/themes/custom/entry-components.ts
@@ -1,7 +1,11 @@
+import {
+  JournalIssueComponent
+} from './app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component';
 import { PublicationComponent } from './app/item-page/simple/item-types/publication/publication.component';
 import { UntypedItemComponent } from './app/item-page/simple/item-types/untyped-item/untyped-item.component';
 
 export const ENTRY_COMPONENTS = [
+  JournalIssueComponent,
   PublicationComponent,
   UntypedItemComponent,
 ];
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index c5d5e5a1c4..5fb1ce580b 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -95,6 +95,9 @@ import { SearchModule } from '../../app/shared/search/search.module';
 import { ResourcePoliciesModule } from '../../app/shared/resource-policies/resource-policies.module';
 import { ComcolModule } from '../../app/shared/comcol/comcol.module';
 import { FeedbackComponent } from './app/info/feedback/feedback.component';
+import {
+  JournalIssueComponent
+} from './app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -138,7 +141,8 @@ const DECLARATIONS = [
   NavbarComponent,
   HeaderNavbarWrapperComponent,
   BreadcrumbsComponent,
-  FeedbackComponent
+  FeedbackComponent,
+  JournalIssueComponent,
 ];
 
 @NgModule({

From 2264067240e3d7302878e59fae02e27fc65d096e Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 27 May 2022 19:12:03 +0200
Subject: [PATCH 28/33] 89721: Themed JournalVolumeComponent

---
 .../journal-volume.component.html             |  0
 .../journal-volume.component.scss             |  0
 .../journal-volume.component.ts               | 23 +++++++++++++++++++
 src/themes/custom/entry-components.ts         |  4 ++++
 src/themes/custom/theme.module.ts             |  4 ++++
 5 files changed, 31 insertions(+)
 create mode 100644 src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
 create mode 100644 src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.scss
 create mode 100644 src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.ts

diff --git a/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html b/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.scss b/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.ts b/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.ts
new file mode 100644
index 0000000000..1a190dc2e8
--- /dev/null
+++ b/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { ViewMode } from '../../../../../../../app/core/shared/view-mode.model';
+import {
+  listableObjectComponent
+} from '../../../../../../../app/shared/object-collection/shared/listable-object/listable-object.decorator';
+import {
+  JournalVolumeComponent as BaseComponent
+} from '../../../../../../../app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component';
+import { Context } from '../../../../../../../app/core/shared/context.model';
+
+@listableObjectComponent('JournalVolume', ViewMode.StandalonePage, Context.Any, 'custom')
+@Component({
+  selector: 'ds-journal-volume',
+  // styleUrls: ['./journal-volume.component.scss'],
+  styleUrls: ['../../../../../../../app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.scss'],
+  // templateUrl: './journal-volume.component.html',
+  templateUrl: '../../../../../../../app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html',
+})
+/**
+ * The component for displaying metadata and relations of an item of the type Journal Volume
+ */
+export class JournalVolumeComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/entry-components.ts b/src/themes/custom/entry-components.ts
index b5c4469718..8f24a3b7e6 100644
--- a/src/themes/custom/entry-components.ts
+++ b/src/themes/custom/entry-components.ts
@@ -1,11 +1,15 @@
 import {
   JournalIssueComponent
 } from './app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component';
+import {
+  JournalVolumeComponent
+} from './app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component';
 import { PublicationComponent } from './app/item-page/simple/item-types/publication/publication.component';
 import { UntypedItemComponent } from './app/item-page/simple/item-types/untyped-item/untyped-item.component';
 
 export const ENTRY_COMPONENTS = [
   JournalIssueComponent,
+  JournalVolumeComponent,
   PublicationComponent,
   UntypedItemComponent,
 ];
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index 5fb1ce580b..3193b200af 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -98,6 +98,9 @@ import { FeedbackComponent } from './app/info/feedback/feedback.component';
 import {
   JournalIssueComponent
 } from './app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component';
+import {
+  JournalVolumeComponent
+} from './app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -143,6 +146,7 @@ const DECLARATIONS = [
   BreadcrumbsComponent,
   FeedbackComponent,
   JournalIssueComponent,
+  JournalVolumeComponent,
 ];
 
 @NgModule({

From bca332a23aed34b5e96ea6cfae8cfccd92173fc3 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Mon, 30 May 2022 10:12:04 +0200
Subject: [PATCH 29/33] 89721: Themed JournalComponent

---
 .../item-pages/journal/journal.component.html |  0
 .../item-pages/journal/journal.component.scss |  0
 .../item-pages/journal/journal.component.ts   | 23 +++++++++++++++++++
 src/themes/custom/entry-components.ts         |  2 ++
 src/themes/custom/theme.module.ts             |  6 ++++-
 5 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/themes/custom/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
 create mode 100644 src/themes/custom/app/entity-groups/journal-entities/item-pages/journal/journal.component.scss
 create mode 100644 src/themes/custom/app/entity-groups/journal-entities/item-pages/journal/journal.component.ts

diff --git a/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal/journal.component.html b/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal/journal.component.scss b/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal/journal.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal/journal.component.ts b/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal/journal.component.ts
new file mode 100644
index 0000000000..7b64c1a35d
--- /dev/null
+++ b/src/themes/custom/app/entity-groups/journal-entities/item-pages/journal/journal.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { ViewMode } from '../../../../../../../app/core/shared/view-mode.model';
+import {
+  listableObjectComponent
+} from '../../../../../../../app/shared/object-collection/shared/listable-object/listable-object.decorator';
+import {
+  JournalComponent as BaseComponent
+} from '../../../../../../../app/entity-groups/journal-entities/item-pages/journal/journal.component';
+import { Context } from '../../../../../../../app/core/shared/context.model';
+
+@listableObjectComponent('Journal', ViewMode.StandalonePage, Context.Any, 'custom')
+@Component({
+  selector: 'ds-journal',
+  // styleUrls: ['./journal.component.scss'],
+  styleUrls: ['../../../../../../../app/entity-groups/journal-entities/item-pages/journal/journal.component.scss'],
+  // templateUrl: './journal.component.html',
+  templateUrl: '../../../../../../../app/entity-groups/journal-entities/item-pages/journal/journal.component.html',
+})
+/**
+ * The component for displaying metadata and relations of an item of the type Journal
+ */
+export class JournalComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/entry-components.ts b/src/themes/custom/entry-components.ts
index 8f24a3b7e6..ca4c40f523 100644
--- a/src/themes/custom/entry-components.ts
+++ b/src/themes/custom/entry-components.ts
@@ -1,3 +1,4 @@
+import { JournalComponent } from './app/entity-groups/journal-entities/item-pages/journal/journal.component';
 import {
   JournalIssueComponent
 } from './app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component';
@@ -8,6 +9,7 @@ import { PublicationComponent } from './app/item-page/simple/item-types/publicat
 import { UntypedItemComponent } from './app/item-page/simple/item-types/untyped-item/untyped-item.component';
 
 export const ENTRY_COMPONENTS = [
+  JournalComponent,
   JournalIssueComponent,
   JournalVolumeComponent,
   PublicationComponent,
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index 3193b200af..b42dfa80ac 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -95,12 +95,14 @@ import { SearchModule } from '../../app/shared/search/search.module';
 import { ResourcePoliciesModule } from '../../app/shared/resource-policies/resource-policies.module';
 import { ComcolModule } from '../../app/shared/comcol/comcol.module';
 import { FeedbackComponent } from './app/info/feedback/feedback.component';
+import { JournalComponent } from './app/entity-groups/journal-entities/item-pages/journal/journal.component';
 import {
   JournalIssueComponent
 } from './app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component';
 import {
   JournalVolumeComponent
 } from './app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component';
+import { ItemSharedModule } from '../../app/item-page/item-shared.module';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -145,6 +147,7 @@ const DECLARATIONS = [
   HeaderNavbarWrapperComponent,
   BreadcrumbsComponent,
   FeedbackComponent,
+  JournalComponent,
   JournalIssueComponent,
   JournalVolumeComponent,
 ];
@@ -196,7 +199,8 @@ const DECLARATIONS = [
     SearchModule,
     FormsModule,
     ResourcePoliciesModule,
-    ComcolModule
+    ComcolModule,
+    ItemSharedModule,
   ],
   declarations: DECLARATIONS
 })

From dc5d46993e33f31d5c35b52777fc544c1d372d84 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 27 May 2022 11:14:28 +0200
Subject: [PATCH 30/33] 89721: Themed AdminSidebarComponent

---
 .../admin-sidebar/admin-sidebar.component.html    |  0
 .../admin-sidebar/admin-sidebar.component.scss    |  0
 .../admin-sidebar/admin-sidebar.component.ts      | 15 +++++++++++++++
 src/themes/custom/theme.module.ts                 |  2 ++
 4 files changed, 17 insertions(+)
 create mode 100644 src/themes/custom/app/admin/admin-sidebar/admin-sidebar.component.html
 create mode 100644 src/themes/custom/app/admin/admin-sidebar/admin-sidebar.component.scss
 create mode 100644 src/themes/custom/app/admin/admin-sidebar/admin-sidebar.component.ts

diff --git a/src/themes/custom/app/admin/admin-sidebar/admin-sidebar.component.html b/src/themes/custom/app/admin/admin-sidebar/admin-sidebar.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/admin/admin-sidebar/admin-sidebar.component.scss b/src/themes/custom/app/admin/admin-sidebar/admin-sidebar.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/themes/custom/app/admin/admin-sidebar/admin-sidebar.component.ts
new file mode 100644
index 0000000000..6485ad98e6
--- /dev/null
+++ b/src/themes/custom/app/admin/admin-sidebar/admin-sidebar.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { AdminSidebarComponent as BaseComponent } from '../../../../../app/admin/admin-sidebar/admin-sidebar.component';
+
+/**
+ * Component representing the admin sidebar
+ */
+@Component({
+  selector: 'ds-admin-sidebar',
+  // templateUrl: './admin-sidebar.component.html',
+  templateUrl: '../../../../../app/admin/admin-sidebar/admin-sidebar.component.html',
+  // styleUrls: ['./admin-sidebar.component.scss']
+  styleUrls: ['../../../../../app/admin/admin-sidebar/admin-sidebar.component.scss']
+})
+export class AdminSidebarComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index b42dfa80ac..95203336dd 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -103,6 +103,7 @@ import {
   JournalVolumeComponent
 } from './app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component';
 import { ItemSharedModule } from '../../app/item-page/item-shared.module';
+import { AdminSidebarComponent } from './app/admin/admin-sidebar/admin-sidebar.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -150,6 +151,7 @@ const DECLARATIONS = [
   JournalComponent,
   JournalIssueComponent,
   JournalVolumeComponent,
+  AdminSidebarComponent,
 ];
 
 @NgModule({

From fc1e6b6b852da9fc635144caf84da08ddaaa5f8e Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 3 Jun 2022 11:47:46 +0200
Subject: [PATCH 31/33] Removed comments for how to theme li[Component]

---
 .../admin-sidebar-section/admin-sidebar-section.component.ts    | 2 --
 .../expandable-admin-sidebar-section.component.ts               | 2 --
 src/app/navbar/navbar-section/navbar-section.component.ts       | 2 --
 3 files changed, 6 deletions(-)

diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
index 422431d2c5..47f693cb99 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
@@ -14,8 +14,6 @@ import { Router } from '@angular/router';
 @Component({
   /* eslint-disable @angular-eslint/component-selector */
   selector: 'li[ds-admin-sidebar-section]',
-  // To theme this element remove the surrounding li[] in this component but leave it in the new
-  // ThemedAdminSidebarSectionComponent
   templateUrl: './admin-sidebar-section.component.html',
   styleUrls: ['./admin-sidebar-section.component.scss'],
 
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
index 28cadcac5f..7cd20b15d2 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
@@ -17,8 +17,6 @@ import { Router } from '@angular/router';
 @Component({
   /* eslint-disable @angular-eslint/component-selector */
   selector: 'li[ds-expandable-admin-sidebar-section]',
-  // To theme this element remove the surrounding li[] in this component but leave it in the new
-  // ThemedExpandableAdminSidebarSectionComponent
   templateUrl: './expandable-admin-sidebar-section.component.html',
   styleUrls: ['./expandable-admin-sidebar-section.component.scss'],
   animations: [rotate, slide, bgColor]
diff --git a/src/app/navbar/navbar-section/navbar-section.component.ts b/src/app/navbar/navbar-section/navbar-section.component.ts
index 20d5299584..9f75a96f6e 100644
--- a/src/app/navbar/navbar-section/navbar-section.component.ts
+++ b/src/app/navbar/navbar-section/navbar-section.component.ts
@@ -10,8 +10,6 @@ import { MenuID } from '../../shared/menu/menu-id.model';
 @Component({
   /* eslint-disable @angular-eslint/component-selector */
   selector: 'li[ds-navbar-section]',
-  // To theme this element remove the surrounding li[] in this component but leave it in the new
-  // ThemedNavbarSectionComponent
   templateUrl: './navbar-section.component.html',
   styleUrls: ['./navbar-section.component.scss']
 })

From e9372395f4e84946653fcc56ea3489120c4a10f5 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Fri, 15 Jul 2022 11:41:38 +0200
Subject: [PATCH 32/33] make collections on item page into an input

---
 .../field-components/collections/collections.component.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/item-page/field-components/collections/collections.component.ts b/src/app/item-page/field-components/collections/collections.component.ts
index 23aff80160..34b1385f46 100644
--- a/src/app/item-page/field-components/collections/collections.component.ts
+++ b/src/app/item-page/field-components/collections/collections.component.ts
@@ -30,7 +30,7 @@ export class CollectionsComponent implements OnInit {
 
   label = 'item.page.collections';
 
-  separator = '<br/>';
+  @Input() separator = '<br/>';
 
   /**
    * Amount of mapped collections that should be fetched at once.

From c7a88f99d62674595eaec14ae21bb3c00afc9eaa Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre.vryghem@student.ucll.be>
Date: Tue, 26 Jul 2022 00:34:19 +0200
Subject: [PATCH 33/33] Center expandable navbar section in header

---
 src/themes/dspace/app/navbar/navbar.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
index 6b71728494..512ef45265 100644
--- a/src/themes/dspace/app/navbar/navbar.component.html
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -6,7 +6,7 @@
     </a>
 
     <div id="collapsingNav" class="w-100 h-100">
-      <ul class="navbar-nav navbar-navigation me-auto mb-2 mb-lg-0 h-100">
+      <ul class="navbar-nav navbar-navigation me-auto mb-2 mb-lg-0 h-100 d-flex align-items-center">
         <ng-container *ngFor="let section of (sections | async)">
           <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
         </ng-container>