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,57 +358,49 @@ class FlowItem extends PureComponent {
                 search_param={search_param}
               />
             </div>
-            <div className="box-content-vote">
+            {do_react && (
-              <span
+              <div className="box-content-vote">
-                className={do_react ? 'clickable' : ''}
+                <span
-                onClick={() =>
+                  className="clickable"
-                  do_react && do_react(info.reaction_status === 1 ? 0 : 1)
+                  onClick={() => do_react(info.reaction_status === 1 ? 0 : 1)}
-                }
-              >
-                <svg
-                  className={
-                    info.reaction_status === 1
-                      ? 'vote-icon-active'
-                      : 'vote-icon-inactive'
-                  }
-                  width="28"
-                  height="28"
-                  viewBox="0 0 36 36"
                 >
-                  <path d="M2 25h32L18 9 2 25Z" />
+                  <svg
-                </svg>
+                    className={
-              </span>
+                      info.reaction_status === 1
-              {do_react ? (
+                        ? 'vote-icon-active'
-                <>
+                        : 'vote-icon-inactive'
-                  <div className="vote-num">{info.up_votes}</div>
+                    }
-                  <hr />
+                    width="28"
-                  <div className="vote-num">{info.down_votes}</div>
+                    height="28"
-                </>
+                    viewBox="0 0 36 36"
-              ) : (
+                  >
-                <div className="vote-num">
+                    <path d="M2 25h32L18 9 2 25Z" />
-                  {info.up_votes - info.down_votes}
+                  </svg>
-                </div>
+                </span>
-              )}
+                <div className="vote-num">{info.up_votes}</div>
-              <span
+                <hr />
-                className={do_react ? 'clickable' : ''}
+                <div className="vote-num">{info.down_votes}</div>
-                onClick={() =>
+                <span
-                  do_react && do_react(info.reaction_status === -1 ? 0 : -1)
+                  className="clickable"
-                }
+                  onClick={() =>
-              >
+                    do_react && do_react(info.reaction_status === -1 ? 0 : -1)
-                <svg
-                  className={
-                    info.reaction_status === -1
-                      ? 'vote-icon-active'
-                      : 'vote-icon-inactive'
                   }
-                  width="28"
-                  height="28"
-                  viewBox="0 0 36 36"
                 >
-                  <path d="M2 11h32L18 27 2 11Z"></path>
+                  <svg
-                </svg>
+                    className={
-              </span>
+                      info.reaction_status === -1
-            </div>
+                        ? 'vote-icon-active'
+                        : 'vote-icon-inactive'
+                    }
+                    width="28"
+                    height="28"
+                    viewBox="0 0 36 36"
+                  >
+                    <path d="M2 11h32L18 27 2 11Z"></path>
+                  </svg>
+                </span>
+              </div>
+            )}
           </div>
           {info.poll && (
             <div className="box-poll">