Better vote arrows

ui/src/components/comment-node.tsx

@@ -57,9 +57,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     return (
       <div className={`comment ${node.comment.parent_id  && !this.props.noIndent ? 'ml-4' : ''}`}>
         <div className={`float-left small text-center ${this.props.viewOnly && 'no-click'}`}>
-          <div className={`pointer upvote ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}>▲</div>
+          <div className={`pointer ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}>
+            <svg class="icon upvote"><use xlinkHref="#icon-arrow-up"></use></svg>
+          </div>
           <div>{node.comment.score}</div>
-          <div className={`pointer downvote ${node.comment.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(node, this.handleCommentDisLike)}>▼</div>
+          <div className={`pointer ${node.comment.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(node, this.handleCommentDisLike)}>
+            <svg class="icon downvote"><use xlinkHref="#icon-arrow-down"></use></svg>
+          </div>
         </div>
         <div id={`comment-${node.comment.id}`} className="details ml-4">
           <ul class="list-inline mb-0 text-muted small">

ui/src/components/post-listing.tsx

@@ -58,11 +58,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     return (
       <div class="listing">
         <div className={`float-left small text-center ${this.props.viewOnly && 'no-click'}`}>
-          <div className={`pointer upvote ${post.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostLike)}>▲</div>
+          <div className={`pointer ${post.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostLike)}>
+            <svg class="icon upvote"><use xlinkHref="#icon-arrow-up"></use></svg>
+          </div>
           <div>{post.score}</div>
-          <div className={`pointer downvote ${post.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(this, this.handlePostDisLike)}>▼</div>
+          <div className={`pointer ${post.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(this, this.handlePostDisLike)}>
+            <svg class="icon downvote"><use xlinkHref="#icon-arrow-down"></use></svg>
+          </div>
         </div>
-        <div className="pt-1 ml-4">
+        <div className="ml-4">
           {post.url 
             ? <div className="mb-0">
             <h5 className="d-inline"><a className="text-white" href={post.url} target="_blank" title={post.url}>{post.name}</a>

ui/src/components/symbols.tsx

@@ -10,6 +10,14 @@ export class Symbols extends Component<any, any> {
     return (
       <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <defs>
+          <symbol id="icon-arrow-down" viewBox="0 0 26 28">
+            <title>arrow-down</title>
+            <path d="M25.172 13c0 0.531-0.219 1.047-0.578 1.406l-10.172 10.187c-0.375 0.359-0.891 0.578-1.422 0.578s-1.047-0.219-1.406-0.578l-10.172-10.187c-0.375-0.359-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l1.156-1.172c0.375-0.359 0.891-0.578 1.422-0.578s1.047 0.219 1.406 0.578l4.594 4.594v-11c0-1.094 0.906-2 2-2h2c1.094 0 2 0.906 2 2v11l4.594-4.594c0.359-0.359 0.875-0.578 1.406-0.578s1.047 0.219 1.422 0.578l1.172 1.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
+          </symbol>
+          <symbol id="icon-arrow-up" viewBox="0 0 26 28">
+            <title>arrow-up</title>
+            <path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
+          </symbol>         
           <symbol id="icon-mail" viewBox="0 0 32 32">
             <title>mail</title>
             <path d="M28 5h-24c-2.209 0-4 1.792-4 4v13c0 2.209 1.791 4 4 4h24c2.209 0 4-1.791 4-4v-13c0-2.208-1.791-4-4-4zM2 10.25l6.999 5.25-6.999 5.25v-10.5zM30 22c0 1.104-0.898 2-2 2h-24c-1.103 0-2-0.896-2-2l7.832-5.875 4.368 3.277c0.533 0.398 1.166 0.6 1.8 0.6 0.633 0 1.266-0.201 1.799-0.6l4.369-3.277 7.832 5.875zM30 20.75l-7-5.25 7-5.25v10.5zM17.199 18.602c-0.349 0.262-0.763 0.4-1.199 0.4s-0.851-0.139-1.2-0.4l-12.8-9.602c0-1.103 0.897-2 2-2h24c1.102 0 2 0.897 2 2l-12.801 9.602z"></path>