From 23592cae5cdfe61f742151204a98334fa693569f Mon Sep 17 00:00:00 2001
From: schencej <schencej@clarkson.edu>
Date: Wed, 11 Dec 2019 18:15:48 -0500
Subject: added styling to cook pages

---
 .../src/app/cook-page/cook-page.component.html     | 29 ++++++++++++++--------
 1 file changed, 19 insertions(+), 10 deletions(-)

(limited to 'recipeBuddy/src/app/cook-page/cook-page.component.html')

diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.html b/recipeBuddy/src/app/cook-page/cook-page.component.html
index 4744ed1..0574e5f 100644
--- a/recipeBuddy/src/app/cook-page/cook-page.component.html
+++ b/recipeBuddy/src/app/cook-page/cook-page.component.html
@@ -1,28 +1,37 @@
 <div class="container">
-	Serving {{servingSize}}
+	<div class="title">
+		<h1>{{recipe.name}}</h1>
+		<h4>Serving {{servingSize}}</h4>
+	</div>
+
 	<div class="previous" *ngIf="!firstStep">
-		<h1>Step {{stepNum -1}}</h1>
+		<h3>Step {{stepNum -1}}</h3>
 		<p>{{previousStep}}</p>
 	</div>
 	
 	<div class="current">
-		<h1>Step {{stepNum}}</h1>
+		<h2>Step {{stepNum}}</h2>
 		<p>{{currentStep}}</p>
-		<div *ngIf="hasTimer()">
 
-<h4>{{timeHoursFirst}}{{timeHoursSecond}}:{{timeMinutesFirst}}{{timeMinutesSecond}}:{{timeSecondsFirst}}{{timeSecondsSecond}}</h4>
-			<button (click)="startTimer()">Start Timer</button>
+		<div *ngIf="hasTimer()" style="border: solid; width: 110px; margin:auto">
+			<h4>{{timeHoursFirst}}{{timeHoursSecond}}:{{timeMinutesFirst}}{{timeMinutesSecond}}:{{timeSecondsFirst}}{{timeSecondsSecond}}</h4>
+			<button mat-raised-button style="margin-botton: 20px" (click)="startTimer()">Start Timer</button>
 		</div>
-		<button *ngIf="!firstStep" (click)="previous()">Previous</button>
-		<button *ngIf="!lastStep" (click)="next()">next</button>
+
+		<button mat-flat-button style="margin-right: 5px; margin-top: 20px;" color="primary" *ngIf="!firstStep" (click)="previous()">Previous</button>
+		<button mat-flat-button style="margin-left:5px; margin-top: 20px" color="primary" *ngIf="!lastStep" (click)="next()">next</button>
 	</div>
 	
 	<div class="next" *ngIf="!lastStep">
-		<h1>Step {{stepNum +1}}</h1>
+		<h3>Step {{stepNum +1}}</h3>
 		<p>{{nextStep}}</p>
 	</div>
+
+	<div *ngIf="lastStep" class="last-button">
+		<button mat-flat-button color="primary" routerLink='/'>Done</button>
+	</div>
 </div>
 
 <div class="step-count">
-	<h1>Step: {{stepNum}}/{{steps.length}}</h1>
+	<h2>Step: {{stepNum}}/{{steps.length}}</h2>
 </div>
-- 
cgit v1.1