Enhance meta-review UI

Closes #84
coala · Aug 3, 2018 · d1a7ea3 · d1a7ea3
1 parent 10003d0
commit d1a7ea3
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/src/components/reactions.jsx b/src/components/reactions.jsx
@@ -36,7 +36,7 @@ function Reactions({stat}) {
     }
   ];
   return reactions.map(reaction => (
-      <BS.Button key={reaction.name} bsSize="xsmall">
+      <BS.Button bsClass="reaction-btn">
         {reaction.emoji} {reaction.count}
       </BS.Button>
   ));

diff --git a/src/components/review-blurb.jsx b/src/components/review-blurb.jsx
@@ -1,16 +1,17 @@
+import * as BS from 'react-bootstrap';
 import Database from '../database';
 import Loadable from './loadable';
 
 function ReviewBlurb({card: {url}}) {
-  const reviewNumber = url.split('/').pop();
-
   return (
     <span className='review-blurb'>
       <a className='blurb-number-link'
         target='_blank'
         href={url}
         >
-        <span className='blurb-number'>{reviewNumber}</span>
+        <BS.Button bsClass="review-btn">
+          View Discussion
+        </BS.Button>
       </a>
     </span>
   );

diff --git a/style/review.less b/style/review.less
@@ -27,18 +27,30 @@
     .x-font-and-emoji(1.5rem);
     &:hover { text-decoration: none; }
   }
+  .reaction-btn {
+    float: left;
+    padding: 4px 7px 3px;
+    border-radius: 2px;
+    line-height: 18px;
+  }
+  .review-btn {
+    padding: 4px 7px 3px;
+    border-radius: 2px;
+    line-height: 18px;
+  }
   .list-group-item-text {
     padding-left: 1rem;
     padding-right: 1rem;
     padding-bottom: 1rem;
     font-size: 2rem;
     .review-footer {
       display: block;
-      min-height: 2rem;
+      min-height: 3.5rem;
+      padding-top: 1rem;
       .comment-reactions {
         display: block;
         float: left;
-        font-size: 1.4rem;
+        font-size: 1.6rem;
         white-space: nowrap;
         overflow-x: hidden;
       }
@@ -84,6 +96,7 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    padding-top: 1px;
     .colored-icon { opacity: .5; }
   }
 }
diff --git a/test/src/components/__snapshots__/reactions.test.js.snap b/test/src/components/__snapshots__/reactions.test.js.snap
@@ -3,47 +3,47 @@
 exports[`does not display number zero 1`] = `
 Array [
   <button
-    className="btn btn-xs btn-default"
+    className="reaction-btn reaction-btn-default"
     disabled={false}
     type="button"
   >
     👍
      
   </button>,
   <button
-    className="btn btn-xs btn-default"
+    className="reaction-btn reaction-btn-default"
     disabled={false}
     type="button"
   >
     👎
      
   </button>,
   <button
-    className="btn btn-xs btn-default"
+    className="reaction-btn reaction-btn-default"
     disabled={false}
     type="button"
   >
     😄
      
   </button>,
   <button
-    className="btn btn-xs btn-default"
+    className="reaction-btn reaction-btn-default"
     disabled={false}
     type="button"
   >
     🎉
      
   </button>,
   <button
-    className="btn btn-xs btn-default"
+    className="reaction-btn reaction-btn-default"
     disabled={false}
     type="button"
   >
     😕
      
   </button>,
   <button
-    className="btn btn-xs btn-default"
+    className="reaction-btn reaction-btn-default"
     disabled={false}
     type="button"
   >