From 37eaef2c0eba7ac23dac75a85be2bab6f2ac0d14 Mon Sep 17 00:00:00 2001
From: igoradamenko <mail@igoradamenko.com>
Date: Sat, 12 May 2018 14:19:55 +0300
Subject: [PATCH] change vote buttons to more sexy

---
 .../comment/__score-value/comment__score-value.scss    |  1 +
 .../__vote/_disabled/comment__vote_disabled.scss       |  2 +-
 .../__vote/_disabled/comment__vote_disabled.svg        |  3 +++
 .../__vote/_selected/comment__vote_selected.scss       |  2 +-
 .../__vote/_selected/comment__vote_selected.svg        |  3 +++
 .../__vote/_type/_down/comment__vote_type_down.scss    |  1 +
 .../__vote/_type/_up/comment__vote_type_up.scss        |  1 -
 web/app/components/comment/__vote/comment__vote.scss   | 10 ++++++----
 web/app/components/comment/__vote/comment__vote.svg    |  3 +++
 9 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 web/app/components/comment/__vote/_disabled/comment__vote_disabled.svg
 create mode 100644 web/app/components/comment/__vote/_selected/comment__vote_selected.svg
 create mode 100644 web/app/components/comment/__vote/comment__vote.svg

diff --git a/web/app/components/comment/__score-value/comment__score-value.scss b/web/app/components/comment/__score-value/comment__score-value.scss
index 294ea8f4..cb61f7fe 100644
--- a/web/app/components/comment/__score-value/comment__score-value.scss
+++ b/web/app/components/comment/__score-value/comment__score-value.scss
@@ -1,6 +1,7 @@
 .comment__score-value {
   display: inline-block;
   min-width: 24px;
+  vertical-align: middle;
   text-align: center;
   font-size: 14px;
 }
diff --git a/web/app/components/comment/__vote/_disabled/comment__vote_disabled.scss b/web/app/components/comment/__vote/_disabled/comment__vote_disabled.scss
index 820a3300..aaa0b69b 100644
--- a/web/app/components/comment/__vote/_disabled/comment__vote_disabled.scss
+++ b/web/app/components/comment/__vote/_disabled/comment__vote_disabled.scss
@@ -1,6 +1,6 @@
 .comment__vote_disabled {
   &, &:hover {
-    border-top-color: #ededed;
+    background-image: url('comment__vote_disabled.svg');
     cursor: not-allowed;
   }
 }
diff --git a/web/app/components/comment/__vote/_disabled/comment__vote_disabled.svg b/web/app/components/comment/__vote/_disabled/comment__vote_disabled.svg
new file mode 100644
index 00000000..956b0d8e
--- /dev/null
+++ b/web/app/components/comment/__vote/_disabled/comment__vote_disabled.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="17" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ededed" d="M4.426 16.116V6.72H.394L7-.012l6.606 6.732H9.574v9.396z" fill-rule="evenodd"/>
+</svg>
diff --git a/web/app/components/comment/__vote/_selected/comment__vote_selected.scss b/web/app/components/comment/__vote/_selected/comment__vote_selected.scss
index 41d8cdce..4303f422 100644
--- a/web/app/components/comment/__vote/_selected/comment__vote_selected.scss
+++ b/web/app/components/comment/__vote/_selected/comment__vote_selected.scss
@@ -1,4 +1,4 @@
 .comment__vote_selected {
-  border-top-color: #0aa;
+  background-image: url('comment__vote_selected.svg');
   cursor: default;
 }
diff --git a/web/app/components/comment/__vote/_selected/comment__vote_selected.svg b/web/app/components/comment/__vote/_selected/comment__vote_selected.svg
new file mode 100644
index 00000000..cfd7bdd5
--- /dev/null
+++ b/web/app/components/comment/__vote/_selected/comment__vote_selected.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="17" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#0aa" d="M4.426 16.116V6.72H.394L7-.012l6.606 6.732H9.574v9.396z" fill-rule="evenodd"/>
+</svg>
diff --git a/web/app/components/comment/__vote/_type/_down/comment__vote_type_down.scss b/web/app/components/comment/__vote/_type/_down/comment__vote_type_down.scss
index 9ed0ddb4..a89a58f5 100644
--- a/web/app/components/comment/__vote/_type/_down/comment__vote_type_down.scss
+++ b/web/app/components/comment/__vote/_type/_down/comment__vote_type_down.scss
@@ -1,3 +1,4 @@
 .comment__vote_type_down {
+  transform: scale(1, -1);
   margin-left: 4px;
 }
diff --git a/web/app/components/comment/__vote/_type/_up/comment__vote_type_up.scss b/web/app/components/comment/__vote/_type/_up/comment__vote_type_up.scss
index b09ea2d8..ac2bb6eb 100644
--- a/web/app/components/comment/__vote/_type/_up/comment__vote_type_up.scss
+++ b/web/app/components/comment/__vote/_type/_up/comment__vote_type_up.scss
@@ -1,4 +1,3 @@
 .comment__vote_type_up {
-  transform: scale(1, -1);
   margin-right: 4px;
 }
diff --git a/web/app/components/comment/__vote/comment__vote.scss b/web/app/components/comment/__vote/comment__vote.scss
index d1a9efa7..d02a21c1 100644
--- a/web/app/components/comment/__vote/comment__vote.scss
+++ b/web/app/components/comment/__vote/comment__vote.scss
@@ -1,13 +1,15 @@
 .comment__vote {
   display: inline-block;
-  border-top: 9px solid #dedede;
-  border-right: 7px solid transparent;
-  border-left: 7px solid transparent;
+  width: 16px;
+  height: 14px;
+  vertical-align: middle;
   font-size: 0;
   line-height: 0;
+  background: url('comment__vote.svg') center no-repeat;
+  background-size: contain;
   cursor: pointer;
 
   &:hover {
-    border-top-color: #0aa;
+    background-image: url('_selected/comment__vote_selected.svg');
   }
 }
diff --git a/web/app/components/comment/__vote/comment__vote.svg b/web/app/components/comment/__vote/comment__vote.svg
new file mode 100644
index 00000000..12c5ade7
--- /dev/null
+++ b/web/app/components/comment/__vote/comment__vote.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="17" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#dedede" d="M4.426 16.116V6.72H.394L7-.012l6.606 6.732H9.574v9.396z" fill-rule="evenodd"/>
+</svg>