add onboard page

bukinoshita · Feb 13, 2018 · 596e01c · 596e01c
1 parent fbc49e2
commit 596e01c
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 6 deletions.
diff --git a/main/index.js b/main/index.js
@@ -26,6 +26,8 @@ app.on('ready', async () => {
     height: 580,
     minWidth: 320,
     minHeight: 580,
+    maxWidth: 320,
+    maxHeight: 580,
     resizable: true,
     backgroundColor: '#000000',
     frame: platform() !== 'win32',

diff --git a/renderer/components/button-link.js b/renderer/components/button-link.js
@@ -0,0 +1,63 @@
+'use strict'
+
+// Packages
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import Link from 'next/link'
+
+// Theme
+import { colors, typography } from './../theme'
+
+const ButtonLink = ({ children, onClick, color, href }) => {
+  const classnames = classNames(color)
+
+  return (
+    <button className={classnames} onClick={onClick}>
+      <Link prefetch href={href}>
+        <span>{children}</span>
+      </Link>
+
+      <style jsx>{`
+        button {
+          width: 100%;
+          height: 40px;
+          background-color: ${colors.white};
+          color: ${colors.black};
+          border: none;
+          font-weight: ${typography.semibold};
+          font-size: ${typography.f10};
+          cursor: pointer;
+          text-transform: uppercase;
+          letter-spacing: 2px;
+          outline: none;
+        }
+
+        span {
+          color: ${colors.black};
+        }
+
+        .dark {
+          background-color: ${colors.black};
+          color: ${colors.white};
+        }
+
+        .dark span {
+          color: ${colors.white};
+        }
+      `}</style>
+    </button>
+  )
+}
+
+ButtonLink.defaultProps = {
+  onClick: null,
+  href: '/home'
+}
+
+ButtonLink.propTypes = {
+  children: PropTypes.node,
+  onClick: PropTypes.func,
+  href: PropTypes.string.isRequired
+}
+
+export default ButtonLink
diff --git a/renderer/components/button.js b/renderer/components/button.js
@@ -2,29 +2,37 @@
 
 // Packages
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 // Theme
 import { colors, typography } from './../theme'
 
-const Button = ({ children, type, onClick }) => {
+const Button = ({ children, type, onClick, color }) => {
+  const classnames = classNames(color)
+
   return (
-    <button type={type} onClick={onClick}>
+    <button className={classnames} type={type} onClick={onClick}>
       {children}
 
       <style jsx>{`
         button {
           width: 100%;
-          height: 36px;
-          background: ${colors.white};
-          border: none;
+          height: 40px;
+          background-color: ${colors.white};
           color: ${colors.black};
+          border: none;
           font-weight: ${typography.semibold};
           font-size: ${typography.f10};
           cursor: pointer;
           text-transform: uppercase;
           letter-spacing: 2px;
           outline: none;
         }
+
+        .dark {
+          background-color: ${colors.black};
+          color: ${colors.white};
+        }
       `}</style>
     </button>
   )

diff --git a/renderer/pages/onboard.js b/renderer/pages/onboard.js
@@ -0,0 +1,61 @@
+'use strict'
+
+// Packages
+import { Component } from 'react'
+
+// Layouts
+import Page from './../layouts/page'
+
+// Components
+import Row from './../components/row'
+import ButtonLink from './../components/button-link'
+
+// Theme
+import { colors, typography } from './../theme'
+
+class Onboard extends Component {
+  render() {
+    return (
+      <Page>
+        <Row>
+          <section>
+            <h1>
+              Welcome to <span>Taskr</span>
+            </h1>
+
+            <div>
+              <ButtonLink href="/signup">Pro — 14 days free trial</ButtonLink>
+              <ButtonLink href="/home?tab=Today" color="dark">
+                Continue on free version
+              </ButtonLink>
+            </div>
+          </section>
+        </Row>
+
+        <style jsx>{`
+          section {
+            display: flex;
+            flex-direction: column;
+            min-height: 580px;
+            justify-content: space-between;
+            padding-top: 200px;
+            padding-bottom: 30px;
+          }
+
+          h1 {
+            color: ${colors.white};
+            font-weight: ${typography.thin};
+            font-size: 40px;
+            line-height: 50px;
+          }
+
+          span {
+            font-weight: ${typography.bold};
+          }
+        `}</style>
+      </Page>
+    )
+  }
+}
+
+export default Onboard
diff --git a/renderer/pages/start.js b/renderer/pages/start.js
@@ -17,7 +17,7 @@ import { colors, typography } from './../theme'
 class Start extends Component {
   componentDidMount() {
     const isPro = remote && remote.app ? remote.app.config.user.pro : false
-    const redirectUrl = isPro ? '/login' : '/home?tab=Today'
+    const redirectUrl = isPro ? '/login' : '/onboard'
 
     Router.push(redirectUrl)
   }