Cleanup from PR

src/assets/stylesheets/index.scss

@@ -2,6 +2,8 @@
 @import 'hub-create';
 @import 'info-dialog';
 
+$title-width: 350px;
+
 * {
   box-sizing: border-box;
 }
@@ -53,15 +55,15 @@ body {
 
 .header-content {
   padding: 1.5em 2.5em 1.5em 2.5em;
-  background-color: rgba(0, 0, 0, 0.85);
+  background-color: $darkest-transparent;
   min-height: 90px;
   height: 90px;
   display: flex;
-  border-bottom: 1px solid #242424;
+  border-bottom: 1px solid $darkest-grey;
 
   &__title {
     display: flex;
-    width: 350px;
+    width: $title-width;
 
     @media (max-width: 768px) {
       justify-content: center;
@@ -146,14 +148,14 @@ body {
     display: none;
   }
 
-  padding: 0.5em;
-  background-color: rgba(0, 0, 0, 0.85);
+  padding: 8px;
+  background-color: $darkest-transparent;
   text-align: center;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  border-bottom: 2px solid #242424;
+  border-bottom: 2px solid $darkest-grey;
 
   &__link {
     color: white;
@@ -252,7 +254,7 @@ body {
 
 .footer-content {
   padding: 1em 2.25em 1em 2.25em;
-  background-color: rgba(0, 0, 0, 0.85);
+  background-color: $darkest-transparent;
   min-height: 80px;
   display: flex;
   border-top: 2px solid #242424;

src/assets/stylesheets/shared.scss

 $dark-transparent: rgba(0, 0, 0, 0.4);
 $darker-transparent: rgba(0, 0, 0, 0.6);
-$darkest-transparent: rgba(0, 0, 0, 0.95);
+$darkest-transparent: rgba(0, 0, 0, 0.9);
 $grey-text: rgba(192, 192, 192, 1.0);
 $light-text: rgba(240, 240, 240, 1.0);
 $light-grey: lightgrey;
 $dark-grey: rgba(128, 128, 128, 1.0);
 $darker-grey: rgba(64, 64, 64, 1.0);
+$darkest-grey: rgba(32, 32, 32, 1.0);
 
 %default-font {
   font-family: 'Zilla Slab', sans-serif;

src/react-components/home-root.js

@@ -100,11 +100,9 @@ class HomeRoot extends Component {
                 <div className="header-content__title__preview">preview</div>
               </div>
               <div className="header-content__entry-code">
-                <div>
-                  <a className="header-content__entry-code__link" href="/link">
-                    <FormattedMessage id="home.have_entry_code" />
-                  </a>
-                </div>
+                <a className="header-content__entry-code__link" href="/link" rel="nofollow">
+                  <FormattedMessage id="home.have_entry_code" />
+                </a>
               </div>
               <div className="header-content__experiment">
                 <div className="header-content__experiment__container">
@@ -141,7 +139,7 @@ class HomeRoot extends Component {
             </div>
             <div className="header-subtitle">
               <div>
-                <a className="header-subtitle__link" href="/link">
+                <a className="header-subtitle__link" href="/link" rel="nofollow">
                   <FormattedMessage id="home.have_entry_code" />
                 </a>
               </div>

src/react-components/link-root.js

@@ -89,6 +89,8 @@ class LinkRoot extends Component {
   };
 
   render() {
+    // Note we use type "tel" for the input due to https://bugzilla.mozilla.org/show_bug.cgi?id=1005603
+
     return (
       <IntlProvider locale={lang} messages={messages}>
         <div className={styles.link}>