applying save-based error styling to response step

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

@@ -44,15 +44,24 @@
                         <li class="field field--textarea submission__answer" id="submission__answer">
                             <label class="sr" for="submission__answer__value">Please provide your response to the question.</label>
                             <textarea id="submission__answer__value" placeholder="">{{ saved_response }}</textarea>
+                            <span class="tip">You may continue to work on your response until you submit it.</span>
                         </li>
                     </ol>
 
-                    <ul class="list list--actions response__submission__actions">
+                    <div class="response__submission__actions has--error">
+                        <ul class="list list--actions">
                             <li class="list--actions__item">
                                 <button type="submit" id="submission__save" class="action action--save submission__save is--disabled">Save Your Progress</button>
-                            <span class="tip">You may continue to work on your response until you submit it.</span>
                             </li>
                         </ul>
+
+                        <div class="message message--error message--error-server">
+                            <h3 class="message__title">We could not save your progress</h3>
+                            <div class="message__content">
+                                <p>There was a problem communicating with the server. Please try again.</p>
+                            </div>
+                        </div>
+                    </div>
                 </form>
             </div>
 

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

@@ -470,7 +470,6 @@
   // --------------------
   // errors
   // --------------------
-
   // CASE: default error display (hidden)
   .message--error {
     @extend %trans-opacity;
@@ -488,8 +487,6 @@
   }
 
 
-
-
   // --------------------
   // problem
   // --------------------
@@ -548,6 +545,7 @@
       textarea {
         @extend %ui-content-longanswer;
         min-height: ($baseline-v*10);
+        margin-bottom: ($baseline-v/2);
       }
     }
 
@@ -567,67 +565,92 @@
     }
 
     .response__submission__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;
 
-      .action--submit, .tip {
+      .action--save {
+        @extend %btn--secondary;
+        @extend %action-4;
         display: block;
-        width: 100%;
-        margin-bottom: ($baseline-v/2);
+        text-align: center;
 
         @include media($bp-ds) {
           display: inline-block;
-          vertical-align: middle;
-          width: auto;
+          margin-right: ($baseline-v/2);
         }
 
         @include media($bp-dm) {
           display: inline-block;
-          vertical-align: middle;
-          width: auto;
+          margin-right: ($baseline-v/2);
         }
 
         @include media($bp-dl) {
           display: inline-block;
-          vertical-align: middle;
-          width: auto;
+          margin-right: ($baseline-v/2);
         }
 
         @include media($bp-dx) {
           display: inline-block;
-          vertical-align: middle;
-          width: auto;
+          margin-right: ($baseline-v/2);
         }
       }
 
-      .action--save {
-        @extend %btn--secondary;
-        @extend %action-4;
+      // STATE: has error
+      &.has--error {
+        @include row();
+        background: tint($color-error, 90%);
+
+        .message {
           display: block;
-        text-align: center;
 
           @include media($bp-ds) {
-          display: inline-block;
-          margin-right: ($baseline-v/2);
+            @include span-columns(3 of 6);
+            text-align: left;
           }
 
           @include media($bp-dm) {
-          display: inline-block;
-          margin-right: ($baseline-v/2);
+            @include span-columns(6 of 12);
+            margin-bottom: 0;
+            text-align: left;
           }
 
           @include media($bp-dl) {
-          display: inline-block;
-          margin-right: ($baseline-v/2);
+            @include span-columns(6 of 12);
+            text-align: left;
           }
 
           @include media($bp-dx) {
-          display: inline-block;
-          margin-right: ($baseline-v/2);
+            @include span-columns(6 of 12);
+            text-align: left;
           }
         }
 
-      .tip {
-        @extend %copy-5;
-        color: $copy-supplemental-color;
+        .list--actions {
+          display: block;
+          margin-bottom: ($baseline-v/2);
+
+          @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;
+          }
+        }
       }
     }
   }

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

@@ -41,6 +41,12 @@
     textarea {
       width: 100%;
     }
+
+    .tip {
+      display: block;
+      @extend %copy-5;
+      color: $copy-supplemental-color;
+    }
   }
 }