From 23c6b9400ee2d2917e3f5e8cf3d327fd2a537747 Mon Sep 17 00:00:00 2001
From: tykayn <tykayn@gmail.com>
Date: Sun, 7 Jun 2020 13:52:14 +0200
Subject: [PATCH] :zap: styling themes

---
 README.md                                     |  6 ++---
 src/app/app.component.html                    | 16 +++++------
 .../components/header/header.component.html   |  2 +-
 .../components/header/header.component.scss   |  7 +++++
 src/app/core/services/theme.service.ts        |  2 +-
 .../page-not-found.component.scss             |  5 ++++
 src/styles.scss                               |  2 +-
 src/styles/partials/_forms.scss               |  9 +++++++
 src/styles/partials/_navigation.scss          | 13 ++++++---
 src/styles/themes/_base.scss                  | 12 ++++++---
 src/styles/themes/_dark.scss                  | 26 ++++++++++++++----
 src/styles/themes/_light.scss                 | 12 +++++++++
 src/styles/themes/_red.scss                   | 27 ++++++++++++++++---
 13 files changed, 108 insertions(+), 31 deletions(-)

diff --git a/README.md b/README.md
index ecebe84a..b4d32f1a 100644
--- a/README.md
+++ b/README.md
@@ -24,14 +24,14 @@
 |                 | [uuid](https://www.npmjs.com/package/uuid)                     | handle client-side generation of uuids   |
 
 ---
-
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.1.
 # Framadate
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.1.
+A libre polling software make by contributors around the French association Framasoft.
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `yarn start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 222bd836..422dce62 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,16 +1,14 @@
 <div id="big_container" [class]="themeClass">
-	<app-header [isSidebarOpened]="isSidebarOpened" (toggleSidebarEE)="toggleSidebar($event)"></app-header>
-
-	<main>
-		<router-outlet></router-outlet>
-		<app-feedback></app-feedback>
-	</main>
-
-	<app-footer></app-footer>
+	<div class="container">
+		<app-header [isSidebarOpened]="isSidebarOpened" (toggleSidebarEE)="toggleSidebar($event)"></app-header>
+		<main>
+			<router-outlet></router-outlet>
+		</main>
+		<app-footer></app-footer>
+	</div>
 </div>
 
 <p-toast position="bottom-center"></p-toast>
-
 <p-sidebar [(visible)]="isSidebarOpened">
 	<app-navigation></app-navigation>
 </p-sidebar>
diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html
index 3a3e0b95..c5a76c78 100644
--- a/src/app/core/components/header/header.component.html
+++ b/src/app/core/components/header/header.component.html
@@ -1,4 +1,4 @@
-<header>
+<header class="big-header">
 	<nav class="navbar" role="navigation" aria-label="main navigation">
 		<div class="navbar-brand">
 			<a class="navbar-item">
diff --git a/src/app/core/components/header/header.component.scss b/src/app/core/components/header/header.component.scss
index e69de29b..0a3581ee 100644
--- a/src/app/core/components/header/header.component.scss
+++ b/src/app/core/components/header/header.component.scss
@@ -0,0 +1,7 @@
+:host {
+	header {
+		.container {
+			padding: 0;
+		}
+	}
+}
diff --git a/src/app/core/services/theme.service.ts b/src/app/core/services/theme.service.ts
index 62a80095..d15407cf 100644
--- a/src/app/core/services/theme.service.ts
+++ b/src/app/core/services/theme.service.ts
@@ -6,7 +6,7 @@ import { Theme } from '../enums/theme.enum';
 	providedIn: 'root',
 })
 export class ThemeService {
-	private _theme: BehaviorSubject<Theme> = new BehaviorSubject<Theme>(Theme.RED);
+	private _theme: BehaviorSubject<Theme> = new BehaviorSubject<Theme>(Theme.LIGHT);
 	public readonly theme: Observable<Theme> = this._theme.asObservable();
 
 	public selectTheme(theme: Theme): void {
diff --git a/src/app/shared/components/page-not-found/page-not-found.component.scss b/src/app/shared/components/page-not-found/page-not-found.component.scss
index e69de29b..b250f9c2 100644
--- a/src/app/shared/components/page-not-found/page-not-found.component.scss
+++ b/src/app/shared/components/page-not-found/page-not-found.component.scss
@@ -0,0 +1,5 @@
+:host {
+	.title {
+		color: #222;
+	}
+}
diff --git a/src/styles.scss b/src/styles.scss
index d1c3030a..962a220d 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -21,7 +21,7 @@
 // most general dom elements
 @import './styles/partials/global';
 @import './styles/partials/logo';
-// @import './styles/partials/navigation';
+ @import './styles/partials/navigation';
 
 // main content elements
 @import './styles/partials/main';
diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss
index 4205381a..3a45df0c 100644
--- a/src/styles/partials/_forms.scss
+++ b/src/styles/partials/_forms.scss
@@ -1,5 +1,10 @@
 @charset "UTF-8";
 
+.ui-inputswitch{
+	margin-left: 1ch;
+	margin-right: 1ch;
+}
+
 .input-lg {
 	display: block;
 	width: 100%;
@@ -59,3 +64,7 @@ li {
 	display: block;
 	width: 100%;
 }
+
+button[type='submit']{
+	margin-top : 2em;
+}
diff --git a/src/styles/partials/_navigation.scss b/src/styles/partials/_navigation.scss
index eb5a149e..23df3486 100644
--- a/src/styles/partials/_navigation.scss
+++ b/src/styles/partials/_navigation.scss
@@ -18,14 +18,14 @@ nav {
 			display: none;
 		}
 
-		&.active {
+		&.active, &.is-active {
 			color: $white;
-			background: $primary;
+			background: $primary_color;
 		}
 	}
 }
-
 a {
+	color: $primary_color;
 	&,
 	&:hover {
 		text-decoration: none;
@@ -81,3 +81,10 @@ a {
 		padding-left: 1rem;
 	}
 }
+// material override
+.navbar{
+	margin-bottom: 0
+}
+a span.ui-steps-number{
+	padding: 0;
+}
diff --git a/src/styles/themes/_base.scss b/src/styles/themes/_base.scss
index a47885d9..f20767dd 100644
--- a/src/styles/themes/_base.scss
+++ b/src/styles/themes/_base.scss
@@ -1,14 +1,18 @@
 #big_container {
 	background: $primary;
 
-	.container {
-		padding: 1em;
+	main{
+		margin-bottom: 2em;
+		padding-bottom: 5em;
+		padding-top: 1em;
+		background: $white;
 	}
-
 	.big-header {
-		margin-bottom: 22px;
+		margin-bottom: 1em;
 
 		.container {
+			padding-bottom: 5em;
+
 			@extend .boxed-shadow;
 
 			.column:last-of-type {
diff --git a/src/styles/themes/_dark.scss b/src/styles/themes/_dark.scss
index 4ec6c326..b25b7a07 100644
--- a/src/styles/themes/_dark.scss
+++ b/src/styles/themes/_dark.scss
@@ -6,10 +6,6 @@ $theme-color-tertiary: #ccc;
 		background: #222;
 		color: #ddd;
 
-		.container {
-			padding: 1em;
-		}
-
 		main {
 			background: #444;
 		}
@@ -33,7 +29,7 @@ $theme-color-tertiary: #ccc;
 		}
 
 		select {
-			background: $theme-color-secondary;
+			background: $white;
 			border-color: $theme-color-secondary;
 
 			&:hover {
@@ -54,5 +50,25 @@ $theme-color-tertiary: #ccc;
 		.big-header {
 			margin-bottom: 22px;
 		}
+
+		// bulma override
+		.button.is-primary, .button.btn--primary, button.is-primary, button.btn--primary, .is-primary.btn, .btn.btn--primary, .is-primary.back, .back.btn--primary{
+			background-color: $theme-color-primary !important;
+			color: $theme-color-tertiary !important;
+		}
+		// material override
+		.navbar-dropdown a.navbar-item.is-active,
+		body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number,
+		a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, .navbar-link.is-active{
+			color: $theme-color-primary !important;
+		}
+
+		.navbar-link:not(.is-arrowless)::after{
+			border-color: $theme-color-primary;
+		}
+
+		body .ui-inputswitch.ui-inputswitch-checked:not(.ui-state-disabled) .ui-inputswitch-slider{
+			background-color: $theme-color-primary;
+		}
 	}
 }
diff --git a/src/styles/themes/_light.scss b/src/styles/themes/_light.scss
index 23c82352..77350c1d 100644
--- a/src/styles/themes/_light.scss
+++ b/src/styles/themes/_light.scss
@@ -17,4 +17,16 @@
 			}
 		}
 	}
+
+	// material override
+	body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number{
+		color: $primary_color;
+	}
+	body .ui-inputswitch.ui-inputswitch-checked:not(.ui-state-disabled) .ui-inputswitch-slider{
+		background-color: $primary_color;
+	}
+	.navbar-link:not(.is-arrowless)::after{
+		border-color: $primary_color;
+	}
+
 }
diff --git a/src/styles/themes/_red.scss b/src/styles/themes/_red.scss
index dfe8810b..0fe12c83 100644
--- a/src/styles/themes/_red.scss
+++ b/src/styles/themes/_red.scss
@@ -1,17 +1,36 @@
+$theme-color-primary: #850003;
+$theme-color-secondary: #501016;
+$theme-color-tertiary: #ffbca4;
+
 #big_container {
 	&.theme-hot-covid {
-		background: #ffbca4;
-		color: #501016;
+		background: $theme-color-tertiary;
+		color: $theme-color-secondary;
 
+		main{
+			background: $white;
+		}
 		h1::after {
-			background-color: #850003;
+			background-color: $theme-color-primary;
 		}
 
 		.btn--primary:focus,
 		.btn--primary:hover,
 		.btn--primary:active,
 		.btn--primary {
-			background-color: #850003 !important;
+			background-color: $theme-color-primary !important;
 		}
+
+		// bulma override
+		.button.is-primary, .button.btn--primary, button.is-primary, button.btn--primary, .is-primary.btn, .btn.btn--primary, .is-primary.back, .back.btn--primary{
+			background-color: $theme-color-primary;
+			color: $theme-color-tertiary;
+		}
+		// material override
+		.navbar-dropdown a.navbar-item.is-active,
+		a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, .navbar-link.is-active{
+			color: $theme-color-primary;
+		}
+
 	}
 }