From eb0f2089ec75e0b0c9ce7836a2e6d5aca95cfa95 Mon Sep 17 00:00:00 2001 From: "ildar.timerbaev" Date: Fri, 10 Nov 2023 17:55:34 +0600 Subject: [PATCH] Tailwind migration: fixed UI --- .../__snapshots__/index.spec.tsx.snap | 8 +- .../__snapshots__/index.spec.tsx.snap | 24 +- .../comment/__snapshots__/index.spec.tsx.snap | 4 +- .../__snapshots__/index.spec.tsx.snap | 24 +- src/common/components/edit-history/index.scss | 9 +- .../__snapshots__/index.spec.tsx.snap | 4 +- .../components/entry-index-menu/index.tsx | 4 +- .../components/entry-list-item/index.tsx | 14 +- .../__snapshots__/index.spec.tsx.snap | 4 +- .../__snapshots__/index.spec.tsx.snap | 2 +- .../__snapshots__/index.spec.tsx.snap | 6 +- src/common/components/floating-faq/index.tsx | 331 +++++++++--------- .../__snapshots__/index.spec.tsx.snap | 2 +- .../__snapshots__/index.spec.tsx.snap | 2 +- .../login/__snapshots__/index.spec.tsx.snap | 10 +- .../market-swap-form-header.spec.tsx.snap | 2 +- .../navbar/__snapshots__/index.spec.tsx.snap | 16 +- src/common/components/navbar/index.tsx | 2 - .../components/navbar/navbar-mobile.tsx | 6 +- .../__snapshots__/index.spec.tsx.snap | 14 +- .../orders/__snapshots__/index.spec.tsx.snap | 8 +- .../__snapshots__/index.spec.tsx.snap | 2 +- .../__snapshots__/index.spec.tsx.snap | 2 +- .../__snapshots__/index.spec.tsx.snap | 4 +- .../__snapshots__/index.spec.tsx.snap | 2 +- .../__snapshots__/index.spec.tsx.snap | 2 +- .../__snapshots__/index.spec.tsx.snap | 2 +- .../__snapshots__/index.spec.tsx.snap | 10 +- src/common/features/ui/button/index.tsx | 7 +- src/common/features/ui/table/index.tsx | 6 +- src/common/pages/submit/index.tsx | 4 +- src/common/store/global/index.ts | 7 +- src/server/template.tsx | 2 +- src/style/_markdown.scss | 49 +-- 34 files changed, 277 insertions(+), 318 deletions(-) diff --git a/src/common/components/beneficiary-editor/__snapshots__/index.spec.tsx.snap b/src/common/components/beneficiary-editor/__snapshots__/index.spec.tsx.snap index 476ffa3188e..4de40b5230b 100644 --- a/src/common/components/beneficiary-editor/__snapshots__/index.spec.tsx.snap +++ b/src/common/components/beneficiary-editor/__snapshots__/index.spec.tsx.snap @@ -16,7 +16,7 @@ exports[`(1) Default render 1`] = ` Set Beneficiaries
@@ -90,42 +90,42 @@ exports[`(2) Render with loading 1`] = ` className="border dark:border-gray-700 overflow-hidden rounded-xl w-full" >
Last Price 24h volume Bid Ask Spread
@@ -551,7 +551,7 @@ exports[`(2) Cancellable, in progress 1`] = `
diff --git a/src/common/components/community-roles/__snapshots__/index.spec.tsx.snap b/src/common/components/community-roles/__snapshots__/index.spec.tsx.snap index 4823dd00f3f..3dbb3ff41e5 100644 --- a/src/common/components/community-roles/__snapshots__/index.spec.tsx.snap +++ b/src/common/components/community-roles/__snapshots__/index.spec.tsx.snap @@ -11,14 +11,14 @@ exports[`(1) Default render 1`] = ` className="border dark:border-gray-700 overflow-hidden rounded-xl w-full" > @@ -146,14 +146,14 @@ exports[`(2) Should not show add user button 1`] = ` className="border dark:border-gray-700 overflow-hidden rounded-xl w-full" >
Title
@@ -281,14 +281,14 @@ exports[`(3) Should show add user button 1`] = ` className="border dark:border-gray-700 overflow-hidden rounded-xl w-full" >
Title
diff --git a/src/common/components/edit-history/index.scss b/src/common/components/edit-history/index.scss index d1444f01c88..78c9bd09680 100644 --- a/src/common/components/edit-history/index.scss +++ b/src/common/components/edit-history/index.scss @@ -39,10 +39,12 @@ .diff-select { width: 55%; flex-shrink: 0; + label { font-size: 0.9rem; } } + select { font-size: 0.9rem; } @@ -56,6 +58,10 @@ @apply bg-light-300; } + @include themify(night) { + @apply bg-gray-800; + } + .diff-select { padding-left: 40px; margin: 20px 0; @@ -68,6 +74,7 @@ grid-template-rows: 24px 24px; cursor: pointer; padding: 10px 0; + border: 0; &.selected { .item-title { @@ -79,7 +86,7 @@ } @include themify(night) { - @apply bg-blue-dusky-2; + @apply bg-blue-dusky; } } diff --git a/src/common/components/entry-index-menu/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-index-menu/__snapshots__/index.spec.tsx.snap index 0902bbecfda..94ac0d9a05e 100644 --- a/src/common/components/entry-index-menu/__snapshots__/index.spec.tsx.snap +++ b/src/common/components/entry-index-menu/__snapshots__/index.spec.tsx.snap @@ -353,7 +353,7 @@ exports[`(3) Active user. Trending filter 1`] = ` >
  • { filter === "feed" && (introduction === IntroductionType.NONE || introduction === IntroductionType.FRIENDS) - ? "active" + ? "bg-blue-dark-sky text-white hover:text-white" : "" } ${ introduction !== IntroductionType.NONE && introduction === IntroductionType.FRIENDS - ? "active" + ? "bg-blue-dark-sky text-white hover:text-white" : "" }` )} diff --git a/src/common/components/entry-list-item/index.tsx b/src/common/components/entry-list-item/index.tsx index 95805979071..5907f9300d7 100644 --- a/src/common/components/entry-list-item/index.tsx +++ b/src/common/components/entry-list-item/index.tsx @@ -24,7 +24,6 @@ import { ProfilePopover } from "../profile-popover"; import { match } from "react-router-dom"; import { getPost } from "../../api/bridge"; import "./_index.scss"; -import useMountedState from "react-use/lib/useMountedState"; import { useMappedStore } from "../../store/use-mapped-store"; import useMount from "react-use/lib/useMount"; import { useUnmount } from "react-use"; @@ -68,8 +67,6 @@ export function EntryListItem({ const { global, activeUser, addAccount, updateEntry } = useMappedStore(); - const isMounted = useMountedState(); - useMount(() => { document.getElementsByTagName("html")[0].style.position = "relative"; }); @@ -206,12 +203,11 @@ export function EntryListItem({
    - {(community && !!entry.stats?.is_pinned) || - (entry.permlink === pinned && ( - - {pinSvg} - - ))} + {((community && !!entry.stats?.is_pinned) || entry.permlink === pinned) && ( + + {pinSvg} + + )} {reBlogged && ( {repeatSvg} {_t("entry-list-item.reblogged", { n: reBlogged })} 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 deaa41f5072..cce13a2e967 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 @@ -17,7 +17,7 @@ Array [ type="button" >
    { +export const handleFloatingContainer = (show: boolean) => { const detail: FaqObject = { - show: show, - className: className + show: show }; const ev = new CustomEvent("handleShow", { detail }); window.dispatchEvent(ev); @@ -45,7 +44,6 @@ const FloatingFAQ = () => { const [datatoShow, setDatatoShow] = useState([]); const [innerWidth, setInnerWidth] = useState(0); const [isSubmitPage, setIsSubmitPage] = useState(false); - const [className, setClassName] = useState(""); useEffect(() => { window.addEventListener("handleShow", onHandleShow); @@ -113,13 +111,14 @@ const FloatingFAQ = () => { const onHandleShow = (e: Event) => { const detail = (e as CustomEvent).detail as FaqObject; setShow(detail.show); - setClassName(detail.className); }; const handleRouterChange = () => { setShow(false); setDisplay(false); - setIsSubmitPage(!!routerLocation.pathname.match("submit")); + setIsSubmitPage( + !!routerLocation.pathname.match("submit") || !!routerLocation.pathname.match("edit") + ); for (const p of data.faqPaths) { if (routerLocation.pathname.match(p.path)) { setDisplay(true); @@ -139,180 +138,168 @@ const FloatingFAQ = () => { }; return ( <> - { - <> - show && setShow(false)} + show && setShow(false)}> + {display && !isSubmitPage && ( +
    -
    -

    {_t("floating-faq.welcome")}

    -
    -
    -
    - - -
    setExpandedHelp(!expandedHelp)}> -
    -
    -
    -
    {_t("floating-faq.need-help")}
    -
    -
    + {innerWidth >= 768 ? _t("floating-faq.help") : ""} + + )} - - { - setExpandedHelp(!expandedHelp); - }} - icon={ - expandedHelp ? chevronUpSvgForSlider : chevronDownSvgForSlider - } - /> - + {show && display ? ( +
    +
    +

    {_t("floating-faq.welcome")}

    +
    +
    +
    + + +
    setExpandedHelp(!expandedHelp)}> +
    +
    +
    +
    {_t("floating-faq.need-help")}
    - - -
    -
    -
    - { - setSearchText(e.target.value); - }} - /> -
    - {!searchText ? ( -

    {_t("floating-faq.suggestion")}

    - ) : !datatoShow.length ? ( -

    {_t("floating-faq.no-results")}

    - ) : ( - "" - )} - {datatoShow.map((x) => { - return ( - -
    {articleSvg}
    - {_t(`static.faq.${x}-header`)} -     - ); - })} -
    -
    -     - -
    -
    - - -
    setExpandedContact(!expandedContact)} - > -
    -
    -
    -
    {_t("floating-faq.contact")}
    -
    -
    - - { - setExpandedContact(!expandedContact); - }} - icon={ - expandedContact ? chevronUpSvgForSlider : chevronDownSvgForSlider - } - /> - -
    + + { + setExpandedHelp(!expandedHelp); + }} + icon={expandedHelp ? chevronUpSvgForSlider : chevronDownSvgForSlider} + /> + +
    +
    + + + +
    +
    +
    + { + setSearchText(e.target.value); + }} + />
    - - -
    -
    - - - -
    -
    - - - + {!searchText ? ( +

    {_t("floating-faq.suggestion")}

    + ) : !datatoShow.length ? ( +

    {_t("floating-faq.no-results")}

    + ) : ( + "" + )} + {datatoShow.map((x) => { + return ( + +
    {articleSvg}
    + {_t(`static.faq.${x}-header`)} +     + ); + })} +
    +
    +     + +
    +
    + + +
    setExpandedContact(!expandedContact)} + > +
    +
    +
    +
    {_t("floating-faq.contact")}
    -
    - - -
    -
    + + { + setExpandedContact(!expandedContact); + }} + icon={expandedContact ? chevronUpSvgForSlider : chevronDownSvgForSlider} + /> + +
    +
    + + +
    +
    + + + +
    +
    + + + +
    + +
    +     +
    - ) : ( - "" - )} - - - } +
    +
    + ) : ( + "" + )} + ); }; diff --git a/src/common/components/image-upload-button/__snapshots__/index.spec.tsx.snap b/src/common/components/image-upload-button/__snapshots__/index.spec.tsx.snap index 23554e98958..7db6c3a72d8 100644 --- a/src/common/components/image-upload-button/__snapshots__/index.spec.tsx.snap +++ b/src/common/components/image-upload-button/__snapshots__/index.spec.tsx.snap @@ -15,7 +15,7 @@ Array [ type="button" >
    hivesigner
    hivesigner
    hivesigner
    hivesigner
    hivesigner
    keychain
    void; expanded: boolean; setExpanded: (v: boolean) => void; - transparentVerify: boolean; - themeText: string; } export function NavbarMobile({ @@ -26,9 +24,7 @@ export function NavbarMobile({ history, setStepOne, expanded, - setExpanded, - transparentVerify, - themeText + setExpanded }: Props) { const { activeUser } = useMappedStore(); diff --git a/src/common/components/open-orders/__snapshots__/index.spec.tsx.snap b/src/common/components/open-orders/__snapshots__/index.spec.tsx.snap index 147cc7d95bb..644a647125a 100644 --- a/src/common/components/open-orders/__snapshots__/index.spec.tsx.snap +++ b/src/common/components/open-orders/__snapshots__/index.spec.tsx.snap @@ -13,39 +13,39 @@ exports[`(1) Open orders render default 1`] = ` className="border dark:border-gray-700 overflow-hidden rounded-xl w-full" >
    • Title
    diff --git a/src/common/components/orders/__snapshots__/index.spec.tsx.snap b/src/common/components/orders/__snapshots__/index.spec.tsx.snap index bd57cb66d47..069ebcdc72b 100644 --- a/src/common/components/orders/__snapshots__/index.spec.tsx.snap +++ b/src/common/components/orders/__snapshots__/index.spec.tsx.snap @@ -13,24 +13,24 @@ exports[`(1) Orders render default 1`] = ` className="border dark:border-gray-700 overflow-hidden rounded-xl w-full" >
    Date Type Price HIVE HBD ($) Action
    diff --git a/src/common/components/post-scheduler/__snapshots__/index.spec.tsx.snap b/src/common/components/post-scheduler/__snapshots__/index.spec.tsx.snap index 35c9f70cb2c..80f855a0baf 100644 --- a/src/common/components/post-scheduler/__snapshots__/index.spec.tsx.snap +++ b/src/common/components/post-scheduler/__snapshots__/index.spec.tsx.snap @@ -16,7 +16,7 @@ exports[`(1) Render with null date 1`] = ` Schedule
    hivesigner
    hivesigner
    Price HIVE Total HBD ($)
    diff --git a/src/common/features/ui/button/index.tsx b/src/common/features/ui/button/index.tsx index 515928dbaa8..32d00632ded 100644 --- a/src/common/features/ui/button/index.tsx +++ b/src/common/features/ui/button/index.tsx @@ -38,7 +38,12 @@ export const Button = forwardRef +
    {props.icon}
    ) : ( diff --git a/src/common/features/ui/table/index.tsx b/src/common/features/ui/table/index.tsx index b7624024cfe..7b35b333591 100644 --- a/src/common/features/ui/table/index.tsx +++ b/src/common/features/ui/table/index.tsx @@ -45,11 +45,11 @@ export function Th( {...props} className={classNameObject({ //Basic - "border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2": + "border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0": true, // Responsive - "text-xs sm:text-sm md:text-md p-1 sm:p-2": true, + "text-xs sm:text-sm md:text-base p-1 sm:p-2": true, // Misc [props.className ?? ""]: true @@ -81,7 +81,7 @@ export function Table( "table-auto border-collapse": true, // Responsive - "text-xs sm:text-sm md:text-md": true, + "text-xs sm:text-sm md:text-base": true, // Misc "w-full": props.full, diff --git a/src/common/pages/submit/index.tsx b/src/common/pages/submit/index.tsx index 9026d1d5b80..264d4b5c860 100644 --- a/src/common/pages/submit/index.tsx +++ b/src/common/pages/submit/index.tsx @@ -230,7 +230,7 @@ export function Submit(props: PageProps & MatchProps) { }, [tags, title, body]); useEffect(() => { - handleFloatingContainer(showHelp, "submit"); + handleFloatingContainer(showHelp); }, [showHelp]); useEffect(() => { @@ -264,7 +264,7 @@ export function Submit(props: PageProps & MatchProps) { const handleResize = () => { if (typeof window !== "undefined" && window.innerWidth < 992) { setShowHelp(false); - handleFloatingContainer(false, "submit"); + handleFloatingContainer(false); } }; diff --git a/src/common/store/global/index.ts b/src/common/store/global/index.ts index 99515de9ab7..3aeba497125 100644 --- a/src/common/store/global/index.ts +++ b/src/common/store/global/index.ts @@ -137,8 +137,11 @@ export const toggleTheme = let body: any = document.getElementsByTagName("body"); if (!body) return; body = body[0]; - body.classList.remove(`theme-${theme}`); - body.classList.add(`theme-${newTheme}`); + if (theme === "night") { + body.classList.remove("dark"); + } else { + body.classList.add("dark"); + } }; export const toggleListStyle = diff --git a/src/server/template.tsx b/src/server/template.tsx index ccdcb0d09a3..902808792c4 100644 --- a/src/server/template.tsx +++ b/src/server/template.tsx @@ -57,7 +57,7 @@ export const render = (req: express.Request, state: AppState) => { ${linkTags} ${styleTags} - +
    ${markup}
    Account Percent Automatically power up