Merge pull request #65 from xsnippet/syntax-styles

Change styles for syntax bar according to new designs

Author: lotrien

src/components/NewSnippet.jsx

@@ -99,6 +99,7 @@ class NewSnippet extends React.Component {
                 placeholder="Tags"
                 onAdded={this.onTagAdded}
                 onRemoved={this.onTagRemoved}
+                addKeys={[13, 9]}
                 uniqueTags
               />
             </div>
@@ -120,7 +121,7 @@ class NewSnippet extends React.Component {
               />
 
               <div className="new-snippet-code-bottom-bar">
-                <input type="submit" value="POST" />
+                <input type="submit" value="POST SNIPPET" />
               </div>
             </div>
           </div>

src/styles/NewSnippet.styl

@@ -29,6 +29,7 @@ lang-bar-width = 230px
       flex-flow: column nowrap
       width: "calc(100% - %s)" % lang-bar-width
     &-header
+      border-left: 34px solid snippet-header-normal
       background-color: snippet-header-light
       .input
         basic-input()
@@ -74,16 +75,20 @@ lang-bar-width = 230px
       &-wrapper
         flex: 1
     &-empty
-      padding: 13px 15px
+      padding: 15px
       font-size: 14px
       font-weight: 300
       color: text-grey
     &-item
+      margin-top: -1px
       font-size: 14px
-      padding: 13px 15px
+      padding: 15px
+      border-left: 5px solid language-bar-border
+      border-bottom: 1px solid language-bar-border
       cursor: pointer
       &:hover,
       &.active
-        padding-left: 10px
+        padding-bottom: 16px
         border-left: 5px solid snippet-border
+        border-bottom: none
         background-color: language-bar-bg-active

src/styles/common/colors.styl

@@ -6,6 +6,7 @@ color-white-white-s100 = #ffffff
 color-gainboro-white-s0 = #e8e8e8
 color-white-smoke-white-s0 = #f3f3f3
 color-white-white-s0 = #fdfdfd
+color-gainsboro-white-s0 = #e4e4e4
 
 color-regent-st-blue-blue-s28 = #9cd9cd
 color-downy-green-s42 = #7ad6c3

src/styles/common/overwrite.styl

@@ -30,6 +30,7 @@
       border: 1px solid rgba(text-light, .4)
       margin-right: 4px
       padding: 7px
+      white-space: nowrap
       &:hover
         border-color: text-light
       a

src/styles/common/variables.styl

@@ -26,6 +26,7 @@ snippet-content-light = color-white-white-s100
 
 language-bar-bg-normal = color-white-smoke-white-s0
 language-bar-bg-active = color-white-white-s0
+language-bar-border = color-gainsboro-white-s0
 
 snippet-border = color-medium-aquamarine-blue-s50