kleros · epiqueras · May 1, 2018 · Apr 26, 2018 · Apr 27, 2018 · Apr 30, 2018
diff --git a/package.json b/package.json
@@ -80,6 +80,7 @@
     "react-blockies": "^1.2.2",
     "react-dom": "^16.2.0",
     "react-helmet": "^5.2.0",
+    "react-joyride": "^1.11.4",
     "react-minimal-pie-chart": "^3.0.1",
     "react-redux": "^5.0.6",
     "react-redux-toastr": "^7.2.3",

diff --git a/src/bootstrap/app.js b/src/bootstrap/app.js
@@ -35,13 +35,11 @@ const App = ({ store, history, testElement }) => (
             <title>Open IICO</title>
           </Helmet>
           <Route exact path="*" component={ConnectedNavBar} />
-          <div id="scroll-root">
-            <Switch>
-              <Route exact path="/" component={Home} />
-              <Route exact path="/:address" component={IICO} />
-              <Route component={PageNotFound} />
-            </Switch>
-          </div>
+          <Switch>
+            <Route exact path="/" component={Home} />
+            <Route exact path="/:address" component={IICO} />
+            <Route component={PageNotFound} />
+          </Switch>
           {testElement}
           <Route exact path="*" component={GlobalComponents} />
         </div>

diff --git a/src/bootstrap/app.scss b/src/bootstrap/app.scss
@@ -1,10 +1,12 @@
 @import '~normalize.css';
 @import '~react-redux-toastr/lib/css/react-redux-toastr.min.css';
 @import '~create-redux-form/animations/carousel.css';
+@import '~react-joyride/lib/react-joyride-compiled.css';
 @import '../styles/_colors.scss';
 @import '../styles/_typography.scss';
 @import '../styles/_toastr.scss';
 @import '../styles/_form.scss';
+@import '../styles/_joyride.scss';
 
 // Global Overrides
 * {
@@ -15,38 +17,32 @@
 
 // Document Root
 html {
+  background-color: $light2;
+  background-image: url('../assets/images/background.png');
+  background-position: -90px 180px;
+  background-repeat: no-repeat;
+  background-size: cover;
   color: $dark2;
   font-size: 16px;
+  overflow: scroll;
 }
 
 // App Containers
 html,
 body,
 #root,
-#router-root,
-#scroll-root {
+#router-root {
   border: 0;
-  height: 100%;
   margin: 0;
   padding: 0;
   width: 100%;
 }
 
 // React Router Root
 #router-root {
-  padding-top: 70px;
-}
-
-// Scroll Root
-#scroll-root {
-  background-color: $light2;
-  background-image: url('../assets/images/background.png');
-  background-position: -90px 180px;
-  background-repeat: no-repeat;
-  background-size: cover;
   display: flex;
   flex-direction: column;
-  overflow: scroll;
+  padding-top: 70px;
   position: relative;
 }
 

diff --git a/src/components/__snapshots__/storyshots.test.js.snap b/src/components/__snapshots__/storyshots.test.js.snap
@@ -5196,6 +5196,10 @@ exports[`Storyshots Stat Block default 1`] = `
             >
               300
             </h3>
+            <div
+              className="StatBlock-joyrideTarget"
+              id={undefined}
+            />
           </div>
           <div
             data-radium={true}
@@ -5500,6 +5504,10 @@ exports[`Storyshots Stat Block with no label 1`] = `
             >
               300
             </h3>
+            <div
+              className="StatBlock-joyrideTarget"
+              id={undefined}
+            />
           </div>
           <div
             data-radium={true}
@@ -5814,6 +5822,10 @@ exports[`Storyshots Stat Row default 1`] = `
                 >
                   300
                 </h3>
+                <div
+                  className="StatBlock-joyrideTarget"
+                  id={undefined}
+                />
               </div>
               <div
                 className="StatBlock  "
@@ -5828,6 +5840,10 @@ exports[`Storyshots Stat Row default 1`] = `
                 >
                   300
                 </h3>
+                <div
+                  className="StatBlock-joyrideTarget"
+                  id={undefined}
+                />
               </div>
               <div
                 className="StatBlock  "
@@ -5842,8 +5858,16 @@ exports[`Storyshots Stat Row default 1`] = `
                 >
                   300
                 </h3>
+                <div
+                  className="StatBlock-joyrideTarget"
+                  id={undefined}
+                />
               </div>
             </div>
+            <div
+              className="StatRow-joyrideTarget"
+              id={undefined}
+            />
           </div>
           <div
             data-radium={true}
@@ -6158,6 +6182,10 @@ exports[`Storyshots Stat Row with box shadow 1`] = `
                 >
                   300
                 </h3>
+                <div
+                  className="StatBlock-joyrideTarget"
+                  id={undefined}
+                />
               </div>
               <div
                 className="StatBlock  "
@@ -6172,6 +6200,10 @@ exports[`Storyshots Stat Row with box shadow 1`] = `
                 >
                   300
                 </h3>
+                <div
+                  className="StatBlock-joyrideTarget"
+                  id={undefined}
+                />
               </div>
               <div
                 className="StatBlock  "
@@ -6186,8 +6218,16 @@ exports[`Storyshots Stat Row with box shadow 1`] = `
                 >
                   300
                 </h3>
