update up and down vote UI

src/Common.css

@@ -82,3 +82,17 @@ blockquote {
   padding-left: 5px;
   border-left: 3px solid #cbcbcb;
 }
+
+.icon-up-and-down:before {
+  content:"";
+  background-image: url('images/up_and_down.png');
+  background-size: 18px 18px;
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+}
+
+.icon-up-and-down {
+  height: 18px;
+  display: inline-block;
+}

src/Flows.js

@@ -268,6 +268,14 @@ class FlowItem extends PureComponent {
                 <span className="icon icon-locate" />
               </span>
             )}
+            {!do_react && (
+              <span className="box-header-badge">
+                <span className="icon icon-up-and-down" />
+                <span style={{ verticalAlign: 'super' }}>
+                  {info.up_votes - info.down_votes}
+                </span>
+              </span>
+            )}
             {!!parseInt(info.likenum, 10) && (
               <span className="box-header-badge">
                 {info.likenum}&nbsp;
@@ -350,12 +358,11 @@ class FlowItem extends PureComponent {
                 search_param={search_param}
               />
             </div>
+            {do_react && (
               <div className="box-content-vote">
                 <span
-                className={do_react ? 'clickable' : ''}
+                  className="clickable"
-                onClick={() =>
+                  onClick={() => do_react(info.reaction_status === 1 ? 0 : 1)}
-                  do_react && do_react(info.reaction_status === 1 ? 0 : 1)
-                }
                 >
                   <svg
                     className={
@@ -370,19 +377,11 @@ class FlowItem extends PureComponent {
                     <path d="M2 25h32L18 9 2 25Z" />
                   </svg>
                 </span>
-              {do_react ? (
-                <>
                 <div className="vote-num">{info.up_votes}</div>
                 <hr />
                 <div className="vote-num">{info.down_votes}</div>
-                </>
-              ) : (
-                <div className="vote-num">
-                  {info.up_votes - info.down_votes}
-                </div>
-              )}
                 <span
-                className={do_react ? 'clickable' : ''}
+                  className="clickable"
                   onClick={() =>
                     do_react && do_react(info.reaction_status === -1 ? 0 : -1)
                   }
@@ -401,6 +400,7 @@ class FlowItem extends PureComponent {
                   </svg>
                 </span>
               </div>
+            )}
           </div>
           {info.poll && (
             <div className="box-poll">