Some button styling

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>

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 {
+.togglebtn {
-	color: $inactive;
+	text-align: center;
-}
+	max-width: 10em;
-
+	background-color: $button;
-.elder-player-true {
+	margin: .5em;
-	color: $active;
 }

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>

src/styles.scss

@@ -6,6 +6,7 @@ $accent: #E34234;
 $active: green;
 $inactive: red;
 $warn: orange;
+$button: #2b2b2b;
 
 /* Global vars */
 $header_height: 3em;