Added styling for the form error messages

Fixes #103
amiyasahu · Mar 28, 2020 · 33ad7fa · 33ad7fa
1 parent 4fb536d
commit 33ad7fa
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 3 deletions.
diff --git a/qa-theme/Donut-theme/css/donut.css b/qa-theme/Donut-theme/css/donut.css
@@ -3427,7 +3427,22 @@ a.qa-browse-cat-link:visited {
   padding: 15px;
 }
 .qa-part-a-form .qa-a-form h2:last-child {
-  border-bottom: medium none;
+  border-bottom: transparent;
+  font-size: 18px;
+  margin: -5px -5px;
+  border-radius: 4px;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+  color: #a94442;
+}
+.qa-part-a-form .qa-a-form h2:last-child hr {
+  border-top-color: #e4b9c0;
+}
+.qa-part-a-form .qa-a-form h2:last-child .alert-link {
+  color: #843534;
+}
+.qa-part-a-form .qa-a-form h2:last-child a {
+  color: #843534;
 }
 .qa-part-a-list > h2 {
   font-size: 20px;
@@ -3489,6 +3504,23 @@ a.qa-browse-cat-link:visited {
   font-size: 18px;
   padding-left: 10px;
 }
+.qa-c-form h2:last-child {
+  font-size: 16px;
+  padding: 10px;
+  border-radius: 4px;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+  color: #a94442;
+}
+.qa-c-form h2:last-child hr {
+  border-top-color: #e4b9c0;
+}
+.qa-c-form h2:last-child .alert-link {
+  color: #843534;
+}
+.qa-c-form h2:last-child a {
+  color: #843534;
+}
 .qa-a-item-content {
   font-size: 18px;
   margin-bottom: 16px;

diff --git a/qa-theme/Donut-theme/css/donut.min.css b/qa-theme/Donut-theme/css/donut.min.css
diff --git a/qa-theme/Donut-theme/less/donut.less b/qa-theme/Donut-theme/less/donut.less
@@ -840,7 +840,15 @@ html, body {
       border-bottom: 1px solid #e2e2e2;
       padding: 15px;
       &:last-child {
-        border-bottom: medium none;
+        // if the h2 a last element in the form, then it is a error message
+        border-bottom: transparent;
+        font-size: 18px;
+        margin: -5px -5px;
+        border-radius: @border-radius-base;
+        .alert-danger();
+        a {
+          .alert-link();
+        }
       }
     }
   }
@@ -906,6 +914,16 @@ html, body {
   h2 {
     font-size: @font-size-h4;
     padding-left: 10px;
+    &:last-child {
+      // if the h2 a last element in the form, then it is a error message
+      font-size: 16px;
+      padding: 10px;
+      border-radius: @border-radius-base;
+      .alert-danger();
+      a {
+        .alert-link();
+      }
+    }
   }
 }