switch Angular -> React(half done)

2025-12-13 09:46:22 +00:00 · 2015-07-06 02:03:40 +09:00
parent 1a832c1fc4
commit 361e9c629e
27 changed files with 1012 additions and 43 deletions
--- a/browser/index.html
+++ b/browser/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <body>
+    <a href="/main">Go Main</a>
+    <a href="/main">Go Popup</a>
+  </body>
+</html>
--- a/browser/main/Containers/BlueprintContainer.jsx
+++ b/browser/main/Containers/BlueprintContainer.jsx
@@ -0,0 +1,11 @@
+var React = require('react/addons')
+
+module.exports = React.createClass({
+  render: function () {
+    return (
+      <div>
+        Blueprint Container
+      </div>
+    )
+  }
+})
--- a/browser/main/Containers/DashboardContainer.jsx
+++ b/browser/main/Containers/DashboardContainer.jsx
@@ -0,0 +1,52 @@
+var React = require('react/addons')
+
+module.exports = React.createClass({
+  render: function () {
+    return (
+      <div className='DashboardContainer'>
+        <h1 className='jumbotron'>Codexen App <small>v0.2.0</small></h1>
+
+        <h2>About CodeXen</h2>
+
+        <p>
+          CodeXen is short code storage tool make coding more stressless. If you use CodeXen, then you will be disentangled from troublesome organizing a large number of snippets and googling same code many times.
+        </p>
+
+        <ol>
+          <li>
+            <h3>Post your code</h3>
+            <p>
+              Post your commonly used code with description,category,and tags.
+            </p>
+          </li>
+          <li>
+            <h3>Save on cloud</h3>
+            <p>
+              From short snippet to long complex code,CodeXen saves any code simply.
+            </p>
+          </li>
+          <li>
+            <h3>
+              Use code like a magic
+            </h3>
+            <p>
+              CodeXen call code you posted whereever you are.Type [shift+control+tab] simultaneously.
+            </p>
+          </li>
+          <li>
+            <h3>
+              Code Elegantly
+            </h3>
+            <p>
+              That's all!
+              You must be loved with CodeXen. Enjoy coding;)
+            </p>
+          </li>
+        </ol>
+        <p>
+          © 2015 MAISIN&CO.,Inc.
+        </p>
+      </div>
+    )
+  }
+})
--- a/browser/main/Containers/LoginContainer.jsx
+++ b/browser/main/Containers/LoginContainer.jsx
@@ -0,0 +1,44 @@
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
+var Auth = require('../Services/Auth')
+
+module.exports = React.createClass({
+  mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
+  getInitialState: function () {
+    return {
+      email: '',
+      password: ''
+    }
+  },
+  handleSubmit: function (e) {
+    console.log(this.state)
+    Auth.attempt()
+    // TODO: request user data
+      .then(function (user) {
+        this.transitionTo('dashboard', {planetName: user.name})
+      }.bind(this))
+    e.preventDefault()
+  },
+  render: function () {
+    return (
+      <div className='LoginContainer'>
+        <h1 className='text-center'>CodeXen</h1>
+        <h2 className='text-center'>Log In | <small><Link to='register'>Register</Link></small></h2>
+        <form onSubmit={this.handleSubmit}>
+          <div className='form-group'>
+            <label>E-mail</label>
+            <input valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
+          </div>
+          <div className='form-group'>
+            <label>Password</label>
+            <input valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/>
+          </div>
+          <div className='form-group'>
+            <button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Login</button>
+          </div>
+        </form>
+      </div>
+    )
+  }
+})
--- a/browser/main/Containers/MainContainer.jsx
+++ b/browser/main/Containers/MainContainer.jsx
@@ -0,0 +1,18 @@
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var RouteHandler = ReactRouter.RouteHandler
+
+module.exports = React.createClass({
+    mixins: [ReactRouter.Navigation, ReactRouter.State],
+    render: function () {
+      // Redirect Login state
+      if (this.getPath() === '/') {
+        this.transitionTo('/login')
+      }
+      return (
+        <div className='Main'>
+          <RouteHandler/>
+        </div>
+      )
+    }
+})
--- a/browser/main/Containers/PlanetContainer.jsx
+++ b/browser/main/Containers/PlanetContainer.jsx
@@ -0,0 +1,138 @@
+var React = require('react/addons')
+var RouteHandler = require('react-router').RouteHandler
+var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
+
+var userPlanets = [
+  {
+    id: 1,
+    name: 'testcat',
+    profileName: 'TestCat'
+  },
+  {
+    id: 2,
+    name: 'group1',
+    profileName: 'Some Group#1'
+  },
+  {
+    id: 3,
+    name: 'group2',
+    profileName: 'Some Group#1'
+  }
+]
+
+var PlanetNavigator = React.createClass({
+  propTypes: {
+    currentPlanet: React.PropTypes.object
+  },
+  render: function () {
+    var planets = userPlanets.map(function (planet) {
+      return (
+        <li key={planet.id} className={this.props.currentPlanet.name === planet.name ? 'active' : ''}><a>{planet.profileName[0]}</a></li>
+      )
+    }.bind(this))
+
+    return (
+      <div className='PlanetNavigator'>
+        <ul>
+          {planets}
+        </ul>
+      </div>
+    )
+  }
+})
+
+var PlanetMain = React.createClass({
+  propTypes: {
+    currentPlanet: React.PropTypes.object
+  },
+  render: function () {
+    return (
+      <div className='PlanetMain'>
+        <SideNavigator currentPlanet={this.props.currentPlanet}/>
+        <Screen currentPlanet={this.props.currentPlanet}/>
+      </div>
+    )
+  }
+})
+
+var SideNavigator = React.createClass({
+  propTypes: {
+    currentPlanet: React.PropTypes.shape({
+      name: React.PropTypes.string
+    })
+  },
+  render: function () {
+    var currentPlanetName = this.props.currentPlanet.name
+
+    return (
+      <div className='SideNavigator'>
+        <div className='nav-header'>
+          <p className='planet-name'>{currentPlanetName}</p>
+          <button className='menu-btn'>
+            <i className='fa fa-chevron-down'></i>
+          </button>
+        </div>
+        <button className='btn-primary btn-block'>
+          <i className='fa fa-rocket fa-fw'/> Launch
+        </button>
+        <nav>
+          <Link to='dashboard' params={{planetName: currentPlanetName}}>
+            <i className='fa fa-home fa-fw'/> Home
+          </Link>
+          <Link to='snippets' params={{planetName: currentPlanetName}}>
+            <i className='fa fa-code fa-fw'/> Snippets
+          </Link>
+          <Link to='blueprint' params={{planetName: currentPlanetName}}>
+            <i className='fa fa-wrench fa-fw'/> Blueprints
+          </Link>
+        </nav>
+      </div>
+    )
+  }
+})
+
+var Screen = React.createClass({
+  render: function () {
+    return (
+      <div className='Screen'>
+        <RouteHandler/>
+      </div>
+    )
+  }
+})
+
+module.exports = React.createClass({
+  mixins: [ReactRouter.Navigation],
+  propTypes: {
+    params: React.PropTypes.object,
+    planetName: React.PropTypes.string
+  },
+  render: function () {
+    var currentPlanetName = this.props.params.planetName
+    var currentPlanet = null
+    userPlanets.some(function (planet) {
+      if (planet.name === currentPlanetName) {
+        currentPlanet = planet
+        return true
+      }
+      return false
+    })
+    if (currentPlanet == null) {
+      var redirectTo = userPlanets[0].name
+      this.transitionTo('planet', {planetName: redirectTo})
+      return (
+        <div className='PlanetContainer'>
+          Redirecting...
+        </div>
+      )
+    }
+
+    return (
+      <div className='PlanetContainer'>
+        <PlanetNavigator currentPlanet={currentPlanet}/>
+        <PlanetMain currentPlanet={currentPlanet}/>
+      </div>
+    )
+  }
+})
--- a/browser/main/Containers/RegisterContainer.jsx
+++ b/browser/main/Containers/RegisterContainer.jsx
@@ -0,0 +1,55 @@
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
+var Auth = require('../Services/Auth')
+
+module.exports = React.createClass({
+  mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
+  getInitialState: function () {
+    return {
+      email: '',
+      password: '',
+      name: '',
+      profileName: ''
+    }
+  },
+  handleSubmit: function (e) {
+    Auth.register()
+    // TODO: request user data
+      .then(function (user) {
+        this.transitionTo('dashboard', {planetName: user.name})
+      }.bind(this))
+
+    e.preventDefault()
+  },
+  render: function () {
+    return (
+      <div className='RegisterContainer'>
+        <h1 className='text-center'>CodeXen</h1>
+        <h2 className='text-center'><small><Link to='login'>Log In</Link></small> | Register</h2>
+        <form onSubmit={this.handleSubmit}>
+          <div className='form-group'>
+            <label>E-mail</label>
+            <input valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
+          </div>
+          <div className='form-group'>
+            <label>Password</label>
+            <input valueLink={this.linkState('password')} type='password' placeholder='Password'/>
+          </div>
+          <hr></hr>
+          <div className='form-group'>
+            <label>User name</label>
+            <input valueLink={this.linkState('name')} type='text' placeholder='name'/>
+          </div>
+          <div className='form-group'>
+            <label>Profile name</label>
+            <input valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/>
+          </div>
+          <div className='form-group'>
+            <button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Register</button>
+          </div>
+        </form>
+      </div>
+    )
+  }
+})
--- a/browser/main/Containers/SnippetContainer.jsx
+++ b/browser/main/Containers/SnippetContainer.jsx
@@ -0,0 +1,110 @@
+var React = require('react/addons')
+var Snippet = require('../Services/Snippet')
+
+var SnippetList = React.createClass({
+  propTypes: {
+    snippets: React.PropTypes.array,
+    selectSnippet: React.PropTypes.func
+  },
+  itemClickHandlerFactory: function (snippet) {
+    return function () {
+      console.log(this.props.selectSnippet)
+      this.props.selectSnippet(snippet)
+    }.bind(this)
+  },
+  render: function () {
+    var snippets = this.props.snippets.map(function (snippet) {
+      var tags = snippet.Tags.map(function (tag) {
+        return (
+          <a key={tag.id} href>#{tag.name}</a>
+        )
+      })
+      return (
+        <li key={snippet.id} onClick={this.itemClickHandlerFactory(snippet)}>
+          <div className='callSign'><i className='fa fa-code'></i> {snippet.callSign}</div>
+          <div className='description'>{snippet.description}</div>
+          <div className='updatedAt'>{snippet.updatedAt}</div>
+          <div className='tags'><i className='fa fa-tags'/>{tags}</div>
+        </li>
+      )
+    }.bind(this))
+
+    return (
+      <div className='SnippetList'>
+        <div className='search form-group'><input type='text' placeholder='Search...'/></div>
+        <ul>
+          {snippets}
+        </ul>
+      </div>
+    )
+  }
+})
+
+var SnippetViewer = React.createClass({
+  propTypes: {
+    snippet: React.PropTypes.object
+  },
+  render: function () {
+    var snippet = this.props.snippet
+    var content
+    if (snippet != null) {
+      var tags = snippet.Tags.map(function (tag) {
+        return (
+          <a key={tag.id} href>#{tag.name}</a>
+        )
+      })
+      content = (
+        <div className='SnippetViewer'>
+          <div className='viewer-header'><i className='fa fa-code'></i> {snippet.callSign} <small className='updatedAt'>{snippet.updatedAt}</small></div>
+          <div className='viewer-body'>
+            <div className='viewer-detail'>
+              <div className='description'>{snippet.description}</div>
+              <div className='tags'><i className='fa fa-tags'/>{tags}</div>
+            </div>
+            <div>{snippet.content}</div>
+          </div>
+        </div>
+      )
+    } else {
+      content = (
+        <div className='SnippetViewer'>
+          Not selected
+        </div>
+      )
+    }
+    return content
+  }
+})
+
+var SnippetContainer = React.createClass({
+  propTypes: {
+    params: React.PropTypes.shape({
+      planetName: React.PropTypes.string
+    })
+  },
+  getInitialState: function () {
+    return {
+      snippets: [],
+      curentSnippet: {}
+    }
+  },
+  componentDidMount: function () {
+    Snippet.getByPlanet(this.props.params.planetName)
+      .then(function (snippets) {
+        this.setState({snippets: snippets, currentSnippet: snippets.length > 0 ? snippets[0] : null})
+      }.bind(this))
+  },
+  selectSnippet: function (snippet) {
+    this.setState({currentSnippet: snippet})
+  },
+  render: function () {
+    return (
+      <div className='SnippetContainer'>
+        <SnippetList selectSnippet={this.selectSnippet} snippets={this.state.snippets}/>
+        <SnippetViewer snippet={this.state.currentSnippet}/>
+      </div>
+    )
+  }
+})
+
+module.exports = SnippetContainer
--- a/browser/main/Services/Auth.js
+++ b/browser/main/Services/Auth.js
@@ -0,0 +1,40 @@
+/* global localStorage */
+var Auth = {}
+
+var currentUser = null
+Auth.attempt = function (params) {
+  return new Promise(function (resolve, reject) {
+    var token = 'some token'
+    var user = {
+      name: 'testcat',
+      email: 'testcat@example.com',
+      profileName: 'Test Cat'
+    }
+    localStorage.setItem('token', token)
+
+    resolve(user)
+  })
+}
+
+Auth.register = function (params) {
+  return new Promise(function (resolve, reject) {
+    var token = 'some token'
+    var user = {
+      name: 'testcat',
+      email: 'testcat@example.com',
+      profileName: 'Test Cat'
+    }
+    localStorage.setItem('token', token)
+
+    resolve(user)
+  })
+}
+
+Auth.getUser = function () {
+  return new Promise(function (resolve, reject) {
+
+    resolve(currentUser)
+  })
+}
+
+module.exports = Auth
--- a/browser/main/Services/Snippet.js
+++ b/browser/main/Services/Snippet.js
@@ -0,0 +1,38 @@
+var Snippet = {}
+
+var snippets = {
+  testcat: [
+    {
+      id: 1,
+      callSign: 'alert',
+      description: 'yolo',
+      content: '<div></div>',
+      mode: 'html',
+      createdAt: '2015-06-26T15:10:59.000Z',
+      updatedAt: '2015-06-26T15:10:59.000Z',
+      UserId: 1,
+      Tags: [{'id': 18, 'name': 'bootstrap', 'color': null}, {'id': 19, 'name': 'alert', 'color': null}]
+    },
+    {
+      id: 2,
+      callSign: 'log',
+      description: 'javascript log',
+      content: 'console.log(\'yolo\')',
+      mode: 'js',
+      createdAt: '2015-06-26T15:10:59.000Z',
+      updatedAt: '2015-06-26T15:10:59.000Z',
+      UserId: 1,
+      Tags: [{'id': 20, 'name': 'log', 'color': null}, {'id': 1, 'name': 'js', 'color': null}]
+    }
+  ],
+  group1: [],
+  group2: []
+}
+
+Snippet.getByPlanet = function (planetName) {
+  return new Promise(function (resolve, reject) {
+    resolve(snippets[planetName])
+  })
+}
+
+module.exports = Snippet
--- a/browser/main/index.electron.html
+++ b/browser/main/index.electron.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CodeXen</title>
+
+  <link rel="stylesheet" href="../vendor/fontawesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
+
+</head>
+<body>
+  <div id="content"></div>
+  <script>
+    require('node-jsx').install({ harmony: true, extension: '.jsx' });
+    require('./index.jsx')
+  </script>
+</body>
+</html>
--- a/browser/main/index.html
+++ b/browser/main/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CodeXen</title>
+
+  <link rel="stylesheet" href="../vendor/fontawesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
+  <script src="../vendor/react/react-with-addons.js"></script>
+  <script src="../vendor/react-router/build/umd/ReactRouter.js"></script>
+
+</head>
+<body>
+  <div id="content"></div>
+  <script src="http://localhost:8090/webpack-dev-server.js"></script>
+  <script type="text/javascript" src="http://localhost:8090/assets/main.js"></script>
+</body>
+</html>
--- a/browser/main/index.jsx
+++ b/browser/main/index.jsx
@@ -0,0 +1,34 @@
+require('../styles/main/index.styl')
+
+var React = require('react/addons')
+
+var ReactRouter = require('react-router')
+var Route = ReactRouter.Route
+var DefaultRoute = ReactRouter.DefaultRoute
+
+var MainContainer = require('./Containers/MainContainer.jsx')
+
+var LoginContainer = require('./Containers/LoginContainer.jsx')
+var RegisterContainer = require('./Containers/RegisterContainer.jsx')
+
+var PlanetContainer = require('./Containers/PlanetContainer.jsx')
+
+var Dashboard = require('./Containers/DashboardContainer.jsx')
+var SnippetContainer = require('./Containers/SnippetContainer.jsx')
+var BlueprintContainer = require('./Containers/BlueprintContainer.jsx')
+
+var routes = (
+  <Route path='/' handler={MainContainer}>
+    <Route name='planet' path='planet/:planetName' handler={PlanetContainer}>
+      <DefaultRoute name='dashboard' handler={Dashboard}/>
+      <Route name='snippets' handler={SnippetContainer}/>
+      <Route name='blueprint' handler={BlueprintContainer}/>
+    </Route>
+    <Route name='login' path='login' handler={LoginContainer}/>
+    <Route name='register' path='register' handler={RegisterContainer}/>
+  </Route>
+)
+
+ReactRouter.run(routes, ReactRouter.HashLocation, function (Root) {
+  React.render(<Root/>, document.getElementById('content'))
+})
--- a/browser/styles/main/components/SideNavigator.styl
+++ b/browser/styles/main/components/SideNavigator.styl
@@ -0,0 +1,50 @@
+.SideNavigator
+  absolute top bottom left
+  width 200px
+  border-right solid 2px brandColor
+  padding 10px
+  box-sizing border-box
+  .nav-header
+    clearfix()
+    margin-bottom 15px
+    .planet-name
+      float left
+      line-height 30px
+      font-size 1.1em
+    .menu-btn
+      float right
+      display block
+      font-size 0.8em
+      color lightButtonColor
+      border solid 2px lightButtonColor
+      box-sizing border-box
+      circle()
+      background-image none
+      background-color transparent
+      width 30px
+      height 30px
+      text-align center
+      cursor pointer
+      transform scale(0.8)
+      &:active, &.active, &:hover, &.hover
+        background-color lightButtonColor
+        color white
+  nav
+    a
+      display block
+      position relative
+      right 0px
+      box-sizing border-box
+      width 190px
+      padding 15px 15px
+      margin 10px 0
+      text-decoration none
+      border-radius left 10px
+      background-color transparent
+      color textColor
+      transition 0.1s
+      &:hover, &.hover
+        background-color hoverBackgroundColor
+      &:active, &.active
+        background-color brandColor
+        color white
--- a/browser/styles/main/containers/DashboardContainer.styl
+++ b/browser/styles/main/containers/DashboardContainer.styl
@@ -0,0 +1,15 @@
+.DashboardContainer
+  fullsize()
+  box-sizing border-box
+  overflow-y auto
+  padding 10px
+  .jumbotron
+    background-color brandColor
+    color white
+    padding 65px 20px
+    font-size 3.5em
+    margin-bottom 25px
+  h2, h3
+    margin-bottom 15px
+  p
+    margin-bottom 25px
--- a/browser/styles/main/containers/SnippetContainer.styl
+++ b/browser/styles/main/containers/SnippetContainer.styl
@@ -0,0 +1,53 @@
+.SnippetContainer
+  fullsize()
+  .tags
+    a
+      margin 0 2px
+  .SnippetList
+    absolute top bottom left
+    width 250px
+    border-right solid 1px highlightenBorderColor
+    .search
+      border-bottom solid 1px borderColor
+      padding 5px
+      margin 0
+
+    &>ul
+      absolute bottom left right
+      top 44px
+      overflow-y auto
+      li
+        border-bottom solid 1px borderColor
+        padding 10px
+        cursor pointer
+        .callSign
+          margin-bottom 5px
+          font-weight 600
+        .description
+          margin-bottom 5px
+        .updatedAt
+          margin-bottom 5px
+          color lighten(textColor, 25%)
+          font-size 0.8em
+        &:hover, &.hover
+          background-color hoverBackgroundColor
+
+  .SnippetViewer
+    absolute top bottom right
+    left 250px
+    .viewer-header
+      height 44px
+      line-height 44px
+      padding 0 15px
+      border-bottom solid 1px borderColor
+      box-sizing border-box
+      small
+        font-size 0.5em
+    .viewer-body
+      absolute bottom left right
+      top 44px
+      .viewer-detail
+        border-bottom solid 1px borderColor
+        padding 10px
+        .description
+          margin-bottom 15px
--- a/browser/styles/main/index.styl
+++ b/browser/styles/main/index.styl
@@ -0,0 +1,104 @@
+@import '../../../node_modules/nib/lib/nib'
+@import '../vars'
+@import '../mixins/*'
+global-reset()
+@import '../shared/*'
+@import './components/*'
+@import './containers/*'
+
+body
+  font-family "Lato"
+  color textColor
+
+h1
+  font-size 2em
+h2
+  font-size 1.5em
+h3
+  font-size 1.3em
+h4
+  font-size 1.15em
+a
+  color brandColor
+  &:visited{
+    color brandColor
+  }
+
+hr
+  border-top none
+  border-bottom solid 1px borderColor
+  margin 25px 0
+
+.text-center
+  text-align center
+
+.form-group
+  margin-bottom 15px
+  &>label
+    display block
+    margin-bottom 5px
+  &>input[type='text'], &>input[type='password']
+    display block
+    border solid 2px borderColor
+    padding 0 15px
+    font-size 1em
+    height 33px
+    border-radius 16.5px
+    box-sizing border-box
+    width 100%
+
+
+#content
+  fullsize()
+
+.LoginContainer, .RegisterContainer
+  width 400px
+  margin 15px auto
+  padding 25px 15px
+  box-sizing border-box
+  h1, h2
+    margin 5px auto 25px
+
+.PlanetNavigator
+  background-color #032B35
+  color white
+  absolute left top bottom
+  width 50px
+  text-align center
+  box-sizing border-box
+  ul>li
+    padding 10px 3px
+    border-bottom solid 1px invBorderColor
+    &.active
+      background-color brandColor
+      a
+        background-color white
+    a
+      display block
+      width 44px
+      height 44px
+      text-align center
+      background-color #4D4D4D
+      color black
+      line-height 44px
+      font-size 1.1em
+      cursor pointer
+      circle()
+      transition 0.1s
+      &:hover, &:active
+        background-color white
+    img
+      circle()
+      width 44px
+      height 44px
+
+.PlanetContainer
+  fullsize()
+.PlanetMain
+  absolute top bottom right
+  left 50px
+
+
+.Screen
+  absolute top bottom right
+  left 200px
--- a/browser/styles/mixins/circle.styl
+++ b/browser/styles/mixins/circle.styl
@@ -0,0 +1,3 @@
+circle()
+  border-radius 50%
+  overflow hidden
--- a/browser/styles/mixins/fullsize.styl
+++ b/browser/styles/mixins/fullsize.styl
@@ -0,0 +1,6 @@
+fullsize()
+  position absolute
+  top 0
+  left 0
+  right 0
+  bottom 0
--- a/browser/styles/shared/btn.styl
+++ b/browser/styles/shared/btn.styl
@@ -0,0 +1,44 @@
+.btn-primary, .btn-default
+  border-style solid
+  border-width 2px
+  background-image none
+  height 44px
+  padding 0 15px
+  border-radius 22px
+  box-sizing border-box
+  font-size 1.1em
+  font-weight 600
+  transition 0.1s
+  cursor pointer
+
+.btn-block
+  display block
+  width 100%
+  margin 0 auto
+
+.btn-square
+  display inline-block
+  width 44px
+  padding 0
+
+.btn-sm
+  height 32px
+  border-radius 16px
+  &.btn-square
+    width 32px
+
+.btn-primary
+  border-color brandBorderColor
+  background-color transparent
+  color brandColor
+  &:hover, &.hover, &:active, &.active
+    color white
+    background-color brandColor
+
+.btn-default
+  border-color invBorderColor
+  background-color transparent
+  color invBorderColor
+  &:hover, &.hover, &:active, &.active
+    color white
+    background-color invBorderColor
--- a/browser/styles/vars.styl
+++ b/browser/styles/vars.styl
@@ -0,0 +1,15 @@
+borderColor = #E8E8E8
+highlightenBorderColor = darken(borderColor, 20%)
+invBorderColor = #404849
+brandBorderColor = #3FB399
+
+buttonBorderColor = #4C4C4C
+
+lightButtonColor = #898989
+
+brandColor = #2BAC8F
+
+textColor = #434343
+
+backgroundColor= white
+hoverBackgroundColor= transparentify(#444, 7%)