Fixed tag list item close button and layout

src/common/components/comment/__snapshots__/index.spec.tsx.snap

@@ -220,7 +220,7 @@ exports[`(1) Default render 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-e5a42640-c9b5-428e-9d26-7a6fcab63b93"
+      id="editor-tool-emoji-picker-ad7f74fc-7d16-4049-a59a-3b2511f7738b"
       role="none"
       title="Emoji"
     >

src/common/components/trending-tags-card/__snapshots__/index.spec.tsx.snap

@@ -80,10 +80,20 @@ exports[`(2) Selected tag 1`] = `
     >
       hive
       <div
-        className="text-gray-600 ml-4 pointer"
+        className="text-gray-600 dark:text-gray-400 ml-2 pointer"
         onClick={[Function]}
       >
-        ✖
+        <svg
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 24 24"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M13.41,12l6.3-6.29a1,1,0,1,0-1.42-1.42L12,10.59,5.71,4.29A1,1,0,0,0,4.29,5.71L10.59,12l-6.3,6.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l6.29,6.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"
+          />
+        </svg>
       </div>
     </a>
   </div>

src/common/components/trending-tags-card/index.tsx

@@ -12,6 +12,7 @@ import { _t } from "../../i18n";
 import _c from "../../util/fix-class-names";
 import { ActiveUser } from "../../store/active-user/types";
 import "./_index.scss";
+import { UilMultiply } from "@iconscout/react-unicons";
 
 interface Props {
   history: History;
@@ -75,14 +76,14 @@ export class TrendingTagsCard extends Component<Props> {
                       {t}
                       {global.tag === t && (
                         <div
-                          className="text-gray-600 ml-4 pointer"
+                          className="text-gray-600 dark:text-gray-400 ml-2 pointer"
                           onClick={(e) => {
                             e.stopPropagation();
                             e.preventDefault();
                             this.handleUnselection();
                           }}
                         >
-                          ✖
+                          <UilMultiply size="16" />
                         </div>
                       )}
                     </a>

src/style/_mixins.scss

@@ -566,7 +566,9 @@
   .tag-list-item {
     border-radius: 25px;
     cursor: pointer;
-    display: table;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     margin-bottom: 8px;
     padding: 4px 8px;
     text-decoration: none;