summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPatrick O'Doherty <p@trickod.com>2017-12-27 23:26:38 +0000
committerPatrick O'Doherty <p@trickod.com>2017-12-27 23:26:38 +0000
commit2f9a1f3dc2e46223f27ae8401127253d4ebc21b9 (patch)
tree7a4ee33882115d4c0e719d1df988b63836b9a1e2
parent09792530d88b2cc1dc93f8129091a1ace6db1e10 (diff)
Fix formatting issues w/ donation links; fix deprecation warnings
-rw-r--r--src/App.css16
-rw-r--r--src/components/Donate.js4
-rw-r--r--src/components/DonationLinks.js8
-rw-r--r--src/components/Introduction.js8
-rw-r--r--src/components/PayPalButton.js24
-rw-r--r--src/components/RelayInformationTable.js20
6 files changed, 49 insertions, 31 deletions
diff --git a/src/App.css b/src/App.css
index 3966731..add82c6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -31,3 +31,19 @@
font-size: 14px;
}
+.donate {
+ display: flex;
+ flex-direction: row;
+}
+
+.donate .donation-links {
+ flex-grow: 3;
+}
+
+.donate .paypal-button {
+ flex-grow: 1;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-content: center;
+}
diff --git a/src/components/Donate.js b/src/components/Donate.js
index bd2712c..a21a55e 100644
--- a/src/components/Donate.js
+++ b/src/components/Donate.js
@@ -5,9 +5,9 @@ import DonationLinks from './DonationLinks';
class Donate extends Component {
render() {
return (
- <div>
- <PayPalButton />
+ <div className="donate">
<DonationLinks />
+ <PayPalButton />
</div>
)
};
diff --git a/src/components/DonationLinks.js b/src/components/DonationLinks.js
index ff91b05..26ec0fc 100644
--- a/src/components/DonationLinks.js
+++ b/src/components/DonationLinks.js
@@ -4,13 +4,13 @@ class DonationLinks extends Component {
render() {
const amounts = [5, 10, 20, 50, 100];
return (
- <div>
+ <div className="donation-links">
<h4>Pledge a recurring donation:</h4>
<ul id="paypal-recurring">
{amounts.map(amount => {
- return <li>
- <a href={`https://www.paypal.com/subscriptions/business=treasurer%40noisebridge.net&item_name=Noisebridge%20Tor%20Node%20Project&cy_code=USD&no_note=1&no_shipping=1&a3=${amount}&p3=1&t3=M&src=1`}>${amount}/month</a>
- </li>
+ return <li key={amount}>
+ <a href={`https://www.paypal.com/subscriptions/business=treasurer%40noisebridge.net&item_name=Noisebridge%20Tor%20Node%20Project&cy_code=USD&no_note=1&no_shipping=1&a3=${amount}&p3=1&t3=M&src=1`}>${amount}/month</a>
+ </li>
})}
</ul>
</div>
diff --git a/src/components/Introduction.js b/src/components/Introduction.js
index 8a68308..ebf8540 100644
--- a/src/components/Introduction.js
+++ b/src/components/Introduction.js
@@ -5,12 +5,12 @@ import Donate from './Donate';
class Introduction extends Component {
render() {
return (
- <div class="introduction">
- <div class="about">
+ <div className="introduction">
+ <div className="about">
<p>Noisebridge has joined forces with the <a href="https://torproject.org">Tor Project</a> and the <a href="https://eff.org">EFF</a> to let people donate to a US non-profit organization and directly see their donations turn into Tor exit nodes.</p>
- <div class="how">
- <div class="steps">
+ <div className="how">
+ <div className="steps">
<h3>How does it work?</h3>
<ol>
<li>Donate money to Noisebridge using the options below</li>
diff --git a/src/components/PayPalButton.js b/src/components/PayPalButton.js
index f84d845..4727402 100644
--- a/src/components/PayPalButton.js
+++ b/src/components/PayPalButton.js
@@ -3,17 +3,19 @@ import React, { Component } from 'react';
class PayPalButton extends Component {
render() {
return (
- <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
- <input name="cmd" value="_donations" type="hidden"/>
- <input name="business" value="treasurer@noisebridge.net" type="hidden"/>
- <input name="lc" value="US" type="hidden"/>
- <input name="item_name" value="Noisebridge Tor Node Project" type="hidden"/>
- <input name="no_shipping" value="0" type="hidden"/>
- <input name="no_note" value="0" type="hidden"/>
- <input name="currency_code" value="USD" type="hidden" />
- <input name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest" type="hidden" />
- <input src="btn_donateCC_LG.gif" name="submit" alt="Donate using PayPal" type="image" width="147" height="47" />
- </form>
+ <div className="paypal-button">
+ <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
+ <input name="cmd" value="_donations" type="hidden"/>
+ <input name="business" value="treasurer@noisebridge.net" type="hidden"/>
+ <input name="lc" value="US" type="hidden"/>
+ <input name="item_name" value="Noisebridge Tor Node Project" type="hidden"/>
+ <input name="no_shipping" value="0" type="hidden"/>
+ <input name="no_note" value="0" type="hidden"/>
+ <input name="currency_code" value="USD" type="hidden" />
+ <input name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest" type="hidden" />
+ <input src="btn_donateCC_LG.gif" name="submit" alt="Donate using PayPal" type="image" width="147" height="47" />
+ </form>
+ </div>
);
}
}
diff --git a/src/components/RelayInformationTable.js b/src/components/RelayInformationTable.js
index fb0c4e6..92aa26a 100644
--- a/src/components/RelayInformationTable.js
+++ b/src/components/RelayInformationTable.js
@@ -32,7 +32,7 @@ class RelayInformationTable extends Component {
return (
<div>
<h2>Noisetor Relay Stats</h2>
- <table class="relay-information table">
+ <table className="relay-information table">
<thead>
<tr>
<th>Name</th>
@@ -45,16 +45,16 @@ class RelayInformationTable extends Component {
</thead>
<tbody>
{relays.map(relay => (
- <RelayInformationRow relay={relay} />
+ <RelayInformationRow key={relay.nickname} relay={relay} />
))}
- <tr>
- <td></td>
- <td></td>
- <td></td>
- <td><b>Total</b></td>
- <td><b><BandwidthRate rate={totalObservedBandwidth}/></b></td>
- <td><b>{(totalExitProbabilty * 100).toFixed(2)}%</b></td>
- </tr>
+ <tr>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td><b>Total</b></td>
+ <td><b><BandwidthRate rate={totalObservedBandwidth}/></b></td>
+ <td><b>{(totalExitProbabilty * 100).toFixed(2)}%</b></td>
+ </tr>
</tbody>
</table>
</div>