switch Angular -> React(half done)

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

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

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

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

browser/styles/mixins/circle.styl

@@ -0,0 +1,3 @@
+circle()
+  border-radius 50%
+  overflow hidden

browser/styles/mixins/fullsize.styl

@@ -0,0 +1,6 @@
+fullsize()
+  position absolute
+  top 0
+  left 0
+  right 0
+  bottom 0

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

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%)