Merge pull request #89 from developmentseed/feature/home-page

Feature/home page

components/button.js

@@ -26,7 +26,7 @@ const style = css`
     /* Default Colors */
     background: #FFFFFF;
     color: ${theme.colors.primaryColor};
-    box-shadow: 2px 2px ${theme.colors.primaryColor};
+    box-shadow: 2px 2px #FFFFFF, 4px 4px ${theme.colors.primaryColor};
     border: 2px solid ${theme.colors.primaryColor};
   }
 

components/clients.js

@@ -104,8 +104,8 @@ class Clients extends Component {
   }
 
   render () {
-    if (this.state.loading) return <div>Loading...</div>
-    if (this.state.error) return <div> {this.state.error.message} </div>
+    if (this.state.loading) return <div className='inner page'>Loading...</div>
+    if (this.state.error) return <div className='inner page'> {this.state.error.message} </div>
 
     let clients = this.state.clients
     let clientSection = <p>No clients created</p>
@@ -182,17 +182,25 @@ class Clients extends Component {
             }
 
             .clients__new {
-              grid-column: 1 / span 4;
+              grid-column: 1 / span 12;
             }
 
             .clients__list {
-              grid-column: 5 / span 8;
+              grid-column: 1 / span 12;
             }
 
             form {
               flex-direction: column;
               align-items: flex-start;
             }
+            @media screen and (min-width: ${theme.mediaRanges.medium}) {
+              .clients__new {
+                grid-column: 1 / span 4;
+              }
+              .clients__list {
+                grid-column: 5 / span 8;
+              }
+            }
           `}
         </style>
       </div>

components/edit-team-form.js

