set theme Solarized dark

src/controllers/directives/SideNavController.js

@@ -9,7 +9,7 @@ angular.module('codexen')
       if (vm.isAuthenticated) {
         User.me().success(function (data) {
           console.log('currentUser', data)
-          vm.currentUser = data.user
+          vm.currentUser = data
         })
       }
     }

src/styles/_bootstrap.styl

@@ -1,6 +1,6 @@
 // Core variables and mixins
-@import 'vars'
+@import '../../node_modules/bootstrap-styl/bootstrap/variables'
-@import 'mixins'
+@import '../../node_modules/bootstrap-styl/bootstrap/mixins'
 
 // Utilities
 @import '../../node_modules/bootstrap-styl/bootstrap/utilities'

src/styles/_index.styl

@@ -0,0 +1,43 @@
+
+html
+  overflow: hidden
+  height: 100%
+
+body
+  height: 100%
+  overflow: auto
+  font-family: "Lato", sans-serif
+  color $textColor
+  background-color: $appBackgroundColor
+
+label
+  font-family: "Lato", sans-serif
+  color $textColor
+
+h1, h2, h3, h4, h5
+  color $textColorHighlight
+  margin 0
+
+textarea
+  resize: vertical
+
+#side-view
+  position:absolute
+  top: 0
+  bottom: 0
+  left: 0
+  width: 200px
+  background-color: $baseBackgroundColor
+  border-right solid 1px $baseBorderColor
+  box-sizing: border-box
+  padding: 10px 0 10px 10px
+
+#main-view
+  position:absolute
+  top: 0
+  bottom: 0
+  left: 200px
+  right: 0
+  overflow-x: hidden
+  overflow-y: auto
+  background-color $bgDarker

src/styles/_shared.styl

@@ -0,0 +1,25 @@
+.alert
+  margin: 5px 0
+
+.inline-form-control
+  @extend .form-control
+  width: auto
+  display: inline-block
+
+
+textarea.form-control, .ace_editor
+  border-radius $input-border-radius
+
+.ace_editor
+  border solid 1px $input-border
+  box-shadow inset 0 1px 1px rgba(0, 0, 0, .075)
+  font-family: 'Lucida Grande'
+
+.ace_editor.ace_focus
+  controlGlow()
+
+.modal-content
+  background-color $bg
+
+.jumbotron
+  padding 48px 10px

src/styles/_vars.styl

@@ -0,0 +1,67 @@
+// Basic Vars(MUST BE CAMELCASED ATOM VARS)
+$textColor= #99B2B8
+$textColorHighlight= #D5DFE2
+$textColorSelected = #FFFFFF
+
+$textColorInfo= #6494ED
+$textColorSuccess= #73C990
+$textColorWarning= #E2C08D
+$textColorError= #FF6347
+
+$backgroundColorHighlight= #003B4A
+$backgroundColorSelected= #004B5F
+$appBackgroundColor= #001F27
+
+$baseBackgroundColor= #002B36
+$baseBorderColor= #001A20
+
+$inputBackgroundColor= #00222B
+$inputBorderColor= #001A20
+
+$buttonBackgroundColor= #004355
+$buttonBackgroundColorHover= #004B5F
+$buttonBackgroundColorSelected= #52DCFF
+$buttonBorderColor= $baseBorderColor
+
+$block= #00222B
+
+//buttons
+$btnPrimary= #088CFF
+$btnInfo= #5BDEFF
+$btnSuccess= #22BD89
+$btnWarning= #CD8737
+$btnError= #DA2828
+
+
+// Bootstrap Overrides(MUST BE BUILT WITH BASIC VALUE ONLY)
+$brand-primary= $btnPrimary
+$brand-info= $btnInfo
+$brand-success= $btnSuccess
+$brand-warning= $btnWarning
+$brand-danger= $btnError
+
+$btn-default-bg= $buttonBackgroundColor
+$btn-default-color= $textColor
+$btn-default-border= $buttonBorderColor
+
+$link-color= $textColorHighlight
+
+$nav-link-active-link-hover-bg= $backgroundColorHighlight
+$nav-pills-active-link-hover-color= $textColorHighlight
+$nav-link-hover-bg= $backgroundColorHighlight
+
+$input-bg= $backgroundColorHighlight
+$input-border= $baseBorderColor
+$input-border-focus= $buttonBackgroundColorSelected
+$input-color= $textColorSelected
+
+$dropdown-bg= $baseBackgroundColor
+$dropdown-border= $baseBorderColor
+$dropdown-link-color= $textColor
+$dropdown-link-hover-bg= $backgroundColorSelected
+$dropdown-link-hover-color= $textColorSelected
+
+$modal-content-bg= $baseBackgroundColor
+$modal-content-border-color= $modal-header-border-color= $modal-footer-border-color= $baseBorderColor
+
+$jumbotron-bg= $backgroundColorHighlight

