Improve discoverability of headline image logic in nodes#edit

2 files changed, 8 insertions, 2 deletions

diff --git a/app/views/nodes/edit.html.erb b/app/views/nodes/edit.html.erb
index 2c1e975..da682f0 100644
--- a/app/views/nodes/edit.html.erb
+++ b/app/views/nodes/edit.html.erb
@@ -91,7 +91,8 @@
                 <span class="related_asset_handle"><%= icon("grip-vertical", library: "tabler", "aria-hidden": true) %></span>
                 <%= image_tag related.asset.upload.url(:thumb) %>
                 <button type="button" class="related_asset_set_headline"
-                        aria-pressed="<%= related.headline? %>" aria-label="Set as headline image">
+                        aria-pressed="<%= related.headline? %>" aria-label="Set as headline image"
+                        title="Use this photo as the page's headline image">
                   <%= icon("star", library: "tabler", "aria-hidden": true) %>
                 </button>
                 <button type="button" class="related_asset_remove" aria-label="Remove image">
@@ -100,6 +101,7 @@
               </li>
             <% end %>
           </ul>
+          <p class="field_hint">The starred photo becomes this page's headline image on the public site. If none is starred, visitors get a link to browse all attached images instead.</p>
           <%= text_field_tag nil, nil, id: "related_asset_search_term", placeholder: "Search images to attach…", autocomplete: "off" %>
           <div id="related_asset_search_results" class="search_results"></div>
         </div>
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index b171800..086e73d 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -1381,7 +1381,11 @@ div#image_browser ul li {
 
 .related_asset_set_headline:hover,
 .related_asset_set_headline[aria-pressed="true"] {
-  color: #6b5900;
+  color: #f5b400;
+}
+
+.related_asset_set_headline[aria-pressed="true"] svg {
+  fill: currentColor;
 }
 
 .thumbnail_list li.is_headline {