Fixes (#66)

* Update about page

* Update about page styles

* Make file transfer button white

* Center alert banner icon

* Remove hard-coded room links

* Make links lighter blue

client/src/components/About/index.js

@@ -2,6 +2,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import apiUrlGenerator from '../../api/generator';
+import styles from './styles.module.scss'
 
 class About extends Component {
   constructor(props) {
@@ -30,22 +31,38 @@ class About extends Component {
 
   render() {
     return (
-      <div>
+      <div className={styles.base}>
+        <div className={styles.links}>
+          <div><a href="#version">Version</a></div>
+          <div><a href="#software">Software</a></div>
+          <div><a href="#report-abuse">Report Abuse</a></div>
+          <div><a href="#acceptable-use">Acceptable Use Policy</a></div>
+          <div><a href="#disclaimer">Disclaimer</a></div>
+          <div><a href="#terms">Terms of Service</a></div>
+          <div><a href="#contact">Contact</a></div>
+          <div><a href="#donate">Donate</a></div>
+        </div>
+        
+        <section id='version'>
           <h4>Version</h4>
           <p>
           Commit SHA: <a target="_blank" href={`https://github.com/darkwire/darkwire.io/commit/${process.env.REACT_APP_COMMIT_SHA}`}>{process.env.REACT_APP_COMMIT_SHA}</a></p>
-        <br />
+        </section>
 
+        <section id='software'>
           <h4>Software</h4>
           <p>This software uses the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Crypto" target="_blank" rel="noopener noreferrer">Web Cryptography API</a> to
           encrypt data which is transferred using <a href="https://en.wikipedia.org/wiki/WebSocket" target="_blank" rel="noopener noreferrer">secure WebSockets</a>.
             Messages are never stored on a server or sent over the wire in plain-text.</p>
           <p>We believe in privacy and transparency.
           &nbsp;<a href="https://github.com/darkwire/darkwire.io" target="_blank" rel="noopener noreferrer">View the source code and documentation on GitHub.</a></p>
-        <br />
+        </section>
 
+        <section id='report-abuse'>
           <h4>Report Abuse</h4>
-        <p>To report any content that violates our Acceptable Use Policy below, email us at abuse[at]darkwire.io or submit the room ID below to report anonymously.</p>
+          <p>We encourage you to report problematic content to us. Please keep in mind that to help ensure the safety, confidentiality and security of your messages, we generally don't have the contents of messages available to us, which limits our ability to verify the report and take action.</p>
+          <p>When needed, you can take a screenshot of the content and share it, along with any available contact info, with appropriate law enforcement authorities.</p>
+          <p>To report any content, email us at abuse[at]darkwire.io or submit the room ID below to report anonymously.</p>
           <form onSubmit={this.handleReportAbuse.bind(this)}>
             {this.state.abuseReported && <div>Thank you!</div>}
             <div>
@@ -54,7 +71,12 @@ class About extends Component {
             </div>
           </form>
           <br />
+          <p>If you feel you or anyone else is in immediate danger, please contact your local emergency services.</p>
+          <p>If you receive content from someone who wishes to hurt themselves, and you're concerned for their safety, please contact your local emergency services or a <a href="https://faq.whatsapp.com/en/general/28030010">suicide prevention hotline</a>.</p>
+          <p>If you receive or encounter content indicating abuse or exploitation of a child, please contact the <a href="http://www.missingkids.com">National Center for Missing and Exploited Children (NCMEC)</a>.</p>
+        </section>
 
+        <section id='acceptable-use'>
           <h4>Acceptable Use Policy</h4>
 
           <p>This Acceptable Use Policy (this “Policy”) describes prohibited uses of the web services offered by Darkwire and its affiliates (the “Services”) and the website located at https://darkwire.io (the “Darkwire Site”). The examples described in this Policy are not exhaustive. We may modify this Policy at any time by posting a revised version on the Darkwire Site. By using the Services or accessing the Darkwire Site, you agree to the latest version of this Policy. If you violate the Policy or authorize or help others to do so, we may suspend or terminate your use of the Services.</p>
@@ -111,17 +133,9 @@ class About extends Component {
 
           Reporting of Violations of this Policy
           <br/>If you become aware of any violation of this Policy, you will immediately notify us and provide us with assistance, as requested, to stop or remedy the violation. To report any violation of this Policy, please follow our abuse reporting process.
-        <br />
+        </section>
-        <br />
-        
-        <h4>Disclaimer</h4>
-        <p className="bold">WARNING: Darkwire does not mask IP addresses nor can verify the integrity of parties recieving messages.
-        &nbsp;Proceed with caution and always confirm recipients beforre starting a chat session.</p>
-        <p>Please also note that <strong>ALL CHATROOMS</strong> are public.
-        &nbsp;Anyone can guess your room URL. If you need a more-private room, use the lock feature or set the URL manually by entering a room ID after &quot;darkwire.io/&quot;.
-        </p>
-        <br />
 
+        <section id='terms'>
           <h4>Terms of Service ("Terms")</h4>
           <p>Last updated: December 11, 2017</p>
           <p>Please read these Terms of Service ("Terms", "Terms of Service") carefully before using the https://darkwire.io website (the "Service") operated by Darkwire ("us", "we", or "our").</p>
@@ -140,6 +154,16 @@ class About extends Component {
           <p>Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. If any provision of these Terms is held to be
   invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect. These Terms constitute the entire agreement between us
   regarding our Service, and supersede and replace any prior agreements we might have between us regarding the Service.</p>
+        </section>
+        
+        <section id='disclaimer'>
+          <h4>Disclaimer</h4>
+          <p className="bold">WARNING: Darkwire does not mask IP addresses nor can verify the integrity of parties recieving messages.
+          &nbsp;Proceed with caution and always confirm recipients beforre starting a chat session.</p>
+          <p>Please also note that <strong>ALL CHATROOMS</strong> are public.
+          &nbsp;Anyone can guess your room URL. If you need a more-private room, use the lock feature or set the URL manually by entering a room ID after &quot;darkwire.io/&quot;.
+          </p>
+          <br />
           <strong>No Warranties; Exclusion of Liability; Indemnification</strong>
           <p><strong>OUR WEBSITE IS OPERATED BY Darkwire ON AN "AS IS," "AS AVAILABLE" BASIS, WITHOUT REPRESENTATIONS OR WARRANTIES OF ANY KIND. TO THE FULLEST EXTENT PERMITTED BY LAW, Darkwire SPECIFICALLY DISCLAIMS ALL WARRANTIES AND CONDITIONS OF ANY KIND, INCLUDING ALL IMPLIED WARRANTIES AND CONDITIONS OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NONINFRINGEMENT FOR OUR WEBSITE AND ANY CONTRACTS AND SERVICES YOU PURCHASE THROUGH IT. Darkwire SHALL NOT HAVE ANY LIABILITY OR RESPONSIBILITY FOR ANY ERRORS OR OMISSIONS IN THE CONTENT OF OUR WEBSITE, FOR CONTRACTS OR SERVICES SOLD THROUGH OUR WEBSITE, FOR YOUR ACTION OR INACTION IN CONNECTION WITH OUR WEBSITE OR FOR ANY DAMAGE TO YOUR COMPUTER OR DATA OR ANY OTHER DAMAGE YOU MAY INCUR IN CONNECTION WITH OUR WEBSITE. YOUR USE OF OUR WEBSITE AND ANY CONTRACTS OR SERVICES ARE AT YOUR OWN RISK. IN NO EVENT SHALL EITHER Darkwire OR THEIR AGENTS BE LIABLE FOR ANY DIRECT, INDIRECT, PUNITIVE, INCIDENTAL, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF OR IN ANY WAY CONNECTED WITH THE USE OF OUR WEBSITE, CONTRACTS AND SERVICES PURCHASED THROUGH OUR WEBSITE, THE DELAY OR INABILITY TO USE OUR WEBSITE OR OTHERWISE ARISING IN CONNECTION WITH OUR WEBSITE, CONTRACTS OR RELATED SERVICES, WHETHER BASED ON CONTRACT,
   TORT, STRICT LIABILITY OR OTHERWISE, EVEN IF ADVISED OF THE POSSIBILITY OF ANY SUCH DAMAGES. IN NO EVENT SHALL Darkwire’s LIABILITY FOR ANY DAMAGE CLAIM EXCEED THE AMOUNT PAID BY YOU TO Darkwire FOR THE TRANSACTION GIVING RISE TO SUCH DAMAGE CLAIM.</strong></p>
@@ -157,13 +181,15 @@ from or related to your use of our Website or any Contracts or Services you purc
   terms, please stop using the Service.</p>
           <strong>Contact Us</strong>
           <p>If you have any questions about these Terms, please contact us at hello[at]darkwire.io.</p>
-        <br />
+        </section>
 
+        <section id='contact'>
           <h4>Contact</h4>
           <p>Questions/comments? Email us at hello[at]darkwire.io</p>
           <p>Found a bug or want a new feature? <a href="https://github.com/darkwire/darkwire.io/issues" target="_blank" rel="noopener noreferrer">Open a ticket on Github</a>.</p>
-        <br />
+        </section>
 
+        <section id='donate'>
           <h4>Donate</h4>
           <p>Darkwire is maintained and hosted by two developers with full-time jobs. If you get some value
           from this service we would appreciate any donation you can afford. We use these funds for
@@ -183,6 +209,7 @@ terms, please stop using the Service.</p>
             <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
             <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" />
           </form>
+        </section>
       </div>
     )
   }

client/src/components/About/styles.module.scss

@@ -0,0 +1,9 @@
+.links {
+  margin-bottom: 20px;
+}
+
+.base {
+  section {
+    margin-bottom: 50px;
+  }
+}

client/src/components/FileTransfer/index.js

@@ -96,10 +96,6 @@ export default class FileTransfer extends Component {
     return false
   }
 
-  canSend() {
-    return false
-  }
-
   render() {
     if (!this.state.supported) {
       return null
@@ -108,7 +104,7 @@ export default class FileTransfer extends Component {
       <div className={`${styles} icon file-transfer btn btn-link`}>
         <input type="file" name="fileUploader" id="fileInput" ref={c => this._fileInput = c} />
         <label htmlFor="fileInput">
-          <File className={this.canSend() ? '' : 'disabled'} />
+          <File color="#fff" />
         </label>
       </div>
     )

client/src/components/Home/index.js

@@ -354,7 +354,7 @@ export default class Home extends Component {
         <div className="nav-container">
           {!this.props.socketConnected &&
             <div className="alert-banner">
-              <span className="icon"><AlertCircle size="15" /></span> Disconnected
+              <span className="icon"><AlertCircle size="15" /></span> <span>Disconnected</span>
             </div>
           }
           <Nav

client/src/components/Nav/index.js

@@ -70,7 +70,7 @@ class Nav extends Component {
             data-toggle="tooltip"
             data-placement="bottom"
             title="Copied"
-            data-clipboard-text={`https://darkwire.io/${this.props.roomId}`}
+            data-clipboard-text={`${window.location.origin}/${this.props.roomId}`}
             className="btn btn-plain btn-link clipboard-trigger room-id ellipsis">
             {`/${this.props.roomId}`}
           </button>

client/src/components/RoomLink/index.js

@@ -8,7 +8,7 @@ class RoomLink extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      roomUrl: `https://darkwire.io/${props.roomId}`,
+      roomUrl: `${window.location.origin}/${props.roomId}`,
     }
   }
 

client/src/stylesheets/app.sass

@@ -14,6 +14,9 @@ ul.plain
 
 a
   cursor: pointer
+  color: $link-blue
+  &:hover
+    color: $link-blue
 
 button
   cursor: pointer
@@ -27,6 +30,9 @@ button.btn-link.btn-plain
     color: white
 
 button.btn-link
+  color: $link-blue
+  &:hover
+    color: $link-blue
 
 .page-header
   height: 50px

client/src/stylesheets/colors.sass

@@ -5,6 +5,7 @@ $body: #E7E7E7
 $md-gray: #999
 $dk-gray: #666
 $error: #d00000
+$link-blue: #7ac6ff
 
 .muted
   color: $dk-gray

client/src/stylesheets/nav.sass

@@ -11,14 +11,15 @@
   z-index: 5
   background: black
   .alert-banner
+    display: flex
+    align-items: center
     width: 100%
     height: 30px
     background: $error
     color: white
     padding: 5px 15px
     .icon
-      top: 3px
+      margin-right: 3px
-      position: relative
 
 nav
   border-bottom: 1px solid $inactive