Changing products and updates

Updating:
-Price format
-Product images
-Page colors

src/App.css

@@ -1,9 +1,9 @@
 :root{
-  --mainGrey: #d9d9d9;
+  --mainGrey: #BABBC5 ;
   --LightGrey: #e8e8e8;
   --mainWhite: #f3f3f3;
-  --mainDark: #828282;
-  --mainBlue: #1414ff;
+  --mainDark: #0E1024 ;
+  --mainBlue: #C94343 ;
 }
 
 body{

src/App.js

@@ -18,9 +18,6 @@ function App() {
             <Route path="/details" component={Details} />
             <Route path="/cart" component={Cart} />
             <Route component={Default} />
-
-
-
         </Switch>
         <Modal />
     </React.Fragment>

src/components/Cart/CartTotals.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {Link} from "react-router-dom";
+import NumberFormat from 'react-number-format';
 
 export default function CartTotals({value}) {
     const{cartSubtotal, cartTax, cartTotal, clearCart} = value;
@@ -20,18 +21,41 @@ export default function CartTotals({value}) {
                             <span className="text-title">
                                 subtotal:
                             </span>
-                            <strong>$ {cartSubtotal}</strong>
+                            <NumberFormat
+                                value={cartSubtotal}
+                                displayType={'text'}
+                                thousandSeparator={true}
+                                prefix={'$'}
+                                decimalScale ={2}
+                                fixedDecimalScale ={true}
+                                renderText={cartSubtotal => <strong>{cartSubtotal}</strong>} />
+
                         </h5>
                         <h5>
                             <span className="text-title">
                                 tax:
-                            </span><strong>$ {cartTax}</strong>
+                            </span>
+                            <NumberFormat
+                            value={cartTax}
+                            displayType={'text'}
+                            thousandSeparator={true}
+                            prefix={'$'}
+                            decimalScale ={2}
+                            fixedDecimalScale ={true}
+                            renderText={cartTax => <strong>{cartTax}</strong>} />
                         </h5>
                         <h5>
                             <span className="text-title">
                                 Total:
                             </span>
-                            <strong>$ {cartTotal}</strong>
+                            <NumberFormat
+                                value={cartTotal}
+                                displayType={'text'}
+                                thousandSeparator={true}
+                                prefix={'$'}
+                                decimalScale ={2}
+                                fixedDecimalScale ={true}
+                                renderText={cartTotal => <strong>{cartTotal}</strong>} />
                         </h5>
                     </div>
                 </div>

src/components/Details.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {ProductConsumer} from '../Context'
 import {Link} from "react-router-dom";
 import {ButtonContainer} from "./Button";
+import NumberFormat from 'react-number-format';
 
 export default class Details extends Component {
     render() {
@@ -31,7 +32,19 @@ export default class Details extends Component {
                                         made by: <span className="text-uppercase">
                                         {company}</span>
                                     </h4>
-                                    <h4 className="text-blue"><strong><span>${price}</span></strong></h4>
+
+                                    <h4 className="text-blue">
+                                        <strong>
+                                            <NumberFormat
+                                                value={price}
+                                                displayType={'text'}
+                                                thousandSeparator={true}
+                                                prefix={'$'}
+                                                decimalScale ={2}
+                                                fixedDecimalScale ={true}
+                                                renderText={price => <span>{price}</span>} />{/*<span>${price}</span>*/}
+                                        </strong>
+                                    </h4>
                                     <p className="text-capitalize font-weight-bold mt-3 mb-0"> some info about the product</p>
                                     <p className="text-muted lead">{info}</p>
                                     {/*Buttons*/}

src/components/Modal.js

@@ -5,7 +5,7 @@ import {ButtonContainer} from "./Button";
 import {Link} from "react-router-dom";
 
 
-class Modal extends Component {
+export default class Modal extends Component {
     render() {
         return (
             <ProductConsumer>
@@ -50,8 +50,6 @@ class Modal extends Component {
     }
 }
 
-export default Modal;
-
 const ModalContainer = styled.div`
   position:fixed;
   top:0;

src/components/Product.js

@@ -3,10 +3,12 @@ import styled from 'styled-components';
 import {Link} from 'react-router-dom';
 import {ProductConsumer} from "../Context";
 import PropTypes from 'prop-types';
+import NumberFormat from 'react-number-format';
 
 export default class Product extends Component {
     render() {
-        const {id, title, img, price, inCart} = this.props.product;
+        const {id, title, img, price, inCart, company} = this.props.product;
+        //var NumberFormat = require('react-number-format');
 
         return (
             <ProductWrapper className="col-9 mx-auto col-md-6 col-lg-3 my-3">
@@ -17,7 +19,6 @@ export default class Product extends Component {
                                 className="img-container p-5"
                                 onClick={()=>{
                                     value.handleDetail(id);
-                                    value.openModal(id)
                                 }}>
                             <Link to="/details">
                                 <img src={img} alt="product" className="card-img-top"/>
@@ -27,6 +28,8 @@ export default class Product extends Component {
                                 disabled={inCart ? true : false}
                                 onClick={()=> {
                                 value.addToCart(id);
+                                    value.openModal(id)
+
                                 }
                                 } >
                                 {inCart ? (<p className="text-capitalize mb-0" disabled>In Cart</p>):(<i className="fa fa-cart-plus" />)}
@@ -38,9 +41,21 @@ export default class Product extends Component {
                     <div className="card-footer d-flex justify-content-between">
                         <p className="align-self-center mb-0">
                             {title}
-<h5 className="text-blue font-italic mb-0">
-    <span className="mr-1">${price}</span>
-</h5>
+                            <br/><strong>{company}</strong>
+                            <hr className="py-2 w-auto"></hr>
+                            <h5 className="text-blue font-italic mb-0">
+                                {/*<span>${price}</span>*/}
+
+                                <NumberFormat
+                                    value={price}
+                                    displayType={'text'}
+                                    thousandSeparator={true}
+                                    prefix={'$'}
+                                    decimalScale ={2}
+                                    fixedDecimalScale ={true}
+                                    renderText={price => <span>{price}</span>} />
+
+                            </h5>
                         </p>
                     </div>
                 </div>

src/data.js

@@ -3,96 +3,96 @@
 export const storeProducts = [
   {
     id: 1,
-    title: "Google Pixel - Black",
-    img: "img/product-1.png",
-    price: 10,
-    company: "GOOGLE",
+    title: "Cutthroat Carbon GRX600",
+    img: "img/salsa-salsa-cutthroat-carbon-grx600.jpg",
+    price: 3299.00,
+    company: "SALSA",
     info:
-      "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
+      "Cutthroat is Salsa's Tour Divide-inspired drop bar bike, born on the endless ribbons of mixed surfaces the Great Divide Mountain Bike Route offers.",
     inCart: false,
     count: 0,
     total: 0
   },
   {
     id: 2,
-    title: "Samsung S7",
-    img: "img/product-2.png",
-    price: 16,
-    company: "SAMSUNG",
+    title: "Fargo Apex 1",
+    img: "img/salsa-salsa-fargo-apex-1-now-available.jpg",
+    price: 2199.00,
+    company: "SALSA",
     info:
-      "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
+      "Call for Availability// Fargo is Salsa's drop bar, off-road adventure bike, designed to take you wherever it is you wish to go.",
     inCart: false,
     count: 0,
     total: 0
   },
   {
     id: 3,
-    title: "HTC 10 - Black",
-    img: "img/product-3.png",
-    price: 8,
-    company: "htc",
+    title: "Roubaix Expert UDI2",
+    img: "img/specialized-specialized-roubaix-expert-udi2.jpg",
+    price: 6000.00,
+    company: "Specialized",
     info:
-      "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
+      "With six wins at Paris-Roubaix, our Roubaix has proven that Smoother is Faster. Until this moment, however, smooth has admittedly come with some compromises.",
     inCart: false,
     count: 0,
     total: 0
   },
   {
     id: 4,
-    title: "HTC 10 - White",
-    img: "img/product-4.png",
-    price: 18,
-    company: "htc",
+    title: "S-WORKS VENGE DISC SRAM ETAP",
+    img: "img/specialized-s-works-venge-disc-sram-etap-gloss-met.jpg",
+    price: 12520.00,
+    company: "Specialized",
     info:
-      "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
+      "TOP OF THE LINE ROAD RIDING.",
     inCart: false,
     count: 0,
     total: 0
   },
   {
     id: 5,
-    title: "HTC Desire 626s",
-    img: "img/product-5.png",
-    price: 24,
-    company: "htc",
+    title: "Horsethief Carbon XTR Bike",
+    img: "img/salsa-salsa-horsethief-carbon-xtr-bike-29-carbon-y.jpg",
+    price: 7099.00,
+    company: "SALSA",
     info:
-      "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
+    "Horsethief is one bike for many trails.",
     inCart: false,
     count: 0,
     total: 0
   },
   {
     id: 6,
-    title: "Vintage Iphone",
-    img: "img/product-6.png",
-    price: 17,
-    company: "apple",
+    title: " Rustler Carbon XTR Bike",
+    img: "img/salsa-salsa-rustler-carbon-xtr-bike-275-carbon-ora.jpg",
+    price: 7099.00,
+    company: "SALSA",
     info:
-      "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
+      "Salsa’s playful and dynamic technical trail bike.",
     inCart: false,
     count: 0,
     total: 0
   },
   {
     id: 7,
-    title: "Iphone 7",
-    img: "img/product-7.png",
-    price: 30,
-    company: "apple",
+    title: "Cutthroat GRX 810 1x\n",
+    img: "img/salsa-salsa-cutthroat-grx-810-1x.jpg",
+    price: 4199.00,
+    company: "SALSA",
     info:
-      "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
+      "Cutthroat is Salsa's Tour Divide-inspired drop bar bike, born on the endless ribbons of mixed surfaces the Great Divide Mountain Bike Route offers.",
     inCart: false,
     count: 0,
     total: 0
   },
   {
     id: 8,
-    title: "Smashed Iphone",
-    img: "img/product-8.png",
-    price: 2,
-    company: "apple",
+    title: "Roubaix Sport",
+    img: "img/specialized-specialized-roubaix-sport.jpg",
+    price: 2900.00,
+    company: "Specialized",
     info:
-      "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
+    "With six wins at Paris-Roubaix, our Roubaix has proven that Smoother is Faster. Until this moment, however, smooth has admittedly come with some compromises.",
     inCart: false,
     count: 0,
     total: 0
@@ -101,8 +101,8 @@ export const storeProducts = [
 
 export const detailProduct = {
   id: 1,
-  title: "Google Pixel - Black",
-  img: "img/product-1.png",
+  title: "Specialized Roubaix Sport\n",
+  img: "img/specialized-specialized-roubaix-sport.jpg",
   price: 10,
   company: "google",
   info: