Add preview message for instructors (#21)

TNL-7106

src/courseware/InstructorToolbar.jsx

@@ -10,8 +10,15 @@ function InstructorToolbar(props) {
 
   return (
     <div className="bg-primary text-light">
-      <div className="container-fluid py-2 d-flex justify-content-end">
-        <a className="text-light" href={props.activeUnitLmsWebUrl}>View unit in the existing experience</a>
+      <div className="container-fluid py-3 d-flex justify-content-end align-items-center">
+        <div>
+          <p className="mb-0 mr-5">
+          You are currently previewing the edX learning sequence experience. This preview is to allow for early content testing, especially for custom content blocks, with the goal of ensuring it renders as expected in the next experience. You can learn more through the following <a className="text-white" style={{ textDecoration: 'underline' }} href="https://partners.edx.org/announcements/author-preview-learning-sequence-experience-update" target="blank" rel="noopener">Partner Portal post</a>.  Please report any issues or provide <a className="text-white" style={{ textDecoration: 'underline' }} target="blank" rel="noopener" href="https://forms.gle/R6jMYJNTCj1vgC1D6">feedback using the linked form</a>.
+          </p>
+        </div>
+        <div className="flex-shrink-0">
+          <a className="btn d-block btn-outline-light" href={props.activeUnitLmsWebUrl}>View unit in the existing experience</a>
+        </div>
       </div>
     </div>
   );

src/index.scss

@@ -4,6 +4,18 @@ $primary: #1176B2;
 @import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/footer";
 
+// TODO: Fix .btn-outline-light style in paragon
+.btn-outline-light {
+  &:hover, &:focus {
+    color: $primary;
+    border-color: $white;
+    background-color: $white;
+  }
+  &:not(:disabled):not(.disabled):active {
+    border-color: $white;
+  }
+}
+
 #root {
   display: flex;
   flex-direction: column;