Add new homepage layout (#756)

* New homepage looks * Add homepage logged in redirect * Add new assets * Use 302 redirect, remove support banner * Make desktop feature permanent * Make status code a number * Copy update * Add standalone recorder based on ANON_DISABLED env var * Conditionally show supporter portions
Rhizome-Conifer · Oct 25, 2019 · 867822e · 867822e
1 parent 68c7c5b
commit 867822e
Show file tree

Hide file tree

Showing 32 changed files with 549 additions and 416 deletions.
diff --git a/frontend/.eslintrc b/frontend/.eslintrc
@@ -33,6 +33,11 @@
     "jsx-a11y/label-has-associated-control": 1,
     "jsx-a11y/no-autofocus": 1,
     "jsx-a11y/no-noninteractive-element-interactions": 1,
+    "jsx-a11y/media-has-caption": [ 0, {
+      "audio": [ "Audio" ],
+      "video": [ "Video" ],
+      "track": [ "Track" ],
+    }],
     "jsx-a11y/mouse-events-have-key-events": 1,
     "jsx-a11y/iframe-has-title": 0,
     "jsx-a11y/no-noninteractive-element-to-interactive-role": 1,

diff --git a/frontend/src/base.scss b/frontend/src/base.scss
@@ -58,6 +58,7 @@ a {
 
 .btn-primary {
   background-color: $blue;
+  background: $blue;
   border-color: $dark-blue;
 
   &:hover {
@@ -97,6 +98,10 @@ a {
     margin-left: 1rem;
 }
 
+.form-group-recorder-url {
+  display: flex;
+}
+
 /*
  * Spacers and buffers
  *
@@ -220,6 +225,17 @@ a {
   font-size: 1.15rem;
   background: transparent;
   border: solid .1rem #CCC;
+
+  &.btn-primary {
+    background-color: $blue;
+    background: $blue;
+    border-color: $dark-blue;
+    color: $white;
+
+    &:hover {
+      background-color: $dark-blue;
+    }
+  }
 }
 
 .borderless {

diff --git a/frontend/src/components/controls/NewRecordingUI/style.scss b/frontend/src/components/controls/NewRecordingUI/style.scss
@@ -8,8 +8,6 @@
 }
 
 .start-recording {
-    display: flex;
-
     button.rounded {
         margin-left: 1.5rem;
     }

diff --git a/frontend/src/components/controls/StandaloneRecorderUI/index.js b/frontend/src/components/controls/StandaloneRecorderUI/index.js
@@ -191,7 +191,7 @@ class StandaloneRecorderUI extends Component {
               </div>
             </div>
           </Collapsible>
-          <Button type="submit" className="rounded" aria-label="start recording" disabled={isOutOfSpace}>
+          <Button type="submit" className="rounded btn-primary" aria-label="start recording" disabled={isOutOfSpace}>
             Start Capture
           </Button>
           {

diff --git a/frontend/src/components/controls/StandaloneRecorderUI/style.scss b/frontend/src/components/controls/StandaloneRecorderUI/style.scss
@@ -74,11 +74,6 @@
         margin-right: .5rem;
     }
 
-    button[type='submit'] {
-        background: $blue;
-        color: #FFF;
-    }
-
     button#prepare {
         float: right;
         margin-top: 1.5rem;

diff --git a/frontend/src/components/icons/Github.js b/frontend/src/components/icons/Github.js
diff --git a/frontend/src/components/icons/Twitter.js b/frontend/src/components/icons/Twitter.js
diff --git a/frontend/src/components/icons/index.js b/frontend/src/components/icons/index.js
@@ -12,7 +12,6 @@ export DatIcon from './Dat';
 export DisabledIcon from './Disabled';
 export DownloadIcon from './Download';
 export FlagIcon from './Flag';
-export GithubIcon from './Github';
 export GlobeIcon from './Globe';
 export HandleIcon from './Handle';
 export HelpIcon from './Help';
@@ -37,7 +36,6 @@ export SidebarToggle from './SidebarToggle';
 export SnapshotIcon from './Snapshot';
 export ThinXIcon from './ThinX';
 export TrashIcon from './Trash';
-export TwitterIcon from './Twitter';
 export UploadIcon from './Upload';
 export UserIcon from './User';
 export WandIcon from './Wand';

diff --git a/frontend/src/components/siteComponents/Footer/index.js b/frontend/src/components/siteComponents/Footer/index.js
@@ -1,44 +1,38 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { announceMailingList, supportEmail } from 'config';
-
-import { GithubIcon, MailIcon, TwitterIcon } from 'components/icons';
+import { announceMailingList, supportEmail, supporterPortal } from 'config';
 
 import './style.scss';
 
-const logo = require('./rhizome_logo_sm.png');
-
 
 function Footer() {
+
+  const donateNow = () => {
+    window.location.href = supporterPortal;
+  };
+
   return (
-    <footer className="footer top-buffer">
+    <footer className="footer">
       <div className="container top-buffer bottom-buffer">
         <div className="row">
-          <div className="col-xs-12 col-sm-8 project-info">
-            <a href="https://github.com/webrecorder/webrecorder" aria-label="Github" target="_blank">
-              <GithubIcon />
-            </a>
-            <a href="https://twitter.com/webrecorder_io" aria-label="Twitter" target="_blank">
-              <TwitterIcon />
-            </a>
-            <a href={`mailto:${supportEmail}`} className="divider contact"><MailIcon />Contact</a>
-            <Link to="/_faq" className="divider">About</Link>
-            <a href="https://guide.webrecorder.io/" target="_blank" className="divider">User Guide</a>
-            <a href="https://blog.webrecorder.io" target="_blank" className="divider">Blog</a>
-            <Link to="/_policies" className="divider">Terms & Policies</Link>
-          </div>
-          <div className="col-xs-6 col-xs-offset-3 col-sm-2 col-sm-offset-2 footer-label">
-            <div>A Project By</div>
-            <a href="https://rhizome.org" target="_blank">
-              <img className="rhizome-logo" src={logo} alt="rhizome.org logo" />
-            </a>
-          </div>
-        </div>
-        {
-          announceMailingList &&
-            <div className="row hidden-xs">
-              <div className="col-xs-12">
+          <div className="col-xs-12 col-sm-6 project-info">
+            <div className="links">
+              <ul>
+                <li><Link to="/_faq">About the Webrecorder Project</Link></li>
+                <li><a href="https://guide.webrecorder.io/" target="_blank">User Guide</a></li>
+                <li><Link to="/_policies">Terms & Policies</Link></li>
+              </ul>
+              <ul>
+                <li><a href="https://blog.webrecorder.io" target="_blank">Blog</a></li>
+                <li><a href={`mailto:${supportEmail}`} className="contact">Contact</a></li>
+                <li><a href="https://twitter.com/webrecorder_io" aria-label="Twitter" target="_blank">Twitter</a></li>
+                <li><a href="https://github.com/webrecorder/webrecorder" aria-label="Github" target="_blank">Github</a></li>
+                <li><a href="https://rhizome.org" target="_blank">Rhizome.org</a></li>
+              </ul>
+            </div>
+            {
+              announceMailingList &&
                 <form method="post" id="email-signup" className="navbar-form mc-embedded-subscribe-form" action={announceMailingList}>
                   <div className="form-group-sm">
                     <input type="email" name="EMAIL" className="form-control" placeholder="your@email.com" />
@@ -48,9 +42,21 @@ function Footer() {
                     <input type="text" name="b_a1487b13ca8ed17d052f71f12_7f979630a1" tabIndex="-1" defaultValue="" />
                   </div>
                 </form>
+            }
+            <p>
+              This instance of the Webrecorder web application is hosted by Rhizome at the New Museum. The Andrew W. Mellon Foundation is the lead supporter of the Webrecorder Initiative.
+            </p>
+          </div>
+
+          {
+            supporterPortal &&
+              <div className="col-xs-12 col-sm-6 donate-info hidden-xs">
+                <p>Webrecorder is a rapidly developing community project maintained by a non-profit arts organization. Becoming a supporter or donor helps us offset our operational costs, keeping Webrecorder a sustainable project.</p>
+                <button className="rounded" onClick={donateNow} type="button">Donate Now</button>
+                <a href={supporterPortal} target="_blank">Learn More About Becoming a Supporter</a>
               </div>
-            </div>
-        }
+          }
+        </div>
       </div>
     </footer>
   );

diff --git a/frontend/src/components/siteComponents/Footer/style.scss b/frontend/src/components/siteComponents/Footer/style.scss
@@ -2,96 +2,77 @@
 
 footer {
     width: 100%;
-    padding-bottom: 2.4rem;
+    margin-top: 5rem;
+    padding: 4rem 0 3rem 0;
+    background: $gray350;
 
-    #email-signup {
-        padding-left: 0;
 
-        .form-group-sm {
+    .project-info {
+
+        .links {
             display: flex;
+            justify-content: space-between;
 
-            input {
-                width: 15rem;
-            }
-        }
-    }
-}
+            ul {
+                padding: 0;
+                list-style-type: none;
 
-.footer-label {
-    position: relative;
-    font-size: .9rem;
+                &:last-of-type {
+                    margin-right: 20%;
+                }
 
-    & > div {
-        margin-left: .2rem;
-    }
+                li {
+                    margin-bottom: 1rem;
 
-    & > a {
-        display: block;
-    }
-}
-.rhizome-logo {
-    padding-top: .5rem;
-    width: 11.8rem;
-}
-.project-info {
+                    a {
+                        color: $body-gray;
+                    }
+                }
+            }
+        }
 
-    a {
-        margin-right: 1rem;
+        #email-signup {
+            margin-bottom: 4rem;
+            padding-left: 0;
 
-        &:hover {
-            svg path {
-                fill: $blue;
-            }
+            .form-group-sm {
+                display: flex;
 
-            svg circle {
-                stroke: $blue;
+                input {
+                    width: 15rem;
+                }
             }
-        }
 
-        &.divider:before {
-            content:'';
-            display: inline-block;
-            width: .1rem;
-            height: 1.5rem;
-            margin-right: 1rem;
-            background: #000;
-            vertical-align: sub;
-        }
+            input {
+                border-right: 0;
+                border-bottom-left-radius: 2.5rem;
+                border-top-left-radius: 2.5rem;
+            }
 
-        svg {
-            width: 1.8rem;
-            height: 1.8rem;
-            margin-right: 1rem;
-            vertical-align: middle;
+            button {
+                border-left: 0;
+                border-bottom-left-radius: 0;
+                border-top-left-radius: 0;
+                border-top-right-radius: 2.5rem;
+                border-bottom-right-radius: 2.5rem;
+                background: $gray600;
+                color: $white;
+            }
         }
+    }
 
-        &.contact {
-            svg {
-                margin-right: .5rem;
-                width: 1.6rem;
-                height: 1.6rem;
+    .donate-info {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 0 10%;
 
-                path {
-                    fill: $blue;
-                }
-            }
+        button {
+            background: $white;
+            margin: 1rem 0 1.5rem 0;
         }
     }
 }
 
 @media (max-width: 767px) {
-    .project-info {
-        text-align: center;
-    }
-    .footer-label {
-        padding: 1rem 0;
-        text-align: center;
-    }
 }
-
-@media (min-width: 767px) {
-    footer .container .row {
-        display: flex;
-        align-items: flex-end;
-    }
-}