UX: Simplify merged reviewable table

app/assets/javascripts/discourse/templates/components/reviewable-score.hbs

@@ -1,12 +1,4 @@
 <tr class='reviewable-score'>
-  <td>
-    {{format-date rs.created_at}}
-  </td>
-  <td>
-    {{d-icon rs.score_type.icon}}
-    {{title}}
-    <span class="badge-notification new-posts score">{{format-score rs.score}}</span>
-  </td>
   <td class='user'>
     {{#user-link user=rs.user}}
       {{avatar rs.user imageSize="tiny"}}
@@ -18,19 +10,39 @@
       ignored=rs.agree_stats.ignored}}
   </td>
   <td>
-    {{reviewable-status rs.status}}
+    {{d-icon rs.score_type.icon}}
+    {{title}}
+    <span class="badge-notification new-posts score">{{format-score rs.score}}</span>
   </td>
+  <td>
+    {{format-date rs.created_at}}
+  </td>
+
+  <td class="reviewable-score-spacer">
+{{d-icon "angle-double-right"}}
+  </td>
+
   <td class='reviewed-by'>
     {{#if rs.reviewed_by}}
       {{#user-link user=rs.reviewed_by}}
         {{avatar rs.reviewed_by imageSize="tiny"}}
         {{rs.reviewed_by.username}}
       {{/user-link}}
-      {{format-date rs.reviewed_at}}
     {{else}}
       &mdash;
     {{/if}}
   </td>
+
+  <td>
+    {{reviewable-status rs.status}}
+  </td>
+  <td>
+    {{#if rs.reviewed_by}}
+
+    {{format-date rs.reviewed_at format="tiny"}}
+    {{/if}}
+
+  </td>
 </tr>
 {{#if rs.reviewable_conversation}}
   <tr>

app/assets/javascripts/discourse/templates/components/reviewable-scores.hbs

@@ -1,14 +1,5 @@
 {{#if reviewable.reviewable_scores}}
   <table class='reviewable-scores'>
-    <thead>
-      <tr>
-        <th>{{i18n "review.scores.date"}}</th>
-        <th>{{i18n "review.scores.type"}}</th>
-        <th>{{i18n "review.scores.submitted_by"}}</th>
-        <th>{{i18n "review.scores.status"}}</th>
-        <th>{{i18n "review.scores.reviewed_by"}}</th>
-      </tr>
-    </thead>
     <tbody>
     {{#each reviewable.reviewable_scores as |rs|}}
       {{reviewable-score rs=rs reviewable=reviewable}}

app/assets/stylesheets/common/base/reviewables.scss

@@ -3,9 +3,15 @@
     color: $primary-medium;
     span.approved {
       color: $success;
+      .d-icon {
+        color: currentColor;
+      }
     }
     span.rejected {
       color: $danger;
+      .d-icon {
+        color: currentColor;
+      }
     }
   }
 
@@ -148,9 +154,15 @@
     margin-right: 0.25em;
     &.agreed {
       color: $success;
+      + .d-icon {
+        color: $success;
+      }
     }
     &.disagreed {
       color: $danger;
+      + .d-icon {
+        color: $danger;
+      }
     }
     &.ignored {
       color: $primary-medium;
@@ -224,9 +236,9 @@
   margin-top: 1em;
 }
 
-.reviewable-scores,
-.reviewable-histories {
+.reviewable-scores {
   min-width: 50%;
+  color: $primary-high;
 
   .reviewed-by {
     .date {
@@ -245,25 +257,27 @@
 
   .d-icon {
     font-size: $font-down-1;
+    color: $primary-medium;
   }
 
   .badge-notification {
     line-height: $line-height-medium;
+    vertical-align: text-top;
   }
 
-  thead {
-    th {
-      white-space: nowrap;
-    }
-  }
   tbody {
     border-width: 1px;
     td {
       white-space: nowrap;
+      vertical-align: baseline;
+      &.user a,
+      &.reviewed-by a {
+        max-width: 150px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
-    td:first-of-type {
-      padding-right: 1em;
-    }
+
     td:last-of-type {
       width: 100%;
       white-space: normal;
@@ -273,7 +287,11 @@
     }
     > tr > th,
     > tr > td {
-      padding: 0.5em 1em 0.5em 0.5em;
+      padding: 0.5em 1em 0.5em 0;
+    }
+    .reviewable-score-spacer {
+      padding-left: 0.5em;
+      padding-right: 1.5em;
     }
   }
 }