From f4216b323ff22ca675c7dbbbf1faba66ba2bdec3 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Thu, 21 Jan 2021 05:32:42 -0600
Subject: [PATCH] views: change upvote/downvote icons to arrows.

Change the upvote and downvote icons for posts, comments, and BURs from
thumbs-up / thumbs-down icons to up-arrow / down-arrow icons.
---
 app/components/comment_component.rb                |  2 +-
 .../comment_component/comment_component.html.erb   | 12 ++++++------
 app/helpers/icon_helper.rb                         | 14 +++++++++++---
 app/javascript/src/styles/base/020_base.scss       |  6 ++++++
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/app/components/comment_component.rb b/app/components/comment_component.rb
index 9c0ecd420..eb2438d57 100644
--- a/app/components/comment_component.rb
+++ b/app/components/comment_component.rb
@@ -2,7 +2,7 @@
 
 class CommentComponent < ApplicationComponent
   attr_reader :comment, :context, :dtext_data, :current_user
-  delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :edit_icon, :delete_icon, :undelete_icon, :flag_icon, to: :helpers
+  delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :edit_icon, :delete_icon, :undelete_icon, :flag_icon, :upvote_icon, :downvote_icon, to: :helpers
 
   def initialize(comment:, current_user:, context: nil, dtext_data: nil)
     @comment = comment
diff --git a/app/components/comment_component/comment_component.html.erb b/app/components/comment_component/comment_component.html.erb
index 1b11545f8..701a1c40f 100644
--- a/app/components/comment_component/comment_component.html.erb
+++ b/app/components/comment_component/comment_component.html.erb
@@ -47,21 +47,21 @@
       <% if votable? %>
         <li class="comment-votes">
           <% if current_user.is_anonymous? %>
-            <%= link_to "🡹", login_path(url: request.fullpath), class: "comment-upvote-link" %>
+            <%= link_to upvote_icon, login_path(url: request.fullpath), class: "comment-upvote-link" %>
           <% elsif upvoted? %>
-            <%= link_to "🡹", comment_comment_votes_path(comment_id: comment.id), class: "comment-upvote-link comment-unvote-link", method: :delete, remote: true %>
+            <%= link_to upvote_icon, comment_comment_votes_path(comment_id: comment.id), class: "comment-upvote-link comment-unvote-link", method: :delete, remote: true %>
           <% else %>
-            <%= link_to "🡹", comment_comment_votes_path(comment_id: comment.id, score: "1"), class: "comment-upvote-link", method: :post, remote: true %>
+            <%= link_to upvote_icon, comment_comment_votes_path(comment_id: comment.id, score: "1"), class: "comment-upvote-link", method: :post, remote: true %>
           <% end %>
 
           <span class="comment-score"><%= comment.score %></span>
 
           <% if current_user.is_anonymous? %>
-            <%= link_to "🡻", login_path(url: request.fullpath), class: "comment-downvote-link" %>
+            <%= link_to downvote_icon, login_path(url: request.fullpath), class: "comment-downvote-link" %>
           <% elsif downvoted? %>
-            <%= link_to "🡻",  comment_comment_votes_path(comment_id: comment.id), class: "comment-downvote-link comment-unvote-link", method: :delete, remote: true %>
+            <%= link_to downvote_icon, comment_comment_votes_path(comment_id: comment.id), class: "comment-downvote-link comment-unvote-link", method: :delete, remote: true %>
           <% else %>
-            <%= link_to "🡻",  comment_comment_votes_path(comment_id: comment.id, score: "-1"), class: "comment-downvote-link", method: :post, remote: true %>
+            <%= link_to downvote_icon, comment_comment_votes_path(comment_id: comment.id, score: "-1"), class: "comment-downvote-link", method: :post, remote: true %>
           <% end %>
         </li>
       <% end %>
diff --git a/app/helpers/icon_helper.rb b/app/helpers/icon_helper.rb
index 506b5b825..787587f15 100644
--- a/app/helpers/icon_helper.rb
+++ b/app/helpers/icon_helper.rb
@@ -4,12 +4,20 @@ module IconHelper
     tag.i(class: "icon #{icon_class} #{klass}", **options)
   end
 
-  def upvote_icon(**options)
-    icon_tag("far fa-thumbs-up", **options)
+  def svg_icon_tag(type, path, **options)
+    tag.svg(class: "icon svg-icon #{type}", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", **options) do
+      tag.path(fill: "currentColor", d: path)
+    end
   end
 
+  # fontawesome.com/icons/arrow-alt-up
+  def upvote_icon(**options)
+    svg_icon_tag("upvote-icon", "M272 480h-96c-13.3 0-24-10.7-24-24V256H48.2c-21.4 0-32.1-25.8-17-41L207 39c9.4-9.4 24.6-9.4 34 0l175.8 176c15.1 15.1 4.4 41-17 41H296v200c0 13.3-10.7 24-24 24z", **options)
+  end
+
+  # fontawesome.com/icons/arrow-alt-down
   def downvote_icon(**options)
-    icon_tag("far fa-thumbs-down", **options)
+    svg_icon_tag("downvote-icon", "M176 32h96c13.3 0 24 10.7 24 24v200h103.8c21.4 0 32.1 25.8 17 41L241 473c-9.4 9.4-24.6 9.4-34 0L31.3 297c-15.1-15.1-4.4-41 17-41H152V56c0-13.3 10.7-24 24-24z", **options)
   end
 
   def sticky_icon(**options)
diff --git a/app/javascript/src/styles/base/020_base.scss b/app/javascript/src/styles/base/020_base.scss
index 91b380a10..f52f34264 100644
--- a/app/javascript/src/styles/base/020_base.scss
+++ b/app/javascript/src/styles/base/020_base.scss
@@ -179,6 +179,12 @@ ul.list-inline {
   height: auto !important;
 }
 
+.svg-icon {
+  display: inline-block;
+  vertical-align: middle;
+  height: 1em;
+}
+
 .mobile-only {
   display: none;
   @media (max-width: 660px) { display: initial; }