@@ -28,7 +28,7 @@ export default function EditTeamForm ({ initialValues, onSubmit }) {
             </div>
             <div className='form-control'>
               <label htmlFor='bio'>Description</label>
-              <Field type='textarea' name='bio' />
+              <Field component='textarea' name='bio' />
             </div>
             <h2>Location</h2>
             <div className='form-control'>

components/layout.js

@@ -42,11 +42,10 @@ function Layout (props) {
           .page-layout {
             display: grid;
             position: relative;
-            grid-template-rows: 5rem 5rem 4fr 1rem ;
+            grid-template-rows: 5rem 1fr ;
             grid-template-columns: 100%;
             grid-template-areas:
               'sidebar'
-              'header'
               'main'
               'footer';
             height: 100vh;
@@ -55,11 +54,9 @@ function Layout (props) {
           @media screen and (min-width: ${theme.mediaRanges.small}) {
             .page-layout {
               grid-template-columns: 4rem 1fr;
-              grid-template-rows: 0fr;
+              grid-template-rows: 100%;
               grid-template-areas:
-                'sidebar header'
                 'sidebar main'
-                'sidebar footer';
             }
           }
           @media screen and (min-width: ${theme.mediaRanges.large}) {
@@ -83,7 +80,6 @@ function Layout (props) {
 
           .page__heading {
             display: flex;
-            flex-direction: column;
             justify-content: space-between;
             align-items: flex-start;
             margin-bottom: ${theme.layout.globalSpacing};
@@ -185,10 +181,12 @@ function Layout (props) {
             margin-bottom: 0.5rem;
           }
 
-          .form-control :global(input) {
+          .form-control :global(input),
+          .form-control :global(textarea) {
             min-width: 6rem;
             padding: 0.5rem 1rem 0.5rem 0.25rem;
             margin-right: 1rem;
+            border: 2px solid ${theme.colors.primaryColor};
           }
 
           /* Tether element */

components/sidebar.js

@@ -88,6 +88,9 @@ class Sidebar extends Component {
           {`
             .page__sidebar {
               grid-area: sidebar;
+              top: 0;
+              position: sticky;
+              z-index: 100;
               background-color: ${theme.colors.primaryColor};
               color: white;
               display: flex;

components/table.js

@@ -88,7 +88,7 @@ export default function Table ({ columns, rows, onRowClick }) {
             font-weight: ${theme.typography.baseFontWeight};
             font-size: 0.875rem;
             letter-spacing: 0.125rem;
-            border-bottom: 2px solid ${theme.colors.primaryColor};
+            border-bottom: 4px solid ${theme.colors.primaryColor};
           }
 
           tbody tr td {

pages/index.js

@@ -6,6 +6,24 @@ import getConfig from 'next/config'
 import theme from '../styles/theme'
 
 const { publicRuntimeConfig } = getConfig()
+const URL = publicRuntimeConfig.APP_URL
+
+const title = String.raw`
+   ____  _____ __  ___   _______________    __  ________
+  / __ \/ ___//  |/  /  /_  __/ ____/   |  /  |/  / ___/
+ / / / /\__ \/ /|_/ /    / / / __/ / /| | / /|_/ /\__ \
+/ /_/ /___/ / /  / /    / / / /___/ ___ |/ /  / /___/ /
+\____//____/_/  /_/    /_/ /_____/_/  |_/_/  /_//____/
+`
+
+// const shadowVariations = [
+//   `${theme.colors.primaryColor}`,
+//   `${theme.colors.secondaryColor}`,
+//   `${theme.colors.primaryLite}`,
+//   'transparent',
+//   'white'
+// ]
+// const ShadowColor = shadowVariations[Math.floor(Math.random() * (shadowVariations.length))]
 
 class Home extends Component {
   static async getInitialProps ({ query }) {
@@ -20,34 +38,116 @@ class Home extends Component {
 
   render () {
     return (
-      <section className='inner page welcome'>
-        <h1>Teams!</h1>
-        <p>
-          Create teams of {publicRuntimeConfig.OSM_NAME} users and import them into your apps.
-        </p>
-        {
-          this.props.user.username
-            ? (
-              <div>
-                <h2>Welcome, {this.props.user.username}!</h2>
-                <ul className='welcome__actions'>
-                  <li><a href={join(publicRuntimeConfig.APP_URL, '/teams/create')}>➕ Create New Team</a></li>
-                  <li><a href={join(publicRuntimeConfig.APP_URL, '/teams')} className=''>🌏 All Teams</a></li>
-                  <li><a href={join(publicRuntimeConfig.APP_URL, '/profile')} className=''>💁‍♀️ Profile</a></li>
-                  <li><a href={join(publicRuntimeConfig.APP_URL, '/clients')} className=''>⚙️ Connected Apps</a></li>
-                </ul>
-                <Button variant='danger' onClick={() => {
-                  window.sessionStorage.clear()
-                  Router.push('/logout')
-                }
-                }>Logout</Button>
-              </div>
-            )
-            : <Button href='/login'>Sign in →</Button>
-        }
+      <main>
+        <section className='inner page welcome'>
+          <div className='card'>
+            <h1 className='welcome__intro'><pre>{title}</pre></h1>
+            <p>
+              Create teams of {publicRuntimeConfig.OSM_NAME} users and import them into your apps.
+              Making maps better, together. Enable teams in OpenStreetMap applications, or build your team here. It’s not safe to go alone.
+            </p>
+            {
+              this.props.user.username
+                ? (
+                  <div className='welcome__user'>
+                    <h2>Welcome, {this.props.user.username}!</h2>
+                    <ul className='welcome__user--actions'>
+                      <li><a href={join(publicRuntimeConfig.APP_URL, '/teams/create')}>Create New Team</a></li>
+                      <li><a href={join(publicRuntimeConfig.APP_URL, '/teams')} className=''>All Teams</a></li>
+                      <li><a href={join(publicRuntimeConfig.APP_URL, '/profile')} className=''>Profile</a></li>
+                      <li><a href={join(publicRuntimeConfig.APP_URL, '/clients')} className=''>Connected Apps</a></li>
+                    </ul>
+                    <Button variant='danger' onClick={() => {
+                      window.sessionStorage.clear()
+                      Router.push('/logout')
+                    }
+                    }>Logout</Button>
+                  </div>
+                )
+                : <Button href='/login'>Sign in →</Button>
+            }
+          </div>
+          <div className='map-bg' />
+          {// <div className='box-holder'>
+          //   <div className='box' />
+          //   <div className='box' />
+          //   <div className='box' />
+          // </div>
+          }
+        </section>
         <style jsx>
           {`
-            .welcome__actions {
+            main {
+              background: ${theme.colors.primaryDark};
+              background-image: radial-gradient(white 5%, transparent 0);
+              background-repeat: repeat;
+              background-size: 30px 30px;
+              font-family: ${theme.typography.headingFontFamily};
+              text-transform: uppercase;
+              position: relative;
+              z-index: 1;
+            }
+            main:after {
+              content: '';
+              position: absolute;
+              top: 0;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              height: 100%;
+              width: 100%;
+              opacity: 0.8;
+              z-index: -1;
+              background: url(${join(URL, '/static/grid-map.svg')});
+              background-size: contain;
+              background-repeat: no-repeat;
+              background-position: center 75%;
+            }
+
+            .card,
+            .card h1,
+            .card h2,
+            .card a {
+              color: white;
+            }
+
+            .welcome .card {
+              display: flex;
+              flex-flow: column wrap;
+              text-align: left;
+              align-items: flex-end;
+              max-width: 48rem;
+              padding: 2rem;
+              background: rgba(25,51,130, 0.9);
+              border: 4px solid white;
+              position: relative;
+              box-shadow: 12px 12px 0 ${theme.colors.primaryDark}, 12px 12px 0 3px white;
+            }
+
+            .welcome__intro {
+              font-size: .8rem;
+              margin-bottom: 2rem;
+              width: 100%;
+            }
+
+            pre {
+              max-width: 100%;
+              line-height: 1;
+              font-family: ${theme.typography.headingFontFamily};
+            }
+
+            .welcome__intro + p {
+              padding-bottom: 2rem;
+            }
+
+            .welcome__user {
+              align-self: flex-start;
+              width: 100%;
+              border: 2px dashed white;
+              padding: 2rem;
+            }
+
+            .welcome__user--actions {
               list-style: none;
               display: flex;
               flex-direction: column;
@@ -57,12 +157,102 @@ class Home extends Component {
               padding: ${theme.layout.globalSpacing} 0;
             }
 
-            .welcome__actions li {
+            .welcome__user--actions li {
               padding-bottom: ${theme.layout.globalSpacing};
             }
+
+            .box-holder {
+              display: flex;
+              margin: 10rem 1rem;
+              justify-content: space-between;
+            }
+
+            .box {
+              height: 1rem;
+              width: 1rem;
+              background: white;
+              animation: blink 3s step-end infinite;
+            }
+
+            .box:first-of-type {
+              transform: rotate(90deg);
+            }
+
+            .box:last-of-type {
+              transform: rotate(-90deg);
+            }
+
+            @media screen and (min-width: ${theme.mediaRanges.small}) {
+              .welcome .card {
+                margin-top: 4rem;
+                margin-left: 2rem;
+                font-size: 1.25rem;
+              }
+            }
+
+            @media screen and (min-width: ${theme.mediaRanges.large}) {
+              main:after {
+                background-position: center bottom;
+              }
+              .inner.page.welcome{
+                margin-left: 0;
+              }
+
+              .welcome__intro {
+                font-size: 1.25rem;
+              }
+
+              .welcome .card {
+                margin-top: 8rem;
+                margin-left: 4rem;
+              }
+            }
+
+            @keyframes blink {
+              5%{
+                box-shadow: 1.25rem 0 0 ${theme.colors.secondaryColor},
+                            -1.25rem 0 0 ${theme.colors.primaryLite},
+                            0 1.25rem 0 transparent,
+                            0 -1.25rem 0 ${theme.colors.secondaryColor},
+                            1.25rem 1.25rem 0 transparent,
+                            1.25rem -1.25rem 0 ${theme.colors.secondaryColor},
+                            -1.25rem 1.25rem 0 ${theme.colors.primaryColor},
+                            -1.25rem -1.25rem 0 ${theme.colors.secondaryColor};
+              }
+              50%{
+                box-shadow: 1.25rem 0 0 ${theme.colors.primaryColor},
+                            -1.25rem 0 0 transparent,
+                            0 1.25rem 0 ${theme.colors.secondaryColor},
+                            0 -1.25rem 0 ${theme.colors.primaryColor},
+                            1.25rem 1.25rem 0 ${theme.colors.primaryColor},
+                            1.25rem -1.25rem 0 ${theme.colors.secondaryColor},
+                            -1.25rem 1.25rem 0 transparent,
+                            -1.25rem -1.25rem 0 ${theme.colors.secondaryColor};
+              }
+              75%{
+                box-shadow: 1.25rem 0 0 ${theme.colors.secondaryColor},
+                            -1.25rem 0 0 ${theme.colors.primaryLite},
+                            0 1.25rem 0 ${theme.colors.primaryColor},
+                            0 -1.25rem 0 transparent,
+                            1.25rem 1.25rem 0 ${theme.colors.secondaryColor},
+                            1.25rem -1.25rem 0 ${theme.colors.primaryColor},
+                            -1.25rem 1.25rem 0 ${theme.colors.primaryLite},
+                            -1.25rem -1.25rem 0 transparent;
+              }
+              80%{
+                box-shadow: 1.25rem 0 0 ${theme.colors.primaryColor},
+                            -1.25rem 0 0 transparent,
+                            0 1.25rem 0 ${theme.colors.secondaryColor},
+                            0 -1.25rem 0 ${theme.colors.primaryColor},
+                            1.25rem 1.25rem 0 ${theme.colors.primaryColor},
+                            1.25rem -1.25rem 0 ${theme.colors.secondaryColor},
+                            -1.25rem 1.25rem 0 transparent,
+                            -1.25rem -1.25rem 0 ${theme.colors.secondaryColor};
+              }
+            }
           `}
         </style>
-      </section>
+      </main>
     )
   }
 }