Change Pagination styles according to new designs

Author: lotrien

src/styles/RecentSnippets.styl

@@ -59,16 +59,18 @@
   justify-content: flex-end
   padding-top: 10px
   &-item
-    padding: 10px 14px
-    font-size: 17px
-    font-family: font-quicksand
-    background-color: button-normal
-    color: text-light
+    padding: 9px 14px
+    font-size: 14px
+    font-family: font-roboto
+    font-weight: 300
+    background-color: pagination-bg
+    color: pagination-text
     cursor: pointer
     &:hover
+      color: text-light
       background-color: button-active
     &.next
       margin-right: 4px
     &.disabled
       pointer-events: none
-      background-color: button-light-normal
+      background-color: pagination-bg-inactive

src/styles/common/colors.styl

@@ -8,6 +8,7 @@ color-white-smoke-white-s0 = #f3f3f3
 color-white-white-s0 = #fdfdfd
 color-gainsboro-white-s0 = #e4e4e4
 color-gainsboro-white-s1 = #e1e1e1
+color-silver-grey-s0 = #c6c6c6
 color-shady-lady-gray-s0 = #979797
 
 color-regent-st-blue-blue-s28 = #9cd9cd
@@ -22,7 +23,7 @@ color-elf-green-green-s82 = #178770
 
 color-shady-lady-grey-s0 = #979797
 color-dim-gray-gray-s0 = #6b6b6b
-color-night-rider-grey-s1 = #343333
-color-nero-grey-s0 = #272727
 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

@@ -44,6 +44,10 @@ button-light-active = color-downy-green-s42
 button-inverse-header = color-mountain-meadow-green-s89
 button-embed-hover = color-mountain-meadow-green-s89
 
+pagination-bg = color-silver-grey-s0
+pagination-bg-inactive = color-gainsboro-white-s1
+pagination-text = color-dim-gray-grey-s0
+
 about-us-paragraph = color-dim-gray-grey-s0
 about-us-title = color-night-rider-grey-s0
 about-us-point = color-shamrock-green-s73