start with button

Author: Joe Seifi

01-react-css3/solution/components/AddToCartButton.js renamed to 01-react-css3/solution/components/ButtonAddToCart.js

@@ -1,9 +1,9 @@
 import React, { Component, PropTypes } from 'react'
 import { Button } from './index'
 import '../../../public/workshop/css/button-icons.css'
-import '../../../public/workshop/css/add-to-cart-button.css'
+import '../../../public/workshop/css/button-add-to-cart.css'
 
-export class AddToCartButton extends Component {
+export class ButtonAddToCart extends Component {
 
   state = {
     depressed: false,
@@ -29,7 +29,7 @@ export class AddToCartButton extends Component {
 
     return (
       <Button 
-        classNames="icon icon-add add_to_cart_button"
+        classNames="icon icon-add button_add_to_cart"
         depressed={ depressed }
         disabled={ disabled }
         onClick={ this.onButtonClicked }

01-react-css3/solution/components/BuyNowButton.js renamed to 01-react-css3/solution/components/ButtonBuyNow.js

@@ -1,8 +1,8 @@
 import React, { Component, PropTypes } from 'react'
 import { Button } from './index'
-import '../../../public/workshop/css/buy-now-button.css'
+import '../../../public/workshop/css/button-buy-now.css'
 
-export class BuyNowButton extends Component {
+export class ButtonBuyNow extends Component {
 
   state = {
     depressed: false,
@@ -29,7 +29,7 @@ export class BuyNowButton extends Component {
 
     return (
       <Button 
-        classNames="buy_now_button"
+        classNames="button_buy_now"
         depressed={ depressed }
         disabled={ disabled }
         onClick={ this.onButtonClicked }

01-react-css3/solution/components/BuyStrip.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react'
-import { BuyNowButton } from './index'
+import { ButtonBuyNow } from './index'
 import numeral from 'numeral'
 import '../../../public/workshop/css/buy-strip.css'
 
@@ -23,11 +23,11 @@ export class BuyStrip extends Component {
     ) : (
       <aside className="buy">
         <div className="buy_title">Total:<span className="buy_total">{ formattedPrice }</span></div>
-        <BuyNowButton 
+        <ButtonBuyNow 
           onClick={ this.props.onBuy }
           disabled={ totalPrice === 0 }>
           Buy Now
-        </BuyNowButton>
+        </ButtonBuyNow>
       </aside>
     )
   }

01-react-css3/solution/components/FoodItem.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react'
-import { AddToCartButton } from './index'
+import { ButtonAddToCart } from './index'
 import numeral from 'numeral'
 import '../../../public/workshop/css/food-item.css'
 
@@ -29,7 +29,7 @@ export class FoodItem extends Component {
       <li className="food_item">
         <figure className="food_item_figure"><img className="food_item_image" src={ photoPath } /></figure>
         <div className="food_item_name">{ name }<span className="food_item_price">{ numeral(price).format('$0.00') }</span></div>
-        <AddToCartButton 
+        <ButtonAddToCart 
           onClick={ this.addToCart.bind(this) } 
           disabled={ disabled }
         />

01-react-css3/solution/components/index.js

@@ -1,7 +1,7 @@
 export { Button } from './Button'
 
-export { AddToCartButton } from './AddToCartButton'
-export { BuyNowButton } from './BuyNowButton'
+export { ButtonAddToCart } from './ButtonAddToCart'
+export { ButtonBuyNow } from './ButtonBuyNow'
 
 export { FoodItem } from './FoodItem'
 export { BuyStrip } from './BuyStrip'

public/workshop/css/all.css

@@ -2,8 +2,8 @@
 
 @import url("./button.css");
 @import url("./button-icons.css");
-@import url("./add-to-cart-button.css");
-@import url("./buy-now-button.css");
+@import url("./button-add-to-cart.css");
+@import url("./button-buy-now.css");
 
 @import url("./food.css");
 @import url("./food-item.css");

public/workshop/css/add-to-cart-button.css renamed to public/workshop/css/button-add-to-cart.css

@@ -1,5 +1,5 @@
 /* Custom styling for Add to Cart Button */
 
-.add_to_cart_button {
+.button_add_to_cart {
   min-width: 110px;
 }

public/workshop/css/buy-now-button.css renamed to public/workshop/css/button-buy-now.css

@@ -1,17 +1,17 @@
 /* Custom styling for Buy Now Button */
 
-.buy_now_button {
+.button_buy_now {
   background-color: #fff;
   color: #000;
   box-shadow: 1px -1px 2px rgba(0, 0, 0, .2);
   width: 110px;
 }
 
-.buy_now_button:hover {
+.button_buy_now:hover {
   background-color: #000;
   color: #fff;
 }
 
-.btn.buy_now_button.depressed {
+.btn.button_buy_now.depressed {
   box-shadow: 1px -1px 2px rgba(0, 0, 0, 0);
 }

public/workshop/index.html

@@ -21,28 +21,28 @@ <h1 class="logo"><span>Taco Shack</span></h1>
             <li class="food_item">
               <figure class="food_item_figure"><img class="food_item_image" src="img/steak.jpg" /></figure>
               <div class="food_item_name">Carne Asada<span class="food_item_price">$3.00</span></div>
-              <button class="btn depressed add_to_cart_button">Remove</button>
+              <button class="btn depressed button_add_to_cart">Remove</button>
             </li>
             <li class="food_item">
               <figure class="food_item_figure"><img class="food_item_image" src="img/guacamole.jpg" /></figure>
               <div class="food_item_name">Guacamole<span class="food_item_price">$2.00</span></div>
-              <button class="btn icon icon-add add_to_cart_button">Add</button>
+              <button class="btn icon icon-add button_add_to_cart">Add</button>
             </li>
             <li class="food_item">
               <figure class="food_item_figure"><img class="food_item_image" src="img/fish.jpg" /></figure>
               <div class="food_item_name">Baja Fish<span class="food_item_price">$1.00</span></div>
-              <button class="btn icon icon-add add_to_cart_button">Add</button>
+              <button class="btn icon icon-add button_add_to_cart">Add</button>
             </li>
             <li class="food_item">
               <figure class="food_item_figure"><img class="food_item_image" src="img/chicken.jpg" /></figure>
               <div class="food_item_name">Chicken<span class="food_item_price">$0.50</span></div>
-              <button class="btn icon icon-add add_to_cart_button">Add</button>
+              <button class="btn icon icon-add button_add_to_cart">Add</button>
             </li>
           </ul>
         </div>
       </main>
       <aside class="buy">
-        <div class="buy_title">Total:<span class="buy_total">$10.50</span></div><button class="btn buy_now_button">Buy Now</button>
+        <div class="buy_title">Total:<span class="buy_total">$10.50</span></div><button class="btn button_buy_now">Buy Now</button>
       </aside>
     </section>
     <footer class="footer">