src/styles/directives/side-nav.styl

@@ -1,20 +1,16 @@
-$side-view-link-hover-color= $gray-dark
+#side-view
-$side-view-link-active-color= $link-color
+  .nav-control-group
-$side-view-link-active-bg= $body-bg
+    margin 0 5px
+  ul.nav.nav-pills
+    li hr
+      margin: 5px 0
+      border-top none
+      border-bottom solid 1px $baseBorderColor
 
-#side-view ul.nav.nav-pills
+    li a
-  li hr
+      border-top-right-radius 0
-    margin: 5px 0
+      border-bottom-right-radius 0
-    border-color: lighten($gray-dark, 20%)
+      transition 0.2s
-
+    li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus{
-
+      background-color: $backgroundColorSelected
-  li a
+    }
-    color: white
-    &:hover
-      color: $side-view-link-hover-color
-
-
-
-  li.active a
-    color:$side-view-link-active-color
-    background-color: $side-view-link-active-bg

src/styles/directives/ui-select.styl

@@ -86,6 +86,7 @@ body > .select2-container.open
 
 .ui-select-bootstrap .ui-select-toggle
   position: relative
+  border-radius $input-border-radius
 
 
 .ui-select-bootstrap .ui-select-toggle > .caret
@@ -112,6 +113,7 @@ body > .select2-container.open
   /* Instead of center because of .btn */
   text-align: left !important
   padding-right: 25px
+  border-radius $input-border-radius
 
 
 .ui-select-bootstrap > .ui-select-match > .caret
@@ -135,7 +137,13 @@ body > .ui-select-bootstrap.open
 
 .ui-select-multiple.ui-select-bootstrap
   height: auto
-  padding: 3px 3px 0 3px
+  padding: 3px 3px 0 10px
+
+
+.ui-select-multiple.ui-select-bootstrap.open
+  border-color $input-border-focus
+  outline 0
+  box-shadow inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6)
 
 
 .ui-select-multiple.ui-select-bootstrap input.ui-select-search
@@ -186,21 +194,21 @@ body > .ui-select-bootstrap.open
     clear: both
     font-weight: 400
     line-height: 1.42857143
-    color: #333
+    color: $dropdown-link-color
     white-space: nowrap
 
 
 .ui-select-bootstrap .ui-select-choices-row>a:hover, .ui-select-bootstrap .ui-select-choices-row>a:focus
     text-decoration: none
-    color: #262626
+    color: $dropdown-link-hover-color
-    background-color: #f5f5f5
+    background-color: $dropdown-link-hover-bg
 
 
 .ui-select-bootstrap .ui-select-choices-row.active>a
-    color: #fff
+    color: $dropdown-link-hover-color
     text-decoration: none
     outline: 0
-    background-color: #428bca
+    background-color: $dropdown-link-hover-bg
 
 
 .ui-select-bootstrap .ui-select-choices-row.disabled>a,

src/styles/main.styl

@@ -1,77 +1,11 @@
-@import 'bootstrap'
+@import '_vars'
+@import 'mixins/*'
+
+@import '_bootstrap'
+
+@import '_index'
+@import '_shared'
 
 @import 'modals/*'
 @import 'directives/*'
 @import 'states/*'
-// @import 'mixins/*'
-
-html
-  overflow: hidden
-  height: 100%
-
-body
-  height: 100%
-  overflow: auto
-  font-family: "Lato", sans-serif
-  color $color
-  background-color: $bg
-
-// body:before
-//   content ''
-//   background-image url('http://img10.deviantart.net/f372/i/2014/283/8/3/blue_pattern_design_free_vector_by_vecree-d829oba.jpg')
-//   filter blur(5px)
-//   opacity 1
-//   position absolute
-//   left 0
-//   top 0
-//   bottom 0
-//   right 0
-
-label
-  font-family: "Lato", sans-serif
-  color $color
-
-textarea
-  resize: vertical
-
-
-#side-view
-  position:absolute
-  top: 0
-  bottom: 0
-  left: 0
-  width: 200px
-  background-color: $bgDarker
-  border-right solid 2px $borderEdge
-  box-sizing: border-box
-  padding: 10px 0 10px 10px
-  .nav.nav-pills>li
-    &.active>a{
-      background-color $bg
-    }
-
-  .nav.nav-pills>li>a
-    color white
-    border-top-right-radius: 0
-    border-bottom-right-radius: 0
-
-
-.alert
-  margin: 5px 0
-
-
-#main-view
-  position:absolute
-  top: 0
-  bottom: 0
-  left: 200px
-  right: 0
-  overflow-x: hidden
-  overflow-y: auto
-  background-color $bg
-
-
-.inline-form-control
-  @extend .form-control
-  width: auto
-  display: inline-block

src/styles/mixins.styl

