From 745599db46134fa3de300474dfb27635ddc70814 Mon Sep 17 00:00:00 2001
From: Joshua Shoemaker <joshuashoemaker@takethisstudios.com>
Date: Fri, 3 Feb 2017 22:33:55 -0600
Subject: [PATCH] style: added button colors

---
 css/style.css |  24 ++++++++++
 index.html    | 118 +++++++++++++++++++++++++-------------------------
 2 files changed, 83 insertions(+), 59 deletions(-)

diff --git a/css/style.css b/css/style.css
index 35b7755..1ce1792 100644
--- a/css/style.css
+++ b/css/style.css
@@ -27,4 +27,28 @@ button{
 
 #app{
     width: 960px;
+}
+
+.button-yellow{
+    background-color: lightgoldenrodyellow;
+}
+
+.button-brown{
+    background-color: #FFF3E8;
+}
+
+.button-purple{
+    background-color: #F3E8FF;
+}
+
+.button-green{
+    background-color: #E8FFF3;
+}
+
+.button-grey{
+    background-color: #E8FCFF;
+}
+
+.button-blue{
+    background-color: #E8F4FF;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index ec04e27..2aec303 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,7 @@
                     </header>
                 </div>
 
-            <div class="row" style="background-color: rgb(250, 250, 250);">
+            <div class="row" style="background-color: rgb(253, 253, 253);">
 
                 <div id="order" class="three columns">
                     <h5>Order</h5>
@@ -43,28 +43,28 @@
                 <div id="menu" class="seven columns" data-view="drink-builder">
                     <div id="options-menu" class="drink-menu">
                     <h5>Drink Options</h5>
-                        <button class="button-primary" data-name="ICED" data-value="">ICED</button>
+                        <button class="button-blue" data-name="ICED" data-value="">ICED</button>
 
                         <button class="empty-button" data-name="" data-value="">.</button>
 
-                        <button class="button-primary" data-name="CAFFEINE" data-value="DECAF">DECAF</button>
-                        <button class="button-primary" data-name="CAFFEINE" data-value="HALFCAF">1/2 Caf</button>
+                        <button class="button-brown" data-name="CAFFEINE" data-value="DECAF">DECAF</button>
+                        <button class="button-brown" data-name="CAFFEINE" data-value="HALFCAF">1/2 Caf</button>
                         
                         <button class="empty-button" data-name="" data-value="">.</button>
 
                         <button class="empty-button" data-name="" data-value="">.</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
 
-                        <button class="button-primary" data-name="CAFFEINE" data-value="TWOTHIRDS">2/3 Caf</button>
-                        <button class="button-primary" data-name="CAFFEINE" data-value="THREEFOURTHS">3/4 Caf</button>
+                        <button class="button-brown" data-name="CAFFEINE" data-value="TWOTHIRDS">2/3 Caf</button>
+                        <button class="button-brown" data-name="CAFFEINE" data-value="THREEFOURTHS">3/4 Caf</button>
                         
                         <button class="empty-button" data-name="" data-value="">.</button>
                         
-                        <button class="button-primary" data-name="SHOTCOUNT" data-value="SOLO">SOLO</button>
-                        <button class="button-primary" data-name="SHOTCOUNT" data-value="DOPPIO">DOPPIO</button>
-                        <button class="button-primary" data-name="SHOTCOUNT" data-value="TRIPLE">TRIPLE</button>
-                        <button class="button-primary" data-name="SHOTCOUNT" data-value="QUAD">QUAD</button>
-                        <button class="button-primary" data-name="SHOTCOUNT" data-value="MORESHOTS">MORESHOTS</button>
+                        <button class="button-purple" data-name="SHOTCOUNT" data-value="SOLO">SOLO</button>
+                        <button class="button-purple" data-name="SHOTCOUNT" data-value="DOPPIO">DOPPIO</button>
+                        <button class="button-purple" data-name="SHOTCOUNT" data-value="TRIPLE">TRIPLE</button>
+                        <button class="button-purple" data-name="SHOTCOUNT" data-value="QUAD">QUAD</button>
+                        <button class="button-purple" data-name="SHOTCOUNT" data-value="MORESHOTS">MORESHOTS</button>
 
                         <button class="empty-button" data-name="" data-value="">.</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
@@ -73,20 +73,20 @@
                         <button class="empty-button" data-name="" data-value="">.</button>
 
                         
-                        <button class="button-primary" data-name="SIZE" data-value="KIDS">KIDS</button>
-                        <button class="button-primary" data-name="SIZE" data-value="MINI">MINI</button>
+                        <button class="button-yellow" data-name="SIZE" data-value="KIDS">KIDS</button>
+                        <button class="button-yellow" data-name="SIZE" data-value="MINI">MINI</button>
 
                         
                         <button class="empty-button" data-name="" data-value="">.</button>
 
-                        <button class="button-primary" data-name="SHOTTYPE" data-value="RESTRETTO">RESTRETTO</button>
-                        <button class="button-primary" data-name="SHOTTYPE" data-value="LONG">LONG</button>
+                        <button class="button-green" data-name="SHOTTYPE" data-value="RESTRETTO">RESTRETTO</button>
+                        <button class="button-green" data-name="SHOTTYPE" data-value="LONG">LONG</button>
                         
-                        <button class="button-primary" data-name="SIZE" data-value="SHORT">SHORT</button>
-                        <button class="button-primary" data-name="SIZE" data-value="TALL">TALL</button>
-                        <button class="button-primary" data-name="SIZE" data-value="GRANDE">GRANDE</button>
-                        <button class="button-primary" data-name="SIZE" data-value="VENTI">VENTI</button>
-                        <button class="button-primary" data-name="SIZE" data-value="TRENTA">TRENTA</button>
+                        <button class="button-yellow" data-name="SIZE" data-value="SHORT">SHORT</button>
+                        <button class="button-yellow" data-name="SIZE" data-value="TALL">TALL</button>
+                        <button class="button-yellow" data-name="SIZE" data-value="GRANDE">GRANDE</button>
+                        <button class="button-yellow" data-name="SIZE" data-value="VENTI">VENTI</button>
+                        <button class="button-yellow" data-name="SIZE" data-value="TRENTA">TRENTA</button>
                     </div>
                     
                     <div id="brewed-menu" class="drink-menu" style="display: none;">
@@ -97,75 +97,75 @@
                         <button class="empty-button" data-name="" data-value="">.</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
 
-                        <button class="button-primary" data-name="RECIPE" data-value="POUROVERPPR">POUR OVER PPR</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="POUROVERDARK">POUR OVER DARK</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="POUROVERBLOND">POUR OVER BLOND</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="POUROVERDECAF">POUR OVER DECAF</button>
+                        <button class="button-brown" data-name="RECIPE" data-value="POUROVERPPR">POUR OVER PPR</button>
+                        <button class="button-purple" data-name="RECIPE" data-value="POUROVERDARK">POUR OVER DARK</button>
+                        <button class="button-yellow" data-name="RECIPE" data-value="POUROVERBLOND">POUR OVER BLOND</button>
+                        <button class="button-blue" data-name="RECIPE" data-value="POUROVERDECAF">POUR OVER DECAF</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
                         
-                        <button class="button-primary" data-name="RECIPE" data-value="ICEDCOFFEE">ICED COFFEE</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="ICEDCOFFEEWMILK">ICED COFFEE w/ MILK</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="DECAFICEDCOFFEE">DECAF ICED COFFEE</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="DECAFICEDCOFFEEWMILK">DECAF ICED COFFEE w/ MILK</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="ICEDCOFFEEREFILL">ICED COFFEE REFILL</button>
+                        <button class="button-blue" data-name="RECIPE" data-value="ICEDCOFFEE">ICED COFFEE</button>
+                        <button class="button-blue" data-name="RECIPE" data-value="ICEDCOFFEEWMILK">ICED COFFEE w/ MILK</button>
+                        <button class="button-blue" data-name="RECIPE" data-value="DECAFICEDCOFFEE">DECAF ICED COFFEE</button>
+                        <button class="button-blue" data-name="RECIPE" data-value="DECAFICEDCOFFEEWMILK">DECAF ICED COFFEE w/ MILK</button>
+                        <button class="button-blue" data-name="RECIPE" data-value="ICEDCOFFEEREFILL">ICED COFFEE REFILL</button>
                         
-                        <button class="button-primary" data-name="RECIPE" data-value="COLDBREW">COLD BREW</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="COLDBREWWMILK">COLD BREW w/ MILK</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="NITROCOLDBREW">NITRO COLD BREW</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="VSWTCRMCOLDBREW">VSWTCRM COLD BREW</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="COLDBREWREFILL">COLD BREW REFILL</button>
+                        <button class="button-grey" data-name="RECIPE" data-value="COLDBREW">COLD BREW</button>
+                        <button class="button-grey" data-name="RECIPE" data-value="COLDBREWWMILK">COLD BREW w/ MILK</button>
+                        <button class="button-grey" data-name="RECIPE" data-value="NITROCOLDBREW">NITRO COLD BREW</button>
+                        <button class="button-grey" data-name="RECIPE" data-value="VSWTCRMCOLDBREW">VSWTCRM COLD BREW</button>
+                        <button class="button-grey" data-name="RECIPE" data-value="COLDBREWREFILL">COLD BREW REFILL</button>
 
                         
-                        <button class="button-primary" data-name="RECIPE" data-value="CAFEMISTO">CAFE MISTO</button>
+                        <button class="button-brown" data-name="RECIPE" data-value="CAFEMISTO">CAFE MISTO</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="POUROVERPPR">SPCDSWTCRM COLD BREW</button>
+                        <button class="button-grey" data-name="RECIPE" data-value="POUROVERPPR">SPCDSWTCRM COLD BREW</button>
                         
-                        <button class="button-primary" data-name="RECIPE" data-value="PIKE">PIKE PLACE ROAST</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="DARK">DARK ROAST</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="BLOND">BLOND ROAST</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="DECAFPIKE">DECAF PIKE PLACE ROAST</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="HOTCOFFEEREFILL">HOT COFFEE REFILL</button>
+                        <button class="button-brown" data-name="RECIPE" data-value="PIKE">PIKE PLACE ROAST</button>
+                        <button class="button-purple" data-name="RECIPE" data-value="DARK">DARK ROAST</button>
+                        <button class="button-yellow" data-name="RECIPE" data-value="BLOND">BLOND ROAST</button>
+                        <button class="button-blue" data-name="RECIPE" data-value="DECAFPIKE">DECAF PIKE PLACE ROAST</button>
+                        <button class="button-brown" data-name="RECIPE" data-value="HOTCOFFEEREFILL">HOT COFFEE REFILL</button>
 
                     </div>
                     
                     <div id="espresso-menu" class="drink-menu" style="display: none;">
                         <h5>Espresso</h5>
-                        <button class="button-primary" data-name="RECIPE" data-value="AMERICANO">AMERICANO</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="ESPRESSO">ESPRESSO</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="ESPRESSOMACCHIATO">ESPRESSO MACCHIATO</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="ESPRESSOCONPANNA">ESPRESSO CON PANNA</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="DOUBLESHOT">STRBUX DOUBLESHOT ON ICE</button>
+                        <button class="button-purple" data-name="RECIPE" data-value="AMERICANO">AMERICANO</button>
+                        <button class="button-purple" data-name="RECIPE" data-value="ESPRESSO">ESPRESSO</button>
+                        <button class="button-purple" data-name="RECIPE" data-value="ESPRESSOMACCHIATO">ESPRESSO MACCHIATO</button>
+                        <button class="button-purple" data-name="RECIPE" data-value="ESPRESSOCONPANNA">ESPRESSO CON PANNA</button>
+                        <button class="button-purple" data-name="RECIPE" data-value="DOUBLESHOT">STRBUX DOUBLESHOT ON ICE</button>
 
-                        <button class="button-primary" data-name="RECIPE" data-value="LATTE">LATTE</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="CINNDOLLATTE">CINN DOLCE LATTE</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="CAPPUCCINO">CAPPUCCINO</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="FLATWHITE">FLATWHITE</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="LATTEMACCHIATO">LATTE MACCHIATO</button>
+                        <button class="button-yellow" data-name="RECIPE" data-value="LATTE">LATTE</button>
+                        <button class="button-yellow" data-name="RECIPE" data-value="CINNDOLLATTE">CINN DOLCE LATTE</button>
+                        <button class="button-brown" data-name="RECIPE" data-value="CAPPUCCINO">CAPPUCCINO</button>
+                        <button class="button-grey" data-name="RECIPE" data-value="FLATWHITE">FLATWHITE</button>
+                        <button class="button-grey" data-name="RECIPE" data-value="LATTEMACCHIATO">LATTE MACCHIATO</button>
 
-                        <button class="button-primary" data-name="RECIPE" data-value="SKINNYLATTE">SKINNY LATTE</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="SKINNYCINNDOLLATTE">SKINNY CINN DOLCE LATTE</button>
+                        <button class="button-yellow" data-name="RECIPE" data-value="SKINNYLATTE">SKINNY LATTE</button>
+                        <button class="button-yellow" data-name="RECIPE" data-value="SKINNYCINNDOLLATTE">SKINNY CINN DOLCE LATTE</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
                         
-                        <button class="button-primary" data-name="RECIPE" data-value="CARAMELMACCHIATO">CARAMEL MACCHIATO</button>
+                        <button class="button-purple" data-name="RECIPE" data-value="CARAMELMACCHIATO">CARAMEL MACCHIATO</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
                         
-                        <button class="button-primary" data-name="RECIPE" data-value="SKINNYCARAMELMACCHIATO">SKINNY CARAMEL MAC</button>
+                        <button class="button-purple" data-name="RECIPE" data-value="SKINNYCARAMELMACCHIATO">SKINNY CARAMEL MAC</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
 
-                        <button class="button-primary" data-name="RECIPE" data-value="MOCHA">MOCHA</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="SKINNYMOCHA">SKINNY MOCHA</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="WHITEMOCHA">WHITE MOCHA</button>
-                        <button class="button-primary" data-name="RECIPE" data-value="PSL">PUMKIN SPICE LATTE</button>
+                        <button class="button-brown" data-name="RECIPE" data-value="MOCHA">MOCHA</button>
+                        <button class="button-brown" data-name="RECIPE" data-value="SKINNYMOCHA">SKINNY MOCHA</button>
+                        <button class="button-brown" data-name="RECIPE" data-value="WHITEMOCHA">WHITE MOCHA</button>
+                        <button class="button-yellow" data-name="RECIPE" data-value="PSL">PUMKIN SPICE LATTE</button>
                         <button class="button-default" data-name="" data-value="">SESN/RSRV OPTIONS</button>
                         
                         <button class="button-default" data-name="" data-value="">SEASONAL LATTE</button>