Merge pull request #1500 from ecency/bugfix/tw-after-migration-2

Tailwind migration: fixed UI
ecency · Nov 5, 2023 · ea7ac0c · ea7ac0c
2 parents bb28869 + 8ee38b0
commit ea7ac0c
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 19 deletions.
diff --git 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
@@ -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,15 +229,15 @@ export class ProposalVotesDetail extends BaseComponent<Props, State> {
                         </>
                       )}
                     </div>
-                  </div>
+                  </ListItem>
                 );
               })
             ) : (
               <div className="user-info">
                 {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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"