@@ -1 +0,0 @@
-@import '../../node_modules/bootstrap-styl/bootstrap/mixins'

src/styles/mixins/control-glow.styl

@@ -0,0 +1,5 @@
+controlGlow($color = $input-border-focus)
+  $color-rgba = rgba(red($color), green($color), blue($color), .6)
+  border-color $color
+  outline 0
+  box-shadow inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px $color-rgba

src/styles/modals/new-snippet-editor.styl

@@ -1,8 +1,4 @@
-$editor-border-color= $border-color
-
 .new-snippet-modal
 
   .ace_editor
     height: 200px
-    border: solid 1px $editor-border-color
-    border-radius: 5px

src/styles/states/snippets.styl

@@ -14,20 +14,20 @@ $snippet-list-active-bg= $brand-primary
   right:0
   bottom:0
   .left-pane
+    border-right 1px solid $baseBorderColor
     position: absolute
     top: 0
     bottom: 0
     left: 0
     width: $left-pane-width
     overflow:hidden
-    border-right: solid 1px $pane-border-color
     .snippet-search
       position: absolute
       top: 0
       height: 50px
       left: 0
       right: 0
-      border-bottom: solid 1px $snippet-list-border-color
+      border-right 1px solid $baseBorderColor
       padding: 7px 5px
 
     .snippet-list
@@ -43,7 +43,7 @@ $snippet-list-active-bg= $brand-primary
       li
         cursor: pointer
         padding: 5px
-        border-bottom: solid 1px $snippet-list-border-color
+        border-right 1px solid $baseBorderColor
         h4
           margin: 0
 

src/styles/vars.styl

@@ -1,12 +0,0 @@
-@import '../../node_modules/bootstrap-styl/bootstrap/variables'
-
-$brandColor= #26A7D5
-
-$colorEdge= white
-$color= #777
-
-$border= #444
-$borderEdge= #26A7D5
-
-$bg= RGBA(38, 58, 71, 1)
-$bgDarker= RGBA(25, 41, 52, 1)

src/tpls/directives/side-nav.tpl.html

@@ -1,14 +1,10 @@
 <div class="current-user">
   <div ng-if="vm.currentUser">
-    <img width="30" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}">
+    <img width="30" class="img-circle" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}">
-    <span ng-bind="vm.currentUser.name"></span>
+    <a href ng-bind="vm.currentUser.name"></a>
-    <span class="dropdown" dropdown is-open>
+    <span class="nav-control-group pull-right">
-      <a type="button" name="button" dropdown-toggle class="btn btn-sm btn-default dropdown-toggle"><i class="fa fa-caret-down"></i></a>
+      <a href class="btn btn-sm btn-primary"><i class="fa fa-gears"></i></a>
-      <ul class="dropdown-menu">
+      <a href class="btn btn-sm btn-primary" ng-click="vm.signOut()"><i class="fa fa-sign-out"></i></a>
-        <li>
-          <a ng-click="vm.signOut()"><i class="fa fa-sign-out"></i> Sign Out</a>
-        </li>
-      </ul>
     </span>
 
   </div>
@@ -29,7 +25,6 @@
   </div>
 </div>
 
-<p>Side Nav</p>
 <ul class="nav nav-pills nav-stacked">
   <li>
     <a btn-new-snippet href="#"><i class="fa fa-plus-square-o"></i> New Snippet</a>
@@ -46,8 +41,4 @@
   <li ui-sref-active="active">
     <a><i class="fa fa-paperclip"></i> Clips(ready)</a>
   </li>
-  <li class="divider"><hr></li>
-  <li>
-    <a href=""><i class="fa fa-gears"></i> Configuration</a>
-  </li>
 </ul>

src/tpls/modals/edit-snippet-modal.tpl.html

@@ -1,6 +1,6 @@
 <div class="new-snippet-modal">
   <div class="modal-header">
-    New Snippet
+    <h4>Edit Snippet</h4>
   </div>
 
   <div class="modal-body">
@@ -21,7 +21,8 @@
     <div class="form-group">
       <div
         ui-ace="{
-          mode: vm.snippet.mode.toLowerCase()
+          mode: vm.snippet.mode.toLowerCase(),
+          theme:'solarized_dark'
 
         }"
         ng-model="vm.snippet.content"

src/tpls/modals/new-snippet-modal.tpl.html

@@ -1,6 +1,6 @@
 <div class="new-snippet-modal">
   <div class="modal-header">
-    New Snippet
+    <h4>New Snippet</h4>
   </div>
 
   <div class="modal-body">
@@ -21,7 +21,8 @@
     <div class="form-group">
       <div
         ui-ace="{
-          mode: vm.mode.toLowerCase()
+          mode: vm.mode.toLowerCase(),
+          theme:'solarized_dark'
 
         }"
         ng-model="vm.content"