From 1c2740281488e0a043b16095206b4488f7e81491 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 25 Mar 2024 21:54:00 +0600
Subject: [PATCH] Fixed tag list item close button and layout

---
 .../comment/__snapshots__/index.spec.tsx.snap |  6 ++++--
 .../__snapshots__/index.spec.tsx.snap         |  5 +++++
 .../__snapshots__/index.spec.tsx.snap         |  8 ++++++--
 .../__snapshots__/index.spec.tsx.snap         |  3 +++
 .../__snapshots__/index.spec.tsx.snap         | 14 +++++++++++--
 .../components/trending-tags-card/index.tsx   |  5 +++--
 src/common/pages/onboard.tsx                  | 20 +++++++++++++------
 src/style/_mixins.scss                        |  4 +++-
 8 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
index f48ce3fbf62..104e49f1eaf 100644
--- a/src/common/components/comment/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
@@ -7,6 +7,7 @@ exports[`(1) Default render 1`] = `
 >
   <div
     className="editor-toolbar toolbar-sm"
+    id="editor-toolbar"
   >
     <div
       className="editor-tool"
@@ -219,7 +220,7 @@ exports[`(1) Default render 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-eb89ac22-2702-4311-9bb6-70a8f5e909f8"
+      id="editor-tool-emoji-picker-ad7f74fc-7d16-4049-a59a-3b2511f7738b"
       role="none"
       title="Emoji"
     >
@@ -372,6 +373,7 @@ exports[`(2) Cancellable, in progress 1`] = `
 >
   <div
     className="editor-toolbar toolbar-sm"
+    id="editor-toolbar"
   >
     <div
       className="editor-tool"
@@ -584,7 +586,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-01be801c-eb95-4ea8-b8cd-9a74f7a3ffac"
+      id="editor-tool-emoji-picker-556d41f8-5964-432a-b66d-9dce8f906a76"
       role="none"
       title="Emoji"
     >
diff --git a/src/common/components/community-selector/__snapshots__/index.spec.tsx.snap b/src/common/components/community-selector/__snapshots__/index.spec.tsx.snap
index d4d0648b17a..9b184fb47aa 100644
--- a/src/common/components/community-selector/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/community-selector/__snapshots__/index.spec.tsx.snap
@@ -4,6 +4,7 @@ exports[`(1) Empty tags. 1`] = `
 <a
   className="community-selector"
   href="#"
+  id="community-picker"
   onClick={[Function]}
 >
   <span
@@ -27,6 +28,7 @@ exports[`(2) Tags with no community 1`] = `
 <a
   className="community-selector"
   href="#"
+  id="community-picker"
   onClick={[Function]}
 >
   <span
@@ -59,6 +61,7 @@ exports[`(3) Tags with community. but in the end 1`] = `
 <a
   className="community-selector"
   href="#"
+  id="community-picker"
   onClick={[Function]}
 >
   <span
@@ -91,6 +94,7 @@ exports[`(4) Tags with community. 1`] = `
 <a
   className="community-selector"
   href="#"
+  id="community-picker"
   onClick={[Function]}
 >
   <span
@@ -123,6 +127,7 @@ exports[`(5) Tags with community. But not valid 1`] = `
 <a
   className="community-selector"
   href="#"
+  id="community-picker"
   onClick={[Function]}
 >
   <span
diff --git a/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap
index 25ae346ad6a..8ca621c2516 100644
--- a/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap
@@ -153,7 +153,9 @@ Array [
 `;
 
 exports[`(2) Btn - No active user (1) Render 1`] = `
-<div>
+<div
+  onClick={[Function]}
+>
   <div>
     <div
       className="entry-vote-btn"
@@ -186,7 +188,9 @@ exports[`(2) Btn - No active user (1) Render 1`] = `
 `;
 
 exports[`(3) Btn - Up voted (1) Render 1`] = `
-<div>
+<div
+  onClick={[Function]}
+>
   <div>
     <div
       className="entry-vote-btn"
diff --git a/src/common/components/tag-selector/__snapshots__/index.spec.tsx.snap b/src/common/components/tag-selector/__snapshots__/index.spec.tsx.snap
index 8e7caee7799..e46322852c2 100644
--- a/src/common/components/tag-selector/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/tag-selector/__snapshots__/index.spec.tsx.snap
@@ -3,6 +3,7 @@
 exports[`(1) No tags 1`] = `
 <div
   className="tag-selector"
+  id="submit-tags-selector"
 >
   <div
     className="suggestion relative z-[11]"
@@ -32,6 +33,7 @@ exports[`(1) No tags 1`] = `
 exports[`(2) With tags 1`] = `
 <div
   className="tag-selector has-tags"
+  id="submit-tags-selector"
 >
   <div
     className="suggestion relative z-[11]"
@@ -115,6 +117,7 @@ exports[`(2) With tags 1`] = `
 exports[`(3) No tags with focus 1`] = `
 <div
   className="tag-selector"
+  id="submit-tags-selector"
 >
   <div
     className="suggestion relative z-[11]"
diff --git a/src/common/components/trending-tags-card/__snapshots__/index.spec.tsx.snap b/src/common/components/trending-tags-card/__snapshots__/index.spec.tsx.snap
index f832d8f460a..14c103f1b9e 100644
--- a/src/common/components/trending-tags-card/__snapshots__/index.spec.tsx.snap
+++ b/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>
diff --git a/src/common/components/trending-tags-card/index.tsx b/src/common/components/trending-tags-card/index.tsx
index f03e0b946a1..3d8a2374122 100644
--- a/src/common/components/trending-tags-card/index.tsx
+++ b/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>
diff --git a/src/common/pages/onboard.tsx b/src/common/pages/onboard.tsx
index dc400d501bb..4388c2b5987 100644
--- a/src/common/pages/onboard.tsx
+++ b/src/common/pages/onboard.tsx
@@ -717,8 +717,8 @@ const Onboard = (props: Props) => {
                       }}
                     />
                     <span className="onboard-blinking-text">
-                    {_t("onboard.rc-to-new-acc")} {decodedInfo && decodedInfo!.username}{" "}
-                    {_t("onboard.minimum-rc")}
+                      {_t("onboard.rc-to-new-acc")} {decodedInfo && decodedInfo!.username}{" "}
+                      {_t("onboard.minimum-rc")}
                     </span>
                   </div>
                   {isChecked && (
@@ -737,10 +737,18 @@ const Onboard = (props: Props) => {
                         />
                       </InputGroup>
                       <div className="operation-amount d-flex mt-3">
-                        <span className="operations">{_t("onboard.posts-comments")} {commentAmount} |</span>
-                        <span className="operations">{_t("onboard.votes")} {voteAmount} |</span>
-                        <span className="operations">{_t("onboard.transfers")} {transferAmount} |</span>
-                        <span className="operations">{_t("onboard.reblogs-follows")} {customJsonAmount}</span>
+                        <span className="operations">
+                          {_t("onboard.posts-comments")} {commentAmount} |
+                        </span>
+                        <span className="operations">
+                          {_t("onboard.votes")} {voteAmount} |
+                        </span>
+                        <span className="operations">
+                          {_t("onboard.transfers")} {transferAmount} |
+                        </span>
+                        <span className="operations">
+                          {_t("onboard.reblogs-follows")} {customJsonAmount}
+                        </span>
                       </div>
                     </div>
                   )}
diff --git a/src/style/_mixins.scss b/src/style/_mixins.scss
index 98e0c1282dc..784f0f5426c 100644
--- a/src/style/_mixins.scss
+++ b/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;