Merge pull request #72 from xsnippet/snippet

 Change New Snippet page styles according to new designs

Author: ikalnytskyi

src/components/NewSnippet.jsx

@@ -30,6 +30,12 @@ class NewSnippet extends React.Component {
         e.preventDefault();
       }
     };
+    this.recalcLangHeaderHeight = () => {
+      const newSnippetHeaderHeight = document.getElementsByClassName('new-snippet-code-header')[0].offsetHeight;
+
+      document.getElementsByClassName('new-snippet-lang-header')[0]
+        .setAttribute('style', `height:${newSnippetHeaderHeight}px`);
+    };
     this.postSnippet = this.postSnippet.bind(this);
     this.onSyntaxClick = this.onSyntaxClick.bind(this);
     this.onInputChange = this.onInputChange.bind(this);
@@ -43,11 +49,15 @@ class NewSnippet extends React.Component {
   }
 
   onTagAdded(tag) {
-    this.setState({ tags: [...this.state.tags, tag] });
+    this.setState({ tags: [...this.state.tags, tag] }, () => {
+      this.recalcLangHeaderHeight();
+    });
   }
 
   onTagRemoved(tag) {
-    this.setState({ tags: this.state.tags.filter(item => item !== tag) });
+    this.setState({ tags: this.state.tags.filter(item => item !== tag) }, () => {
+      this.recalcLangHeaderHeight();
+    });
   }
 
   onSyntaxClick(syntax) {

src/styles/NewSnippet.styl

@@ -12,13 +12,12 @@ lang-bar-width = 230px
   &-code,
   &-lang
     &-header
-      padding: 16px 20px 19px
-      box-sizing: border-box
       display: flex
       flex-flow: row nowrap
-      height: offset
       min-height: offset
-      align-items: flex-end
+      align-items: flex-start
+      padding: 20px 20px 19px
+      box-sizing: border-box
 
   &-code
     flex: 1
@@ -34,6 +33,8 @@ lang-bar-width = 230px
       .input
         basic-input()
         width: 47%
+        border-radius: 3px
+        background-color: snippet-header-normal
       & > input
         margin-right: 5%
     &-bottom-bar
@@ -45,19 +46,17 @@ lang-bar-width = 230px
       padding: 5px
       border-top: 1px solid border-light
       & > input
+        min-width: 200px
+        padding: 11px
+        margin: 5px 16px 7px 0
         border: none
-        background-color: button-normal
+        background-color: snippet-post-button
         color: text-light
-        padding: 11px
-        margin-right: 16px
-        margin-bottom: 7px
-        margin-top: 5px
         font-size: 15px
         text-align: center
-        min-width: 200px
         &:hover,
         &:focus
-          background-color: button-active
+          background-color: snippet-post-button-active
           cursor: pointer
 
   &-lang
@@ -70,6 +69,8 @@ lang-bar-width = 230px
       background-color: snippet-header-normal
       .input
         basic-input()
+        border-radius: 3px
+        background-color: snippet-header-lang-input-bg
     &-list
       height: 100%
       &-wrapper
@@ -81,14 +82,17 @@ lang-bar-width = 230px
       color: text-grey
     &-item
       margin-top: -1px
+      padding: 16px 15px
       font-size: 14px
-      padding: 15px
+      font-family: font-roboto
+      font-weight: 300
+      letter-spacing: .2px
       border-left: 5px solid language-bar-border
       border-bottom: 1px solid language-bar-border
       cursor: pointer
       &:hover,
       &.active
-        padding-bottom: 16px
+        padding-bottom: 17px
         border-left: 5px solid snippet-border
         border-bottom: none
         background-color: language-bar-bg-active

src/styles/common/mixins.styl

@@ -2,15 +2,16 @@
 
 basic-input()
   width: 100%
-  background-color: transparent
+  padding: 7px 5px
   border: none
-  border-bottom: 1px solid rgba(text-light, .4)
   outline: none
   color: text-light
-  font-size: 15px
-  font-family: font-quicksand
+  font-family: font-roboto
+  font-size: 13px
+  font-weight: 300
   letter-spacing: -.3px
+  &:focus
+    &::placeholder
+      color: rgba(text-light, .8)
   &::placeholder
     color: rgba(text-light, .6)
-  &:focus
-    border-bottom: 1px solid text-light

src/styles/common/overwrite.styl

@@ -20,17 +20,33 @@
 
 .react-tags
   display: flex
+  flex-flow: row wrap
+  basic-input()
   width: 47%
+  border-radius: 3px
+  background-color: snippet-header-normal
   input
     basic-input()
+    padding: 0
+    border-radius: 3px
+    background-color: snippet-header-normal
   .react-tags__container
     display: flex
+    flex-flow: row wrap
     color: text-light
     li
-      border: 1px solid rgba(text-light, .4)
-      margin-right: 4px
-      padding: 7px
+      margin: 0 4px 5px 0
+      padding: 0 8px
+      font-size: 12px
+      font-weight: 300
+      line-height: 20px
+      color: text-light
+      border-radius: 9.5px
+      background-color: rgba(snippet-header-light, .7)
+      letter-spacing: 0.4px
       white-space: nowrap
+      &:last-shild
+        margin-right: 0
       &:hover
         border-color: text-light
       a

src/styles/common/variables.styl

@@ -21,8 +21,11 @@ sidebar-active-icon = color-puerto-rico-green-s47
 sidebar-normal-icon = color-dim-gray-gray-s0
 
 snippet-header-normal = color-niagara-green-s75
-snippet-header-light = color-medium-aquamarine-blue-s47
+snippet-header-light = color-shamrock-green-s73
 snippet-header-border = color-mountain-meadow-green-s89
+snippet-header-lang-input-bg = color-elf-green-green-s82
+snippet-post-button = color-shamrock-green-s73
+snippet-post-button-active = color-mountain-meadow-green-s89
 
 snippet-header-green-normal = color-shamrock-green-s73
 snippet-content-light = color-white-white-s100