added custom theming

src/app/+home-page/themes/home-page.component.preview-release.scss

@@ -1,3 +1,3 @@
 :host-context(.preview-release) {
-    color: green;
+    //color: green;
 }

src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.ts

@@ -9,7 +9,8 @@ import {
 @Component({
   selector: 'ds-search-boolean-filter',
   styleUrls: ['./search-boolean-filter.component.scss'],
-  templateUrl: './search-boolean-filter.component.html',
+  // templateUrl: './search-boolean-filter.component.html',
+  templateUrl: './themes/search-boolean-filter.component.preview-release.html',
   animations: [facetLoad]
 })
 

src/app/+search-page/search-filters/search-filter/search-boolean-filter/themes/search-boolean-filter.component.preview-release.html

@@ -0,0 +1,34 @@
+<div>
+    <div class="filters py-2">
+        <a *ngFor="let value of (selectedValues | async)" class="d-flex flex-row"
+           [routerLink]="[getSearchLink()]"
+           [queryParams]="getRemoveParams(value) | async" queryParamsHandling="merge">
+            <input type="checkbox" [checked]="true" class="my-1 align-self-stretch"/>
+            <span class="filter-value pl-1">{{value}}</span>
+        </a>
+      <ng-container *ngFor="let page of (filterValues$ | async)?.payload">
+        <div [@facetLoad]="animationState">
+          <ng-container *ngFor="let value of page.page; let i=index">
+                <a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
+                   [routerLink]="[getSearchLink()]"
+                   [queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge">
+                    <input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
+                    <span class="filter-value px-1">{{value.value}}</span>
+                    <span class="float-right filter-value-count ml-auto">
+                        <span class="badge badge-primary badge-pill">{{value.count}}</span>
+                    </span>
+                </a>
+            </ng-container>
+        </div>
+        </ng-container>
+        <div class="clearfix toggle-more-filters">
+            <a class="float-left" *ngIf="!(isLastPage$ | async)"
+               (click)="showMore()">{{"search.filters.filter.show-more"
+                | translate}}</a>
+            <a class="float-right" *ngIf="(currentPage | async) > 1"
+               (click)="showFirstPageOnly()">{{"search.filters.filter.show-less"
+                | translate}}</a>
+        </div>
+    </div>
+
+</div>

src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.ts

@@ -9,7 +9,8 @@ import {
 @Component({
   selector: 'ds-search-hierarchy-filter',
   styleUrls: ['./search-hierarchy-filter.component.scss'],
-  templateUrl: './search-hierarchy-filter.component.html',
+  // templateUrl: './search-hierarchy-filter.component.html',
+  templateUrl: './themes/search-hierarchy-filter.component.preview-release.html',
   animations: [facetLoad]
 })
 

src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/themes/search-hierarchy-filter.component.preview-release.html

@@ -0,0 +1,43 @@
+<div>
+    <div class="filters py-2">
+        <a *ngFor="let value of (selectedValues | async)" class="d-flex flex-row"
+           [routerLink]="[getSearchLink()]"
+           [queryParams]="getRemoveParams(value) | async" queryParamsHandling="merge">
+            <input type="checkbox" [checked]="true" class="my-1 align-self-stretch"/>
+            <span class="filter-value pl-1">{{value}}</span>
+        </a>
+        <ng-container *ngFor="let page of (filterValues$ | async)?.payload">
+          <div [@facetLoad]="animationState">
+            <ng-container *ngFor="let value of page.page; let i=index">
+                <a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
+                   [routerLink]="[getSearchLink()]"
+                   [queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge" >
+                    <input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
+                    <span class="filter-value px-1">{{value.value}}</span>
+                    <span class="float-right filter-value-count ml-auto">
+                        <span class="badge badge-primary badge-pill">{{value.count}}</span>
+                    </span>
+                </a>
+            </ng-container>
+          </div>
+        </ng-container>
+        <div class="clearfix toggle-more-filters">
+            <a class="float-left" *ngIf="!(isLastPage$ | async)"
+               (click)="showMore()">{{"search.filters.filter.show-more"
+                | translate}}</a>
+            <a class="float-right" *ngIf="(currentPage | async) > 1"
+               (click)="showFirstPageOnly()">{{"search.filters.filter.show-less"
+                | translate}}</a>
+        </div>
+    </div>
+    <ds-input-suggestions [suggestions]="(filterSearchResults | async)"
+                          [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"
+                          [action]="getCurrentUrl()"
+                          [name]="filterConfig.paramName"
+                          [(ngModel)]="filter"
+                          (submitSuggestion)="onSubmit($event)"
+                          (clickSuggestion)="onClick($event)"
+                          (findSuggestions)="findSuggestions($event)"
+                          ngDefaultControl
+    ></ds-input-suggestions>
+</div>

src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.ts

@@ -42,7 +42,8 @@ const dateFormats = ['YYYY', 'YYYY-MM', 'YYYY-MM-DD'];
 @Component({
   selector: 'ds-search-range-filter',
   styleUrls: ['./search-range-filter.component.scss'],
-  templateUrl: './search-range-filter.component.html',
+  // templateUrl: './search-range-filter.component.html',
+  templateUrl: './themes/search-range-filter.component.preview-release.html',
   animations: [facetLoad]
 })
 

src/app/+search-page/search-filters/search-filter/search-range-filter/themes/search-range-filter.component.preview-release.html

@@ -0,0 +1,40 @@
+<div>
+    <div class="filters py-2">
+        <form #form="ngForm" (ngSubmit)="onSubmit()" class="add-filter row"
+              [action]="getCurrentUrl()">
+            <div class="col-6">
+                <input type="text" [(ngModel)]="range[0]" [name]="filterConfig.paramName + '.min'"
+                       class="form-control" (blur)="onSubmit()"
+                       aria-label="Mininum value"
+                       [placeholder]="'search.filters.filter.' + filterConfig.name + '.min.placeholder'| translate"/>
+            </div>
+            <div class="col-6">
+                <input type="text" [(ngModel)]="range[1]" [name]="filterConfig.paramName + '.max'"
+                       class="form-control" (blur)="onSubmit()"
+                       aria-label="Maximum value"
+                       [placeholder]="'search.filters.filter.' + filterConfig.name + '.max.placeholder'| translate"/>
+            </div>
+            <input type="submit" class="d-none"/>
+        </form>
+
+        <ng-container *ngIf="shouldShowSlider()">
+            <nouislider [connect]="true" [min]="min" [max]="max" [step]="1"
+                        [(ngModel)]="range" (change)="onSubmit()" ngDefaultControl></nouislider>
+
+        </ng-container>
+      <ng-container *ngFor="let page of (filterValues$ | async)?.payload">
+        <div [@facetLoad]="animationState">
+          <ng-container *ngFor="let value of page.page; let i=index">
+                <a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
+                   [routerLink]="[getSearchLink()]"
+                   [queryParams]="getChangeParams(value.value) | async" queryParamsHandling="merge">
+                    <span class="filter-value px-1">{{value.value}}</span>
+                    <span class="float-right filter-value-count ml-auto">
+                        <span class="badge badge-primary badge-pill">{{value.count}}</span>
+                    </span>
+                </a>
+            </ng-container>
+          </div>
+        </ng-container>
+    </div>
+</div>

src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.ts

@@ -15,7 +15,8 @@ import { renderFacetFor } from '../search-filter-type-decorator';
 @Component({
   selector: 'ds-search-text-filter',
   styleUrls: ['./search-text-filter.component.scss'],
-  templateUrl: './search-text-filter.component.html',
+  // templateUrl: './search-text-filter.component.html',
+  templateUrl: './themes/search-text-filter.component.preview-release.html',
   animations: [facetLoad]
 })
 

src/app/+search-page/search-filters/search-filter/search-text-filter/themes/search-text-filter.component.preview-release.html

@@ -0,0 +1,45 @@
+<div>
+    <div class="filters py-2">
+        <a *ngFor="let value of (selectedValues | async)" class="d-flex flex-row"
+           [routerLink]="[getSearchLink()]"
+           [queryParams]="getRemoveParams(value) | async" queryParamsHandling="merge">
+            <input type="checkbox" [checked]="true" class="my-1 align-self-stretch"/>
+            <span class="filter-value pl-1">{{value}}</span>
+        </a>
+        <ng-container *ngVar="(filterValues$ | async) as filterValuesRD">
+          <div [@facetLoad]="animationState">
+            <ng-container *ngFor="let page of filterValuesRD?.payload">
+              <ng-container *ngFor="let value of page.page; let i=index">
+                <a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
+                   [routerLink]="[getSearchLink()]"
+                   [queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge" >
+                  <input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
+                  <span class="filter-value px-1">{{value.value}}</span>
+                  <span class="float-right filter-value-count ml-auto">
+                          <span class="badge badge-primary badge-pill">{{value.count}}</span>
+                      </span>
+                </a>
+              </ng-container>
+            </ng-container>
+          </div>
+        </ng-container>
+        <div class="clearfix toggle-more-filters">
+            <a class="float-left" *ngIf="!(isLastPage$ | async)"
+               (click)="showMore()">{{"search.filters.filter.show-more"
+                | translate}}</a>
+            <a class="float-right" *ngIf="(currentPage | async) > 1"
+               (click)="showFirstPageOnly()">{{"search.filters.filter.show-less"
+                | translate}}</a>
+        </div>
+    </div>
+    <ds-input-suggestions [suggestions]="(filterSearchResults | async)"
+                          [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"
+                          [action]="getCurrentUrl()"
+                          [name]="filterConfig.paramName"
+                          [(ngModel)]="filter"
+                          (submitSuggestion)="onSubmit($event)"
+                          (clickSuggestion)="onClick($event)"
+                          (findSuggestions)="findSuggestions($event)"
+                          ngDefaultControl
+    ></ds-input-suggestions>
+</div>

src/app/+search-page/search-filters/search-filter/themes/search-filter.component.preview-release.html

@@ -0,0 +1,7 @@
+<div>
+    <div (click)="toggle()" class="filter-name"><h5 class="d-inline-block mb-0">{{'search.filters.filter.' + filter.name + '.head'| translate}}</h5> <span class="filter-toggle fas float-right text-info"
+                                                                      [ngClass]="(isCollapsed() | async) ? 'fa-caret-down' : 'fa-caret-up'"></span></div>
+    <div [@slide]="(isCollapsed() | async) ? 'collapsed' : 'expanded'"  (@slide.start)="startSlide($event)" (@slide.done)="finishSlide($event)" class="search-filter-wrapper" [ngClass]="{'closed' : collapsed}">
+        <ds-search-facet-filter-wrapper [filterConfig]="filter"></ds-search-facet-filter-wrapper>
+    </div>
+</div>

src/app/+search-page/search-filters/search-filter/themes/search-filter.component.preview-release.scss

@@ -0,0 +1,11 @@
+@import '../../../../../styles/variables.scss';
+@import '../../../../../styles/mixins.scss';
+
+:host-context(.preview-release) {
+    background-color: map-get($theme-colors, light);
+    border-radius: $border-radius;
+
+    h5 {
+       font-size: 1.1rem
+    }
+}

src/app/+search-page/search-filters/themes/search-filters.component.preview-release.html

@@ -0,0 +1,7 @@
+<h3>{{"search.filters.head" | translate}}</h3>
+<div *ngIf="(filters | async)?.hasSucceeded">
+    <div *ngFor="let filter of (filters | async)?.payload">
+        <ds-search-filter *ngIf="isActive(filter) | async" class="d-block mb-3 px-3 py-2" [filter]="filter"></ds-search-filter>
+    </div>
+</div>
+<a class="btn btn-primary" [routerLink]="[getSearchLink()]" [queryParams]="clearParams | async" queryParamsHandling="merge" role="button">{{"search.filters.reset" | translate}}</a>

src/app/+search-page/search-settings/themes/search-settings.component.preview-release.html

@@ -0,0 +1,24 @@
+<ng-container *ngVar="(searchOptions$ | async) as config">
+    <h3>{{ 'search.sidebar.settings.title' | translate}}</h3>
+    <div *ngIf="config?.sort" class="setting-option result-order-settings mb-3 px-3 py-2">
+    <h5 class="mb-0">{{ 'search.sidebar.settings.sort-by' | translate}}</h5>
+    <select class="form-control my-2" (change)="reloadOrder($event)">
+        <option *ngFor="let sortOption of searchOptionPossibilities"
+                [value]="sortOption.field + ',' + sortOption.direction.toString()"
+                [selected]="sortOption.field === config?.sort.field && sortOption.direction === (config?.sort.direction)? 'selected': null">
+            {{'sorting.' + sortOption.field + '.' + sortOption.direction | translate}}
+        </option>
+    </select>
+    </div>
+
+    <div class="setting-option page-size-settings mb-3 px-3 py-2">
+        <h5 class="mb-0">{{ 'search.sidebar.settings.rpp' | translate}}</h5>
+        <select class="form-control my-2" (change)="reloadRPP($event)">
+            <option *ngFor="let pageSizeOption of config?.pagination.pageSizeOptions"
+                    [value]="pageSizeOption"
+                    [selected]="pageSizeOption === +config?.pagination.pageSize ? 'selected': null">
+                {{pageSizeOption}}
+            </option>
+        </select>
+    </div>
+</ng-container>

src/app/+search-page/search-settings/themes/search-settings.component.preview-release.scss

@@ -0,0 +1,10 @@
+@import '../../../../styles/variables.scss';
+
+:host-context(.preview-release) .setting-option {
+  background-color: map-get($theme-colors, light);
+  border-radius: $border-radius;
+
+  h5 {
+    font-size: 1.1rem
+  }
+}

src/app/header/header.component.html

@@ -1,7 +1,7 @@
 <header>
     <div class="container">
         <a class="navbar-brand my-2" routerLink="/home">
-            <img src="assets/images/dspace-logo.svg"/>
+            <img src="assets/images/dspace-logo-monochrome.svg"/>
         </a>
 
         <nav class="navbar navbar-light navbar-expand-md float-right px-0">

src/app/header/themes/header.component.preview-release.scss

@@ -0,0 +1,7 @@
+@import '../../../styles/variables.scss';
+
+:host-context(.preview-release) {
+    ::ng-deep a {
+        color: $dark;
+    }
+}

src/app/navbar/themes/navbar.component.preview-release.html

@@ -0,0 +1,16 @@
+<nav [ngClass]="{'open': !(menuCollapsed | async)}"
+     [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
+     class="navbar navbar-dark bg-info navbar-expand-md p-md-0 navbar-container">    <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
+    <div class="container">
+        <div class="reset-padding-md w-100">
+            <div id="collapsingNav">
+                <ul class="navbar-nav mr-auto shadow-none">
+                    <ng-container *ngFor="let section of (sections | async)">
+                        <ng-container
+                                *ngComponentOutlet="sectionComponents.get(section.id); injector: sectionInjectors.get(section.id);"></ng-container>
+                    </ng-container>
+                </ul>
+            </div>
+        </div>
+    </div>
+</nav>

src/app/navbar/themes/navbar.component.preview-release.scss

@@ -0,0 +1,7 @@
+@import '../../styles/variables.scss';
+
+nav.navbar {
+    border-bottom: 5px $dark solid;
+}
+
+

src/app/shared/search-form/themes/search-form.component.preview-release.html

@@ -0,0 +1,16 @@
+<form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="row" action="/search">
+<div *ngIf="isNotEmpty(scopes)" class="col-12 col-sm-3">
+  <select [(ngModel)]="scope" name="scope" class="form-control" aria-label="Search scope" (change)="onScopeChange($event.target.value)">
+    <option value>{{'search.form.search_dspace' | translate}}</option>
+    <option *ngFor="let scopeOption of scopes" [value]="scopeOption.id">{{scopeOption?.name ? scopeOption.name : 'search.form.search_dspace' | translate}}</option>
+  </select>
+</div>
+    <div [ngClass]="{'col-sm-9': isNotEmpty(scopes)}" class="col-12">
+    <div class="form-group input-group">
+        <input type="text" [(ngModel)]="query" name="query" class="form-control" aria-label="Search input">
+        <span class="input-group-append">
+            <button type="submit" class="search-button btn btn-primary">{{ ('search.form.search' | translate) }}</button>
+        </span>
+    </div>
+    </div>
+</form>

src/styles/_variables.scss

@@ -4,4 +4,4 @@
 @import 'bootstrap_variables.scss';
 @import '../../node_modules/bootstrap/scss/variables.scss';
 @import 'themes/custom_variables.mantis.scss';
-@import 'custom_variables.scss';
+@import 'custom_variables.scss';

src/styles/themes/_bootstrap_variables.preview-release.scss

@@ -0,0 +1,14 @@
+$gray-100: #e8ebf3 !default; // #eee
+$gray-800: #444444 !default; // #444
+
+$navbar-dark-color: #FFFFFF;
+
+/* Reassign color vars to semantic color scheme */
+$blue: #43515f !default;
+$green: #92C642 !default;
+$cyan: #56ab9c !default;
+$yellow: #ec9433 !default;
+$red: #CF4444 !default;
+$dark: #43515f !default;
+
+$body-color: $gray-800 !default;