From 8ee38b0a776f71dbacc3c7dcac2385377b7cd01a Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sat, 4 Nov 2023 23:31:01 +0600
Subject: [PATCH] Tailwind migration: fixed UI

---
 .../comment/__snapshots__/index.spec.tsx.snap  |  4 ++--
 src/common/components/proposal-votes/index.tsx | 18 +++++++++++-------
 .../components/suggestion-list/_index.scss     |  3 ++-
 .../components/suggestion-list/index.tsx       | 10 +++++++---
 src/common/components/tag-selector/index.tsx   | 11 +++++++----
 src/common/features/ui/list/index.tsx          |  4 +++-
 src/common/img/svg.tsx                         |  2 +-
 7 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
index 8c13214da4b..e0ba206d0f4 100644
--- a/src/common/components/comment/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
@@ -203,7 +203,7 @@ exports[`(1) Default render 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-6058f9d8-96c0-44cf-8cd5-888bc0d6eadd"
+      id="editor-tool-emoji-picker-ef9a0d67-1460-433f-9070-d78c3bd3337e"
       role="none"
       title="Emoji"
     >
@@ -551,7 +551,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-b567071f-dcb6-497d-a700-9df9cd61481a"
+      id="editor-tool-emoji-picker-7dbda6fb-eec0-4458-a263-161efa77cbc1"
       role="none"
       title="Emoji"
     >
diff --git a/src/common/components/proposal-votes/index.tsx b/src/common/components/proposal-votes/index.tsx
index ef10df0406b..a7fafc9b21c 100644
--- a/src/common/components/proposal-votes/index.tsx
+++ b/src/common/components/proposal-votes/index.tsx
@@ -16,6 +16,7 @@ import { _t } from "../../i18n";
 import "./_index.scss";
 import { Modal, ModalBody, ModalHeader, ModalTitle } from "@ui/modal";
 import { FormControl } from "@ui/input";
+import { List, ListItem } from "@ui/list";
 
 interface Voter {
   name: string;
@@ -168,6 +169,7 @@ export class ProposalVotesDetail extends BaseComponent<Props, State> {
       this.load();
     }
   };
+
   render() {
     const { loading, voters, page, sort, originalVoters } = this.state;
     if (loading && !voters.length && !originalVoters.length) {
@@ -190,15 +192,15 @@ export class ProposalVotesDetail extends BaseComponent<Props, State> {
       <>
         {loading && <LinearProgress />}
 
-        <div className="voters-list">
-          <div className="list-body">
+        <div className="voters-list mb-4">
+          <List grid={true} inline={true} defer={true}>
             {sliced && sliced.length > 0 ? (
               sliced.map((x) => {
                 const strHp = numeral(x.hp).format("0.00,");
                 const strProxyHp = numeral(x.proxyHp).format("0.00,");
 
                 return (
-                  <div className="list-item" key={x.name}>
+                  <ListItem styledDefer={true} className="list-item" key={x.name}>
                     <div className="item-main">
                       {ProfileLink({
                         ...this.props,
@@ -227,7 +229,7 @@ export class ProposalVotesDetail extends BaseComponent<Props, State> {
                         </>
                       )}
                     </div>
-                  </div>
+                  </ListItem>
                 );
               })
             ) : (
@@ -235,7 +237,7 @@ export class ProposalVotesDetail extends BaseComponent<Props, State> {
                 {loading ? _t("proposals.searching") : _t("proposals.no-results")}
               </div>
             )}
-          </div>
+          </List>
         </div>
 
         <div className="list-tools">
@@ -281,6 +283,7 @@ interface ProposalVotesState {
   voteCount: string;
   isMoreData: boolean;
 }
+
 export class ProposalVotes extends Component<ProposalVotesProps, ProposalVotesState> {
   state: ProposalVotesState = {
     searchText: "",
@@ -296,6 +299,7 @@ export class ProposalVotes extends Component<ProposalVotesProps, ProposalVotesSt
   checkIsMoreData = (check: boolean) => {
     this.setState({ isMoreData: check });
   };
+
   render() {
     const { proposal, onHide } = this.props;
     const { searchText, voteCount, isMoreData } = this.state;
@@ -309,12 +313,12 @@ export class ProposalVotes extends Component<ProposalVotesProps, ProposalVotesSt
         animation={false}
         className="proposal-votes-dialog"
       >
-        <ModalHeader closeButton={true} className="items-center px-0">
+        <ModalHeader closeButton={true} className="items-center">
           <ModalTitle>
             {modalTitle + _t("proposals.votes-dialog-title", { n: proposal.id })}
           </ModalTitle>
         </ModalHeader>
-        <div className="w-full mb-3">
+        <div className="w-full p-3 mb-3">
           <FormControl
             type="text"
             placeholder={_t("proposals.search-placeholder")}
diff --git a/src/common/components/suggestion-list/_index.scss b/src/common/components/suggestion-list/_index.scss
index 7bb5a4ea23a..be7bf0ddc04 100644
--- a/src/common/components/suggestion-list/_index.scss
+++ b/src/common/components/suggestion-list/_index.scss
@@ -3,7 +3,7 @@
 .suggestion {
   position: relative;
 
-  :first-child {
+  > :first-child {
     position: relative;
     z-index: 10;
   }
@@ -80,6 +80,7 @@
       }
     }
   }
+
   .more-result {
     .list-item {
       @include themify(day) {
diff --git a/src/common/components/suggestion-list/index.tsx b/src/common/components/suggestion-list/index.tsx
index af8fca3e57e..2b25d08ec42 100644
--- a/src/common/components/suggestion-list/index.tsx
+++ b/src/common/components/suggestion-list/index.tsx
@@ -1,9 +1,9 @@
-import React, { Component } from "react";
+import React, { Component, CSSProperties } from "react";
 import { History, Location } from "history";
 import { _t } from "../../i18n";
-import ClickAwayListener from "../clickaway-listener";
 import "./_index.scss";
 import { classNameObject } from "../../helper/class-name-object";
+import ClickAwayListener from "../clickaway-listener";
 
 interface Props {
   history?: History;
@@ -17,6 +17,7 @@ interface Props {
   children: JSX.Element;
   searchValue?: string;
   ignoreFirstInputFocus?: boolean;
+  listStyle?: CSSProperties;
 }
 
 interface State {
@@ -211,7 +212,10 @@ export default class SuggestionList extends Component<Props> {
           <ClickAwayListener onClickAway={() => this.setState({ showList: false })}>
             {showList && modeItems && modeItems?.length > 0 ? modeItemsUI : <></>}
             {showList && !modeItems && items.length > 0 ? (
-              <div className="modal-suggestion-list rounded-3xl -top-[44px] absolute">
+              <div
+                className="modal-suggestion-list rounded-3xl -top-[44px] absolute"
+                style={this.props.listStyle}
+              >
                 {header && (
                   <div className="list-header bg-gray-100 dark:bg-gray-700 text-sm font-semibold text-gray-600 px-2 pb-2 pt-12">
                     {header}
diff --git a/src/common/components/tag-selector/index.tsx b/src/common/components/tag-selector/index.tsx
index 5349810cc07..71524a1a0d6 100644
--- a/src/common/components/tag-selector/index.tsx
+++ b/src/common/components/tag-selector/index.tsx
@@ -36,16 +36,16 @@ interface State {
 }
 
 export class TagSelector extends Component<Props, State> {
-  constructor(props: any) {
-    super(props);
-  }
-
   state: State = {
     hasFocus: false,
     value: "",
     warning: ""
   };
 
+  constructor(props: any) {
+    super(props);
+  }
+
   shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<{}>): boolean {
     return !isEqual(this.props.tags, nextProps.tags) || !isEqual(this.state, nextState);
   }
@@ -205,6 +205,9 @@ export class TagSelector extends Component<Props, State> {
               );
             }}
             items={suggestions}
+            listStyle={{
+              top: "0"
+            }}
             header={_t("tag-selector.suggestion-header")}
             onSelect={(value: string) => {
               if (this.add(value)) {
diff --git a/src/common/features/ui/list/index.tsx b/src/common/features/ui/list/index.tsx
index e0c0ee86d25..4373ea629f7 100644
--- a/src/common/features/ui/list/index.tsx
+++ b/src/common/features/ui/list/index.tsx
@@ -5,6 +5,7 @@ import { useFilteredProps } from "../../../util/props-filter";
 interface Props {
   defer?: boolean;
   inline?: boolean;
+  grid?: boolean;
 }
 
 export function List(props: HTMLProps<HTMLDivElement> & Props) {
@@ -14,7 +15,8 @@ export function List(props: HTMLProps<HTMLDivElement> & Props) {
     <div
       {...nativeProps}
       className={classNameObject({
-        "flex overflow-hidden": true,
+        "flex overflow-hidden": !props.grid ?? true,
+        "grid grid-cols-2": props.grid ?? false,
         "gap-3": props.defer ?? false,
         "flex-row flex-wrap": props.inline ?? false,
         "flex-col rounded-xl border border-[--border-color] bg-gray-100 dark:bg-gray-900":
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index db555461bc7..99a0d3c5a38 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -567,7 +567,7 @@ export const emoticonHappyOutlineSvg = (
 );
 
 export const poundSvg = (
-  <svg viewBox="0 0 24 24">
+  <svg width={16} height={16} viewBox="0 0 24 24">
     <path
       fill="currentColor"
       d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z"