tweaked published messaging styles

cms/static/sass/_unit.scss

@@ -285,6 +285,7 @@
   }
 
   .published-alert {
+    display: none;
     padding: 10px;
     border: 1px solid #edbd3c;
     border-radius: 3px;
@@ -430,7 +431,11 @@
     display: none;
   }
 
-  #create-draft {
+  .published-alert {
+    display: block;
+  }
+
+  .edit-draft-message {
     display: none;
   }
 }
@@ -438,13 +443,17 @@
 .edit-state-public {
   #save-draft,
   #delete-draft,
-  #publish-draft,
   .component-actions,
   .new-component-item,
-  #published-alert {
+  #published-alert,
+  .publish-draft-message {
     display: none;
   }
 
+  .published-alert {
+    display: block;
+  }
+
   .drag-handle {
     display: none !important;
   }

cms/templates/unit.html

@@ -80,8 +80,10 @@
                 <option value="private">Private</option>
               </select>
             </div>
-            <a id="create-draft" href="#">This unit has been published. Click here to edit it.</a>
-            <a id="publish-draft" href="#">This unit has already been published. Click here to release your changes to it</a>
+            <div class="row published-alert">
+              <p class="edit-draft-message">This unit has been published. To make changes, you must <a href="#" id="create-draft">edit a draft</a>.</p>
+              <p class="publish-draft-message">This is a draft of the published unit. To update the live version, you must <a href="#" id="publish-draft">replace it with this draft</a>.</p>
+            </div>            
             <div class="row status">
               <p>This unit is scheduled to be released to <strong>students</strong> on <strong>${subsection.start}</strong> with the subsection <a href="${reverse('edit_subsection', kwargs={'location': subsection.location})}">"${subsection.display_name}"</a></p>
             </div>