+                <div
+                  className="StatBlock-joyrideTarget"
+                  id={undefined}
+                />
               </div>
             </div>
+            <div
+              className="StatRow-joyrideTarget"
+              id={undefined}
+            />
           </div>
           <div
             data-radium={true}

diff --git a/src/components/nav-bar/nav-bar.scss b/src/components/nav-bar/nav-bar.scss
@@ -12,9 +12,10 @@
   display: flex;
   height: 70px;
   padding: 0 8%;
-  position: absolute;
+  position: fixed;
   top: 0;
   width: 100%;
+  z-index: 1000;
 
   &-logo {
     height: 40px;
@@ -26,7 +27,6 @@
     display: flex;
     height: 100%;
     margin: 0 50px 0 25px;
-    // overflow-x: scroll;
     text-overflow: ellipsis;
     white-space: nowrap;
 

diff --git a/src/components/page-not-found/index.js b/src/components/page-not-found/index.js
@@ -2,12 +2,10 @@ import React from 'react'
 
 import './page-not-found.css'
 
-const PageNotFound = () => (
+export default () => (
   <div className="PageNotFound">
     <div className="PageNotFound-message">
       404. This is not the page you are looking for.
     </div>
   </div>
 )
-
-export default PageNotFound
diff --git a/src/components/requires-meta-mask/require-meta-mask.scss b/src/components/requires-meta-mask/require-meta-mask.scss
@@ -1,16 +1,17 @@
+@import '../../styles/_colors.scss';
+
 /* @define RequiresMetaMask */
 .RequiresMetaMask {
-  background: #273142;
   height: 100%;
 
   &-message {
-    color: white;
+    color: $dark;
     font-size: 40px;
     padding: 70px 50px;
     text-align: center;
 
     &-link {
-      color: #999;
+      color: $dark4;
       text-decoration: none;
     }
   }

diff --git a/src/components/slider/index.js b/src/components/slider/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import './slider.css'
 
-class Slider extends PureComponent {
+export default class Slider extends PureComponent {
   static propTypes = {
     // State
     startLabel: PropTypes.string.isRequired,
@@ -105,5 +105,3 @@ class Slider extends PureComponent {
     )
   }
 }
-
-export default Slider
diff --git a/src/components/stat-block/index.js b/src/components/stat-block/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import './stat-block.css'
 
-const StatBlock = ({ label, value, noBackground, noFlex, flexBasis }) => (
+const StatBlock = ({ id, label, value, noBackground, noFlex, flexBasis }) => (
   <div
     className={`StatBlock ${
       label || noBackground ? '' : 'StatBlock--withNoLabel'
@@ -18,11 +18,13 @@ const StatBlock = ({ label, value, noBackground, noFlex, flexBasis }) => (
     >
       {value}
     </h3>
+    <div id={id} className="StatBlock-joyrideTarget" />
   </div>
 )
 
 StatBlock.propTypes = {
   // State
+  id: PropTypes.string,
   label: PropTypes.string,
   value: PropTypes.node.isRequired,
 
@@ -34,6 +36,7 @@ StatBlock.propTypes = {
 
 StatBlock.defaultProps = {
   // State
+  id: undefined,
   label: null,
 
   // Modifiers

diff --git a/src/components/stat-block/stat-block.scss b/src/components/stat-block/stat-block.scss
@@ -5,6 +5,7 @@
   flex-direction: column;
   justify-content: flex-end;
   margin: 10px;
+  position: relative;
 
   &--withNoLabel {
     border-radius: 5px;
@@ -20,4 +21,13 @@
       margin: 0;
     }
   }
+
+  &-joyrideTarget {
+    height: 100%;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: -10px;
+    width: 100%;
+  }
 }
diff --git a/src/components/stat-row/index.js b/src/components/stat-row/index.js
@@ -3,21 +3,26 @@ import PropTypes from 'prop-types'
 
 import './stat-row.css'
 
-const StatRow = ({ children, withBoxShadow }) => (
+const StatRow = ({ id, children, withBoxShadow }) => (
   <div className={`StatRow ${withBoxShadow ? 'StatRow--withBoxShadow' : ''}`}>
     <div className="StatRow-blocks">{children}</div>
+    <div id={id} className="StatRow-joyrideTarget" />
   </div>
 )
 
 StatRow.propTypes = {
   // State
+  id: PropTypes.string,
   children: PropTypes.node.isRequired,
 
   // Modifiers
   withBoxShadow: PropTypes.bool
 }
 
 StatRow.defaultProps = {
+  // State
+  id: undefined,
+
   // Modifiers
   withBoxShadow: false
 }

diff --git a/src/components/stat-row/stat-row.scss b/src/components/stat-row/stat-row.scss
@@ -4,6 +4,7 @@
 .StatRow {
   border-bottom: 2px solid $light3;
   padding: 25.5px 0 0 0;
+  position: relative;
   width: 100%;
 
   &--withBoxShadow {
@@ -24,4 +25,13 @@
     justify-content: center;
     margin: -10px;
   }
+
+  &-joyrideTarget {
+    height: 100%;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 10px;
+    width: 100%;
+  }
 }