fix(sass-variables): refactor sass sheets to use variables

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)

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;
+			background: $lightgrey;
-			color: #999;
+			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 {

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;

app/routes/activity/components/components/Payments.js

@@ -25,7 +25,7 @@ class Payments extends Component {
           </div>
         </li>
         {
-          payments.map((payment, index) => (
+          payments.map((payment, index) =>
             <li key={index} className={styles.payment}>
               <div className={styles.left}>
                 <div className={styles.path}>{payment.path[0]}</div>
@@ -57,7 +57,6 @@ class Payments extends Component {
               </div>
             </li>
           )
-          )
         }
       </ul>
 		)

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%);
+	}
+}

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}

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}>

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;
+		color: $bluegrey;
-    background: #E8E8E8;
+    background: $darkgrey;
 	}
 
 	&:active {
-		color: #fff;
+		color: $white;
-		background: #ebb864;
+		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;
+			background: $main;
-	    color: #fff;
+	    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%);
 	    }
     }
 	}

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%);
 	}
 }
 

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) => ({

app/variables.scss

@@ -1,4 +1,11 @@
 $white: #fff;
 $black: #000;
-$grey: #1d1d1d;
+
-$gold: #ebb864;
+$main: #ebb864;
+$secondary: #1d1d1d;
+$grey: #f2f2f2;
+$traditionalgrey: #cccccc;
+$lightgrey: #F7F7F7;
+$darkgrey: #EBEBEB;
+$darkestgrey: #999999;
+$bluegrey: #555459;

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",

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",