me/pi-ku
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: extract custom utility classes for text and bg css properties

Browse Source
This commit is contained in:
ramvignesh-b
2026-05-01 00:02:39 +05:30
parent 49177a5b12
commit 9910e44ee2
10 changed files with 34 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Drawer.tsx
+4 -4
View File
@@ -28,12 +28,12 @@ export default function Drawer() {
return (
<div className="min-h-screen w-full bg-base-100 text-base-content flex flex-col items-center py-12 px-5 pb-32 font-serif transition-colors">
<div className="fixed inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.5)_100%)] pointer-events-none z-0" />
<div className="fixed inset-0 bg-vig pointer-events-none z-0" />
{isAuthRequired && <PasskeyModal onUnlock={unlock} />}
<header className="text-center mb-12 z-10 animate-in fade-in slide-in-from-top-4 duration-500">
<Logo />
<div className="font-sans text-xs tracking-[0.3em] uppercase text-base-content/40 mt-2">
<div className="font-sans text-xs tracking-widester uppercase text-base-content/40 mt-2">
Personal Archive
</div>
<div className="mt-6 font-sans text-sm text-base-content flex items-center justify-center gap-2 opacity-60 hover:opacity-100 transition-opacity">
@@ -53,7 +53,7 @@ export default function Drawer() {
{loading ? (
<div className="flex-1 flex flex-col items-center justify-center p-12 gap-4">
<span className="loading loading-ring loading-lg text-primary opacity-20"></span>
<span className="text-[10px] uppercase tracking-[0.3em] font-sans text-base-content/20 animate-pulse">
<span className="text-xxs uppercase tracking-widester font-sans text-base-content/20 animate-pulse">
Opening your cabinet...
</span>
</div>
@@ -163,7 +163,7 @@ export default function Drawer() {
</span>
</button>
<footer className="mt-25 font-sans text-[0.6rem] tracking-[0.2em] uppercase text-base-content/10 z-10">
<footer className="mt-25 font-sans text-[0.6rem] tracking-widester uppercase text-base-content/10 z-10">
For your unsaid.
</footer>
<div className="absolute bottom-0 z-50 font-sans">
frontend/src/pages/Editor.tsx
+4 -4
View File
@@ -339,8 +339,8 @@ export default function Editor() {
isSaveDatePulsing ? "animate-pulse" : ""
}`}
>
<div className="text-sm text-neutral-content/30 flex-col justify-end leading-none text-right">
<span className="text-[10px] uppercase tracking-widest font-bold">
<div className="text-xxs text-neutral-content/30 flex-col justify-end leading-none text-right">
<span className="uppercase tracking-widest font-bold">
Last Save
</span>
<br />
@@ -374,7 +374,7 @@ export default function Editor() {
weight="bold"
className="animate-spin text-primary"
/>
<p className="text-[10px] uppercase tracking-[0.4em] font-bold text-base-content/40">
<p className="text-xxs uppercase tracking-widester font-bold text-base-content/40">
Opening your draft...
</p>
</div>
@@ -451,7 +451,7 @@ export default function Editor() {
<div className="flex flex-col gap-2 flex-1">
<label
htmlFor="recipient"
className="text-xs uppercase tracking-[0.4em] text-secondary-content font-bold"
className="text-xxs uppercase tracking-widester text-secondary-content font-bold"
>
Recipient
</label>
frontend/src/pages/Reader.tsx
+6 -8
View File
@@ -192,12 +192,10 @@ export default function Reader() {
log: err instanceof Error ? err.message : "Unknown error",
type: "ERROR",
});
} finally {
setIsDecrypting(false);
}
};
loadAndDecrypt();
loadAndDecrypt().then(() => setIsDecrypting(false));
}, [public_id, sharingKey, masterKey]);
useEffect(() => {
@@ -214,7 +212,7 @@ export default function Reader() {
if (isDecrypting) {
return (
<div className="flex items-center h-screen w-screen justify-center bg-base-100 font-sans">
<div className="fixed inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.4)_100%)] pointer-events-none z-0" />
<div className="fixed inset-0 bg-vig pointer-events-none" />
<div className="text-center space-y-6 z-10">
<Logo />
<div className="flex flex-col items-center gap-2">
@@ -245,7 +243,7 @@ export default function Reader() {
return (
<section className="min-h-fit w-full bg-base-100 px-4 py-8 md:py-16 font-serif relative overflow-hidden">
<div className="fixed inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.5)_100%)] pointer-events-none z-0" />
<div className="fixed inset-0 bg-vig pointer-events-none z-0" />
<div
className={`transition-all delay-300 duration-1000 relative ${
revealState === "REVEALED"
@@ -274,7 +272,7 @@ export default function Reader() {
{ignite && <PostActionOverlay revealState={revealState} />}
{revealState === "REVEALED" && (
<div className="max-w-4xl m-8 mx-auto space-y-8 h-full relative inset-0 z-100">
<div className="max-w-180 m-8 mx-auto space-y-8 h-full relative inset-0 z-100">
<div className="relative group perspective-1000">
<div className="absolute inset-0 bg-primary/5 blur-3xl rounded-full scale-75 opacity-0 group-hover:opacity-100 transition-opacity duration-1000 pointer-events-none" />
@@ -284,7 +282,7 @@ export default function Reader() {
</div>
{metadata?.recipient && (
<p className="text-center sm:hidden text-[10px] uppercase tracking-[0.3em] text-base-content/20 mt-8">
<p className="text-center sm:hidden text-xxs uppercase tracking-widester text-base-content/20 mt-8">
For {metadata.recipient}
</p>
)}
@@ -332,7 +330,7 @@ export default function Reader() {
)}
<footer className="mt-16 text-center z-10 opacity-10 pointer-events-none">
<p className="text-xs font-sans uppercase tracking-[0.5em]">
<p className="text-xs font-sans uppercase tracking-widester">
Read. Remember. Release.
</p>
</footer>