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);
-      }
-    }
-  }
-}