posts: change how the mode menu indicates the active mode.

Instead of changing the background color of the entire page when you
change modes in the post mode menu (which was ugly, and not obvious what
the colors meant), show a notice and make it so that hovering a post
gives it a blue outline. This indicates that clicking the post will do
something different.

app/components/post_preview_component/post_preview_component.html.erb

@@ -1,10 +1,10 @@
 <%= tag.article id: "post_#{post.id}", **article_attrs do -%>
   <%= link_to polymorphic_path(link_target, q: tags) do -%>
-    <picture>
+    <%= tag.picture do -%>
       <%= tag.source media: "(max-width: 660px)", srcset: cropped_url -%>
       <%= tag.source media: "(min-width: 660px)", srcset: post.preview_file_url -%>
       <%= tag.img class: "has-cropped-#{post.has_cropped?}", src: post.preview_file_url, style: "min-width: #{preview_dimensions[:width]}px; min-height: #{preview_dimensions[:height]}px;", title: tooltip, alt: "post ##{post.id}" -%>
-    </picture>
+    <% end -%>
   <% end -%>
   <% if pool -%>
     <p class="desc">

app/components/post_preview_component/post_preview_component.scss

@@ -4,10 +4,10 @@ article.post-preview {
   height: 154px;
   width: 154px;
   margin: 0 10px 10px 0;
-  overflow: hidden;
   text-align: center;
   display: inline-block;
   position: relative;
+  vertical-align: top;
 
   a {
     display: inline-block;

app/javascript/src/javascripts/post_mode_menu.js

@@ -18,8 +18,20 @@ PostModeMenu.initialize_shortcuts = function() {
   Utility.keydown("1 2 3 4 5 6 7 8 9 0", "change_tag_script", PostModeMenu.change_tag_script);
 }
 
-PostModeMenu.show_notice = function(i) {
-  Utility.notice("Switched to tag script #" + i + ". To switch tag scripts, use the number keys.");
+PostModeMenu.show_notice = function(mode, tag_script_index = 0) {
+  if (mode === "add-fav") {
+    Utility.notice("Switched to favorite mode. Click a post to favorite it.");
+  } else if (mode === "remove-fav") {
+    Utility.notice("Switched to unfavorite mode. Click a post to unfavorite it.");
+  } else if (mode === "edit") {
+    Utility.notice("Switched to edit mode. Click a post to edit it.");
+  } else if (mode === 'vote-down') {
+    Utility.notice("Switched to downvote mode. Click a post to downvote it.");
+  } else if (mode === 'vote-up') {
+    Utility.notice("Switched to upvote mode. Click a post to upvote it.");
+  } else if (mode === "tag-script") {
+    Utility.notice(`Switched to tag script #${tag_script_index}. To switch tag scripts, use the number keys.`);
+  }
 }
 
 PostModeMenu.change_tag_script = function(e) {
@@ -33,7 +45,7 @@ PostModeMenu.change_tag_script = function(e) {
     $("#tag-script-field").val(new_tag_script);
     localStorage.setItem("current_tag_script_id", new_tag_script_id);
     if (old_tag_script_id !== new_tag_script_id) {
-      PostModeMenu.show_notice(new_tag_script_id);
+      PostModeMenu.show_notice("tag-script", new_tag_script_id);
     }
 
     e.preventDefault();
@@ -99,9 +111,9 @@ PostModeMenu.change = function() {
   if (s === undefined) {
     return;
   }
-  var $body = $(document.body);
-  $body.removeClass((i, classNames) => classNames.split(/ /).filter(name => /^mode-/.test(name)).join(" "));
-  $body.addClass("mode-" + s);
+
+  $("body").attr("data-mode-menu-active", s !== "view");
+  $("body").attr("data-mode-menu", s);
   localStorage.setItem("mode", s, 1);
 
   if (s === "tag-script") {
@@ -113,9 +125,10 @@ PostModeMenu.change = function() {
     var script = localStorage.getItem("tag-script-" + current_script_id);
 
     $("#tag-script-field").val(script).show();
-    PostModeMenu.show_notice(current_script_id);
+    PostModeMenu.show_notice(s, current_script_id);
   } else {
     $("#tag-script-field").hide();
+    PostModeMenu.show_notice(s);
   }
 }
 

app/javascript/src/styles/base/040_colors.css

@@ -229,12 +229,7 @@ html {
 
   --fetch-source-data-border-color: var(--grey-2);
 
-  --post-mode-menu-edit-background: var(--green-2);
-  --post-mode-menu-tag-script-background: var(--purple-2);
-  --post-mode-menu-add-fav-background: var(--yellow-2);
-  --post-mode-menu-remove-fav-background: var(--yellow-2);
-  --post-mode-menu-vote-up-background: var(--blue-2);
-  --post-mode-menu-vote-down-background: var(--red-2);
+  --post-mode-menu-active-post-outline-color: var(--blue-2);
   --post-mode-menu-translation-background: var(--blue-2);
 
   --tag-count-color: var(--muted-text-color);
@@ -426,12 +421,7 @@ body[data-current-user-theme="dark"] {
 
   --fetch-source-data-border-color: var(--grey-4);
 
-  --post-mode-menu-edit-background: var(--green-8);
-  --post-mode-menu-tag-script-background: var(--purple-8);
-  --post-mode-menu-add-fav-background: var(--yellow-8);
-  --post-mode-menu-remove-fav-background: var(--yellow-8);
-  --post-mode-menu-vote-up-background: var(--blue-8);
-  --post-mode-menu-vote-down-background: var(--red-8);
+  --post-mode-menu-active-post-outline-color: var(--azure-4);
   --post-mode-menu-translation-background: var(--blue-8);
 
   --low-post-count-color: var(--red-4);

app/javascript/src/styles/specific/post_mode_menu.scss

@@ -1,25 +1,5 @@
-body.mode-edit {
-  background-color: var(--post-mode-menu-edit-background);
-}
-
-body.mode-tag-script {
-  background-color: var(--post-mode-menu-tag-script-background);
-}
-
-body.mode-add-fav {
-  background-color: var(--post-mode-menu-add-fav-background);
-}
-
-body.mode-remove-fav {
-  background-color: var(--post-mode-menu-remove-fav-background);
-}
-
-body.mode-vote-up {
-  background-color: var(--post-mode-menu-vote-up-background);
-}
-
-body.mode-vote-down {
-  background-color: var(--post-mode-menu-vote-down-background);
+body[data-mode-menu-active="true"] .post-preview a:hover {
+  outline: 4px solid var(--post-mode-menu-active-post-outline-color);
 }
 
 body.mode-translation {