DIV-1088: Make review table corners rounded and fix error box styling

edivorce/apps/core/static/css/main.scss

@@ -809,19 +809,12 @@ i.fa {
 }
 
 .table-error {
-    border: 2px solid $color-red !important;
-    -webkit-transition: 0.1s ease-in-out all;
-    transition: 0.1s ease-in-out all;
-    margin: -12px -16px;
-    padding: 12px 16px;
-    .warning {
-        color: $color-red;
-        font-size: 14px;
-        font-weight: bolder;
-        display: inline-block;
-        width: 100%;
-        text-align: center;
-    }
+    color: $color-red;
+    font-size: 14px;
+    font-weight: bolder;
+    display: inline-block;
+    width: 100%;
+    text-align: center;
 }
 
 .btn-radio {
@@ -1517,14 +1510,43 @@ textarea {
 
 	table {
 		margin-bottom: 0;
+        border-collapse: separate !important;
+        border: none;
 
-		thead tr {
-			background-color: $brand-blue;
-			color: #fff;
-		}
-        .value-column {
-            width: 30%;
-            min-width: 192px;
+        thead th {
+            color: #fff;
+            border-bottom: 1px solid $color-grey-light;
+            border-top: 1px solid $color-grey-light;
+            background-color: $color-blue-dark;
+            &:first-child {
+                border-top-left-radius: 8px;
+            }
+            &:last-child {
+                border-top-right-radius: 8px;
+                border-left: 0;
+            }
+        }
+        tbody {
+            td {
+                border-top: none;
+                &.value-column {
+                    width: 30%;
+                    min-width: 192px;
+                    border-left: none;
+                    vertical-align: middle;
+                    &.contains-error {
+                        border: 2px solid $color-red;
+                    }
+                }
+            }
+            tr:last-child {
+                :first-child {
+                    border-bottom-left-radius: 8px;
+                }
+                :last-child {
+                    border-bottom-right-radius: 8px;
+                }
+            }
         }
 
         thead {

edivorce/apps/core/static/js/main.js

@@ -834,6 +834,8 @@ $(function () {
       e.preventDefault();
       window.history.back();
     });
+
+    $('.question-well.step-review.error span.table-error').parent('td').addClass('contains-error');
 });
 
 

edivorce/apps/core/templatetags/summary_format.py

@@ -8,7 +8,7 @@ from django.utils.html import format_html, format_html_join
 from django.utils.safestring import mark_safe
 
 NO_ANSWER = 'No answer'
-MISSING_RESPONSE = mark_safe('<div class="table-error"><span class="warning">MISSING REQUIRED FIELD</span></div>') # nosec
+MISSING_RESPONSE = mark_safe('<span class="table-error">MISSING REQUIRED FIELD</span>') # nosec
 
 register = template.Library()