diff --git a/frontend/src/components/editor/PostSealModal.tsx b/frontend/src/components/editor/PostSealModal.tsx index 1f1c2de..792cead 100644 --- a/frontend/src/components/editor/PostSealModal.tsx +++ b/frontend/src/components/editor/PostSealModal.tsx @@ -5,11 +5,13 @@ import { PATHS, ROUTES } from "../../config/routes"; interface PostSealModalProps { sealedTargetId: string | null; navigate: NavigateFunction; + type: "KEPT" | "VAULT"; } export function PostSealModal({ sealedTargetId, navigate, + type = "KEPT", }: PostSealModalProps) { if (!sealedTargetId) return null; return ( @@ -20,33 +22,61 @@ export function PostSealModal({

It's encrypted and always safe in your drawer.

-

- When you're ready, -
- you can{" "} - read it,{" "} - send it to - someone, or{" "} - burn it to - release -

+ {type === "KEPT" ? ( +

+ When you're ready, +
+ you can{" "} + read{" "} + it, send{" "} + it to someone, or{" "} + burn it + to release +

+ ) : ( +

+ Be assured that the letter will find you when the time is right. +
+ Till then,{" "} + + take a deep breath + + ,{" "} + manifest + , and{" "} + + let it rest + + . +

+ )}
- - + {type === "KEPT" ? ( + <> + + + + ) : ( + + )}
diff --git a/frontend/src/components/editor/ToolBar.tsx b/frontend/src/components/editor/ToolBar.tsx index efe4c3d..a40d70b 100644 --- a/frontend/src/components/editor/ToolBar.tsx +++ b/frontend/src/components/editor/ToolBar.tsx @@ -105,7 +105,20 @@ export function ToolBar({ onClick={() => setSealBtnClicked(false)} className={`bg-transparent cursor-pointer -mt-2 absolute z-1000001 right-0 text-primary ${sealBtnClicked ? "" : "hidden"}`} > - +
+
+ Seal puts the letter + in an envelope, ready to be read right away. +
+ Vault keeps it + locked away until the right moment, even from yourself. +
+ +
); @@ -136,21 +149,23 @@ export function VaultConfirmModal({ setUnlockDate, }: VaultConfirmModalProps) { return ( -
-
+
+
-

Vault this letter?

+

Take it away, then?

- Vaulting locks the letter permanently and will be{" "} - mailed to you - automatically on the unlock date. + By vaulting this letter, you ask me to hold on to this.
- - You cannot edit or view the contents of the letter until then. + I'll remember to mail you this on the unlock date. +
+ + {" "} + But I won't let you read or rewrite this letter until then. +

{ @@ -158,11 +173,13 @@ export function VaultConfirmModal({ const formData = new FormData(e.currentTarget); const unlockDateStr = formData.get("vault-date") as string; const newUnlockDate = new Date(unlockDateStr); + console.log(newUnlockDate); setUnlockDate(newUnlockDate); await onSave("VAULT", newUnlockDate); setConfirmModal(null); }} id="vault-form" + className="min-w-75" >
Set an unlock date @@ -173,21 +190,22 @@ export function VaultConfirmModal({ className="input input-bordered w-full" name="vault-date" /> - - - +
+ + +
diff --git a/frontend/src/components/reader/PostActionOverlay.tsx b/frontend/src/components/reader/PostActionOverlay.tsx index 4959fed..2b0caf3 100644 --- a/frontend/src/components/reader/PostActionOverlay.tsx +++ b/frontend/src/components/reader/PostActionOverlay.tsx @@ -1,7 +1,11 @@ import { useNavigate } from "react-router-dom"; import { ROUTES } from "../../config/routes"; -export function PostActionOverlay({ revealState }) { +interface PostActionOverlayProps { + revealState: "sealed" | "revealed" | "burning" | "burned"; +} + +export function PostActionOverlay({ revealState }: PostActionOverlayProps) { const navigate = useNavigate(); return (