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

8 years ago · fd1e5f65f7
13 changed files with 134 additions and 80 deletions
--- 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)
--- 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 {
--- 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;
--- 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>
--- 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%);
+	}
+}
--- 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}
--- 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}>
--- 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%);
 	    }
    }
 	}
--- 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%);
 	}
 }

--- 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) => ({
--- a/app/variables.scss
+++ b/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;
--- 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",
--- 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",