From 4c204b0a8068f820aa58ba23208d4e1f51b8a7ee Mon Sep 17 00:00:00 2001 From: ramvignesh-b Date: Tue, 21 Apr 2026 04:21:59 +0530 Subject: [PATCH] feat: ux enhancement for envelope reveal --- frontend/public/icons.svg | 24 ---- frontend/src/assets/envelope/stamp.png | Bin 0 -> 8254 bytes frontend/src/assets/envelope/waxSeal.png | Bin 0 -> 7586 bytes frontend/src/components/ui/EnvelopeReveal.tsx | 107 +++++++++++++----- frontend/src/pages/Reader.tsx | 6 +- frontend/src/utils/dateFormat.test.ts | 9 ++ frontend/src/utils/dateFormat.ts | 11 ++ 7 files changed, 102 insertions(+), 55 deletions(-) delete mode 100644 frontend/public/icons.svg create mode 100644 frontend/src/assets/envelope/stamp.png create mode 100644 frontend/src/assets/envelope/waxSeal.png diff --git a/frontend/public/icons.svg b/frontend/public/icons.svg deleted file mode 100644 index e952219..0000000 --- a/frontend/public/icons.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/frontend/src/assets/envelope/stamp.png b/frontend/src/assets/envelope/stamp.png new file mode 100644 index 0000000000000000000000000000000000000000..1c892edc353f5dcb70d9db74bcaade9cfbecc992 GIT binary patch literal 8254 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 literal 0 HcmV?d00001 diff --git a/frontend/src/assets/envelope/waxSeal.png b/frontend/src/assets/envelope/waxSeal.png new file mode 100644 index 0000000000000000000000000000000000000000..9e638e2f400e30734eef8d7ec37aa055c9662713 GIT binary patch literal 7586 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 const handleClick = () => { setRevealLetter(true); setTimeout(() => { onRevealComplete(); - }, 1000); + }, 2500); }; return ( -
-
+
+
- -
-
+
+
+ +
+ Seal flapCheckbox.current?.click()} + /> + -
-
-
+
+
+ +
+ +
setIsFlipped((prev) => !prev)} + > + + to + +

+ {recipient} +

+

{date}

+ {"stamp"} + + +
+
+
); } diff --git a/frontend/src/pages/Reader.tsx b/frontend/src/pages/Reader.tsx index 0d7545d..a99f573 100644 --- a/frontend/src/pages/Reader.tsx +++ b/frontend/src/pages/Reader.tsx @@ -12,7 +12,7 @@ import { LogModal } from "../components/ui/LogModal"; import { endpoints } from "../config/endpoints"; import { useKeyStore } from "../store/useKeyStore"; import { CryptoUtils } from "../utils/crypto"; -import { formatRelativeDate } from "../utils/dateFormat"; +import { formatDate } from "../utils/dateFormat"; import { decryptCanvasImages, decryptCanvasImagesWithSharingKey, @@ -215,10 +215,10 @@ export default function Reader() { className={`transition-all duration-1000 relative ${revealState === "revealed" ? "opacity-0 w-0 h-0" : "opacity-100"}`} > setRevealState("revealed")} diff --git a/frontend/src/utils/dateFormat.test.ts b/frontend/src/utils/dateFormat.test.ts index 3eedd91..98f8198 100644 --- a/frontend/src/utils/dateFormat.test.ts +++ b/frontend/src/utils/dateFormat.test.ts @@ -1,4 +1,5 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import { formatDate } from "../../../../../../../../../home/atom/Documents/code/pi_ku/frontend/src/utils/dateFormat"; import { formatRelativeDate } from "./dateFormat"; describe("formatRelativeDate", () => { @@ -35,3 +36,11 @@ describe("formatRelativeDate", () => { expect(result).toBe("Apr 1, 2026, 6:45 PM"); }); }); + +describe("formatDate", () => { + it("should format a new date as mmm dd, yyyy", () => { + const result = formatDate("2026-04-01T10:15:00Z"); + + expect(result).toBe("April 1, 2026"); + }); +}); diff --git a/frontend/src/utils/dateFormat.ts b/frontend/src/utils/dateFormat.ts index 65b1779..fc72e4a 100644 --- a/frontend/src/utils/dateFormat.ts +++ b/frontend/src/utils/dateFormat.ts @@ -7,6 +7,10 @@ const dateTimeFormatter = new Intl.DateTimeFormat("en-US", { timeStyle: "short", }); +const dateFormatter = new Intl.DateTimeFormat("en-US", { + dateStyle: "long", +}); + const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto", }); @@ -50,3 +54,10 @@ export function formateRelativeDateWithoutTime(input: Date | string | number) { return date.toDateString(); } + +export function formatDate(input: Date | string | number) { + if (!input) return ""; + const date = new Date(input); + + return dateFormatter.format(date); +}