refactor: use tailwindcss in less (#34)

* reduce less
This commit is contained in:
STEVEN
2022-03-11 04:54:11 +08:00
committed by GitHub
parent 7b882ebff3
commit b597d40470
23 changed files with 230 additions and 694 deletions

View File

@ -65,7 +65,6 @@ interface ShortcutContainerProps {
const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutContainerProps) => {
const { shortcut, isActive } = props;
const [showActionBtns, toggleShowActionBtns] = useToggle(false);
const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false);
const handleQueryClick = () => {
@ -79,15 +78,6 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
}
};
const handleShowActionBtnClick = (event: React.MouseEvent) => {
event.stopPropagation();
toggleShowActionBtns();
};
const handleActionBtnContainerMouseLeave = () => {
toggleShowActionBtns(false);
};
const handleDeleteMemoClick = async (event: React.MouseEvent) => {
event.stopPropagation();
@ -141,10 +131,10 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
<span className="shortcut-text">{shortcut.title}</span>
</div>
<div className="btns-container">
<span className="action-btn toggle-btn" onClick={handleShowActionBtnClick}>
<span className="action-btn toggle-btn">
<img className="icon-img" src={`/icons/more${isActive ? "-white" : ""}.svg`} />
</span>
<div className={`action-btns-wrapper ${showActionBtns ? "" : "hidden"}`} onMouseLeave={handleActionBtnContainerMouseLeave}>
<div className="action-btns-wrapper">
<div className="action-btns-container">
<span className="btn" onClick={handlePinQueryBtnClick}>
{shortcut.rowStatus === "ARCHIVED" ? "Unpin" : "Pin"}