Merge pull request #286 from mozilla/feature/help-icon-and-attribution

Feature/help icon and attribution

src/assets/stylesheets/index.scss

@@ -122,6 +122,7 @@ body {
   min-height: 740px;
   display: flex;
   flex-direction: column;
+  position: relative;
 
   @media (max-width: 768px) {
     padding: 1em 1.5em 1em 1.5em;
@@ -129,6 +130,19 @@ body {
     min-height: 490px;
   }
 
+  &__attribution {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    color: $grey-text;
+    text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
+    opacity: 0.5;
+
+    a {
+      color: $grey-text;
+    }
+  }
+
   &__container {
     padding-top: 2vw;
     padding-left: 2.1em;
@@ -195,7 +209,7 @@ body {
 .footer-content {
   padding: 1em 2.25em 1em 2.25em;
   background-color: rgba(0, 0, 0, 0.85);
-  min-height: 100px;
+  min-height: 80px;
   display: flex;
   border-top: 2px solid #242424;
   align-items: center;

src/assets/stylesheets/ui-root.scss

@@ -8,6 +8,26 @@
   position: absolute;
   pointer-events: none;
   color: white;
+
+  &__help-icon {
+    @extend %fa-icon-button;
+    pointer-events: auto;
+    position: absolute;
+    top: 0px;
+    left: 14px;
+
+    &__icon {
+      background: rgba(33, 33, 33, 0.5);
+      border-radius: 36px;
+      display: inline-block;
+      font-size: 22px;
+      vertical-align: sub;
+      line-height: 38px;
+      border: 0;
+      width: 36px;
+      height: 36px;
+    }
+  }
 }
 
 .blurred {

src/components/stats-plus.css

@@ -14,7 +14,7 @@
   font-family: monospace;
   cursor: pointer;
   position: absolute;
-  top: 0;
+  top: 10px; 
   right: 0;
   padding: 8px 12px;
   color: #aaa;

src/react-components/home-root.js

@@ -110,6 +110,16 @@ class HomeRoot extends Component {
               </div>
             </div>
             <div className="hero-content">
+              <div className="hero-content__attribution">
+                Medieval Fantasy Book by{" "}
+                <a
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  href="https://sketchfab.com/models/06d5a80a04fc4c5ab552759e9a97d91a?utm_campaign=06d5a80a04fc4c5ab552759e9a97d91a&utm_medium=embed&utm_source=oembed"
+                >
+                  Pixel
+                </a>
+              </div>
               <div className="hero-content__container">
                 <div className="hero-content__container__title">
                   <FormattedMessage id="home.hero_title" />
@@ -167,16 +177,6 @@ class HomeRoot extends Component {
                   </a>
                 </div>
                 <div className="footer-content__links__bottom">
-                  <div>
-                    Medieval Fantasy Book by{" "}
-                    <a
-                      target="_blank"
-                      rel="noreferrer noopener"
-                      href="https://sketchfab.com/models/06d5a80a04fc4c5ab552759e9a97d91a?utm_campaign=06d5a80a04fc4c5ab552759e9a97d91a&utm_medium=embed&utm_source=oembed"
-                    >
-                      Pixel
-                    </a>
-                  </div>
                   <div>
                     <FormattedMessage id="home.made_with_love" />
                     <span style={{ fontWeight: "bold", color: "white" }}>Mozilla</span>

src/react-components/ui-root.js

@@ -17,6 +17,9 @@ import InfoDialog from "./info-dialog.js";
 import TwoDHUD from "./2d-hud";
 import Footer from "./footer";
 
+import FontAwesomeIcon from "@fortawesome/react-fontawesome";
+import faQuestion from "@fortawesome/fontawesome-free-solid/faQuestion";
+
 const mobiledetect = new MobileDetect(navigator.userAgent);
 
 const lang = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage)
@@ -808,6 +811,17 @@ class UIRoot extends Component {
             onCloseDialog={() => this.setState({ infoDialogType: null })}
           />
 
+          {this.state.entryStep === ENTRY_STEPS.finished && (
+            <button
+              onClick={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.help })}
+              className="ui__help-icon"
+            >
+              <i className="ui__help-icon__icon">
+                <FontAwesomeIcon icon={faQuestion} />
+              </i>
+            </button>
+          )}
+
           <div className={dialogClassNames}>
             {(this.state.entryStep !== ENTRY_STEPS.finished || this.isWaitingForAutoExit()) && (
               <div className={dialogBoxClassNames}>