[www] Paginator updated

src/components/Paginator.js

@@ -1,15 +1,20 @@
 const React = require('react')
 
-const text = ['↑ Предыдущая страница', '↓ Следующая страница']
-const style = ['article-page-control__top', 'article-page-control__bottom']
+const text = ['↑', '↓']
+const linkText = ['Предыдущая страница', 'Следующая страница']
 
 const i = type => type === 'top'
 	? 0
 	: 1
 
+const Icon = ({children}) => (
+	<span className="Paginator-Icon">{children}</span>
+)
+
 const Paginator = ({url, type}) => (
-	<div className={`article-page-control ${style[i(type)]}`}>
-		<a href={url}>{text[i(type)]}</a>
+	<div className="Paginator">
+		<Icon>{text[i(type)]}</Icon>
+		<a href={url}>{linkText[i(type)]}</a>
 	</div>
 )
 

src/style/components/Paginator.scss

@@ -0,0 +1,10 @@
+.Paginator {
+  text-align: center;
+  font-size: var(--font-size-second);
+
+  margin: var(--single-margin) 0;
+}
+
+.Paginator-Icon {
+  margin: 0 10px;
+}

src/style/components/article-page-control.scss

@@ -1,21 +0,0 @@
-@import "../variables";
-
-.article-page-control{
-  text-align: center;
-
-  a{
-    color: #aaa;
-  }
-
-  &__top {
-    //padding: $single-margin 0 0;
-    //margin: $single-margin 0 0;
-    padding: 0 0 $single-margin;
-    margin: 0 0 $single-margin;
-  }
-
-  &__bottom {
-    padding: 0 0 $single-margin;
-    margin: 0 0 $single-margin;
-  }
-}

src/style/style.scss

@@ -14,7 +14,7 @@
 @import "components/footer-links";
 @import "components/cloud-page";
 @import "components/article";
-@import "components/article-page-control";
+@import "components/Paginator";
 @import "components/album";
 @import "components/parallax";
 @import "components/accessibility-control";