add help

src/components/App.js

@@ -9,6 +9,7 @@ import cachedIcon from '../static/baseline-cached-24px.svg';
 
 import './App.scss';
 import Button from './Button'
+import Help from './Help'
 import Icon from './Icon'
 import Input from './Input'
 import Spinner from './Spinner'
@@ -35,6 +36,7 @@ const ENTRY_TYPE = {
 
 
 const INITIAL_STATE = {
+  showHelp: false,
   entries: [],
   start: undefined,
   startMessage: undefined,
@@ -78,6 +80,10 @@ class App extends Component {
     this.setState(INITIAL_STATE)
   }
 
+  toggleHelp = () => {
+    this.setState({ showHelp: !this.state.showHelp })
+  }
+
   downloadRealignment(id) {
     const realignment = this.state.realignments.find(r => r.id === id)
     download(realignment.id, realignment.data)
@@ -475,10 +481,20 @@ class App extends Component {
   }
 
   render() {
+    const { showHelp } = this.state
+
     return (
       <div className='App'>
         <main className='App__main'>
 
+          <Button
+            className='App__helpButton'
+            flat
+            iconButton
+            icon={ showHelp ? 'times' : 'question-circle' }
+            onClick={this.toggleHelp}
+          />
+
           <div className='App__steps row'>
 
             { this.renderInputStep() }
@@ -487,6 +503,10 @@ class App extends Component {
 
           </div>
 
+          <div className={cx('App__help', { visible: showHelp } )}>
+            <Help />
+          </div>
+
         </main>
         <footer className='App__footer'>
           <span>Made with <span className='text-error'>❤️</span> in Montréal</span>

src/components/App.scss

@@ -5,11 +5,13 @@ $step-width: 220px;
 html, body, #root {
   width:  100%;
   height: 100%;
+  overflow: hidden;
 }
 
 .App {
   width:  100%;
   height: 100%;
+  overflow: hidden;
 
   display: flex;
   flex-direction: column;
@@ -23,15 +25,42 @@ html, body, #root {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  /* font-size: calc(10px + 2vmin); */
   color: white;
+  position: relative;
+}
+.App__helpButton {
+  position: absolute;
+  z-index: 2;
+  top: 2em;
+  right: 2em;
+  color: #787c7f;
+  font-size: 20px;
+  padding-left: 6px;
+  &:hover {
+    color: #fff !important;
+    background-color: transparent !important;
+  }
 }
 .App__steps {
   display: flex;
   flex-direction: row;
   align-items: center;
   height: 350px;
 }
+.App__help {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-left: 1px solid #64686a;
+  background-color: #4d5057;
+  transition: all .3s ease-in-out;
+  transform: translateX(100%);
+}
+.App__help.visible {
+  transform: translateX(0);
+}
 .App__footer {
   display: flex;
   align-items: center;

src/components/Button.js

@@ -46,10 +46,10 @@ function Button(props) {
     size,
     {
       'active': active,
-      'flat': flat,
+      'Button--flat': flat,
       'round': round,
       'square': square,
-      'iconButton': iconButton,
+      'Button--icon': iconButton,
       'center': center,
       'small': small,
       'large': large,

src/components/Help.js

@@ -0,0 +1,43 @@
+/*
+ * Help.js
+ */
+
+
+import React from 'react'
+import pure from 'recompose/pure'
+import cx from 'classname'
+
+import Icon from './Icon'
+
+import './Help.scss'
+
+
+function Help(props) {
+  return (
+    <div className='Help'>
+      <div className='Help__content'>
+        <h1 className='Help__title'>Help</h1>
+
+        <h2>What is this tool?</h2>
+        <p className='Help__text'>
+          The Circular DNA Re-aligner allows you to provide your bacterial DNA sequence
+          and a desired start sequence, and realign the DNA sequence to match this start.
+          It also reverse your DNA sequence if it appears to be in the opposite direction
+          to your start sequence.
+        </p>
+
+        <h2>How does it work?</h2>
+        <p className='Help__text'>
+          First, you must provide your input DNA sequences, either as FASTA files, or as NCBI
+          accession numbers. <br/>
+          Second, you need to provide your start sequence, either from a text file, or in the
+          text input. <br/>
+          Third, click <code>Re-Align</code> and let the tool run. <br/>
+          Lastly, you can download the files that were realigned.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default pure(Help)

src/components/Help.scss

@@ -0,0 +1,20 @@
+@import '../styles/_variables.scss';
+
+.Help {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  // align-items: center;
+  justify-content: center;
+  padding-top: 20%;
+}
+.Help__content {
+  width: 600px;
+  text-align: left;
+}
+.Help__title {
+  text-align: center;
+}
+.Help__text {
+  font-size: 1.1rem;
+}

src/styles/Button.scss

@@ -57,23 +57,23 @@
 .Button > .Button__icon {}
 .Button > .Button__iconAfter {}
 
-.Button.flat {
+.Button--flat {
   background-color: transparent;
   color: $color;
   border: 1px solid transparent;
 }
-.Button.flat:not([disabled]):hover {
+.Button--flat:not([disabled]):hover {
   color: $hover-color;
   background-color: $hover-light-bg-color;
 }
-.Button.flat:not([disabled]).active,
-.Button.flat:not([disabled]):active,
-.Button.flat:not([disabled]):focus {
+.Button--flat:not([disabled]).active,
+.Button--flat:not([disabled]):active,
+.Button--flat:not([disabled]):focus {
   outline: none;
   box-shadow: 0 0 0 1px $focus-color;
 }
-.Button.flat:not([disabled]).active,
-.Button.flat:not([disabled]):active {
+.Button--flat:not([disabled]).active,
+.Button--flat:not([disabled]):active {
   background-color: rgba(black, 0.1);
   &:hover {
     background-color: rgba(black, 0.1);
@@ -94,7 +94,7 @@
   text-align: center;
   justify-content: center;
 }
-.Button.iconButton {
+.Button--icon {
   min-width: 30px;
   border-radius: 50%;
   width: 30px;