From db8b8f0d5823b7f80fd88c969ec435923558fc28 Mon Sep 17 00:00:00 2001 From: boojack <stevenlgtm@gmail.com> Date: Sat, 1 Jul 2023 12:34:37 +0800 Subject: [PATCH] chore: remove unused kit components (#1871) --- web/src/components/ArchivedMemo.tsx | 6 ++-- web/src/components/Memo.tsx | 7 ++-- .../components/Settings/MyAccountSection.tsx | 2 +- web/src/components/UpgradeVersionBanner.tsx | 9 ++---- web/src/components/kit/Divider.tsx | 9 ------ web/src/components/kit/Tooltip.tsx | 32 ------------------- 6 files changed, 10 insertions(+), 55 deletions(-) delete mode 100644 web/src/components/kit/Divider.tsx delete mode 100644 web/src/components/kit/Tooltip.tsx diff --git a/web/src/components/ArchivedMemo.tsx b/web/src/components/ArchivedMemo.tsx index 297f01e1..7ca82492 100644 --- a/web/src/components/ArchivedMemo.tsx +++ b/web/src/components/ArchivedMemo.tsx @@ -1,9 +1,9 @@ +import { Tooltip } from "@mui/joy"; import { toast } from "react-hot-toast"; import { useTranslation } from "react-i18next"; import { useMemoStore } from "@/store/module"; import { getDateTimeString } from "@/helpers/datetime"; import useToggle from "@/hooks/useToggle"; -import Tooltip from "./kit/Tooltip"; import Icon from "./Icon"; import MemoContent from "./MemoContent"; import MemoResourceListView from "./MemoResourceListView"; @@ -59,12 +59,12 @@ const ArchivedMemo: React.FC<Props> = (props: Props) => { <span className="time-text">{getDateTimeString(memo.updatedTs)}</span> </div> <div className="flex flex-row justify-end items-center gap-x-2"> - <Tooltip title={t("common.restore")} side="top"> + <Tooltip title={t("common.restore")} placement="top"> <button onClick={handleRestoreMemoClick}> <Icon.ArchiveRestore className="w-4 h-auto cursor-pointer text-gray-500 dark:text-gray-400" /> </button> </Tooltip> - <Tooltip title={t("common.delete")} side="top"> + <Tooltip title={t("common.delete")} placement="top"> <button onClick={handleDeleteMemoClick} className={`text-gray-500 dark:text-gray-400 ${showConfirmDeleteBtn ? "text-red-600" : ""}`} diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx index 02fc040a..2e770ed4 100644 --- a/web/src/components/Memo.tsx +++ b/web/src/components/Memo.tsx @@ -1,3 +1,4 @@ +import { Divider, Tooltip } from "@mui/joy"; import { isEqual, uniqWith } from "lodash-es"; import { memo, useEffect, useRef, useState } from "react"; import { toast } from "react-hot-toast"; @@ -7,8 +8,6 @@ import { useFilterStore, useMemoStore, useUserStore } from "@/store/module"; import { UNKNOWN_ID } from "@/helpers/consts"; import { getRelativeTimeString } from "@/helpers/datetime"; import { useMemoCacheStore } from "@/store/zustand"; -import Tooltip from "./kit/Tooltip"; -import Divider from "./kit/Divider"; import { showCommonDialog } from "./Dialog/CommonDialog"; import Icon from "./Icon"; import MemoContent from "./MemoContent"; @@ -226,7 +225,7 @@ const Memo: React.FC<Props> = (props: Props) => { {!isVisitorMode && ( <div className="btns-container space-x-2"> {memo.visibility !== "PRIVATE" && ( - <Tooltip title={t(`memo.visibility.${memo.visibility.toLowerCase()}`)} side="top"> + <Tooltip title={t(`memo.visibility.${memo.visibility.toLowerCase()}`)} placement="top"> <div onClick={() => handleMemoVisibilityClick(memo.visibility)}> {memo.visibility === "PUBLIC" ? ( <Icon.Globe2 className="w-4 h-auto cursor-pointer rounded text-green-600" /> @@ -258,7 +257,7 @@ const Memo: React.FC<Props> = (props: Props) => { <Icon.Link className="w-4 h-auto mr-2" /> Mark </span> - <Divider /> + <Divider className="!my-1" /> <span className="btn text-orange-500" onClick={handleArchiveMemoClick}> <Icon.Archive className="w-4 h-auto mr-2" /> {t("common.archive")} diff --git a/web/src/components/Settings/MyAccountSection.tsx b/web/src/components/Settings/MyAccountSection.tsx index 352612cb..7bb13581 100644 --- a/web/src/components/Settings/MyAccountSection.tsx +++ b/web/src/components/Settings/MyAccountSection.tsx @@ -37,7 +37,7 @@ const MyAccountSection = () => { <span className="text-2xl leading-10 font-medium">{user.nickname}</span> <span className="text-base ml-1 text-gray-500 leading-10 dark:text-gray-400">({user.username})</span> </div> - <div className="flex flex-row justify-start items-center text-base text-gray-600">{user.email}</div> + <div className="flex flex-row justify-start items-center text-base text-gray-600 dark:text-gray-400">{user.email}</div> <div className="w-full flex flex-row justify-start items-center mt-2 space-x-2"> <Button variant="outlined" onClick={showUpdateAccountDialog}> {t("common.edit")} diff --git a/web/src/components/UpgradeVersionBanner.tsx b/web/src/components/UpgradeVersionBanner.tsx index ba47726b..ecc9c66f 100644 --- a/web/src/components/UpgradeVersionBanner.tsx +++ b/web/src/components/UpgradeVersionBanner.tsx @@ -4,7 +4,6 @@ import * as api from "@/helpers/api"; import storage from "@/helpers/storage"; import { useGlobalStore } from "@/store/module"; import Icon from "./Icon"; -import Tooltip from "./kit/Tooltip"; interface State { latestVersion: string; @@ -51,11 +50,9 @@ const UpgradeVersionView: React.FC = () => { > ✨ New version: v{state.latestVersion} </a> - <Tooltip title="Ignore upgrade" side="top"> - <button className="ml-1 opacity-60 text-gray-600 hover:opacity-100" onClick={onSkip}> - <Icon.X className="w-4 h-auto" /> - </button> - </Tooltip> + <button className="ml-1 opacity-60 text-gray-600 hover:opacity-100" onClick={onSkip}> + <Icon.X className="w-4 h-auto" /> + </button> </div> ); }; diff --git a/web/src/components/kit/Divider.tsx b/web/src/components/kit/Divider.tsx deleted file mode 100644 index cafbcfd7..00000000 --- a/web/src/components/kit/Divider.tsx +++ /dev/null @@ -1,9 +0,0 @@ -interface Props { - className?: string; -} - -const Divider = ({ className }: Props) => { - return <hr className={`${className} block my-1 border-gray-200 dark:border-gray-600`} />; -}; - -export default Divider; diff --git a/web/src/components/kit/Tooltip.tsx b/web/src/components/kit/Tooltip.tsx deleted file mode 100644 index c4e73d83..00000000 --- a/web/src/components/kit/Tooltip.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import * as TooltipUI from "@radix-ui/react-tooltip"; - -type Side = "top" | "right" | "bottom" | "left"; - -interface Props { - title: string; - side: Side; - children: React.ReactNode; -} - -const Tooltip = (props: Props) => { - const { title, side, children } = props; - - return ( - <TooltipUI.Provider delayDuration={0} skipDelayDuration={0}> - <TooltipUI.Root> - <TooltipUI.Trigger asChild>{children}</TooltipUI.Trigger> - <TooltipUI.Portal> - <TooltipUI.Content - className="bg-zinc-800 text-gray-300 dark:bg-black shadow text-sm p-1 rounded-md z-[99999]" - side={side} - sideOffset={6} - > - {title} - </TooltipUI.Content> - </TooltipUI.Portal> - </TooltipUI.Root> - </TooltipUI.Provider> - ); -}; - -export default Tooltip;