Add material look to Add Recipe form

5 files changed, 75 insertions, 49 deletions

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.css b/recipeBuddy/src/app/add-recipe/add-recipe.component.css
index e69de29..901e02d 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.css
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.css
@@ -0,0 +1,15 @@
+.form {
+	min-width: 150px;
+	max-width: 750px;
+	width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.full-width {
+	width: 100%;
+}
+
+td {
+	padding-right: 8px;
+}
diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index 3a42687..b4f70ce 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -1,70 +1,65 @@
-<form [formGroup]="recipeForm">
-	<label>
-		Name:
-		<input type="text" formControlName="recipeName">
-	</label>
-	<label>
-		Description:
-		<input type="text" formControlName="desc">
-	</label>
-	<label>
-		Servings:
-		<input type="text" formControlName="servingSize">
-	</label>
-	<label>
-		Cooking Time:
-		<input type="text" formControlName="cookTime">
-	</label>
-	<label>
-		Keywords/Tags:
-		<input type="text" formControlName="tags">
-	</label>
-	<label>
-		Photos (URLS):
-		<input type="text" formControlName="photos">
-	</label>
+<form [formGroup]="recipeForm" class="form">
+<h2>Add Recipe</h2>
+	<mat-form-field class="full-width">
+		<input matInput placeholder="Name" type="text" formControlName="recipeName">
+	</mat-form-field>
+	<mat-form-field class="full-width">
+		<textarea matInput placeholder="Description"
+		formControlName="desc"> TEST </textarea>
+	</mat-form-field>
+	<mat-form-field class="full-width">
+		<input matInput placeholder="Servings" type=text formControlName="servingSize">
+	</mat-form-field>
+	<mat-form-field class="full-width">
+		<input matInput placeholder="Cooking Time" type="text" formControlName="cookTime">
+	</mat-form-field>
+	<mat-form-field class="full-width">
+		<input matInput placeholder="Keywords/Tags" type="text" formControlName="tags">
+	</mat-form-field>
+	<mat-form-field class="full-width">
+		<input matInput placeholder="Photos (URLS)" type="text" formControlName="photos">
+	</mat-form-field>
 
 	<div formArrayName="ingredients">
 		<h3>Ingredients</h3>
-		<button (click)="addIngredient()">Add Ingredient</button>
+		<button mat-mini-fab color="primary" (click)="addIngredient()">
+			<mat-icon>add</mat-icon>
+		</button>
 		<div *ngFor="let address of ingredients.controls; let i=index">
 			<div [formGroupName]="i">
 				<h4>Ingredient {{ i + 1 }}</h4>
-				<label>
-					Name:
-					<input type="text"
+				<mat-form-field class="full-width">
+					<input matInput placeholder="Name" type="text"
 					formControlName="ingrName">
-				</label>
-				<label>
-					Amount:
-					<input type="text"
+				</mat-form-field>
+				<mat-form-field class="full-width">
+					<input matInput placeholder="Amount" type="text"
 					formControlName="amount">
-				</label>
-				<label>
-					Name:
-					<input type="text"
+				</mat-form-field>
+				<mat-form-field class="full-width">
+					<input matInput placeholder="Units" type="text"
 					formControlName="units">
-				</label>
+				</mat-form-field>
 			</div>
 		</div>
 	</div>
 
 	<div formArrayName="steps">
 		<h3>Steps</h3>
-		<button (click)="addStep()">Add Step</button>
+		<button mat-mini-fab color="primary" (click)="addStep()">
+			<mat-icon>add</mat-icon>
+		</button>
 		<div *ngFor="let address of steps.controls; let i=index">
 			<div [formGroupName]="i">
 				<h4>Step {{ i + 1 }}</h4>
-				<label>
-					Instructions:
-					<input type="text"
-					formControlName="instruct">
-				</label>
-				<label>
-					Timer:
-					<input type="text"
+				<mat-form-field class="full-width">
+					<textarea matInput placeholder="Instructions" type="text" formControlName="instruct">
+					</textarea>
+				</mat-form-field>
+				<mat-form-field class="full-width">
+					<input matInput placeholder="Timer" type="text"
 					formControlName="timer">
-				</label>
+				</mat-form-field>
 			</div>
 		</div>
 	</div>
diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts
index 4d2ab47..359254e 100644
--- a/recipeBuddy/src/app/app.module.ts
+++ b/recipeBuddy/src/app/app.module.ts
@@ -13,6 +13,12 @@ import { HttpClientModule } from '@angular/common/http';
 import { AddRecipeComponent } from './add-recipe/add-recipe.component';
 
 import { ReactiveFormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
   declarations: [
@@ -26,7 +32,12 @@ import { ReactiveFormsModule } from '@angular/forms';
     AppRoutingModule,
     MatCardModule,
     HttpClientModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    NoopAnimationsModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatButtonModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/recipeBuddy/src/index.html b/recipeBuddy/src/index.html
index 122efbf..29b1c1b 100644
--- a/recipeBuddy/src/index.html
+++ b/recipeBuddy/src/index.html
@@ -6,6 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>
diff --git a/recipeBuddy/src/styles.css b/recipeBuddy/src/styles.css
index 90d4ee0..7e7239a 100644
--- a/recipeBuddy/src/styles.css
+++ b/recipeBuddy/src/styles.css
@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }