GH-979: update reviews sidebar to use grid and add agree/disagree styles

opentech/static_src/src/sass/apply/components/_reviews-sidebar.scss

+// also used within the React app in /components/ReviewBlock
 .reviews-sidebar {
     $root: &;
     margin-bottom: 20px;
     font-weight: $weight--bold;
 
-    tbody {
-        tr {
-            border: 0;
+    &__decision {
+        position: relative;
+        font-size: 14px;
+        border-top: 1px solid $color--mid-grey;
+        border-bottom: 1px solid $color--mid-grey;
+        margin-bottom: 20px;
+        padding-top: 10px;
+    }
 
-            &:hover {
-                box-shadow: none;
-            }
+    &__item {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
 
-            @include media-query(tablet-portrait) {
-                border-bottom: 0;
-            }
+        @supports(display: grid) {
+            display: grid;
+            grid-template-columns: 50% 25% 25%;
+            grid-gap: 5px;
+        }
 
-            > th {
-                font-size: inherit;
-                font-weight: $weight--bold;
-            }
+        &--decision {
+            margin-bottom: 10px;
+            font-weight: $weight--semibold;
 
-            > td {
-                display: table-cell;
-                height: auto;
-            }
+            &:first-child {
 
-            th,
-            td,
-            td:last-child,
-            td:first-child {
-                padding: 10px;
-            }
+                #{$root}__outcome {
+                    &::before,
+                    &::after {
+                        position: absolute;
+                        top: -23px;
+                        left: 5px;
+                    }
 
-            &:only-child {
-                > td {
-                    padding: 0;
+                    &::after {
+                        @include triangle(top, $color--white, 8px);
+                        top: -21px;
+                    }
+
+                    &::before {
+                        @include triangle(top, $color--mid-grey, 8px);
+                    }
                 }
             }
+        }
 
-            &.no-response {
-                color: $color--black-20;
-            }
+        &--header {
+            background-color: $color--light-grey;
+            padding: 10px;
+            align-items: center;
         }
-    }
 
-    &__author {
-        span {
-            position: relative;
-            z-index: 1;
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            background: $color--white;
+        &.is-hidden {
+            display: none;
         }
 
-        &:hover {
-            span {
-                display: inline;
-                overflow: visible;
-            }
+        &.no-response {
+            color: $color--black-20;
         }
     }
 
@@ -69,4 +72,39 @@
     &__no-reviews {
         color: $color--mid-grey;
     }
+
+    &__name {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        background: $color--white;
+
+        &:hover {
+            display: inline-flex;
+            overflow: visible;
+        }
+
+        img {
+            margin-left: 7px;
+        }
+    }
+
+    &__outcome {
+        position: relative;
+
+        &.agree {
+            color: $color--green;
+        }
+
+        &.disagree {
+            color: $color--tomato;
+        }
+    }
+
+    &__split {
+        margin-bottom: 20px;
+    }
 }