Merge pull request #71 from xsnippet/recent

Change Recent snippets styles according to new designs

Author: ikalnytskyi

src/components/RecentSnippetItem.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import brace from 'brace';
 
-import { downloadSnippet } from '../helpers';
+import { downloadSnippet, parseDate } from '../helpers';
 
 const RecentSnippetItem = ({ snippet }) => {
   const { modesByName } = brace.acequire('ace/ext/modelist');
@@ -13,17 +13,22 @@ const RecentSnippetItem = ({ snippet }) => {
 
   return (
     <li className="recent-snippet-item">
-      <div className="recent-snippet-data">
+      <div className="recent-snippet-meta">
         <div>
-          <Link to={`${snippet.get('id')}`} className="recent-snippet-data-title">{snippetTitle}</Link>
-          <span className="recent-snippet-data-lang">[ {syntax} ]</span>
+          <Link to={`${snippet.get('id')}`} className="recent-snippet-meta-title">{snippetTitle}</Link>
+          <div className="recent-snippet-meta-tags">
+            {snippet.get('tags').map(item => <span className="recent-snippet-meta-tag" key={item}>{item}</span>)}
+          </div>
         </div>
-        <span className="recent-snippet-data-author">By Guest</span>
+        <span className="recent-snippet-meta-info">{parseDate(snippet.get('created_at'))}, by Guest</span>
       </div>
-      <div>
-        <button className="recent-snippet-button light">Raw</button>
-        <button className="recent-snippet-button light" onClick={download}>Download</button>
-        <Link to={`${snippet.get('id')}`} className="recent-snippet-button">Show</Link>
+      <div className="recent-snippet-actions">
+        <span className="recent-snippet-lang">{syntax}</span>
+        <div>
+          <button className="recent-snippet-button light">Raw</button>
+          <button className="recent-snippet-button light" onClick={download}>Download</button>
+          <Link to={`${snippet.get('id')}`} className="recent-snippet-button">Show</Link>
+        </div>
       </div>
     </li>
   );

src/styles/RecentSnippets.styl

@@ -3,55 +3,90 @@
 .recent-snippet
   display: flex
   flex-flow: column nowrap
+  font-family: font-roboto
   &-item
     display: flex
     flex-flow: row nowrap
     justify-content: space-between
-    align-items: center
-    margin-bottom: 8px
+    align-items: stretch
+    margin-bottom: 10px
     padding: 20px 16px 20px 20px
-    border-left: 5px solid snippet-border 
+    border-left: 8px solid snippet-border 
     box-shadow: 0 2px 2px 0 border-dark
     background-color: snippet-content-light
 
-  &-data
+  &-meta
     display: flex
     flex-flow: column nowrap
+    justify-content: space-between
+    max-width: "calc(100% - %s)" % 240px
     & > div
       display: flex
-      flex-flow: row nowrap
+      flex-flow: column nowrap
       justify-content: space-between
     &-title
-      color: text-green
+      color: recent-snippet-text
       font-size: 19px
       text-decoration: none
       &:hover
         color: text-dark-green
-    &-lang
-      margin-left: 15px
-      color: text-dark
+
     &-author
       padding-top: 13px
       color: text-grey
       font-size: 14px
+    &-tags
+      margin: 10px 0
+    &-tag
+      margin-right: 5px
+      padding: 3px 8px
+      font-size: 12px
+      font-weight: 300
+      line-height: 22px
+      color: text-dark
+      border-radius: 9.5px
+      background-color: recent-snippet-tag-bg
+      letter-spacing: .4px
+      &:last-shild
+        margin-right: 0
+    &-info
+      opacity: .5
+      font-size: 13px
+      font-weight: 300
+      color: recent-snippet-meta
+
+  &-actions
+    display: flex
+    flex-flow: column nowrap
+    justify-content: space-between
+
+  &-lang
+    padding-bottom: 17px
+    text-align: right
+    font-size: 14px
+    color: recent-snippet-lang
 
   &-button
+    margin-right: 0
+    padding: 10px 14px
     color: text-light
     border: none
     background-color: button-normal
-    margin-right: 3px
-    font-size: 17px
-    font-family: font-quicksand
-    padding: 10px 14px
+    font-size: 14px
+    font-weight: 400
     cursor: pointer
     outline: none
     text-decoration: none
     &:hover
       background-color: button-active
     &.light
-      background-color: button-light-normal
+      margin-right: 8px
+      padding: 9px 14px
+      color: recent-snippet-text
+      border: 1px solid recent-snippet-light-button-border
+      background-color: recent-snippet-light-button-bg
       &:hover
-        background-color: button-light-active
+        background-color: recent-snippet-light-button-bg-hover
 
 .pagination
   display: flex
@@ -61,10 +96,9 @@
   &-item
     padding: 9px 14px
     font-size: 14px
-    font-family: font-roboto
     font-weight: 300
-    background-color: pagination-bg
     color: pagination-text
+    background-color: pagination-bg
     cursor: pointer
     &:hover
       color: text-light

src/styles/common/colors.styl

@@ -7,9 +7,12 @@ color-gainboro-white-s0 = #e8e8e8
 color-white-smoke-white-s0 = #f3f3f3
 color-white-white-s0 = #fdfdfd
 color-gainsboro-white-s0 = #e4e4e4
+color-white-smoke-white-s0 = #eeeeee
 color-gainsboro-white-s1 = #e1e1e1
 color-silver-grey-s0 = #c6c6c6
 color-shady-lady-gray-s0 = #979797
+color-dim-gray-grey-s0 = #676767
+color-charcoal-grey-s0 = #444444
 
 color-regent-st-blue-blue-s28 = #9cd9cd
 color-downy-green-s42 = #7ad6c3
@@ -23,7 +26,7 @@ color-elf-green-green-s82 = #178770
 
 color-shady-lady-grey-s0 = #979797
 color-dim-gray-gray-s0 = #6b6b6b
+color-dim-gray-grey-s0 = #676767
 color-night-rider-grey-s0 = #323232
 color-night-rider-grey-s1 = #343333
-color-dim-gray-grey-s0 = #676767
 color-nero-grey-s0 = #272727

src/styles/common/variables.styl

@@ -35,7 +35,15 @@ 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
+snippet-border = color-shamrock-green-s73
+
+recent-snippet-tag-bg = color-white-smoke-white-s0
+recent-snippet-text = color-dim-gray-grey-s0
+recent-snippet-meta = color-charcoal-grey-s0
+recent-snippet-lang = color-shamrock-green-s73
+recent-snippet-light-button-border = color-gainsboro-white-s0
+recent-snippet-light-button-bg = color-white-smoke-white-s0
+recent-snippet-light-button-bg-hover = color-gainsboro-white-s1
 
 button-normal = color-medium-aquamarine-blue-s47
 button-active = color-shamrock-green-s73