style: ui restyle

src/app/_layout/app-header/_app-header-theme.scss

@@ -7,10 +7,11 @@
 
   .header {
     mat-toolbar {
-      background-color: mat.m2-get-color-from-palette($primary, "darker");
+      background-color: mat.m2-get-color-from-palette($primary, "default-contrast");
+      border-bottom: 2px solid mat.m2-get-color-from-palette($primary, "default");
     }
-    a {
-      color: mat.m2-get-color-from-palette($primary, "default-contrast");
+    a, h3, div {
+      color: mat.m2-get-color-from-palette($primary, "default");
     }
   }
 }

src/app/_layout/app-header/app-header.component.html

@@ -1,5 +1,5 @@
 <div class="header">
-  <mat-menu #userMenu="matMenu">
+  <mat-menu #mainMenu="matMenu">
     <button mat-menu-item routerLink="/datasets/">
       <mat-icon> folder</mat-icon>
       <span>Datasets</span>
@@ -43,7 +43,9 @@
       <mat-icon> center_focus_weak</mat-icon>
       <span>Samples</span>
     </button>
+  </mat-menu>
 
+  <mat-menu #userMenu="matMenu">
     <button mat-menu-item routerLink="/user/" data-cy="setting-button">
       <mat-icon> settings</mat-icon>
       <span>Settings</span>
@@ -56,18 +58,32 @@
   </mat-menu>
 
   <mat-toolbar class="mat-elevation-z1" color="primary">
+    <div class="main-menu" [matMenuTriggerFor]="mainMenu">
+      <mat-icon [inline]="true">menu</mat-icon>
+      <!--
+      <img class="main-menu-image" src="../../../assets/images/hamburger.svg" />
+      -->
+    </div>
     <a [routerLink]="['/datasets']">
-      <img class="logo" src="../../../assets/images/scicat-header-logo.png" />
+      <img class="logo" src="../../../assets/images/{{ siteSciCatLogo }}" />
     </a>
+<!--   
+    <div mat-button class="main-menu" [matMenuTriggerFor]="mainMenu">
+      <img class="logo" src="../../../assets/images/{{ siteSciCatLogo }}" />
+    </div>
+-->
     <a [routerLink]="['/datasets']">
       <img class="logo" src="../../../assets/images/{{ siteHeaderLogo }}" />
     </a>
+    <!--
     <a class="toplink" [routerLink]="['/datasets']">
       <h3>{{ status }}</h3>
     </a>
-
-    <span class="spacer"></span>
-
+    -->
+    <span class="title">
+      <h3>{{ siteTitle }}</h3>
+    </span>
+
     <span>
       <h6>
         <a class="toplink" [routerLink]="['/help']">
@@ -96,10 +112,11 @@ <h6>
       <span *ngIf="config.shoppingCartOnHeader" [matMenuTriggerFor]="cartMenu">
         <button id="cartOnHeaderButton" mat-icon-button>
           <mat-icon
+            color = "primary"
             matBadge="{{ inBatchIndicator$ | async }}"
             matBadgeColor="accent"
             matBadgeSize="medium"
-            >shopping_cart</mat-icon
+            >filter_none</mat-icon
           >
         </button>
       </span>
@@ -111,7 +128,7 @@ <h6>
       <span>
         <button mat-button class="user-button" [matMenuTriggerFor]="userMenu">
           <img class="user-image" src="{{ profileImage$ | async }}" />
-          <div class="large-screen-text">{{ username$ | async }}</div>
+          <div color="primary" class="large-screen-text">{{ username$ | async }}</div>
         </button>
       </span>
     </ng-template>

src/app/_layout/app-header/app-header.component.scss

