Skip to content

Commit

Permalink
Add our brand colours (GSI-1202) (#19)
Browse files Browse the repository at this point in the history 
* Added icons (Material and FA Brands)
Added some additional styling to header and footer links.
Footer links remain to be wrapped in a button of some sort, but angular material limits button sizes, so custom CSS code needs adding.

* pnpm lock commit

* Fixed footer position

* Some additional improvements.
Added GHGA logos, added swoosh, fixed footer placement

* Fixed footer location
Fixed colour scheme to light, instead
Fixed header mixins

* Removed sticky bottom footer since it breaks for responsive screens
Fixed images stretching with small screens
Fixed some issues with small screens

* Updated and overwrote colour vars to brand colours
Minor fixes to footer navigation icon alignment

* Revert "Updated and overwrote colour vars to brand colours"

This reverts commit 3211382.

* Re-added the Data Portal text for the logos

* Added hover and focus colour change to nav links
Prettification all around

* Re-generate the palette.
Overwrote colour variables
Added new variables for other GHGA colours

* Fix linter issue

---------

Co-authored-by: Christoph Zwerschke <c.zwerschke@dkfz-heidelberg.de>
  • Loading branch information
@ac-jorellanaf @Cito
ac-jorellanaf and Cito authored Dec 3, 2024
1 parent c63c9c9 commit c599b10
Show file tree
Hide file tree
Showing 7 changed files with 93 additions and 86 deletions.
1 change: 1 addition & 0 deletions eslint.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export default [
'jsdoc/require-jsdoc': [
'warn',
{
exemptEmptyConstructors: true,
require: {
FunctionDeclaration: true,
MethodDefinition: true,
Expand Down
12 changes: 4 additions & 8 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, inject, OnInit } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { RouterOutlet } from '@angular/router';
import { ShowSessionComponent } from '@app/portal/features/show-session/show-session.component';
Expand All @@ -19,16 +19,12 @@ import { SiteHeaderComponent } from '@app/portal/features/site-header/site-heade
templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
/**
* Creating new instance of MatIconRegistry
* @param matIconReg
*/
constructor(private matIconReg: MatIconRegistry) {}
#matIconReg = inject(MatIconRegistry);

/**
* Run on App component initialisation
* Run on App component initialization
*/
ngOnInit(): void {
this.matIconReg.setDefaultFontSetClass('material-symbols-outlined');
this.#matIconReg.setDefaultFontSetClass('material-symbols-outlined');
}
}
4 changes: 2 additions & 2 deletions src/app/portal/features/site-footer/site-footer.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ nav div a span {
}

nav div a div {
color: var(--mat-sys-inverse-primary);
border-color: var(--mat-sys-inverse-primary);
color: var(--mat-sys-quinary);
border-color: var(--mat-sys-quinary);
}

nav div.swirl {
Expand Down
6 changes: 3 additions & 3 deletions src/app/portal/features/site-header/site-header.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ mat-toolbar {
}

mat-toolbar-row div div {
color: var(--mat-sys-inverse-primary);
border-color: var(--mat-sys-inverse-primary);
color: var(--mat-sys-quinary);
border-color: var(--mat-sys-quinary);
}

a#activePage {
background-color: var(--mat-sys-secondary);
background-color: var(--mat-sys-tertiary);
}

button {
Expand Down
14 changes: 8 additions & 6 deletions src/app/portal/features/site-header/site-header.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,19 @@ import { AuthService } from '@app/auth/services/auth.service';
styleUrl: './site-header.component.scss',
})
export class SiteHeaderComponent {
#router = inject(Router);
#authService = inject(AuthService);
isLoggedIn = this.#authService.isLoggedIn;

route: string = '';
constructor(private router: Router) {
this.router.events.subscribe((event) => {

constructor() {
this.#router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.route = this.router.url;
this.route = this.#router.url;
} else return;
});
}
#authService = inject(AuthService);

isLoggedIn = this.#authService.isLoggedIn;

/**
* User login
Expand Down
128 changes: 64 additions & 64 deletions src/assets/scss/ghga_colors.scss → src/assets/scss/ghga_colours.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@use 'sass:map';
@use '@angular/material' as mat;

// Note: Color palettes are generated from primary: #00393f, secondary: #e84614, tertiary: #cfe7cd, neutral: #005a5a
// Note: Color palettes are generated from primary: #00393F, secondary: #005A5A, tertiary: #E84614, neutral: #808080
$_palettes: (
primary: (
0: #000000,
Expand All @@ -25,6 +25,24 @@ $_palettes: (
100: #ffffff,
),
secondary: (
0: #000000,
10: #002020,
20: #003737,
25: #004343,
30: #004f4f,
35: #055c5c,
40: #1c6868,
50: #3b8281,
60: #579c9b,
70: #72b7b6,
80: #8dd3d2,
90: #a9efee,
95: #b7fdfc,
98: #e2fffe,
99: #f1fffe,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #3b0900,
20: #601400,
Expand All @@ -42,51 +60,33 @@ $_palettes: (
99: #fffbff,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #0c2010,
20: #213523,
25: #2c402e,
30: #374c39,
35: #435844,
40: #4e644f,
50: #677d67,
60: #809780,
70: #9ab199,
80: #b5cdb4,
90: #d1e9cf,
95: #dff7dd,
98: #ebffe8,
99: #f6fff2,
100: #ffffff,
),
neutral: (
0: #000000,
10: #002020,
20: #003737,
25: #004343,
30: #004f4f,
35: #055c5c,
40: #1c6868,
50: #3b8281,
60: #579c9b,
70: #72b7b6,
80: #8dd3d2,
90: #a9efee,
95: #b7fdfc,
98: #e2fffe,
99: #f1fffe,
10: #1b1c1c,
20: #303031,
25: #3b3b3c,
30: #464747,
35: #525252,
40: #5e5e5e,
50: #777777,
60: #919190,
70: #ababab,
80: #c7c6c6,
90: #e3e2e2,
95: #f2f0f0,
98: #faf9f9,
99: #fdfcfb,
100: #ffffff,
4: #001111,
6: #001717,
12: #002424,
17: #003030,
22: #003c3c,
24: #004141,
87: #a0e6e6,
92: #aef5f4,
94: #b4fbfa,
96: #c1fffe,
4: #0d0e0f,
6: #121414,
12: #1f2020,
17: #292a2a,
22: #343535,
24: #383939,
87: #dbdad9,
92: #e9e8e8,
94: #efeded,
96: #f5f3f3,
),
neutral-variant: (
0: #000000,
Expand Down Expand Up @@ -161,36 +161,36 @@ $tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
primary-fixed-dim: _high-contrast-value(#00393f, #a0cfd6, $theme-type),
on-primary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
on-primary-fixed-variant: _high-contrast-value(#ffffff, #001417, $theme-type),
secondary: _high-contrast-value(#591200, #ffece7, $theme-type),
secondary: _high-contrast-value(#003232, #b6fdfc, $theme-type),
on-secondary: _high-contrast-value(#ffffff, #000000, $theme-type),
secondary-container: _high-contrast-value(#8c2100, #ffaf99, $theme-type),
on-secondary-container: _high-contrast-value(#ffffff, #1e0300, $theme-type),
secondary-fixed: _high-contrast-value(#8c2100, #ffdbd1, $theme-type),
secondary-fixed-dim: _high-contrast-value(#641500, #ffb5a1, $theme-type),
secondary-container: _high-contrast-value(#005252, #89cfce, $theme-type),
on-secondary-container: _high-contrast-value(#ffffff, #000e0e, $theme-type),
secondary-fixed: _high-contrast-value(#005252, #a9efee, $theme-type),
secondary-fixed-dim: _high-contrast-value(#003939, #8dd3d2, $theme-type),
on-secondary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
on-secondary-fixed-variant: _high-contrast-value(#ffffff, #290400, $theme-type),
tertiary: _high-contrast-value(#0e2212, #def7dc, $theme-type),
on-secondary-fixed-variant: _high-contrast-value(#ffffff, #001414, $theme-type),
tertiary: _high-contrast-value(#3f0a00, #ffece7, $theme-type),
on-tertiary: _high-contrast-value(#ffffff, #000000, $theme-type),
tertiary-container: _high-contrast-value(#233725, #b1c9b0, $theme-type),
on-tertiary-container: _high-contrast-value(#def6dc, #000f03, $theme-type),
tertiary-fixed: _high-contrast-value(#3a4e3b, #d1e9cf, $theme-type),
tertiary-fixed-dim: _high-contrast-value(#233725, #b5cdb4, $theme-type),
tertiary-container: _high-contrast-value(#641500, #ffaf99, $theme-type),
on-tertiary-container: _high-contrast-value(#ffebe7, #1e0300, $theme-type),
tertiary-fixed: _high-contrast-value(#8c2100, #ffdbd1, $theme-type),
tertiary-fixed-dim: _high-contrast-value(#641500, #ffb5a1, $theme-type),
on-tertiary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
on-tertiary-fixed-variant: _high-contrast-value(#ffffff, #031506, $theme-type),
background: _high-contrast-value(#e2fffe, #001717, $theme-type),
on-background: _high-contrast-value(#002020, #a9efee, $theme-type),
surface: _high-contrast-value(#e2fffe, #001717, $theme-type),
surface-dim: _high-contrast-value(#7fc5c4, #001717, $theme-type),
surface-bright: _high-contrast-value(#e2fffe, #005a5a, $theme-type),
on-tertiary-fixed-variant: _high-contrast-value(#ffffff, #290400, $theme-type),
background: _high-contrast-value(#faf9f9, #121414, $theme-type),
on-background: _high-contrast-value(#1b1c1c, #e3e2e2, $theme-type),
surface: _high-contrast-value(#faf9f9, #121414, $theme-type),
surface-dim: _high-contrast-value(#b9b8b8, #121414, $theme-type),
surface-bright: _high-contrast-value(#faf9f9, #4f5050, $theme-type),
surface-container-lowest: _high-contrast-value(#ffffff, #000000, $theme-type),
surface-container: _high-contrast-value(#a9efee, #003737, $theme-type),
surface-container-high: _high-contrast-value(#9be1e0, #004343, $theme-type),
surface-container-highest: _high-contrast-value(#8dd3d2, #004f4f, $theme-type),
surface-container: _high-contrast-value(#e3e2e2, #303031, $theme-type),
surface-container-high: _high-contrast-value(#d5d4d4, #3b3b3c, $theme-type),
surface-container-highest: _high-contrast-value(#c7c6c6, #464747, $theme-type),
on-surface: _high-contrast-value(#000000, #ffffff, $theme-type),
shadow: _high-contrast-value(#000000, #000000, $theme-type),
scrim: _high-contrast-value(#000000, #000000, $theme-type),
surface-tint: _high-contrast-value(#37656c, #a0cfd6, $theme-type),
inverse-surface: _high-contrast-value(#003737, #a9efee, $theme-type),
inverse-surface: _high-contrast-value(#303031, #e3e2e2, $theme-type),
inverse-on-surface: _high-contrast-value(#ffffff, #000000, $theme-type),
outline: _high-contrast-value(#262d2f, #eaf1f3, $theme-type),
outline-variant: _high-contrast-value(#434b4c, #bcc4c5, $theme-type),
Expand Down
14 changes: 11 additions & 3 deletions src/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.
@use './assets/scss/ghga_colors';
@use './assets/scss/ghga_colours';
@use './assets/scss/material_symbols';
@use './assets/scss/fontawesome';
@use './assets/scss/fontawesome_brands';
Expand All @@ -28,14 +28,22 @@
(
color: (
theme-type: light,
primary: ghga_colors.$primary-palette,
tertiary: ghga_colors.$tertiary-palette,
primary: ghga_colours.$primary-palette,
tertiary: ghga_colours.$tertiary-palette,
),
typography: Lexend,
)
);
}

:root {
--mat-sys-primary: #00393f;
--mat-sys-secondary: #005a5a;
--mat-sys-tertiary: #e84614;
--mat-sys-quaternary: #007e8c;
--mat-sys-quinary: #cfe7cd;
}

html,
body {
height: 100%;
Expand Down

0 comments on commit c599b10

Please sign in to comment.