adding styling and markup for submission-based errors

apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html

@@ -105,7 +105,14 @@
                                     </ol>
                                 </fieldset>
 
-                                <div class="peer-assessment__actions">
+                                <div class="peer-assessment__actions has--error">
+                                    <div class="message message--error message--error-server">
+                                        <h3 class="message__title">We could not submit your assessment</h3>
+                                        <div class="message__content">
+                                            <p>There was a problem communicating with the server. Please try again.</p>
+                                        </div>
+                                    </div>
+
                                     <ul class="list list--actions">
                                         <li class="list--actions__item">
                                             <button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit is--disabled">

apps/openassessment/templates/openassessmentblock/response/oa_response.html

@@ -51,7 +51,14 @@
                 </form>
             </div>
 
-            <div class="step__actions">
+            <div class="step__actions has--error">
+                <div class="message message--error message--error-server">
+                    <h3 class="message__title">We could not submit your response</h3>
+                    <div class="message__content">
+                        <p>There was a problem communicating with the server. Please try again.</p>
+                    </div>
+                </div>
+
                 <ul class="list list--actions">
                     <li class="list--actions__item">
                         <a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit is--disabled">

apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html

@@ -75,7 +75,13 @@
                     </ol>
                 </fieldset>
 
-                <div class="self-assessment__actions">
+                <div class="self-assessment__actions has--error">
+                    <div class="message message--error message--error-server">
+                        <h3 class="message__title">We could not submit your assessment</h3>
+                        <div class="message__content">
+                            <p>There was a problem communicating with the server. Please try again.</p>
+                        </div>
+                    </div>
                     <ul class="list list--actions">
                         <li class="list--actions__item">
                             <button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit is--disabled">

apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss

@@ -210,6 +210,10 @@
 
     // step actions
     .step__actions {
+      @include transition(background-color $tmg-f1 ease-in-out 0s);
+      border-radius: ($baseline-v/5);
+      padding: ($baseline-v/2) ($baseline-h/2);
+      background: transparent;
       text-align: center;
 
       @include media($bp-ds) {
@@ -232,6 +236,58 @@
         @extend %btn--primary;
         @extend %action-4;
       }
+
+      // STATE: has error
+      &.has--error {
+        @include row();
+        background: tint($color-error, 90%);
+
+        .message {
+          display: block;
+          margin-bottom: ($baseline-v/2);
+          text-align: left;
+
+          @include media($bp-ds) {
+            @include span-columns(3 of 6);
+            margin-bottom: 0;
+          }
+
+          @include media($bp-dm) {
+            @include span-columns(6 of 12);
+            margin-bottom: 0;
+          }
+
+          @include media($bp-dl) {
+            @include span-columns(6 of 12);
+            margin-bottom: 0;
+          }
+
+          @include media($bp-dx) {
+            @include span-columns(6 of 12);
+            margin-bottom: 0;
+          }
+        }
+
+        .list--actions {
+          display: block;
+
+          @include media($bp-ds) {
+            @include span-columns(3 of 6);
+          }
+
+          @include media($bp-dm) {
+            @include span-columns(6 of 12);
+          }
+
+          @include media($bp-dl) {
+            @include span-columns(6 of 12);
+          }
+
+          @include media($bp-dx) {
+            @include span-columns(6 of 12);
+          }
+        }
+      }
     }
 
     // STATE: step is loading
@@ -363,10 +419,25 @@
   // --------------------
   .message {
 
+    .message__title {
+      @extend %hd-6;
+    }
 
-    // CASE: has actions
-    &.has-actions {
+    .message__content {
+      @extend %copy-4;
+    }
+  }
+
+  // TYPE: error
+  .message--error {
+
+
+    .message__title {
+      color: $color-error;
+    }
 
+    .message__content {
+      color: tint($color-error, 33%);
     }
   }
 

apps/openassessment/xblock/static/sass/xb/elements/_typography.scss

@@ -153,7 +153,7 @@
 
 %copy-5 {
   @include font-size(13);
-  @include lh(12);
+  @include lh(13);
   font-family: $f-copy;
 }