From bc8c32cfcd69b32cd3c1e0d72e15014317f08a55 Mon Sep 17 00:00:00 2001
From: DE BAERDEMAEKER Mathieu <mathieu.debaerdemaeker@axa.fr>
Date: Tue, 9 Jun 2020 17:27:18 +0200
Subject: [PATCH 1/4] feature(Header): change header bar for adapt it with the
 current environnement

---
 public/global.css                       |   8 +
 src/components/Header/Header.scss       | 102 +----
 src/components/Header/Header.svelte     |  75 +---
 src/components/MainView/MainView.scss   | 160 +++----
 src/components/MainView/MainView.svelte |   4 +-
 src/components/Profile/Profile.scss     | 480 ++++++++++----------
 src/components/Settings/Settings.scss   | 570 ++++++++++++------------
 src/components/Tag/Tag.scss             |  71 +--
 8 files changed, 655 insertions(+), 815 deletions(-)

diff --git a/public/global.css b/public/global.css
index 7406c22..04a7b2c 100644
--- a/public/global.css
+++ b/public/global.css
@@ -58,6 +58,10 @@ input:disabled {
 	background: #ccc;
 }
 
+::-webkit-scrollbar-corner {
+	background-color: #fff;
+}
+
 @media (prefers-color-scheme: dark) {
 	body {
 		background-color: #222;
@@ -66,6 +70,10 @@ input:disabled {
 	::-webkit-scrollbar-thumb {
 		background: #666;
 	}
+
+	::-webkit-scrollbar-corner {
+		background-color: #444;
+	}
 }
 
 button.link {
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 612b1e0..f0dd801 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -9,106 +9,12 @@
 	width: 100%;
 	height: 100%;
 	-webkit-app-region: drag;
-}
-
-.window-controls {
-	display: grid;
-	grid-template-columns: repeat(3, 32px);
-	position: absolute;
-	top: 0;
-	right: 0;
-	height: 100%;
-	font-size: 10px;
-	-webkit-app-region: no-drag;
-}
-
-.window-controls .button {
-	position: relative;
-	grid-row: 1 / span 1;
-	user-select: none;
-	cursor: default;
-	vertical-align: middle;
-	border: 0;
-	background-color: transparent;
-}
-
-.window-controls .button:before {
-	content: '';
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	width: 16px;
-	height: 16px;
-	border-radius: 50%;
-	background-color: rgba(33, 33, 33, 0.8);
-	transform: translateX(-50%) translateY(-50%);
-}
-
-.window-controls .button:after {
-	content: attr(data-icon);
-	opacity: 0;
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	width: 16px;
-	height: 16px;
-	line-height: 16px;
-	font-family: sans-serif;
-	font-size: 0.6rem;
-	transform: translateX(-50%) translateY(-50%);
-}
-
-.window-controls .button:hover:after {
-	opacity: 1;
-}
-
-.window-controls .min-button {
-	grid-column: 1;
-}
-
-.window-controls .max-button,
-.window-controls .restore-button {
-	grid-column: 2;
-}
-
-.window-controls .close-button {
-	grid-column: 3;
-}
-
-.window-controls .close-button:before {
-	background-color: #fe6057;
-}
-
-.window-controls .min-button:before {
-	background-color: #ffbf2b;
-}
-
-.window-controls .restore-button:before,
-.window-controls .max-button:before {
-	background-color: #28cd41;
-}
-
-.window-controls .restore-button {
-	display: none;
-}
-
-.window-title {
-	grid-column: 1;
 	display: flex;
-	align-items: center;
-	font-size: 0.8rem;
-	line-height: 1;
-	color: #333;
-	font-family: sans-serif;
-	padding-left: 0.5rem;
-	overflow-x: hidden;
-}
+	flex-direction: row;
 
-.window-title .titlebar-title {
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	padding-left: 0.5rem;
+	&--windows {
+		justify-content: flex-end;
+	}
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte
index 35b30e3..138baae 100644
--- a/src/components/Header/Header.svelte
+++ b/src/components/Header/Header.svelte
@@ -1,70 +1,23 @@
 <script>
-	import { onMount } from 'svelte';
-    const { remote } = require('electron');
+	const { getCurrentWindow } = require('electron').remote;
+	import WindowsBar from './WindowsBar.svelte';
+	import MacosBar from './MacosBar.svelte';
     
-    let currentPlatform = 'Others';
-    
-	onMount(() => {
-		init();
-		if (navigator.platform === 'Win32') {
-			currentPlatform = 'Windows';
-		} else {
-			currentPlatform = 'Others';
-		}
-    });
-    
-	const init = () => {
-		let window = remote.getCurrentWindow();
-		const minButton = document.getElementById('minimize');
-		const maxButton = document.getElementById('maximize');
-		const restoreButton = document.getElementById('restore');
-		const closeButton = document.getElementById('close');
-		minButton.addEventListener('click', event => {
-			window = remote.getCurrentWindow();
-			window.minimize();
-		});
-		maxButton.addEventListener('click', event => {
-			window = remote.getCurrentWindow();
-			window.maximize();
-			toggleMaxRestoreButtons();
-		});
-		restoreButton.addEventListener('click', event => {
-			window = remote.getCurrentWindow();
-			window.unmaximize();
-			toggleMaxRestoreButtons();
-		});
-		const toggleMaxRestoreButtons = () => {
-			window = remote.getCurrentWindow();
-			if (window.isMaximized()) {
-				maxButton.style.display = 'none';
-				restoreButton.style.display = 'flex';
-			} else {
-				restoreButton.style.display = 'none';
-				maxButton.style.display = 'flex';
-			}
-		};
-		toggleMaxRestoreButtons();
-		window.on('maximize', toggleMaxRestoreButtons);
-		window.on('unmaximize', toggleMaxRestoreButtons);
-		closeButton.addEventListener('click', event => {
-			window = remote.getCurrentWindow();
-			window.hide();
-		});
-	};
+	let currentPlatform = navigator.platform === 'Win32' ? 'windows' : 'others';
+	let isMaximized = getCurrentWindow().isMaximized();
+	
+	getCurrentWindow().on('maximize', () => isMaximized = true);
+	getCurrentWindow().on('unmaximize', () => isMaximized = false);
 </script>
 
 <style src="./Header.scss"></style>
 
 <header class="titlebar">
-	<div class="drag-region">
-		<div class="window-controls">
-			<button id="minimize" class="button min-button" data-icon="—"></button>
-			<button id="maximize" class="button max-button" data-icon="➕"></button>
-			<button
-				id="restore"
-				class="button restore-button"
-				data-icon="➕"></button>
-			<button id="close" class="button close-button" data-icon="❌"></button>
-		</div>
+	<div class="drag-region {currentPlatform ? `drag-region--${currentPlatform}` : ''}">
+		{#if currentPlatform === 'others'}
+			<MacosBar bind:isMaximized />
+		{:else}
+			<WindowsBar bind:isMaximized />
+		{/if}
 	</div>
 </header>
\ No newline at end of file
diff --git a/src/components/MainView/MainView.scss b/src/components/MainView/MainView.scss
index 865d34e..aa63f60 100644
--- a/src/components/MainView/MainView.scss
+++ b/src/components/MainView/MainView.scss
@@ -1,96 +1,100 @@
 .skz-pullrequests-list {
-  margin-bottom: 0;
-  list-style: none;
-
-  li:not(:last-child) {
-    margin-bottom: 1rem;
-  }
-
-  &__empty {
-    position: absolute;
-    top: 50%;
-    width: 100%;
-    text-align: center;
-    transform: translateY(-50%);
-  }
+	margin-bottom: 0;
+	list-style: none;
+
+	li:not(:last-child) {
+		margin-bottom: 1rem;
+	}
+
+	&__empty {
+		position: absolute;
+		top: 50%;
+		width: 100%;
+		text-align: center;
+		transform: translateY(-50%);
+	}
 }
 
 .skz-fetching-status {
-  font-size: 0.6rem;
-  color: #000;
-  font-weight: normal;
+	font-size: 0.6rem;
+	color: #000;
+	font-weight: normal;
 }
 
 .skz-pullrequests__search-container {
-  margin-bottom: 1rem;
+	margin-bottom: 1rem;
 }
 
 .skz-pullrequests {
-  margin: -1rem;
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 250px);
-  font-family: 'Source Sans Pro', sans-serif;
-
-  &__list-container {
-    position: relative;
-    padding-bottom: 1rem;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &__list {
-    list-style: none;
-    display: flex;
-    flex-flow: wrap;
-    width: 85%;
-
-    > :global(:nth-child(n + 6)) {
-      display: none;
-    }
-
-    &--show > :global(:nth-child(n)) {
-      display: block;
-    }
-
-    &-more {
-      background-color: transparent;
-      color: #fff;
-      font-size: x-small;
-      margin-bottom: 0.5rem;
-      width: 15%;
-      height: 2rem;
-
-      &:hover {
-        text-decoration: underline;
-        cursor: pointer;
-      }
-    }
-  }
+	margin: -1rem;
+	display: flex;
+	flex-direction: column;
+	height: calc(100vh - 250px);
+	font-family: 'Source Sans Pro', sans-serif;
+
+	&__list-container {
+		position: relative;
+		padding-bottom: 1rem;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	&__list {
+		list-style: none;
+		display: flex;
+		flex-flow: wrap;
+		width: 85%;
+
+		> :global(:nth-child(n + 6)) {
+			display: none;
+		}
+
+		&--show > :global(:nth-child(n)) {
+			display: block;
+		}
+
+		&-more {
+			background-color: transparent;
+			color: #000;
+			font-size: x-small;
+			margin-bottom: 0.5rem;
+			width: 15%;
+			height: 2rem;
+
+			&:hover {
+				text-decoration: underline;
+				cursor: pointer;
+			}
+
+			@media (prefers-color-scheme: dark) {
+				color: #fff;
+			}
+		}
+	}
 }
 
 .skz-refresh-button {
-  border: 0;
-  font-size: 1rem;
-  background-color: transparent;
-  text-decoration: underline;
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    color: #fff;
-  }
+	border: 0;
+	font-size: 1rem;
+	background-color: transparent;
+	text-decoration: underline;
+	cursor: pointer;
+
+	&:hover {
+		text-decoration: none;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		color: #fff;
+	}
 }
 
 @media (prefers-color-scheme: dark) {
-  .skz-fetching-status {
-    color: #aaa;
-  }
+	.skz-fetching-status {
+		color: #aaa;
+	}
 
-  .skz-pullrequests-list__empty {
-    color: #ccc;
-  }
+	.skz-pullrequests-list__empty {
+		color: #ccc;
+	}
 }
diff --git a/src/components/MainView/MainView.svelte b/src/components/MainView/MainView.svelte
index 875ce01..67f4f68 100644
--- a/src/components/MainView/MainView.svelte
+++ b/src/components/MainView/MainView.svelte
@@ -126,7 +126,9 @@
             <Tag tag={tag} on:tag={setTag} />
           {/each}
         </ul>
-        <button class="skz-pullrequests__list-more" on:click={() => show = !show}> Voir {show ? 'moins' : 'plus'}...</button>
+        {#if tags.length > 5}
+          <button class="skz-pullrequests__list-more" on:click={() => show = !show}> Voir {show ? 'moins' : 'plus'}...</button>
+        {/if}
       {/if}
     </div>
     <ul class="skz-pullrequests-list">
diff --git a/src/components/Profile/Profile.scss b/src/components/Profile/Profile.scss
index 4362f40..7b43afa 100644
--- a/src/components/Profile/Profile.scss
+++ b/src/components/Profile/Profile.scss
@@ -3,175 +3,157 @@
  */
 
 .skz-avatar {
-  position: relative;
-  z-index: 3;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+	position: relative;
+	z-index: 3;
+	padding-top: 1rem;
+	padding-bottom: 1rem;
 }
 
 .skz-avatar__gradient {
-  position: absolute;
-  width: 100%;
-  height: 3.33rem;
-  z-index: 1;
-
-  &--1 {
-    background: linear-gradient(
-      135deg,
-      rgba(2, 113, 128, 1) 0%,
-      rgba(2, 113, 128, 1) 24%,
-      rgba(0, 173, 198, 1) 77%,
-      rgba(0, 173, 198, 1) 100%
-    );
-  }
-
-  &--2 {
-    background: linear-gradient(
-      135deg,
-      rgba(128, 63, 2, 1) 0%,
-      rgba(128, 63, 2, 1) 24%,
-      rgba(198, 113, 0, 1) 77%,
-      rgba(198, 113, 0, 1) 100%
-    );
-  }
-
-  &--3 {
-    background: linear-gradient(
-      135deg,
-      rgba(78, 1, 65, 1) 0%,
-      rgb(107, 1, 89) 24%,
-      rgb(148, 0, 123) 77%,
-      rgb(209, 1, 174) 100%
-    );
-  }
+	position: absolute;
+	width: 100%;
+	height: 3.33rem;
+	z-index: 1;
+
+	&--1 {
+		background: linear-gradient(135deg, #48c6ef, #6f86d6);
+	}
+
+	&--2 {
+		background: linear-gradient(135deg, #fc7864, #fda366);
+	}
+
+	&--3 {
+		background: linear-gradient(135deg, #667eea, #764ba2);
+	}
 }
 
 input[type='radio']:checked + .skz-profile__modal-label {
-  background-color: #f07662;
-  color: #fff;
+	background-color: #f07662;
+	color: #fff;
 
-  &:hover {
-    cursor: default;
-  }
+	&:hover {
+		cursor: default;
+	}
 }
 
 input[type='radio'] + .skz-profile__modal-label:after {
-  font-family: 'Icons';
-  content: '\EA44';
-  text-align: center;
+	font-family: 'Icons';
+	content: '\EA44';
+	text-align: center;
 }
 
 input[type='radio']:checked + .skz-profile__modal-label:after {
-  font-family: 'Icons';
-  content: '\EA3A';
-  text-align: center;
+	font-family: 'Icons';
+	content: '\EA3A';
+	text-align: center;
 }
 
 .skz-profile > .skz-profile__modal:before:hover > .skz-avatar__gradient {
-  background-color: #5555;
+	background-color: #5555;
 }
 
 .skz-profile__modal {
-  position: absolute;
-  z-index: 4;
-  cursor: pointer;
-  background-color: transparent;
-  height: 3.33rem;
-
-  &:before {
-    content: '\EAC4';
-    position: absolute;
-    color: #ccc;
-    font-size: medium;
-    font-family: 'Icons';
-    padding: 0.2rem;
-  }
-
-  &-close {
-    background-color: #f07662;
-    font-size: 0.8rem;
-    font-weight: bold;
-    color: #fff;
-    padding: 0.5rem;
-    border-radius: 0.5rem;
-    height: 2.5rem;
-    width: 6rem;
-    cursor: pointer;
-
-    &:hover {
-      background-color: #864338;
-    }
-  }
-
-  &-title {
-    height: 15%;
-    text-align: center;
-    border-bottom: 1px solid #f5f5f5;
-    padding-bottom: 0.5rem;
-  }
-
-  &-theme {
-    border: 1px solid #333;
-    height: 30%;
-    width: 100%;
-  }
-
-  &-input {
-    display: none;
-  }
-
-  &-label {
-    background-color: #ccc;
-    padding: 0.5rem;
-    margin: 0.5rem;
-    width: 33%;
-    height: 66%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    border-radius: 0.4rem;
-    cursor: pointer;
-
-    &:hover {
-      background-color: #aaa;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    &-title {
-      color: #eee;
-    }
-
-    &-label {
-      background-color: #444;
-
-      &:hover {
-        background-color: #555;
-      }
-
-      &:after {
-        color: #eee;
-      }
-    }
-  }
+	position: absolute;
+	z-index: 4;
+	cursor: pointer;
+	background-color: transparent;
+	height: 3.33rem;
+
+	&:before {
+		content: '\EAC4';
+		position: absolute;
+		color: #ccc;
+		font-size: medium;
+		font-family: 'Icons';
+		padding: 0.2rem;
+	}
+
+	&-close {
+		background-color: #f07662;
+		font-size: 0.8rem;
+		font-weight: bold;
+		color: #fff;
+		padding: 0.5rem;
+		border-radius: 0.5rem;
+		height: 2.5rem;
+		width: 6rem;
+		cursor: pointer;
+
+		&:hover {
+			background-color: #864338;
+		}
+	}
+
+	&-title {
+		height: 15%;
+		text-align: center;
+		border-bottom: 1px solid #f5f5f5;
+		padding-bottom: 0.5rem;
+	}
+
+	&-theme {
+		border: 1px solid #333;
+		height: 30%;
+		width: 100%;
+	}
+
+	&-input {
+		display: none;
+	}
+
+	&-label {
+		background-color: #ccc;
+		padding: 0.5rem;
+		margin: 0.5rem;
+		width: 33%;
+		height: 66%;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		border-radius: 0.4rem;
+		cursor: pointer;
+
+		&:hover {
+			background-color: #aaa;
+		}
+	}
+
+	@media (prefers-color-scheme: dark) {
+		&-title {
+			color: #eee;
+		}
+
+		&-label {
+			background-color: #444;
+
+			&:hover {
+				background-color: #555;
+			}
+
+			&:after {
+				color: #eee;
+			}
+		}
+	}
 }
 
 .skz-avatar__image {
-  position: relative;
-  z-index: 2;
-  display: block;
-  width: 75px;
-  height: 75px;
-  margin-left: auto;
-  margin-right: auto;
-  border-radius: 50%;
-  border: 2px solid #fff;
-  background-color: #f5f5f5;
+	position: relative;
+	z-index: 2;
+	display: block;
+	width: 75px;
+	height: 75px;
+	margin-left: auto;
+	margin-right: auto;
+	border-radius: 50%;
+	border: 2px solid #fff;
+	background-color: #f5f5f5;
 }
 
 .skz-profile {
-  position: relative;
-  height: 100%;
+	position: relative;
+	height: 100%;
 }
 
 /**
@@ -179,14 +161,14 @@ input[type='radio']:checked + .skz-profile__modal-label:after {
    */
 
 .skz-profile-name {
-  margin-left: 1rem;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-  text-align: center;
-  font-size: 0.8rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+	margin-left: 1rem;
+	margin-right: 1rem;
+	margin-bottom: 1rem;
+	text-align: center;
+	font-size: 0.8rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 /**
@@ -194,44 +176,44 @@ input[type='radio']:checked + .skz-profile__modal-label:after {
    */
 
 .skz-profile-nav {
-  position: relative;
-  display: flex;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  border-bottom: 1px solid #eee;
+	position: relative;
+	display: flex;
+	padding-left: 1rem;
+	padding-right: 1rem;
+	border-bottom: 1px solid #eee;
 }
 
 .skz-profile-nav__item {
-  width: 50%;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  font-size: 0;
-  outline: none;
-  background-color: transparent;
-
-  &:before {
-    font-family: 'Icons';
-    font-size: 1rem;
-    color: #ccc;
-  }
-
-  &:focus:before {
-    color: #aaa;
-  }
-
-  &--projects:before {
-    content: '\EA9D';
-  }
-
-  &--settings:before {
-    content: '\EA49';
-  }
+	width: 50%;
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+	font-size: 0;
+	outline: none;
+	background-color: transparent;
+
+	&:before {
+		font-family: 'Icons';
+		font-size: 1rem;
+		color: #ccc;
+	}
+
+	&:focus:before {
+		color: #aaa;
+	}
+
+	&--projects:before {
+		content: '\EA9D';
+	}
+
+	&--settings:before {
+		content: '\EA49';
+	}
 }
 
 .skz-profile-nav--1 .skz-profile-nav__item:nth-child(1):before,
 .skz-profile-nav--2 .skz-profile-nav__item:nth-child(2):before,
 .skz-profile-nav--3 .skz-profile-nav__item:nth-child(3):before {
-  color: #333;
+	color: #333;
 }
 
 /**
@@ -239,21 +221,21 @@ input[type='radio']:checked + .skz-profile__modal-label:after {
    */
 
 .skz-profile-nav__indicator {
-  position: absolute;
-  width: calc((100% - 1rem) / 2);
-  height: 2px;
-  bottom: -1px;
-  left: 0.5rem;
-  background-color: #ff1721;
-  transition: transform linear 0.2s;
+	position: absolute;
+	width: calc((100% - 1rem) / 2);
+	height: 2px;
+	bottom: -1px;
+	left: 0.5rem;
+	background-color: #ff1721;
+	transition: transform linear 0.2s;
 }
 
 .skz-profile-nav--1 .skz-profile-nav__indicator {
-  transform: translateX(0);
+	transform: translateX(0);
 }
 
 .skz-profile-nav--2 .skz-profile-nav__indicator {
-  transform: translateX(100%);
+	transform: translateX(100%);
 }
 
 /**
@@ -261,79 +243,79 @@ input[type='radio']:checked + .skz-profile__modal-label:after {
    */
 
 .skz-profile-content__item {
-  display: none;
-  padding: 1rem;
-  font-size: 0.8rem;
+	display: none;
+	padding: 1rem;
+	font-size: 0.8rem;
 }
 
 .skz-profile-content--1 .skz-profile-content__item:nth-child(1),
 .skz-profile-content--2 .skz-profile-content__item:nth-child(2),
 .skz-profile-content--3 .skz-profile-content__item:nth-child(3) {
-  display: block;
+	display: block;
 }
 
 .skz-profile-toggle {
-  position: absolute;
-  top: 25%;
-  right: 0;
-  width: 1rem;
-  height: 50%;
-  font-size: 0;
-  z-index: 2;
-  cursor: pointer;
-  border: none;
-  outline: none;
-  background-color: rgba(255, 255, 255, 0.2);
-  transform: translateY(-50%);
-  transition: background-color linear 0.2s;
-
-  &:hover,
-  &:focus {
-    background-color: rgba(255, 255, 255, 0.5);
-  }
+	position: absolute;
+	top: 25%;
+	right: 0;
+	width: 1rem;
+	height: 50%;
+	font-size: 0;
+	z-index: 2;
+	cursor: pointer;
+	border: none;
+	outline: none;
+	background-color: rgba(255, 255, 255, 0.2);
+	transform: translateY(-50%);
+	transition: background-color linear 0.2s;
+
+	&:hover,
+	&:focus {
+		background-color: rgba(255, 255, 255, 0.5);
+	}
 }
 
 .skz-sidebar--hidden .skz-profile-toggle:before {
-  transform: rotateZ(180deg);
+	transform: rotateZ(180deg);
 }
 
 .skz-sidebar--hidden .skz-profile:after {
-  content: '';
-  position: absolute;
-  z-index: 2;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: #eee;
-  animation: fadeIn 0.3s;
+	content: '';
+	position: absolute;
+	z-index: 2;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background-color: #eee;
+	animation: fadeIn 0.3s;
 }
 
 @media (prefers-color-scheme: dark) {
-  .skz-profile-name {
-    color: #ccc;
-  }
-
-  .skz-avatar__image {
-    border-color: #555;
-    background-color: #333;
-  }
-
-  .skz-profile-nav {
-    border-bottom-color: #333;
-  }
-
-  .skz-profile-nav__item:before {
-    color: #111;
-  }
-
-  .skz-profile-nav--1 .skz-profile-nav__item:nth-child(1):before,
-  .skz-profile-nav--2 .skz-profile-nav__item:nth-child(2):before,
-  .skz-profile-nav--3 .skz-profile-nav__item:nth-child(3):before {
-    color: #ccc;
-  }
-
-  .skz-profile-content__item {
-    color: #ccc;
-  }
+	.skz-profile-name {
+		color: #ccc;
+	}
+
+	.skz-avatar__image {
+		border-color: #555;
+		background-color: #333;
+	}
+
+	.skz-profile-nav {
+		border-bottom-color: #333;
+	}
+
+	.skz-profile-nav__item:before {
+		color: #111;
+	}
+
+	.skz-profile-nav--1 .skz-profile-nav__item:nth-child(1):before,
+	.skz-profile-nav--2 .skz-profile-nav__item:nth-child(2):before,
+	.skz-profile-nav--3 .skz-profile-nav__item:nth-child(3):before {
+		color: #ccc;
+	}
+
+	.skz-profile-content__item {
+		color: #ccc;
+	}
 }
diff --git a/src/components/Settings/Settings.scss b/src/components/Settings/Settings.scss
index 652cec8..d3faf58 100644
--- a/src/components/Settings/Settings.scss
+++ b/src/components/Settings/Settings.scss
@@ -3,355 +3,337 @@
  */
 
 .skz-settings {
-  position: relative;
-  overflow: hidden;
-  height: calc(100vh - 250px);
+	position: relative;
+	overflow: hidden;
+	height: calc(100vh - 250px);
 }
 
 .skz-settings-version {
-  position: relative;
-  display: block;
-  width: 100%;
-  background-color: transparent;
-  cursor: pointer;
-  padding-top: 0.8rem;
-  text-align: center;
-  padding-bottom: 0.8rem;
-  font-size: 0.7rem;
-  color: #888;
+	position: relative;
+	display: block;
+	width: 100%;
+	background-color: transparent;
+	cursor: pointer;
+	padding-top: 0.8rem;
+	text-align: center;
+	padding-bottom: 0.8rem;
+	font-size: 0.7rem;
+	color: #888;
 }
 
 .skz-settings-logout {
-  position: absolute;
-  bottom: 0;
-  display: block;
-  width: 100%;
-  color: #333;
-  text-align: center;
-  cursor: pointer;
-  font-size: 0.8rem;
-  border-radius: 4px;
-  padding: 1rem;
-  background-color: #f5f5f5;
-  transition: background-color linear 0.2s;
-
-  &:hover {
-    background-color: #eee;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    color: #ccc;
-    background-color: #555;
-
-    &:hover {
-      background-color: #666;
-    }
-  }
+	position: absolute;
+	bottom: 0;
+	display: block;
+	width: 100%;
+	color: #333;
+	text-align: center;
+	cursor: pointer;
+	font-size: 0.8rem;
+	border-radius: 4px;
+	padding: 1rem;
+	background-color: #f5f5f5;
+	transition: background-color linear 0.2s;
+
+	&:hover {
+		background-color: #eee;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		color: #ccc;
+		background-color: #555;
+
+		&:hover {
+			background-color: #666;
+		}
+	}
 }
 
 .skz-settings-button {
-  position: relative;
-  display: block;
-  width: 100%;
-  background-color: transparent;
-  cursor: pointer;
-  text-align: left;
-  font-size: 0.8rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-
-  &::after {
-    font-family: 'Icons';
-    position: absolute;
-    content: '\EA12';
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    color: #ccc;
-  }
+	position: relative;
+	display: block;
+	width: 100%;
+	background-color: transparent;
+	cursor: pointer;
+	text-align: left;
+	font-size: 0.8rem;
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+
+	&::after {
+		font-family: 'Icons';
+		position: absolute;
+		content: '\EA12';
+		top: 50%;
+		right: 0;
+		transform: translateY(-50%);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		color: #ccc;
+	}
 }
 
 .skz-settings-back {
-  display: block;
-  background-color: transparent;
-  cursor: pointer;
-  font-size: 0.8rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-right: 0.2rem;
-  margin-bottom: 0.8rem;
-
-  &::before {
-    font-family: 'Icons';
-    content: '\EA11';
-    top: 50%;
-    left: 0;
-    margin-right: 0.25rem;
-    transform: translateY(-50%);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    color: #ccc;
-  }
+	display: block;
+	background-color: transparent;
+	cursor: pointer;
+	font-size: 0.8rem;
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+	padding-right: 0.2rem;
+	margin-bottom: 0.8rem;
+
+	&::before {
+		font-family: 'Icons';
+		content: '\EA11';
+		top: 50%;
+		left: 0;
+		margin-right: 0.25rem;
+		transform: translateY(-50%);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		color: #ccc;
+	}
 }
 
 .skz-settings-field {
-  margin-left: -0.5rem;
-  margin-right: -0.5rem;
-  padding: 1rem 0.5rem;
+	margin-left: -0.5rem;
+	margin-right: -0.5rem;
+	padding: 1rem 0.5rem;
 }
 
 .slidable {
-  background-color: white;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-  padding-top: 0;
-  transition: transform linear 0.2s;
-
-  &--open {
-    transform: translateX(100%);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    background-color: #444;
-  }
+	background-color: white;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 100%;
+	padding-top: 0;
+	transition: transform linear 0.2s;
+
+	&--open {
+		transform: translateX(100%);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		background-color: #444;
+	}
 }
 
 .skz-settings-field:first-child {
-  margin-top: -1rem;
+	margin-top: -1rem;
 }
 
 .skz-settings-fields:not(:first-child) {
-  border-top: 1px solid #eee;
+	border-top: 1px solid #eee;
 }
 
 .skz-settings-field label {
-  display: block;
-  margin-bottom: 1rem;
-  font-weight: bold;
-  font-size: 1rem;
+	display: block;
+	margin-bottom: 1rem;
+	font-weight: bold;
+	font-size: 1rem;
 }
 
 .skz-refresh-delay {
-  display: block;
-  width: 100%;
-  height: 1rem;
-  -webkit-appearance: none;
-  margin-bottom: 0.5rem;
-  background-color: transparent;
-
-  &::-webkit-slider-runnable-track {
-    height: 1px;
-    border: 0;
-    background-color: #ccc;
-  }
-
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    display: block;
-    width: 1rem;
-    height: 1rem;
-    background-color: #3032c1;
-    border-radius: 50%;
-    transform: translateY(-50%);
-  }
+	display: block;
+	width: 100%;
+	height: 1rem;
+	-webkit-appearance: none;
+	margin-bottom: 0.5rem;
+	background-color: transparent;
+
+	&::-webkit-slider-runnable-track {
+		height: 1px;
+		border: 0;
+		background-color: #ccc;
+	}
+
+	&::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		display: block;
+		width: 1rem;
+		height: 1rem;
+		background-color: #3032c1;
+		border-radius: 50%;
+		transform: translateY(-50%);
+	}
 }
 
 .skz-refresh-button {
-  border: 0;
-  background-color: transparent;
-  text-decoration: underline;
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: none;
-  }
+	border: 0;
+	background-color: transparent;
+	text-decoration: underline;
+	cursor: pointer;
+
+	&:hover {
+		text-decoration: none;
+	}
 }
 
 .skz-settings-switchs {
-  display: flex;
-  align-items: center;
-
-  span {
-    width: 75%;
-    margin-right: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  input {
-    display: none;
-  }
+	display: flex;
+	align-items: center;
+
+	span {
+		width: 75%;
+		margin-right: 1rem;
+		margin-bottom: 1rem;
+	}
+
+	input {
+		display: none;
+	}
 }
 
 .skz-settings-switch:disabled + .skz-settings-switch-label {
-  background-color: #c91432;
+	background-color: #c91432;
 }
 
 .skz-settings-switch-label {
-  position: relative;
-  display: block;
-  background-color: #e5e5e5;
-  width: 40px;
-  height: 20px;
-  border-radius: 20px;
-  border: 3px solid #eee;
-  transition: background-color linear 0.1s;
+	position: relative;
+	display: block;
+	background-color: #e5e5e5;
+	width: 40px;
+	height: 20px;
+	border-radius: 20px;
+	border: 3px solid #eee;
+	transition: background-color linear 0.1s;
 }
 
 .skz-settings-switch {
-  &:checked {
-    + label {
-      background-color: #1cc54e;
-    }
-
-    + label:before {
-      transform: translateY(-50%) translateX(100%);
-    }
-  }
-
-  + label:before {
-    position: absolute;
-    content: '';
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background-color: #ffffff;
-    transition: transform linear 0.1s;
-  }
+	&:checked {
+		+ label {
+			background-color: #1cc54e;
+		}
+
+		+ label:before {
+			transform: translateY(-50%) translateX(100%);
+		}
+	}
+
+	+ label:before {
+		position: absolute;
+		content: '';
+		top: 50%;
+		left: 0;
+		transform: translateY(-50%);
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		background-color: #ffffff;
+		transition: transform linear 0.1s;
+	}
 }
 
 .skz-organizations__intro {
-  margin-bottom: 1rem;
+	margin-bottom: 1rem;
 }
 
 .skz-organizations__list {
-  list-style: none;
-
-  li {
-    position: relative;
-    margin-bottom: 0.5rem;
-    padding-left: 1.5rem;
-  }
-
-  [type='checkbox'] {
-    position: absolute;
-    left: 0;
-    top: 0;
-    visibility: hidden;
-
-    &:disabled,
-    &:disabled + label {
-      opacity: 0.5;
-    }
-
-    &:before {
-      visibility: visible;
-      content: '';
-      display: block;
-      width: 1rem;
-      height: 1rem;
-      border: 1px solid #ccc;
-    }
-
-    &:after {
-      visibility: visible;
-      content: '\EABA';
-      position: absolute;
-      left: 0.1rem;
-      top: 0.1rem;
-      width: 1rem;
-      height: 1rem;
-      font-family: 'Icons';
-      transform: scale(0);
-      transition: transform linear 0.1s;
-
-      @media (prefers-color-scheme: dark) {
-        color: #ccc;
-      }
-    }
-
-    &:checked:after {
-      transform: scale(1);
-    }
-  }
+	list-style: none;
+
+	li {
+		position: relative;
+		margin-bottom: 0.5rem;
+		padding-left: 1.5rem;
+	}
+
+	[type='checkbox'] {
+		position: absolute;
+		left: 0;
+		top: 0;
+		visibility: hidden;
+
+		&:disabled,
+		&:disabled + label {
+			opacity: 0.5;
+		}
+
+		&:before {
+			visibility: visible;
+			content: '';
+			display: block;
+			width: 1rem;
+			height: 1rem;
+			border: 1px solid #ccc;
+		}
+
+		&:after {
+			visibility: visible;
+			content: '\EABA';
+			position: absolute;
+			left: 0.1rem;
+			top: 0.1rem;
+			width: 1rem;
+			height: 1rem;
+			font-family: 'Icons';
+			transform: scale(0);
+			transition: transform linear 0.1s;
+
+			@media (prefers-color-scheme: dark) {
+				color: #ccc;
+			}
+		}
+
+		&:checked:after {
+			transform: scale(1);
+		}
+	}
 }
 
 .skz-themes {
-  list-style: none;
+	list-style: none;
 }
 
 .skz-theme {
-  position: relative;
-  &:not(:last-child) {
-    margin-bottom: 1rem;
-  }
-
-  [type='radio'] {
-    display: none;
-  }
-
-  [type='radio']:checked + &__gradient {
-    &:before {
-      content: '\EAB9';
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      font-size: 1.5rem;
-      font-family: 'Icons';
-      transform: translateX(-50%) translateY(-50%);
-    }
-  }
-
-  &__gradient {
-    cursor: pointer;
-    display: block;
-    width: 100%;
-    height: 4rem;
-    font-size: 0;
-    border-radius: 4px;
-    transition: opacity linear 0.2s;
-
-    &:hover {
-      opacity: 0.8;
-    }
-
-    &--1 {
-      background: linear-gradient(
-        135deg,
-        rgba(2, 113, 128, 1) 0%,
-        rgba(2, 113, 128, 1) 24%,
-        rgba(0, 173, 198, 1) 77%,
-        rgba(0, 173, 198, 1) 100%
-      );
-    }
-
-    &--2 {
-      background: linear-gradient(
-        135deg,
-        rgba(128, 63, 2, 1) 0%,
-        rgba(128, 63, 2, 1) 24%,
-        rgba(198, 113, 0, 1) 77%,
-        rgba(198, 113, 0, 1) 100%
-      );
-    }
-
-    &--3 {
-      background: linear-gradient(
-        135deg,
-        rgba(78, 1, 65, 1) 0%,
-        rgb(107, 1, 89) 24%,
-        rgb(148, 0, 123) 77%,
-        rgb(209, 1, 174) 100%
-      );
-    }
-  }
+	position: relative;
+	&:not(:last-child) {
+		margin-bottom: 1rem;
+	}
+
+	[type='radio'] {
+		display: none;
+	}
+
+	[type='radio']:checked + &__gradient {
+		&:before {
+			content: '\EAB9';
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			font-size: 1.5rem;
+			font-family: 'Icons';
+			transform: translateX(-50%) translateY(-50%);
+		}
+	}
+
+	&__gradient {
+		cursor: pointer;
+		display: block;
+		width: 100%;
+		height: 4rem;
+		font-size: 0;
+		border-radius: 4px;
+		transition: opacity linear 0.2s;
+
+		&:hover {
+			opacity: 0.8;
+		}
+
+		&--1 {
+			background: linear-gradient(135deg, #48c6ef, #6f86d6);
+		}
+
+		&--2 {
+			background: linear-gradient(135deg, #fc7864, #fda366);
+		}
+
+		&--3 {
+			background: linear-gradient(135deg, #667eea, #764ba2);
+		}
+	}
 }
diff --git a/src/components/Tag/Tag.scss b/src/components/Tag/Tag.scss
index 2ebc5a5..c9ee737 100644
--- a/src/components/Tag/Tag.scss
+++ b/src/components/Tag/Tag.scss
@@ -1,43 +1,46 @@
 .skz-tag {
-  position: relative;
-  margin-bottom: 1rem;
-  margin-right: 0.5rem;
+	position: relative;
+	margin-bottom: 1rem;
+	margin-right: 0.5rem;
 
-  &__labels {
-    position: relative;
-    font-size: 0.8rem;
-    border-radius: 0.5rem;
-    padding: 0.5rem;
-    background-color: #ddd;
-    color: #333;
-    font-weight: bold;
+	&__labels {
+		cursor: pointer;
+		font-size: 0.8rem;
+		border-radius: 0.5rem;
+		padding: 0.7rem;
+		background-color: #ddd;
+		color: #333;
+		font-weight: bold;
+		display: block;
+		width: 100px;
+		text-align: center;
 
-    &:hover {
-      background-color: #f5f5f5;
-    }
-  }
+		&:hover {
+			background-color: rgb(194, 194, 194);
+		}
+	}
 
-  &--selected &__labels {
-    background-color: #f07662;
-    color: #fff;
+	&--selected &__labels {
+		background-color: #f07662;
+		color: #fff;
 
-    &:hover {
-      background-color: #864338;
-    }
-  }
+		&:hover {
+			background-color: #e66f5d;
+		}
+	}
 
-  &__check {
-    display: none;
-  }
+	&__check {
+		display: none;
+	}
 
-  @media (prefers-color-scheme: dark) {
-    &__labels {
-      background-color: #777;
-      color: #fff;
+	@media (prefers-color-scheme: dark) {
+		&__labels {
+			background-color: #777;
+			color: #fff;
 
-      &:hover {
-        background-color: #555;
-      }
-    }
-  }
+			&:hover {
+				background-color: #555;
+			}
+		}
+	}
 }

From e2b863d0ff2bf149bf75cbf991a6e3597f183bac Mon Sep 17 00:00:00 2001
From: DE BAERDEMAEKER Mathieu <mathieu.debaerdemaeker@axa.fr>
Date: Tue, 9 Jun 2020 17:33:28 +0200
Subject: [PATCH 2/4] feature(Header): change header bar for adapt it with the
 current environnement

---
 src/components/Header/MacosBar.scss     | 55 +++++++++++++++++++++++++
 src/components/Header/MacosBar.svelte   | 25 +++++++++++
 src/components/Header/WindowsBar.scss   | 45 ++++++++++++++++++++
 src/components/Header/WindowsBar.svelte | 25 +++++++++++
 4 files changed, 150 insertions(+)
 create mode 100644 src/components/Header/MacosBar.scss
 create mode 100644 src/components/Header/MacosBar.svelte
 create mode 100644 src/components/Header/WindowsBar.scss
 create mode 100644 src/components/Header/WindowsBar.svelte

diff --git a/src/components/Header/MacosBar.scss b/src/components/Header/MacosBar.scss
new file mode 100644
index 0000000..eb4465a
--- /dev/null
+++ b/src/components/Header/MacosBar.scss
@@ -0,0 +1,55 @@
+.window-controls {
+	align-items: center;
+	display: flex;
+	-webkit-app-region: no-drag;
+	justify-content: space-evenly;
+	padding-left: 0.75rem;
+}
+
+.window-controls .button {
+	position: relative;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	margin: 0 0.25rem;
+	transition: 200ms;
+
+	& svg {
+		transition: 200ms;
+		transition-timing-function: ease-in-out;
+		display: none;
+	}
+}
+
+.window-controls:hover svg {
+	display: flex;
+}
+
+.close-button {
+	background-color: #fe6057;
+
+	&:active {
+		background-color: #e9574f;
+	}
+}
+
+.min-button {
+	background-color: #ffbf2b;
+
+	&:active {
+		background-color: #d8a225;
+	}
+}
+
+.restore-button,
+.max-button {
+	background-color: #28cd41;
+
+	&:active {
+		background-color: #22aa36;
+	}
+
+	& svg {
+		transform: rotate(-45deg);
+	}
+}
diff --git a/src/components/Header/MacosBar.svelte b/src/components/Header/MacosBar.svelte
new file mode 100644
index 0000000..20b1c56
--- /dev/null
+++ b/src/components/Header/MacosBar.svelte
@@ -0,0 +1,25 @@
+<script>
+    const { getCurrentWindow } = require('electron').remote;
+
+    export let isMaximized;
+</script>
+
+<style src="./MacosBar.scss"></style>
+
+<div class="window-controls">
+    <button on:click={() => getCurrentWindow().hide()} class="button close-button">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" fill="#000"/></svg>
+    </button>
+    <button on:click={() => getCurrentWindow().minimize()} class="button min-button">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 13H5v-2h14v2z" fill="#000"/></svg>
+    </button>
+    {#if !isMaximized} 
+        <button on:click={() => getCurrentWindow().maximize()} class="button max-button">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.17 12L15 8.83l1.41-1.42L21 12l-4.59 4.58L15 15.17 18.17 12M5.83 12L9 15.17l-1.41 1.42L3 12l4.59-4.58L9 8.83 5.83 12z" fill="#000"/></svg>
+        </button>
+    {:else}
+        <button on:click={() => getCurrentWindow().unmaximize()} class="button restore-button">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.41 7.41L10 12l-4.59 4.59L4 15.17 7.17 12 4 8.83l1.41-1.42m13.18 9.18L14 12l4.59-4.58L20 8.83 16.83 12 20 15.17l-1.41 1.42z" fill="#000"/></svg>
+        </button>
+    {/if}
+</div>
\ No newline at end of file
diff --git a/src/components/Header/WindowsBar.scss b/src/components/Header/WindowsBar.scss
new file mode 100644
index 0000000..71dfbe6
--- /dev/null
+++ b/src/components/Header/WindowsBar.scss
@@ -0,0 +1,45 @@
+.window-controls {
+	align-items: center;
+	display: flex;
+	-webkit-app-region: no-drag;
+	justify-content: space-evenly;
+}
+
+.window-controls .button {
+	position: relative;
+	background-color: transparent;
+	width: 50px;
+	height: 100%;
+	transition: 200ms;
+
+	& path {
+		transition: 200ms;
+		transition-timing-function: ease-in-out;
+	}
+}
+
+.close-button:hover {
+	background-color: red;
+}
+
+.restore-button:hover,
+.max-button:hover,
+.min-button:hover {
+	background-color: #ddd;
+}
+
+.close-button:hover path {
+	fill: white;
+}
+
+@media (prefers-color-scheme: dark) {
+	.button path {
+		fill: white;
+	}
+
+	.restore-button:hover,
+	.max-button:hover,
+	.min-button:hover {
+		background-color: #666;
+	}
+}
diff --git a/src/components/Header/WindowsBar.svelte b/src/components/Header/WindowsBar.svelte
new file mode 100644
index 0000000..54dc995
--- /dev/null
+++ b/src/components/Header/WindowsBar.svelte
@@ -0,0 +1,25 @@
+<script>
+    const { getCurrentWindow } = require('electron').remote;
+
+    export let isMaximized;
+</script>
+
+<style src="./WindowsBar.scss"></style>
+
+<div class="window-controls">
+    <button on:click={() => getCurrentWindow().minimize()} class="button min-button">
+        <svg width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 4.399V5.5H0V4.399h11z" fill="#444"/></svg>
+    </button>
+    {#if !isMaximized} 
+        <button on:click={() => getCurrentWindow().maximize()} class="button max-button">
+            <svg width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 0v11H0V0h11zM9.899 1.101H1.1V9.9h8.8V1.1z" fill="#444"/></svg>
+        </button>
+    {:else}
+        <button on:click={() => getCurrentWindow().unmaximize()} class="button restore-button">
+            <svg width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 8.798H8.798V11H0V2.202h2.202V0H11v8.798zm-3.298-5.5h-6.6v6.6h6.6v-6.6zM9.9 1.1H3.298v1.101h5.5v5.5h1.1v-6.6z" fill="#444"/></svg>
+        </button>
+    {/if}
+    <button on:click={() => getCurrentWindow().hide()} class="button close-button">
+        <svg class="close" width="13" height="13" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z" fill="#444"/></svg>
+    </button>
+</div>
\ No newline at end of file

From 2b7a320c50b1d3becb50159da90d9d5a3856e10c Mon Sep 17 00:00:00 2001
From: DE BAERDEMAEKER Mathieu <mathieu.debaerdemaeker@axa.fr>
Date: Wed, 10 Jun 2020 10:02:14 +0200
Subject: [PATCH 3/4] fix(scss): put the color constant in variable

---
 src/components/Header/MacosBar.scss   | 19 +++++++++++++------
 src/components/Header/WindowsBar.scss | 15 ++++++++++-----
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/Header/MacosBar.scss b/src/components/Header/MacosBar.scss
index eb4465a..8324c2b 100644
--- a/src/components/Header/MacosBar.scss
+++ b/src/components/Header/MacosBar.scss
@@ -1,3 +1,10 @@
+$close-color: #fe6057;
+$close-color-active: #e9574f;
+$min-color: #ffbf2b;
+$min-color-active: #d8a225;
+$max-color: #28cd41;
+$max-color-active: #22aa36;
+
 .window-controls {
 	align-items: center;
 	display: flex;
@@ -26,27 +33,27 @@
 }
 
 .close-button {
-	background-color: #fe6057;
+	background-color: $close-color;
 
 	&:active {
-		background-color: #e9574f;
+		background-color: $close-color-active;
 	}
 }
 
 .min-button {
-	background-color: #ffbf2b;
+	background-color: $min-color;
 
 	&:active {
-		background-color: #d8a225;
+		background-color: $min-color-active;
 	}
 }
 
 .restore-button,
 .max-button {
-	background-color: #28cd41;
+	background-color: $max-color;
 
 	&:active {
-		background-color: #22aa36;
+		background-color: $max-color-active;
 	}
 
 	& svg {
diff --git a/src/components/Header/WindowsBar.scss b/src/components/Header/WindowsBar.scss
index 71dfbe6..3371018 100644
--- a/src/components/Header/WindowsBar.scss
+++ b/src/components/Header/WindowsBar.scss
@@ -1,3 +1,8 @@
+$close-color: #b40d1b;
+$button-hover-light: #ddd;
+$button-hover-dark: #666;
+$svg-fill: #fff;
+
 .window-controls {
 	align-items: center;
 	display: flex;
@@ -19,27 +24,27 @@
 }
 
 .close-button:hover {
-	background-color: red;
+	background-color: $close-color;
 }
 
 .restore-button:hover,
 .max-button:hover,
 .min-button:hover {
-	background-color: #ddd;
+	background-color: $button-hover-light;
 }
 
 .close-button:hover path {
-	fill: white;
+	fill: $svg-fill;
 }
 
 @media (prefers-color-scheme: dark) {
 	.button path {
-		fill: white;
+		fill: $svg-fill;
 	}
 
 	.restore-button:hover,
 	.max-button:hover,
 	.min-button:hover {
-		background-color: #666;
+		background-color: $button-hover-dark;
 	}
 }

From a4d1d979653b9f89f98ceb05ef59a32df28b1eda Mon Sep 17 00:00:00 2001
From: DE BAERDEMAEKER Mathieu <mathieu.debaerdemaeker@axa.fr>
Date: Wed, 10 Jun 2020 10:10:15 +0200
Subject: [PATCH 4/4] fix(build): fix windows version

---
 .github/workflows/build.yml | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 4dd10c8..3ca4273 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -12,7 +12,8 @@ jobs:
   # Platforms to build on/for
   strategy:
    matrix:
-    os: [macos-latest, windows-latest]
+    os: [windows-latest]
+    #os: [macos-latest, windows-latest]
 
   steps:
    - name: Check out Git repository
@@ -23,12 +24,12 @@ jobs:
      with:
       node-version: 12
 
-   - name: Prepare for app notarization (macOS)
-     if: startsWith(matrix.os, 'macos')
-     # Import Apple API key for app notarization on macOS
-     run: |
-      mkdir -p ~/private_keys/
-      echo '${{ secrets.api_key }}' > ~/private_keys/AuthKey_${{ secrets.api_key_id }}.p8
+   #- name: Prepare for app notarization (macOS)
+   #  if: startsWith(matrix.os, 'macos')
+   # Import Apple API key for app notarization on macOS
+   #  run: |
+   #   mkdir -p ~/private_keys/
+   #   echo '${{ secrets.api_key }}' > ~/private_keys/AuthKey_${{ secrets.api_key_id }}.p8
    - name: Build/release Skizzle
      uses: samuelmeuli/action-electron-builder@v1
      with:
@@ -37,13 +38,13 @@ jobs:
       github_token: ${{ secrets.github_token }}
 
       # macOS code signing certificate
-      mac_certs: ${{ secrets.mac_certs }}
-      mac_certs_password: ${{ secrets.mac_certs_password }}
+      #   mac_certs: ${{ secrets.mac_certs }}
+      #   mac_certs_password: ${{ secrets.mac_certs_password }}
 
       # If the commit is tagged with a version (e.g. "v1.0.0"),
       # release the app after building
       release: ${{ startsWith(github.ref, 'refs/tags/v') }}
      env:
       # macOS notarization API key
-      API_KEY_ID: ${{ secrets.api_key_id }}
-      API_KEY_ISSUER_ID: ${{ secrets.api_key_issuer_id }}
+   #   API_KEY_ID: ${{ secrets.api_key_id }}
+   #   API_KEY_ISSUER_ID: ${{ secrets.api_key_issuer_id }}