From fd1e5f65f7c7a9c41bbe7fca6fcf019843640f31 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Mon, 31 Jul 2017 23:20:50 -0500
Subject: [PATCH] fix(sass-variables): refactor sass sheets to use variables

---
 app/reducers/payment.js                       |  1 +
 app/routes/activity/components/Activity.scss  | 22 ++++----
 .../components/components/Invoices.scss       | 10 ++--
 .../components/components/Payments.js         | 53 +++++++++----------
 .../components/components/Payments.scss       | 17 ++++--
 app/routes/app/components/App.js              |  2 +
 .../app/components/components/Form/Form.js    | 15 ++++--
 .../app/components/components/Form/Form.scss  | 36 +++++++------
 app/routes/app/components/components/Nav.scss | 16 +++---
 app/routes/app/containers/AppContainer.js     |  4 +-
 app/variables.scss                            | 11 +++-
 package-lock.json                             | 25 +++++++--
 package.json                                  |  2 +-
 13 files changed, 134 insertions(+), 80 deletions(-)

diff --git a/app/reducers/payment.js b/app/reducers/payment.js
index 9bdf8d8a..fa2055a9 100644
--- a/app/reducers/payment.js
+++ b/app/reducers/payment.js
@@ -57,6 +57,7 @@ export const fetchPayments = () => async (dispatch) => {
 }
 
 export const payInvoice = (payment_request) => async (dispatch) => {
+  console.log('payment_request: ', payment_request)
   dispatch(sendPayment())
   const payment = await callApi('sendpayment', 'post', { payment_request })
   console.log('payment: ', payment)
diff --git a/app/routes/activity/components/Activity.scss b/app/routes/activity/components/Activity.scss
index 667258ce..8846d58f 100644
--- a/app/routes/activity/components/Activity.scss
+++ b/app/routes/activity/components/Activity.scss
@@ -1,7 +1,9 @@
+@import '../../../variables.scss';
+
 .search {
 	height: 75px;
 	padding: 2px;
-	border-bottom: 1px solid #EBEBEB;
+	border-bottom: 1px solid $darkgrey;
 
 	.input {
 		display: inline-block;
@@ -29,7 +31,7 @@
 }
 
 .activities {
-	background: #F7F7F7;
+	background: $lightgrey;
 
 	.header {
 	  width: 75%;
@@ -39,8 +41,8 @@
 			display: inline-block;
 		  margin: 60px 0 20px 0;
 		  padding: 5px 10px;
-			background: #F7F7F7;
-			color: #999;
+			background: $lightgrey;
+			color: $darkestgrey;
 			text-transform: uppercase;
 			font-size: 14px;
 		  font-weight: 400;
@@ -49,12 +51,12 @@
 		  transition: all 0.5s;
 		  
 		  &:first-child {
-		  	border-right: 1px solid #999;
+		  	border-right: 1px solid $darkestgrey;
 		  }
 
 
 		  &.active {
-				color: #eec27b;
+				color: $main;
 				font-weight: bold;
 		  }
 		}
@@ -62,7 +64,7 @@
 }
 
 .activityContainer {
-	background: #fff;
+	background: $white;
 	padding: 20px 0;
 	
 }
@@ -70,12 +72,12 @@
 .activityList {
 	width: 75%;
 	margin: 0 auto;
-	background: #fff;
+	background: $white;
 }
 
 .activity {
 	padding: 35px 10px;
-	border-bottom: 1px solid #f2f2f2;
+	border-bottom: 1px solid $grey;
 	font-size: 14px;
 
 	.left, .center, .right {
@@ -89,7 +91,7 @@
 
 	.left {
 		width: 80%;
-		color: #000;
+		color: $black;
 	}
 
 	.center {
diff --git a/app/routes/activity/components/components/Invoices.scss b/app/routes/activity/components/components/Invoices.scss
index 9f1ae063..c7aeaaea 100644
--- a/app/routes/activity/components/components/Invoices.scss
+++ b/app/routes/activity/components/components/Invoices.scss
@@ -1,14 +1,16 @@
+@import '../../../../variables.scss';
+
 .invoices {
 	width: 75%;
 	margin: 0 auto;
-	background: #fff;
+	background: $white;
 }
 
 .invoice, .invoiceTitles {
 	display: flex;
 	flex-direction: 'row';
 	padding: 35px 10px;
-	border-bottom: 1px solid #f2f2f2;
+	border-bottom: 1px solid $grey;
 	font-size: 14px;
 
 	.left {
@@ -24,7 +26,7 @@
 	}
 
 	.settled {
-		color: #00c730;
+		color: $main;
 		font-weight: bold;
 	}
 }
@@ -33,7 +35,7 @@
 	border: none;
 
 	.left, .center, .right {
-		color: #000;
+		color: $black;
 		text-transform: uppercase;
 		font-size: 16px;
 		font-weight: bold;
diff --git a/app/routes/activity/components/components/Payments.js b/app/routes/activity/components/components/Payments.js
index a152d5d3..3e7bc8f1 100644
--- a/app/routes/activity/components/components/Payments.js
+++ b/app/routes/activity/components/components/Payments.js
@@ -25,38 +25,37 @@ class Payments extends Component {
           </div>
         </li>
         {
-          payments.map((payment, index) => (
-              <li key={index} className={styles.payment}>
-                <div className={styles.left}>
-                  <div className={styles.path}>{payment.path[0]}</div>
+          payments.map((payment, index) =>
+            <li key={index} className={styles.payment}>
+              <div className={styles.left}>
+                <div className={styles.path}>{payment.path[0]}</div>
+              </div>
+              <div className={styles.center}>
+                <div className={styles.date}>
+                  <Moment format="MMMM Do">{payment.creation_date * 1000}</Moment>
                 </div>
-                <div className={styles.center}>
-                  <div className={styles.date}>
-                    <Moment format="MMMM Do">{payment.creation_date * 1000}</Moment>
-                  </div>
-                </div>
-                <div className={styles.right}>
-                  <span className={styles.fee}>
+              </div>
+              <div className={styles.right}>
+                <span className={styles.fee}>
+                {
+                  ticker.currency === 'btc' ?
+                    btc.satoshisToBtc(payment.fee)
+                  :
+                    btc.satoshisToUsd(payment.fee, ticker.btcTicker.price_usd) 
+                }
+                </span>
+              </div>
+              <div className={styles.right}>
+                <span className={styles.value}>
                   {
                     ticker.currency === 'btc' ?
-                      btc.satoshisToBtc(payment.fee)
+                      btc.satoshisToBtc(payment.value)
                     :
-                      btc.satoshisToUsd(payment.fee, ticker.btcTicker.price_usd) 
+                      btc.satoshisToUsd(payment.value, ticker.btcTicker.price_usd) 
                   }
-                  </span>
-                </div>
-                <div className={styles.right}>
-                  <span className={styles.value}>
-                    {
-                      ticker.currency === 'btc' ?
-                        btc.satoshisToBtc(payment.value)
-                      :
-                        btc.satoshisToUsd(payment.value, ticker.btcTicker.price_usd) 
-                    }
-                  </span>
-                </div>
-              </li>
-            )
+                </span>
+              </div>
+            </li>
           )
         }
       </ul>
diff --git a/app/routes/activity/components/components/Payments.scss b/app/routes/activity/components/components/Payments.scss
index debe1bad..d20aa96c 100644
--- a/app/routes/activity/components/components/Payments.scss
+++ b/app/routes/activity/components/components/Payments.scss
@@ -1,14 +1,16 @@
+@import '../../../../variables.scss';
+
 .payments {
 	width: 75%;
 	margin: 0 auto;
-	background: #fff;
+	background: $white;
 }
 
 .payment, .paymentTitles {
 	display: flex;
 	flex-direction: 'row';
 	padding: 35px 10px;
-	border-bottom: 1px solid #f2f2f2;
+	border-bottom: 1px solid $grey;
 	font-size: 14px;
 
 	.left, .center, .right {
@@ -29,9 +31,18 @@
 	border: none;
 
 	.left, .center, .right {
-		color: #000;
+		color: $black;
 		text-transform: uppercase;
 		font-size: 16px;
 		font-weight: bold;
 	}
 }
+
+
+.payment {
+	cursor: pointer;
+
+	&:hover {
+		background: lighten($grey, 5%);
+	}
+}
diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js
index 5fd240d3..ac5e5c2b 100644
--- a/app/routes/app/components/App.js
+++ b/app/routes/app/components/App.js
@@ -26,6 +26,7 @@ class App extends Component {
       setCurrency,
       setForm,
       createInvoice,
+      payInvoice,
       children
     } = this.props
 
@@ -43,6 +44,7 @@ class App extends Component {
           ticker={ticker}
           form={form}
           createInvoice={createInvoice}
+          payInvoice={payInvoice}
         />
         <Nav 
           ticker={ticker}
diff --git a/app/routes/app/components/components/Form/Form.js b/app/routes/app/components/components/Form/Form.js
index 76392c8b..28c71fa8 100644
--- a/app/routes/app/components/components/Form/Form.js
+++ b/app/routes/app/components/components/Form/Form.js
@@ -15,7 +15,8 @@ class Form extends Component {
       ticker: { currency, btcTicker },
       isOpen,
       close,
-      createInvoice
+      createInvoice,
+      payInvoice
     } = this.props
 
     const requestClicked = () => {
@@ -25,6 +26,13 @@ class Form extends Component {
       })
     }
 
+    const payClicked = () => {
+      payInvoice(payment_request)
+      .then(success => {
+        if (success) { close() }
+      })
+    }
+
     return (
       <div className={`${styles.formContainer} ${isOpen ? styles.open : ''}`}>
         <div className={styles.container}>
@@ -47,7 +55,6 @@ class Form extends Component {
                 style={{ width: `${(amount.length * 20) + 10}%`, fontSize: `${190 - (amount.length ** 2)}px` }}
                 value={amount}
                 onChange={(e) => setAmount(e.target.value)}
-                ref={input => input && input.focus()}
               />
             </section>
             {
@@ -75,7 +82,9 @@ class Form extends Component {
             {
               formType === 'pay' ? 
                 <section className={styles.buttonGroup}>
-                  <div className={styles.button}>Pay</div>
+                  <div className={styles.button} onClick={payClicked}>
+                    Pay
+                  </div>
                 </section>
               :
                 <section className={styles.buttonGroup}>
diff --git a/app/routes/app/components/components/Form/Form.scss b/app/routes/app/components/components/Form/Form.scss
index 1c1e21c4..672382da 100644
--- a/app/routes/app/components/components/Form/Form.scss
+++ b/app/routes/app/components/components/Form/Form.scss
@@ -1,10 +1,12 @@
+@import '../../../../../variables.scss';
+
 .formContainer {
 	position: absolute;
 	top: 0;
 	bottom: 0;
 	width: 100%;
 	height: 100vh;
-	background: #fff;
+	background: $white;
 	z-index: 0;
 	opacity: 0;
 	transition: all 0.5s;
@@ -25,19 +27,19 @@
 	position: absolute;
 	top: 0;
 	right: 0;
-	color: #999999;
+	color: $darkestgrey;
 	cursor: pointer;
   padding: 20px;
 	border-radius: 50%;
 
 	&:hover {
-		color: #555459;
-    background: #E8E8E8;
+		color: $bluegrey;
+    background: $darkgrey;
 	}
 
 	&:active {
-		color: #fff;
-		background: #ebb864;
+		color: $white;
+		background: $main;
 	}
 
 	svg {
@@ -56,7 +58,7 @@
 	align-items: center;
 
 	.amountContainer {
-  	color: #ebb864;
+  	color: $main;
   	display: flex;
   	justify-content: center;
     min-height: 120px;
@@ -93,7 +95,7 @@
 		height: auto;
     min-height: 55px;
     margin-bottom: 20px;
-    border: 1px solid #ccc;
+    border: 1px solid $traditionalgrey;
     border-radius: 6px;
     position: relative;
     padding: 0 20px;
@@ -105,7 +107,7 @@
 		label {
 			padding-top: 19px;
     	padding-bottom: 12px;
-    	color: #ccc;
+    	color: $traditionalgrey;
 		}
 
 		input[type=text] {
@@ -124,7 +126,7 @@
 
 		h4 {
 			text-transform: uppercase;
-			color: #000;
+			color: $black;
 			letter-spacing: 2;
 			font-weight: bold;
 			margin-bottom: 20px;
@@ -139,7 +141,7 @@
 		.peer {
 			position: relative;
 			width: 100%;
-			border-top: 1px solid #ccc;
+			border-top: 1px solid $traditionalgrey;
 			border-right: 1px solid transparent;
 			border-bottom: 1px solid transparent;
 			border-left: 1px solid transparent;
@@ -148,9 +150,9 @@
 			transition: all 0.25s;
 
 			&:hover {
-				background: lighten(#ebb864, 20%);
+				background: lighten($main, 20%);
 				border-radius: 6px;
-				border: 1px solid #ebb864;
+				border: 1px solid $main;
 
 				svg {
 					visibility: visible;
@@ -174,7 +176,7 @@
 				position: absolute;
 				top: calc(50% - 8px);
 				right: 5%;
-				color: #000;
+				color: $black;
 			}
 		}
 	}
@@ -193,8 +195,8 @@
 			text-transform: none;
 			font-size: 18px;
 			transition: opacity .2s ease-out;
-			background: #ebb864;
-	    color: #fff;
+			background: $main;
+	    color: $white;
 	    border: none;
 	    font-weight: 500;
 	    padding: 0;
@@ -203,7 +205,7 @@
 	    line-height: 55px;
 
 	    &:first-child {
-	    	border-right: 1px solid lighten(#ebb864, 20%);
+	    	border-right: 1px solid lighten($main, 20%);
 	    }
     }
 	}
diff --git a/app/routes/app/components/components/Nav.scss b/app/routes/app/components/components/Nav.scss
index 07256294..cabe12d3 100644
--- a/app/routes/app/components/components/Nav.scss
+++ b/app/routes/app/components/components/Nav.scss
@@ -1,13 +1,15 @@
+@import '../../../../variables.scss';
+
 .nav {
 	display: inline-block;
 	vertical-align: top;
 	width: 20%;
 	font-size: 24px;
-	background: #1d1d1d;
+	background: $secondary;
 	height: 100vh;
 	position: relative;
 	min-width: 15%;
-	color: #ffffff;
+	color: $white;
 }
 
 .info {
@@ -27,7 +29,7 @@
 	margin: 0 1px;
 
 	&.active {
-		color: #ebb864;
+		color: $main;
 	}
 }
 
@@ -43,7 +45,7 @@
 
 .balance {
 	text-align: right;
- 	color: #ebb864;
+ 	color: $main;
 
  	p {
  		margin: 2px 0;
@@ -74,7 +76,7 @@
 	  cursor: pointer;
 
 	  &:first-child {
-	  	color: #ebb864;
+	  	color: $main;
 	  	opacity: 1.0;
 	  }
 
@@ -104,7 +106,7 @@
 .button {
 	text-align: center;
 	border-radius: 8px;
-	background: #ebb864;
+	background: $main;
 	margin-bottom: 20px;
 	padding: 20px 10px;
 	font-weight: bold;
@@ -113,7 +115,7 @@
 	letter-spacing: .2px;
 
 	&:hover {
-		background: lighten(#ebb864, 5%);
+		background: lighten($main, 5%);
 	}
 }
 
diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js
index 6ab9a2e1..c43b2d9f 100644
--- a/app/routes/app/containers/AppContainer.js
+++ b/app/routes/app/containers/AppContainer.js
@@ -5,6 +5,7 @@ import { fetchBalance } from '../../../reducers/balance'
 import { fetchInfo } from '../../../reducers/info'
 import { setForm } from '../../../reducers/form'
 import { createInvoice } from '../../../reducers/invoice'
+import { payInvoice } from '../../../reducers/payment'
 import { setAmount, setMessage, setPubkey, setPaymentRequest } from '../../../reducers/form'
 
 const mapDispatchToProps = {
@@ -17,7 +18,8 @@ const mapDispatchToProps = {
 	setPubkey,
 	setPaymentRequest,
 	setForm,
-	createInvoice
+	createInvoice,
+	payInvoice
 }
 
 const mapStateToProps = (state) => ({
diff --git a/app/variables.scss b/app/variables.scss
index f29de059..eb92aca3 100644
--- a/app/variables.scss
+++ b/app/variables.scss
@@ -1,4 +1,11 @@
 $white: #fff;
 $black: #000;
-$grey: #1d1d1d;
-$gold: #ebb864;
\ No newline at end of file
+
+$main: #ebb864;
+$secondary: #1d1d1d;
+$grey: #f2f2f2;
+$traditionalgrey: #cccccc;
+$lightgrey: #F7F7F7;
+$darkgrey: #EBEBEB;
+$darkestgrey: #999999;
+$bluegrey: #555459;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 5bb3761a..20f53f20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5392,6 +5392,11 @@
         "clone-regexp": "1.0.0"
       }
     },
+    "exenv": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.0.tgz",
+      "integrity": "sha1-ODXxJ6vwdb/ggtCu1EhAV8eOPIk="
+    },
     "exit-hook": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz",
@@ -9282,11 +9287,6 @@
       "integrity": "sha1-8OgK4DmkvWVLXygfyT8EqRSn/M4=",
       "dev": true
     },
-    "js-search": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/js-search/-/js-search-1.4.2.tgz",
-      "integrity": "sha1-WakeEX1rrbIL8NdkO6dXfVqB1+I="
-    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
@@ -12287,6 +12287,11 @@
         "prop-types": "15.5.10"
       }
     },
+    "react-dom-factories": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-dom-factories/-/react-dom-factories-1.0.0.tgz",
+      "integrity": "sha1-9DwF5QUbME8zJRYY1byFmynka20="
+    },
     "react-hot-loader": {
       "version": "3.0.0-beta.6",
       "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-3.0.0-beta.6.tgz",
@@ -12331,6 +12336,16 @@
       "resolved": "https://registry.npmjs.org/react-inline-svg/-/react-inline-svg-1.1.0.tgz",
       "integrity": "sha1-GWtW9TBA2T0zoNUBMo7zO0InarM="
     },
+    "react-modal": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-2.2.2.tgz",
+      "integrity": "sha512-tdgyEyfbyfzDUj40XtWldAQe7e+yhJDUtVSlsQ9AQCGifzWck6v1XTtIVGViVftOsEA3cBWCZCjF3rq6FPJzMg==",
+      "requires": {
+        "exenv": "1.2.0",
+        "prop-types": "15.5.10",
+        "react-dom-factories": "1.0.0"
+      }
+    },
     "react-moment": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.6.0.tgz",
diff --git a/package.json b/package.json
index 0bcfcc8d..9b0c1e1f 100644
--- a/package.json
+++ b/package.json
@@ -187,7 +187,6 @@
     "electron-debug": "^1.2.0",
     "font-awesome": "^4.7.0",
     "history": "^4.6.3",
-    "js-search": "^1.4.2",
     "moment-timezone": "^0.5.13",
     "react": "^15.6.1",
     "react-addons-css-transition-group": "^15.6.0",
@@ -195,6 +194,7 @@
     "react-hot-loader": "3.0.0-beta.6",
     "react-icons": "^2.2.5",
     "react-inline-svg": "^1.1.0",
+    "react-modal": "^2.2.2",
     "react-moment": "^0.6.0",
     "react-redux": "^5.0.5",
     "react-router": "^4.1.1",