feat: add more contextual info + credits. closes #20, #21

src/components/App.css

@@ -26,3 +26,22 @@ body {
   min-width: 650px;
   text-align: center;
 }
+
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  text-align: right;
+  margin-bottom: 3em;
+}
+
+footer span {
+  margin-right: 1em;
+  font-size: 0.75rem;
+  color: #777;
+}
+
+footer img {
+  width: 96px;
+  height: auto;
+}

src/components/App.jsx

@@ -4,6 +4,7 @@ import Controls from './Controls'
 import Script from './Script'
 import Filedrop from './Filedrop'
 import store from '../store'
+import BIF_LOGO from './bif_logo.svg'
 
 // import 'semantic-ui-css/semantic.min.css'
 import './App.css'
@@ -18,6 +19,10 @@ function App (props) {
           </div>
           <div className="script-pane">
             <Script />
+            <footer>
+              <span>a project by</span>
+              <a href="https://biffud.com/"><img src={BIF_LOGO} alt="Bad Idea Factory" /></a>
+            </footer>
           </div>
         </div>
         <div className="overlays">

src/components/Controls.css

@@ -1,16 +1,20 @@
 .controls {
   color: #666;
   position: fixed;
+  max-width: 300px;
 }
 
 .controls h1 {
   margin-top: 0;
-  margin-bottom: 1.5em;
   text-transform: uppercase;
   text-decoration: underline;
   font-family: 'Courier New', monospace;
 }
 
+.lede {
+  margin-bottom: 1.5em;
+}
+
 .properties {
   margin-bottom: 2em;
 }

src/components/Controls.jsx

@@ -37,6 +37,10 @@ function Controls (props) {
   return (
     <div className="controls">
       <h1>Scriptchat</h1>
+      <p className="lede">
+        Scriptchat turns your Slack transcripts into screenplays.
+        This project is open source! For more information, check out our <a href="https://github.com/badideafactory/scriptchat">GitHub repository.</a>
+      </p>
       <div className="properties">
         <Input
           label="Screenplay title"