From 24e67aa17a22a0a2995571d8eda9d92c8b8a4411 Mon Sep 17 00:00:00 2001
From: Michael Lynch <mtlynch@users.noreply.github.com>
Date: Sat, 19 May 2018 12:46:19 -0400
Subject: [PATCH] Adjusting spacing on main page (#20)

---
 src/app/public/home-page/home-page.component.html | 14 ++++++--------
 src/app/public/home-page/home-page.component.scss | 14 +++++++++++++-
 src/styles/_breakpoints.scss                      |  2 +-
 src/styles/styles.scss                            |  2 +-
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/app/public/home-page/home-page.component.html b/src/app/public/home-page/home-page.component.html
index 58eece2..d28c8bb 100644
--- a/src/app/public/home-page/home-page.component.html
+++ b/src/app/public/home-page/home-page.component.html
@@ -1,9 +1,9 @@
-<mat-toolbar>
-  <span>Ingredient Parser Demo</span>
+<mat-toolbar color="primary">
+  <span>Ingredient Parser - Developer Demo</span>
 </mat-toolbar>
 <form>
     <mat-form-field class="input-full-width" floatPlaceholder="never" hideRequiredMarker>
-      <input matInput placeholder="2 cups brown sugar" name="ingredientRaw" [(ngModel)]="ingredientRaw" required>
+      <input matInput placeholder="1 1/2 cups finely chopped red onions" name="ingredientRaw" [(ngModel)]="ingredientRaw" required>
     </mat-form-field>
     <button mat-raised-button color="primary" (click)="parse(ingredientRaw)" [disabled]="isWaitingForParseResult || !ingredientRaw">Parse</button>
     <button mat-raised-button (click)="reset()" [disabled]="!ingredientRaw">Reset</button>
@@ -34,8 +34,6 @@
       <mat-card-subtitle>preparation instructions</mat-card-subtitle>
   </mat-card>
 </div>
-<mat-list role="list" *ngIf="requestsRemaining !== null">
-  <mat-list-item role="listitem">
-    <span class="fieldName">Requests remaining</span>: {{ requestsRemaining }}
-  </mat-list-item>
-</mat-list>  
\ No newline at end of file
+<div *ngIf="requestsRemaining !== null">
+  <span class="fieldName">Requests remaining</span>: {{ requestsRemaining }}
+</div>
\ No newline at end of file
diff --git a/src/app/public/home-page/home-page.component.scss b/src/app/public/home-page/home-page.component.scss
index 122c2f7..0798a96 100644
--- a/src/app/public/home-page/home-page.component.scss
+++ b/src/app/public/home-page/home-page.component.scss
@@ -3,7 +3,11 @@
 mat-toolbar {
   margin-bottom: 10%;
   @include respond-to('small') {
-    margin-bottom: 25%;
+    font-size: 14pt;
+    margin-bottom: 10px;
+  }
+  @include respond-to('x-small') {
+    font-size: 12pt;
   }
 }
 
@@ -30,6 +34,7 @@ div.error {
 }
 
 div.result-cards {
+  padding: 25px 0px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -37,4 +42,11 @@ div.result-cards {
   @include respond-to('medium') {
     flex-direction: column;
   }
+}
+
+mat-card {
+  margin-right: 25px;
+  @include respond-to('medium') {
+    margin-right: 2px;
+  }
 }
\ No newline at end of file
diff --git a/src/styles/_breakpoints.scss b/src/styles/_breakpoints.scss
index 365ba5e..2830230 100644
--- a/src/styles/_breakpoints.scss
+++ b/src/styles/_breakpoints.scss
@@ -1,6 +1,6 @@
 // Screen widths for responsive design breakpoints.
 $breakpoints: (
-  'x-small': 480px,
+  'x-small': 350px,
   'small': 768px,
   'medium': 992px,
   'large': 1200px
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 29631bb..b025a5b 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -1,4 +1,4 @@
-@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
 @import './breakpoints';
 @import './fonts';
 @import './global';