Improve Ada inline question styling

src/app/components/content/IsaacQuestion.tsx

@@ -80,7 +80,7 @@ export const IsaacQuestion = withRouter(({doc, location}: {doc: ApiTypes.Questio
     const invalidFormatFeeback = <p>
         Your answer is not in a format we recognise, please enter your answer as a decimal number.<br/>
         {invalidFormatErrorStdForm && <>When writing standard form, you must include <code>^</code> or <code>**</code> between the 10 and the exponent.<br/></>}
-        {isPhy && <>For help, see our <a target="_blank" href="/solving_problems#units">guide to answering numeric questions</a></>}.
+        {isPhy && <>For help, see our <a target="_blank" href="/solving_problems#units">guide to answering numeric questions</a>.</>}
     </p>;
 
     // Register Question Part in Redux
@@ -177,19 +177,17 @@ export const IsaacQuestion = withRouter(({doc, location}: {doc: ApiTypes.Questio
                         {isInlineQuestion && numInlineQuestions && numInlineQuestions > 1 ? <>
                             <span>You can view feedback for a specific box by either selecting it above, or by using the control panel below.</span>
                             <div className={`feedback-panel-${almost ? "light" : "dark"}`} role="note" aria-labelledby="answer-feedback">
-                                <div className={`w-100 mt-2 d-flex feedback-panel-header`}>
+                                <div className={`w-100 mt-2 d-flex feedback-panel-header justify-content-around`}>
                                     <RS.Button color="transparent" onClick={() => {
                                         inlineContext.setFeedbackIndex(((inlineContext?.feedbackIndex as number - 1) + numInlineQuestions) % numInlineQuestions);
                                     }}>
                                         {below["xs"](deviceSize) ? "◀" : "Previous" }
                                     </RS.Button>
-                                    <Spacer/>
                                     <RS.Button color="transparent" className="inline-part-jump align-self-center" onClick={() => {
                                         inlineContext.feedbackIndex && inlineContext.setFocusSelection(true);
                                     }}>
                                         Box {inlineContext.feedbackIndex as number + 1} of {numInlineQuestions}
                                     </RS.Button>
-                                    <Spacer/>
                                     <RS.Button color="transparent" onClick={() => {
                                         inlineContext.setFeedbackIndex((inlineContext?.feedbackIndex as number + 1) % numInlineQuestions);
                                     }}>

src/scss/common/forms.scss

@@ -38,11 +38,6 @@
   }
 }
 
-input.form-control.is-unanswered {
-  border: solid 1px theme-color("warning");
-  @include border-radius($input-border-radius, 0);
-}
-
 .date-input .is-invalid, .date-input .is-valid {
   background: white;
 }

src/scss/common/questions.scss

@@ -456,6 +456,7 @@
     > button {
       color: inherit;
       min-width: 176px;
+      flex-basis: 100%;
       @media (max-width: 576px) {
         min-width: 0;
       }
@@ -495,22 +496,6 @@
   }
 }
 
-.inline-part {
-  $shadow-size: 3px;
-  &.selected-feedback {
-    box-shadow: 0 0 0 $shadow-size #000;
-    &.is-valid {
-      box-shadow: 0 0 0 $shadow-size theme-color("success");
-    }
-    &.is-invalid {
-      box-shadow: 0 0 0 $shadow-size theme-color("danger");
-    }
-    &.is-unanswered {
-      box-shadow: 0 0 0 $shadow-size theme-color("warning");
-    }
-  }
-}
-
 .inline-dropdown {
   min-width: unset !important;
 }

src/scss/cs/questions.scss

@@ -33,6 +33,32 @@
     color: $cs-black;
     border-top: none;
   }
+  &.almost {
+    background: $yellow-400;
+    color: $cs-black;
+    border-top: none;
+  }
+}
+
+input.form-control.is-unanswered {
+  border: solid 1px $yellow-200;
+  @include border-radius($input-border-radius, 0);
+}
+
+.inline-part {
+  $shadow-size: 3px;
+  &.selected-feedback {
+    box-shadow: 0 0 0 $shadow-size #000;
+    &.is-valid {
+      box-shadow: 0 0 0 $shadow-size theme-color("success");
+    }
+    &.is-invalid {
+      box-shadow: 0 0 0 $shadow-size theme-color("danger");
+    }
+    &.is-unanswered {
+      box-shadow: 0 0 0 $shadow-size $yellow-200;
+    }
+  }
 }
 
 // Quick questions

src/scss/phy/questions.scss

@@ -109,3 +109,24 @@
     border: solid 1px $black;
   }
 }
+
+input.form-control.is-unanswered {
+  border: solid 1px theme-color("warning");
+  @include border-radius($input-border-radius, 0);
+}
+
+.inline-part {
+  $shadow-size: 3px;
+  &.selected-feedback {
+    box-shadow: 0 0 0 $shadow-size #000;
+    &.is-valid {
+      box-shadow: 0 0 0 $shadow-size theme-color("success");
+    }
+    &.is-invalid {
+      box-shadow: 0 0 0 $shadow-size theme-color("danger");
+    }
+    &.is-unanswered {
+      box-shadow: 0 0 0 $shadow-size theme-color("warning");
+    }
+  }
+}