Adjust styling and home info and add info to notification page

assets/css/style.css

@@ -17,9 +17,18 @@ body {
 	color: black;
 	text-decoration: none;
 }
+.title .name {
+	vertical-align: middle;
+}
+.title img {
+	padding-right: 0.5rem;
+	vertical-align: middle;
+	width: 5rem;
+}
 
 .tagline {
 	padding-bottom: 2.5rem;
+	font-size: 1.75rem;
 }
 
 .content {
@@ -29,9 +38,12 @@ body {
 
 .error {
 	color: #cc0000;
-	font-size: 2rem;
 }
 
 code {
 	white-space: normal;
 }
+
+.smallcode {
+	padding: 0;
+}

src/ui/Home.js

@@ -1,6 +1,7 @@
 'use strict';
 import React from 'react';
 import Shortid from 'shortid';
+import { Router, Route, Link } from 'react-router';
 
 export default class Home extends React.Component {
 	render(){
@@ -12,7 +13,7 @@ export default class Home extends React.Component {
 					<div className="twelve columns">
 						<h4>Usage</h4>
 						<p>
-							Notica is a Bash function / alias that will send a notification to a tab in your browser when it's ran:
+							Notica is a Bash function / alias that sends a notification to a tab in your browser when it's ran:
 						</p>
 					</div>
 				</div>
@@ -31,24 +32,29 @@ export default class Home extends React.Component {
 					<div className="twelve columns">
 						<h4>Setup</h4>
 						<p>Curl is required to use Notica.</p>
-						<p>Add this line to your <code>.bashrc</code> file:</p>
 						<p>
+							Add this line to your <code className="smallcode">.bashrc</code> file:<br />
 							<code>
-								notica() &#123; curl --data "$@" https://notica.us/{id} &#125;
+								notica() &#123; curl --data "d:$@" https://notica.us/{id}; &#125;
 							</code>
 						</p>
-						<p>Source your <code>.bashrc</code> file to apply the changes:</p>
+						<p>
-						<p><code>$ source .bashrc</code></p>
+							Source your <code className="smallcode">.bashrc</code> file to apply the changes:<br />
-						<p>Now, open this link in a new tab:</p>
+							<code>$ source .bashrc</code>
-						<p><a target="_blank" href={"https://notica.us/"+id}>https://notica.us/{id}</a></p>
+						</p>
-						<p>All done! Bookmark that link so you can find it later since it's unique to you.</p>
+						<p>
+							All done! Now go to this link (bookmark it since it's yours): <br />
+							<Link to={'/' + id}>https://notica.us/{id}</Link>
+						</p>
 
-						<h4>One-Line Setup</h4>
+						<h4>Quick Setup</h4>
 						<p>
+							Run this command: <br />
 							<code>
-								$ echo 'notica() &#123; curl --data "$@" https://notica.us/{id} &#125;' >> ~/.bashrc && source ~/.bashrc
+								$ echo 'notica() &#123; curl --data "d:$@" https://notica.us/{id}; &#125;' >> ~/.bashrc && source ~/.bashrc
 							</code>
 						</p>
+						<p>Go to this link to receive your notifications (bookmark it since it's yours): <Link to={'/' + id}>https://notica.us/{id}</Link></p>
 					</div>
 				</div>
 			</div>

src/ui/NotifPage.js

@@ -56,29 +56,76 @@ export default class NotifPage extends React.Component {
 					<div className="twelve columns">
 						<h4>Notification Page</h4>
 						{ supported || <div className="error"><p>
-							Error: This browser does not support desktop notifications :(
+							<i className="fa fa-times" aria-hidden="true"></i> This browser does not support desktop notifications.
 						</p></div>}
 						{ !this.state.haveperm && supported && <div>
 							<p>
 								Please give this site permission to display notifications.
+								<br />
+								<a className="button" href="#" onClick={() => this.checkperm(Notification.permission)}>
+									Check Again
+								</a>
 							</p>
-							<a className="button" href="#" onClick={() => this.checkperm(Notification.permission)}>
-								Check Again
-							</a>
 						</div>}
 						{ !this.state.connected && supported && <div className="error">
 							<p>
-								Error: Unable to connect to the Notica server :(
+								<i className="fa fa-times" aria-hidden="true"></i> Unable to connect to the Notica server.
-							</p>
+								<br />
-							<p>
 								Attempting to reconnect...
 							</p>
 						</div>}
 						{ this.state.haveperm && this.state.connected && supported && <p>
-							This page is monitoring for notifications.
+							<i className="fa fa-check" aria-hidden="true"></i> This page is monitoring for notifications.
 						</p>}
 					</div>
 				</div>
+				<div className="row">
+					<div className="six columns">
+						<h4>Usage</h4>
+						<p>Here are some different ways to use Notica:</p>
+						<p>
+							Just run it from your terminal: <br />
+							<code>
+								$ notica
+							</code>
+						</p>
+						<p>
+							Add a custom message: <br />
+							<code>
+								$ notica Hello world!
+							</code>
+						</p>
+						<p>
+							Get an alert when a command finishes: <br />
+							<code>
+								$ sudo apt-get update; notica Done!
+							</code>
+						</p>
+						<p>
+							Get an alert when a command succeeds: <br />
+							<code>
+								$ make all && notica Success!
+							</code>
+						</p>
+						<p>
+							Get an alert when a command fails: <br />
+							<code>
+								$ make all || notica Failed!
+							</code>
+						</p>
+					</div>
+					<div className="six columns">
+						<h4>Tips</h4>
+						<p>Bookmark this page! It is unique to the function in your <code className="smallcode">.bashrc</code> file.
+						Notifications will be sent to all open pages with the same ID code in the URL.</p>
+						<p>
+							Use quotes on messages with special characters: <br />
+							<code>
+								$ notica "This is awesome :)"
+							</code>
+						</p>
+					</div>
+				</div>
 			</div>
 		);
 	}

src/ui/Site.js

@@ -26,11 +26,12 @@ export default class Site extends React.Component {
 				<div className="hero">
 					<div className="title">
 						<Link to={'/'}>
-							Notica
+							<img src="/assets/img/logo.svg" />
+							<span className="name">Notica</span>
 						</Link>
 					</div>
 					<div className="tagline">
-						Send a browser notification from your terminal. No installation. No registration.
+						Send browser notifications from your terminal. No installation. No registration.
 					</div>
 				</div>
 				{page}