@@ -7,7 +7,7 @@
   mat-toolbar {
     height: 3.5rem;
 
-    a {
+    a, .main-menu {
       height: 2.5rem;
       padding: 0.5rem;
 
@@ -16,11 +16,19 @@
         margin-right: 0.5rem;
       }
     }
+    .main-menu mat-icon {
+      font-size: 32px;
+      padding-top: 5px;
+    }
 
-    .spacer {
+    .spacer, .title {
       flex: 1 1 auto;
     }
 
+    .title h3 {
+      text-align: center;
+    }
+
     .toplink {
       padding: 0.5rem 1rem;
       font: bold;

src/app/_layout/app-header/app-header.component.ts

@@ -19,12 +19,13 @@
   selector: "app-app-header",
   templateUrl: "./app-header.component.html",
   styleUrls: ["./app-header.component.scss"],
   standalone: false,
 })
 export class AppHeaderComponent implements OnInit {
   config = this.appConfigService.getConfig();
   facility = this.config.facility ?? "";
-  status = this.appConfig.production ? "" : "test";
+  siteTitle = this.config.siteTitle ?? "Vanilla SciCat";  
+  siteSciCatLogo = this.config.siteSciCatLogo == "icon" ? "scicat-header-logo-icon.png" : "scicat-header-logo-full.png";
   siteHeaderLogo = this.config.siteHeaderLogo ?? "site-header-logo.png";
 
   oAuth2Endpoints: OAuth2Endpoint[] = [];

src/app/app-config.service.ts

@@ -56,7 +56,7 @@
   datasetReduceEnabled: boolean;
   datasetDetailsShowMissingProposalId: boolean;
   datafilesActionsEnabled: boolean;
   datafilesActions: any[];
   editDatasetSampleEnabled: boolean;
   editMetadataEnabled: boolean;
   editPublishedData: boolean;
@@ -101,6 +101,8 @@
   shareEnabled: boolean;
   shoppingCartEnabled: boolean;
   shoppingCartOnHeader: boolean;
+  siteTitle: string | null;
+  siteSciCatLogo: string | null;
   siteHeaderLogo: string | null;
   siteLoginBackground: string | null;
   siteLoginLogo: string | null;
@@ -121,7 +123,7 @@
   defaultMainPage?: MainPageConfiguration;
 }
 
 function isMainPageConfiguration(obj: any): obj is MainPageConfiguration {
   const validKeys = Object.keys(MainPageOptions);
   return (
     obj &&
@@ -146,12 +148,12 @@
         .pipe(timeout(2000))
         .toPromise();
       this.appConfig = Object.assign({}, this.appConfig, config);
     } catch (err) {
       console.log("No config available in backend, trying with local config.");
       try {
         const config = await this.http.get("/assets/config.json").toPromise();
         this.appConfig = Object.assign({}, this.appConfig, config);
       } catch (err) {
         console.error("No config provided.");
       }
     }

src/app/datasets/dashboard/full-text-search/full-text-search-bar.component.html

@@ -13,6 +13,16 @@
       />
     </mat-form-field>
     <div class="search-button-group">
+      <button
+        mat-raised-button
+        color="secondary"
+        class="full-text-clear-button"
+        data-cy="search-clear-button"
+        (click)="onClear()"
+      >
+        <mat-icon>undo</mat-icon>
+        Clear
+      </button>
       <button
         mat-raised-button
         color="primary"
@@ -23,16 +33,6 @@
         <mat-icon>search</mat-icon>
         Search
       </button>
-      <button
-        mat-raised-button
-        color="primary"
-        class="full-text-clear-button"
-        data-cy="search-clear-button"
-        (click)="onClear()"
-      >
-        <mat-icon>undo</mat-icon>
-        Reset Search
-      </button>
     </div>
   </div>
 </mat-card>

src/app/datasets/dashboard/full-text-search/full-text-search-bar.component.scss

@@ -1,6 +1,6 @@
 mat-card {
   padding: 0.4em;
-  margin: 1.5em 0.5em 0.5em;
+  margin: 0.5em 0.5em 0.5em;
 
   .search-card-container {
     display: flex;
@@ -20,4 +20,5 @@ mat-card {
   .full-text-clear-button {
     margin:0 2px;
   }
+
 }

src/app/datasets/datasets-filter/datasets-filter.component.html

@@ -41,23 +41,23 @@
 
     <div class="section-container">
       <button
+        [disabled]="(hasAppliedFilters$ | async) === false"
         mat-raised-button
-        color="primary"
-        class="datasets-filters-search-button"
-        (click)="applyFilters()"
+        color="secondary"
+        class="datasets-filters-clear-all-button"
+        (click)="reset()"
       >
-        <mat-icon>search</mat-icon>
-        Apply
+        <mat-icon>undo</mat-icon>
+        Clear
       </button>
       <button
-        [disabled]="(hasAppliedFilters$ | async) === false"
         mat-raised-button
         color="primary"
-        class="datasets-filters-clear-all-button"
-        (click)="reset()"
+        class="datasets-filters-search-button"
+        (click)="applyFilters()"
       >
-        <mat-icon>undo</mat-icon>
-        Reset Filters
+        <mat-icon>search</mat-icon>
+        Apply
       </button>
     </div>
   </mat-card-content>

src/app/shared/modules/breadcrumb/breadcrumb.component.scss

@@ -1,11 +1,11 @@
 .breadcrumb {
-  margin: 1rem 0;
+  margin: 0.1rem 0;
   padding-left: 1rem;
 
   .container {
     border-top: 1px solid;
     border-bottom: 1px solid;
-    padding: 0.3em 0;
+    padding: 0.1em 0;
 
     .active {
       font-weight: bold;

src/app/state-management/selectors/user.selectors.ts

@@ -40,7 +40,7 @@ export const selectThumbnailPhoto = createSelector(selectProfile, (profile) => {
     return profile.thumbnailPhoto;
   }
 
-  return "assets/images/user.png";
+  return "assets/images/user_main_color.png";
 });
 
 export const selectIsAdmin = createSelector(

src/assets/config.json

@@ -11,6 +11,8 @@
   "externalAuthEndpoint": "/auth/msad",
   "facility": "Local",
   "siteIcon": "site-header-logo.png",
+  "sitetitle" : "",
+  "siteSciCatLogo" : "",
   "loginFacilityLabel": "ESS",
   "loginLdapLabel": "Ldap",
   "loginLocalLabel": "Local",