posts: update tag counter icons.

app/javascript/src/javascripts/tag_counter.js

@@ -19,7 +19,7 @@ export default @observer class TagCounter extends Component {
     return (
       <span class="tag-counter">
         <span class="tag-count">{this.tagCount}</span> / {TagCounter.highCount} tags
-        <i class={`far fa-${this.emoji}`}></i>
+        <img src={`/images/${this.iconName}.png`}/>
       </span>
     );
   }
@@ -28,13 +28,13 @@ export default @observer class TagCounter extends Component {
     this.tagCount = Utility.regexp_split($(this.props.tags).val()).length;
   }
 
-  @computed get emoji() {
+  @computed get iconName() {
     if (this.tagCount < TagCounter.lowCount) {
-      return "frown";
+      return "blobglare";
     } else if (this.tagCount >= TagCounter.lowCount && this.tagCount < TagCounter.highCount) {
-      return "meh";
+      return "blobthinkingglare";
     } else {
-      return "smile";
+      return "blobaww";
     }
   }
 

app/javascript/src/styles/base/000_vars.scss

@@ -1,4 +1,5 @@
 :root {
+  --text-xs: 0.8em;
   --text-sm: 0.9em;
   --text-md: 1em;
   --text-lg: 1.16667em;

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

@@ -145,10 +145,6 @@
   --tag-count-color: var(--muted-text-color);
   --low-post-count-color: red;
 
-  --tag-count-indicator-frown-color: red;
-  --tag-count-indicator-meh-color: darkkhaki;
-  --tag-count-indicator-smile-color: green;
-
   --remove-favorite-button: deeppink;
 
   --ugoira-seek-slider-background: #EEE;
@@ -417,10 +413,6 @@ body[data-current-user-theme="dark"] {
 
   --target-background: var(--blue-0);
 
-  --tag-count-indicator-frown-color: var(--red-1);
-  --tag-count-indicator-meh-color: var(--yellow-1);
-  --tag-count-indicator-smile-color: var(--green-1);
-
   --uploads-dropzone-background: var(--grey-3);
   --uploads-dropzone-progress-bar-foreground-color: var(--link-color);
   --uploads-dropzone-progress-bar-background-color: var(--link-hover-color);

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

@@ -485,6 +485,33 @@ div#c-posts, div#c-uploads {
   }
 }
 
+/* Container for the tag edit <textarea>, header, and related tags buttons. */
+#tags-container {
+  div.header {
+    line-height: 1.5em;
+
+    label {
+      display: inline-block;
+    }
+
+    i.fa-external-link-alt {
+      font-size: var(--text-xs);
+    }
+
+    span[data-tag-counter] {
+      float: right;
+      color: var(--muted-text-color);
+      font-size: var(--text-sm);
+
+      img {
+        margin-left: 0.5em;
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+}
+
 div#c-explore-posts {
   a.desc {
     font-weight: bold;

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

@@ -5,45 +5,3 @@ div#c-tags {
     }
   }
 }
-
-#tags-container {
-  div.header {
-    margin: 0;
-    display: grid;
-    grid-template-columns: 50% 50%;
-    width: 100%;
-
-    label {
-      grid-column: 1;
-    }
-
-    .options {
-      grid-column: 2;
-      justify-self: end;
-
-      .count {
-        color: var(--tag-count-color);
-        text-decoration: italic;
-        margin-left: 0.25em;
-        padding-bottom: 0.2em;
-      }
-
-      i {
-        margin-left: 0.25em;
-        font-size: 11pt;
-      }
-
-      .fa-frown {
-        color: var(--tag-count-indicator-frown-color);
-      }
-
-      .fa-meh {
-        color: var(--tag-count-indicator-meh-color);
-      }
-
-      .fa-smile {
-        color: var(--tag-count-indicator-smile-color);
-      }
-    }
-  }
-}

app/views/posts/partials/show/_edit.html.erb

@@ -49,10 +49,8 @@
     <div class="header">
       <%= f.label :tag_string, "Tags" %>
 
-      <span class="options">
+      <span data-tag-counter data-for="#post_tag_string"></span>
-        <span data-tag-counter data-for="#post_tag_string"></span>
+      <a href="javascript:void(0)"><i id="open-edit-dialog" class="fas fa-external-link-alt" title="detach" data-shortcut="shift+e"></i></a>
-        <a href="javascript:void(0)"><i id="open-edit-dialog" class="fas fa-arrows-alt" title="detach" data-shortcut="shift+e"></i></a>
-      </span>
     </div>
 
     <div>

app/views/uploads/new.html.erb

@@ -65,10 +65,8 @@
           <div class="header">
             <%= f.label :tag_string, "Tags" %>
 
-            <span class="options">
+            <span data-tag-counter data-for="#upload_tag_string"></span>
-              <span data-tag-counter data-for="#upload_tag_string"></span>
+            <a href="javascript:void(0)"><i id="open-edit-dialog" class="fas fa-external-link-alt" title="detach" data-shortcut="shift+e"></i></a>
-              <a href="javascript:void(0)"><i id="open-edit-dialog" class="fas fa-arrows-alt" title="detach" data-shortcut="shift+e"></i></a>
-            </span>
           </div>
 
           <%= f.input :tag_string, label: false, input_html: { size: "60x5", "data-autocomplete": "tag-edit", "data-shortcut": "e", spellcheck: false, value: params[:tag_string] } %>