diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx index b0358c68b..9058cd25d 100644 --- a/web/src/components/Memo.tsx +++ b/web/src/components/Memo.tsx @@ -179,7 +179,8 @@ const Memo: React.FC = (props: Props) => { {state.showAllButtonStatus !== -1 && (
- {state.showAllButtonStatus === 0 ? "Show all" : "Hide"} + {state.showAllButtonStatus === 0 ? "Expand" : "Fold"} +
)} diff --git a/web/src/components/MemoTrashDialog.tsx b/web/src/components/MemoTrashDialog.tsx index c631a419d..8597a7f9e 100644 --- a/web/src/components/MemoTrashDialog.tsx +++ b/web/src/components/MemoTrashDialog.tsx @@ -28,8 +28,9 @@ const MemoTrashDialog: React.FC = (props: Props) => { locationService.clearQuery(); }, []); - const handleDeletedMemoAction = useCallback((memoId: MemoId) => { + const handleDeletedMemoAction = useCallback(async (memoId: MemoId) => { setDeletedMemos((deletedMemos) => deletedMemos.filter((memo) => memo.id !== memoId)); + await memoService.fetchAllMemos(); }, []); return ( diff --git a/web/src/less/memo.less b/web/src/less/memo.less index 2455dc66b..9056d0757 100644 --- a/web/src/less/memo.less +++ b/web/src/less/memo.less @@ -93,14 +93,24 @@ @apply w-full relative flex flex-row justify-start items-center; > .btn { - @apply px-2 py-1 my-1 text-xs rounded-lg border border-blue-600 shadow-inner hover:opacity-80; + @apply flex flex-row justify-start items-center px-2 py-1 my-1 text-xs rounded-lg border bg-gray-100 border-gray-200 opacity-80 shadow hover:opacity-60; &.show-all-btn { - @apply bg-blue-500 text-white mt-2; + @apply mt-2; + + > .icon-img { + @apply rotate-90; + } } &.hide-btn { - @apply text-blue-600 bg-white; + > .icon-img { + @apply -rotate-90; + } + } + + > .icon-img { + @apply w-4 h-auto transition-all; } } }