@@ -50,4 +100,4 @@
{{'NAV-BAR.DMP-PROFILES' |
translate}}
{{'NAV-BAR.DATASETS-ADMIN'
- | translate}} -->
+ | translate}} -->
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.scss b/dmp-frontend/src/app/ui/navbar/navbar.component.scss
index 2c1b6f3b7..d9c757679 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.scss
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.scss
@@ -100,3 +100,20 @@ $mat-card-header-size: 40px !default;
min-height: inherit;
max-height: inherit;
}
+
+.toggle-icon {
+ transform: scale(1.5);
+}
+
+.list {
+ list-style-type:none;
+ padding-left: 0px;
+}
+
+.list >li {
+ padding: 5px;
+}
+
+.avatar {
+ cursor: pointer;
+}
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.ts b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
index 1ed369b5d..0c4b0156e 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.ts
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
@@ -251,7 +251,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
}
else {
const dialogRef = this.dialog.open(StartNewDmpDialogComponent, {
- disableClose: true,
+ disableClose: false,
data: {
isDialog: true
}
diff --git a/dmp-frontend/src/assets/scss/green-theme.scss b/dmp-frontend/src/assets/scss/green-theme.scss
new file mode 100644
index 000000000..bc6a17def
--- /dev/null
+++ b/dmp-frontend/src/assets/scss/green-theme.scss
@@ -0,0 +1,141 @@
+@import "app/ui/misc/navigation/navigation.component.scss";
+@import "~@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming';
+
+$app-green-theme-primary-palette: (
+ 50: #e3f3f3,
+ 100: #b8e2e0,
+ 200: #89cecc,
+ 300: #59bab8,
+ 400: #36aca8,
+ 500: #129d99,
+ 600: #109591,
+ 700: #0d8b86,
+ 800: #0a817c,
+ 900: #056f6b,
+ A100: #9ffffa,
+ A200: #6cfff7,
+ A400: #39fff5,
+ A700: #20fff3,
+ contrast: (
+ 50: #000000,
+ 100: #000000,
+ 200: #000000,
+ 300: #000000,
+ 400: #000000,
+ 500: #ffffff,
+ 600: #ffffff,
+ 700: #ffffff,
+ 800: #ffffff,
+ 900: #ffffff,
+ A100: #000000,
+ A200: #000000,
+ A400: #000000,
+ A700: #000000
+ )
+);
+
+$app-green-theme-accent-palette: (
+ 50: #fefbee,
+ 100: #fdf5d5,
+ 200: #fbeeb9,
+ 300: #f9e79c,
+ 400: #f8e287,
+ 500: #f7dd72,
+ 600: #f6d96a,
+ 700: #f5d45f,
+ 800: #f3cf55,
+ 900: #f1c742,
+ A100: #ffffff,
+ A200: #ffffff,
+ A400: #fff6dc,
+ A700: #fff0c3,
+ contrast: (
+ 50: #000000,
+ 100: #000000,
+ 200: #000000,
+ 300: #000000,
+ 400: #000000,
+ 500: #000000,
+ 600: #000000,
+ 700: #000000,
+ 800: #000000,
+ 900: #000000,
+ A100: #000000,
+ A200: #000000,
+ A400: #000000,
+ A700: #000000
+ )
+);
+
+$app-green-theme-primary: mat-palette($app-green-theme-primary-palette);
+$app-green-theme-accent: mat-palette($app-green-theme-accent-palette, A200, A100, A400);
+$app-green-theme-warn: mat-palette($mat-red);
+
+$app-green-theme-background: (
+ status-bar: map_get($mat-grey, 300),
+ app-bar: map_get($mat-grey, 100),
+ background: map_get($mat-grey, 50),
+ hover: rgba(black, 0.04),
+ card: white,
+ dialog: white,
+ disabled-button: rgba(black, 0.12),
+ raised-button: white,
+ focused-button: $dark-focused,
+ selected-button: map_get($mat-grey, 300),
+ selected-disabled-button: map_get($mat-grey, 400),
+ disabled-button-toggle: map_get($mat-grey, 200),
+ unselected-chip: map_get($mat-grey, 300),
+ disabled-list-option: map_get($mat-grey, 200)
+);
+
+$app-green-theme-foreground: (
+ base: white,
+ divider: $dark-dividers,
+ dividers: $dark-dividers,
+ disabled: $dark-disabled-text,
+ disabled-button: rgba(black, 0.26),
+ disabled-text: $dark-disabled-text,
+ hint-text: $dark-disabled-text,
+ secondary-text: $dark-secondary-text,
+ icon: rgba(white, 0.54),
+ icons: rgba(white, 0.54),
+ text: rgba(white, 0.87),
+ slider-min: rgba(black, 0.87),
+ slider-off: rgba(black, 0.26),
+ slider-off-active: rgba(black, 0.38)
+);
+
+$custom-theme: (
+ primary: $app-green-theme-primary,
+ accent: $app-green-theme-accent,
+ warn: $app-green-theme-warn,
+ is-dark: false,
+ foreground: $app-green-theme-foreground,
+ background: $app-green-theme-background
+);
+
+$custom-typography: mat-typography-config(
+ $font-family: "Lato, regular",
+ $headline: mat-typography-level(32px, 48px, 700),
+ $body-1: mat-typography-level(16px, 24px, 500)
+);
+
+.green-theme {
+ @include mat-core();
+
+ @include angular-material-theme($custom-theme);
+ @include navigation-component-theme($custom-theme);
+
+ // Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
+ @include mat-base-typography($custom-typography);
+
+ // Override typography for a specific Angular Material components.
+ @include mat-checkbox-typography($custom-typography);
+
+ // Override typography for all Angular Material, including mat-base-typography and all components.
+ @include angular-material-typography($custom-typography);
+ //If you're using Material's theming, you can also pass in your typography config to the mat-core mixin:
+
+ // Override the typography in the core CSS.
+ @include mat-core($custom-typography);
+}
diff --git a/dmp-frontend/src/assets/scss/material-dashboard.scss b/dmp-frontend/src/assets/scss/material-dashboard.scss
index 3ca0d9f37..fd0efab3c 100644
--- a/dmp-frontend/src/assets/scss/material-dashboard.scss
+++ b/dmp-frontend/src/assets/scss/material-dashboard.scss
@@ -17,12 +17,18 @@
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming';
@import "./blue-theme.scss";
+// @import "./green-theme.scss";
@include mat-core();
-// Define a theme.
+// // Define a blue theme.
$custom-theme-primary: mat-palette($app-blue-theme-primary-palette, 900);
$custom-theme-accent: mat-palette($app-blue-theme-accent-palette);
+
+// Define a green theme.
+// $custom-theme-primary: mat-palette($app-green-theme-primary-palette, 500);
+// $custom-theme-accent: mat-palette($app-green-theme-accent-palette);
+
// $custom-theme-accent: mat-palette($mat-pink, A200, A100, A400);
$custom-theme-warn: mat-palette($mat-red);
$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
