styling response save status UI

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

@@ -32,9 +32,14 @@
             </div>
 
             <div class="step__content">
-                <!-- @talbs: This is some more ugly placeholder stuff that you can replace -->
-                <div id="response__save_status">{{ save_status }}</div>
                 <form id="response__submission" class="response__submission">
+                    <div id="response__save_status" class="response__submission__status">
+                        <h3 class="response__submission__status__title">
+                            <span class="sr">Your Working Submission Status:</span>
+                            {{ save_status }}
+                        </h3>
+                    </div>
+
                     <ol class="list list--fields response__submission__content">
                         <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>

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

@@ -496,16 +496,16 @@
 
     // response form
     .response__submission {
+      margin-top: ($baseline-v*1.5);
+      position: relative;
       padding: ($baseline-v/2);
       background: $color-decorative-tertiary;
       border-radius: ($baseline-v/10);
-
-      .submission__answer {
-        margin-bottom: ($baseline-v/2);
-      }
     }
 
     .response__submission__content {
+      margin-bottom: ($baseline-v/2);
+
       label {
         @extend %text-sr;
       }
@@ -516,6 +516,21 @@
       }
     }
 
+    .response__submission__status {
+      position: absolute;
+      top: -($baseline-v*1.5);
+      right: 0;
+      background: $color-decorative-tertiary;
+      padding: ($baseline-v/2) ($baseline-h/2);
+      margin-bottom: ($baseline-v/2);
+    }
+
+    .response__submission__status__title {
+      @extend %hd-7;
+      @extend %t-weight3;
+      color: $copy-supplemental-color;
+    }
+
     .response__submission__actions {
 
       .action--submit, .tip {