Merged in AD-997-prepare-landing-page (pull request #67)

Finish styling for landing page

js/components/whitelabel/prize/prize_app.js

@@ -27,7 +27,7 @@ let PrizeApp = React.createClass({
         }
 
         return (
-            <div className="container ascribe-prize-app">
+            <div className={'container ascribe-prize-app client--' + subdomain}>
                 {header}
                 <RouteHandler />
                 <GlobalNotification />

js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js

@@ -32,13 +32,13 @@ let IkonotvLanding = React.createClass({
         if(this.state.currentUser && this.state.currentUser.email) {
             return (
                 <ButtonLink to="pieces">
-                    {getLangText('ENTER')}
+                    {getLangText('ENTER TO START')}
                 </ButtonLink>
             );
         } else {
             return (
                 <ButtonLink to="signup">
-                    {getLangText('ENTER')}
+                    {getLangText('ENTER TO START')}
                 </ButtonLink>
             );
         }
@@ -51,11 +51,13 @@ let IkonotvLanding = React.createClass({
                     <img src="https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png" />
                     <div className="tagline">
                         <h1>PROTECT</h1>
-                        <img src="http://placehold.it/600x300" />
+                        <div className="poster">
+                            <div className="content">
+                            </div>
+                        </div>
                         <h1>& SHARE</h1>
                     </div>
-                    <h2>Welcome to the ikonoTV</h2>
-                    <h2>Registration Page</h2>
+                    <h2>Welcome to the ikonoTV<br />Registration Page</h2>
                 </header>
                 <article>
                     <section>
@@ -102,4 +104,4 @@ let IkonotvLanding = React.createClass({
     }
 });
 
-export default IkonotvLanding;
+export default IkonotvLanding;

js/components/whitelabel/wallet/wallet_app.js

@@ -8,15 +8,19 @@ import Footer from '../../footer';
 import GlobalNotification from '../../global_notification';
 
 import getRoutes from './wallet_routes';
+import classNames from 'classnames';
+
 
 let RouteHandler = Router.RouteHandler;
 
+
 let WalletApp = React.createClass({
     mixins: [Router.State],
 
     render() {
         let subdomain = window.location.host.split('.')[0];
         let ROUTES = getRoutes(null, subdomain);
+        let activeRoutes = this.getRoutes().map(elem => 'route--' + elem.name);
 
         let header = null;
         if ((this.isActive('landing') || this.isActive('login') || this.isActive('signup'))
@@ -28,7 +32,7 @@ let WalletApp = React.createClass({
         }
 
         return (
-            <div className="container ascribe-prize-app">
+            <div className={classNames('container', 'ascribe-wallet-app', 'client--' + subdomain, activeRoutes)}>
                 {header}
                 <RouteHandler />
                 <GlobalNotification />

sass/whitelabel/index.scss

@@ -1,2 +1,3 @@
 @import 'prize/index';
-@import 'wallet/ikonotv/ikonotv_landing';
+@import 'wallet/index';
+@import 'wallet/ikonotv/ikonotv_landing';

sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss

@@ -1,11 +1,23 @@
+.client--ikonotv.route--landing {
+    background-color: #c40050;
+    margin: 0;
+    width: 100%;
+    padding: 5em 1em;
+}
+
+.client--ikonotv .ascribe-login-wrapper {
+
+}
+
+.client--ikonotv.route--landing .ascribe-footer {
+    display: none;
+}
+
 .ikonotv-landing {
     /* center all text on the page */
     text-align: center;
-    background-color: #c40050;
     color: white;
 
-    padding: 5em 5em 5em 5em;
-
     header {
         /* center all images on the page */
         img {
@@ -16,7 +28,7 @@
 
         /* Ikonotv logo */
         img:first-child {
-            width: 200px;
+            max-width: 200px;
         }
 
         > .tagline {
@@ -29,12 +41,30 @@
 
                 margin-top: 10px;
                 margin-bottom: 10px;
+
+                @media only screen and (max-width: 600px) {
+                    font-size: 4em;
+                }
+            }
+
+            > .poster {
+                max-width: 600px;
+                margin: 0 auto;
+                > .content {
+                    width: 100%;
+                    padding-bottom: 56.25%;
+                    height: 0;
+                    background-color: #ffff00;
+                }
             }
         }
     
         > h2 {
             font-weight: 600;
             font-size: 2.75em;
+            @media only screen and (max-width: 600px) {
+                font-size: 1.75em;
+            }
         }
 
         > h2 + h2 {
@@ -44,7 +74,8 @@
 
     article {
         > section {
-            width: 65%;
+            width: 100%;
+            max-width: 60em;
             margin: 3em auto 1em auto;
 
             > h1 {
@@ -57,6 +88,9 @@
                 text-align: left;
                 font-size: 1.3em;
                 line-height: 1.8;
+                @media only screen and (max-width: 600px) {
+                    font-size: 1.1em;
+                }
             }
         }
     }
@@ -78,4 +112,4 @@
             font-weight: 500;
         }
     }
-}
+}

sass/whitelabel/wallet/index.scss

@@ -0,0 +1,5 @@
+.ascribe-wallet-app {
+    border-radius: 0;
+    padding-top: 70px;
+    min-height: 100vh;
+}