From a9aca1351c7b518f050e955e7616761c57644bd2 Mon Sep 17 00:00:00 2001
From: Patrick Mueller <patrick@mueller-patrick.tech>
Date: Sat, 10 Sep 2022 19:33:55 +0200
Subject: [PATCH] Some button styling

---
 .../components/add-game/add-game.component.html   |  6 +++---
 .../components/add-game/add-game.component.scss   | 15 +++++++--------
 src/app/components/header/header.component.html   |  2 +-
 src/styles.scss                                   |  1 +
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app/components/add-game/add-game.component.html b/src/app/components/add-game/add-game.component.html
index 5ec16b8..0059c44 100644
--- a/src/app/components/add-game/add-game.component.html
+++ b/src/app/components/add-game/add-game.component.html
@@ -4,14 +4,14 @@
 		<!-- The following divs get displayed one after another, kinda wizard-like -->
 		<div id="which-players" class="visible-{{this.currentPage === 0}}">
 			<p>Select the active players for the game:</p>
-			<div class="active-{{isPlayerActive(player)}}" *ngFor="let player of potentialPlayers" (click)="togglePlayer(player)">{{player.firstName}}</div>
+			<div class="togglebtn active-{{isPlayerActive(player)}}" *ngFor="let player of potentialPlayers" (click)="togglePlayer(player)">{{player.firstName}}</div>
 			<p id="player-amount-warn" *ngIf="not4Players()">Illegal amount of players!</p>
 			<button (click)="switchToNextPage()" [disabled]="not4Players()">Next</button>
 		</div>
 		<div id="announcements" class="visible-{{this.currentPage === 1}}">
 			<p>Players: {{getPlayerNamesAsString()}}</p>
 			<p>Select the announcements for this game:</p>
-			<div class="active-{{isAnnouncementActive(announcement)}}" *ngFor="let announcement of getAllPossibleAnnouncements()" (click)="toggleAnnouncement(announcement)">{{announcement.toString()}}</div>
+			<div class="togglebtn active-{{isAnnouncementActive(announcement)}}" *ngFor="let announcement of getAllPossibleAnnouncements()" (click)="toggleAnnouncement(announcement)">{{announcement.toString()}}</div>
 			<p id="announcement-warn" *ngIf="!checkAnnouncementsValid()">Illegal set of announcements!</p>
 			<button (click)="switchToNextPage()" [disabled]="!checkAnnouncementsValid()">Next</button>
 		</div>
@@ -19,7 +19,7 @@
 			<p>Players: {{getPlayerNamesAsString()}}</p>
 			<p>Highest Announcements: {{getHighestAnnouncements()}}</p>
 			<p>Please select the elder(s):</p>
-			<div class="elder-player-{{isPlayerElder(player)}}" *ngFor="let player of actualPlayers" (click)="toggleElderPlayer(player)">{{player.firstName}}</div>
+			<div class="togglebtn elder-player-{{isPlayerElder(player)}}" *ngFor="let player of actualPlayers" (click)="toggleElderPlayer(player)">{{player.firstName}}</div>
 			<p id="team-warn" *ngIf="!checkValidTeamAssignment()">Illegal game teams!</p>
 			<button (click)="switchToNextPage()" [disabled]="!checkValidTeamAssignment()">Next</button>
 		</div>
diff --git a/src/app/components/add-game/add-game.component.scss b/src/app/components/add-game/add-game.component.scss
index 22c8b0a..29d00da 100644
--- a/src/app/components/add-game/add-game.component.scss
+++ b/src/app/components/add-game/add-game.component.scss
@@ -12,11 +12,11 @@
 	color: $text;
 }
 
-.active-true {
+.active-true, .elder-player-true {
 	color: $active;
 }
 
-.active-false {
+.active-false, .elder-player-false {
 	color: $inactive;
 }
 
@@ -32,10 +32,9 @@
 	display: inherit;
 }
 
-.elder-player-false {
-	color: $inactive;
-}
-
-.elder-player-true {
-	color: $active;
+.togglebtn {
+	text-align: center;
+	max-width: 10em;
+	background-color: $button;
+	margin: .5em;
 }
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index e545b5e..2bc64cc 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -1,5 +1,5 @@
 <div id="header">
-	<p id="header-title">Doppelkopf-Stats</p>
+	<p id="header-title" (click)="navigate('/')">Doppelkopf-Stats</p>
 	<span id="menu">
 		<div id="menu-desktop">
 			<div (click)="navigate('/')">Home</div>
diff --git a/src/styles.scss b/src/styles.scss
index f004367..b7e777c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -6,6 +6,7 @@ $accent: #E34234;
 $active: green;
 $inactive: red;
 $warn: orange;
+$button: #2b2b2b;
 
 /* Global vars */
 $header_height: 3em;