Skip to content

fix: design system cleanup #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dancer merged 3 commits into from
Jan 29, 2026
Merged

fix: design system cleanup #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ca50b94
fix: design system cleanup
dancer Jan 29, 2026
064ec52
fix: complete design system cleanup
dancer Jan 29, 2026
c9e219f
fix: remaining color inconsistencies
dancer Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions apps/web/app/[locale]/[code]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ export default function ClaimPage({
const highlighted = secret?.type === "text" ? highlight(secret.value) : null;

return (
<div className="min-h-screen bg-black text-white selection:bg-[#FF6B00] selection:text-black">
<div className="min-h-screen bg-[#0a0a0a] text-white selection:bg-[#d4b08c] selection:text-black">
<LanguageToggle />
<Link
href="/"
Expand All @@ -146,7 +146,7 @@ export default function ClaimPage({
<section className="min-h-[100dvh] flex items-center justify-center px-4 sm:px-8 pb-32">
<div className="w-full max-w-md">
<div className="mb-8 sm:mb-16">
<h1 className="text-3xl sm:text-4xl font-bold tracking-tighter border-b-4 border-[#FF6B00] inline-block">
<h1 className="text-3xl sm:text-4xl font-bold tracking-tighter border-b-4 border-[#d4b08c] inline-block">
{titles(status)}
</h1>
<p className="mt-4 text-white/40 text-sm invisible">placeholder</p>
Expand Down Expand Up @@ -177,7 +177,7 @@ export default function ClaimPage({
<button
type="button"
onClick={handleReveal}
className="w-full bg-[#FF6B00] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity"
className="w-full bg-[#d4b08c] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity"
>
{t("confirmButton")}
</button>
Expand Down Expand Up @@ -207,7 +207,7 @@ export default function ClaimPage({
</div>
<Link
href="/share"
className="block w-full bg-[#FF6B00] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity text-center"
className="block w-full bg-[#d4b08c] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity text-center"
>
{t("create")}
</Link>
Expand All @@ -226,7 +226,7 @@ export default function ClaimPage({
{secret.label && (
<>
<p className="text-xs tracking-widest text-white/40 mb-2">{t("label")}</p>
<p className="text-[#FF6B00] font-mono text-sm">{secret.label}</p>
<p className="text-[#d4b08c] font-mono text-sm">{secret.label}</p>
</>
)}
</div>
Expand Down Expand Up @@ -270,7 +270,7 @@ export default function ClaimPage({
<button
type="button"
onClick={handleCopy}
className="w-full bg-[#FF6B00] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity mb-6"
className="w-full bg-[#d4b08c] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity mb-6"
>
{copied ? t("copied") : t("copy")}
</button>
Expand All @@ -279,21 +279,21 @@ export default function ClaimPage({
<>
<div className="mb-6">
<p className="text-xs tracking-widest text-white/40 mb-2">{t("filename")}</p>
<p className="text-[#FF6B00] font-mono text-sm">{secret.filename}</p>
<p className="text-[#d4b08c] font-mono text-sm">{secret.filename}</p>
</div>

<button
type="button"
onClick={handleDownload}
className="w-full bg-[#FF6B00] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity mb-6"
className="w-full bg-[#d4b08c] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity mb-6"
>
{t("download")}
</button>
</>
) : null}

{secret && secret.remaining > 0 && (
<p className="text-xs text-[#FF6B00] text-center mb-6">
<p className="text-xs text-[#d4b08c] text-center mb-6">
{secret.remaining} {t("remaining")}
</p>
)}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/[locale]/cmdk.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export function CommandPalette() {
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
onClick={() => setOpen(false)}
/>
<div className="relative bg-black border border-white/10 rounded-xl shadow-2xl w-full max-w-xs overflow-hidden">
<div className="relative bg-[#161616] border border-white/10 rounded-xl shadow-2xl w-full max-w-xs overflow-hidden">
<div className="px-4 py-3 border-b border-white/10">
<span className="text-[10px] tracking-widest text-white/30 uppercase">shortcuts</span>
</div>
Expand Down
34 changes: 17 additions & 17 deletions apps/web/app/[locale]/share/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export default function SharePage() {
const canSubmit = mode === "text" ? !!secret : !!file;

return (
<div className="min-h-screen bg-black text-white selection:bg-[#FF6B00] selection:text-black">
<div className="min-h-screen bg-[#0a0a0a] text-white selection:bg-[#d4b08c] selection:text-black">
<LanguageToggle />
<Link
href="/"
Expand All @@ -131,7 +131,7 @@ export default function SharePage() {
<section className="min-h-[100dvh] flex items-center justify-center px-4 sm:px-8 pb-32">
<div className="w-full max-w-md">
<div className="mb-8 sm:mb-16">
<h1 className="text-3xl sm:text-4xl font-bold tracking-tighter border-b-4 border-[#FF6B00] inline-block">
<h1 className="text-3xl sm:text-4xl font-bold tracking-tighter border-b-4 border-[#d4b08c] inline-block">
{t("title")}
</h1>
<p className="mt-4 text-white/40 text-sm">{t("subtitle")}</p>
Expand All @@ -152,7 +152,7 @@ export default function SharePage() {
onClick={() => setMode("text")}
className={`px-4 py-2 text-xs tracking-widest transition-colors border ${
mode === "text"
? "bg-[#FF6B00] text-black border-[#FF6B00]"
? "bg-[#d4b08c] text-black border-[#d4b08c]"
: "border-white/10 text-white/40 hover:text-white hover:border-white/30"
}`}
>
Expand All @@ -163,7 +163,7 @@ export default function SharePage() {
onClick={() => setMode("file")}
className={`px-4 py-2 text-xs tracking-widest transition-colors border ${
mode === "file"
? "bg-[#FF6B00] text-black border-[#FF6B00]"
? "bg-[#d4b08c] text-black border-[#d4b08c]"
: "border-white/10 text-white/40 hover:text-white hover:border-white/30"
}`}
>
Expand All @@ -180,7 +180,7 @@ export default function SharePage() {
value={label}
onChange={(e) => setLabel(e.target.value)}
placeholder={t("labelPlaceholder")}
className="w-full bg-transparent border border-white/10 px-4 py-3 text-white placeholder:text-white/20 focus:outline-none focus:border-[#FF6B00] transition-colors font-mono text-sm"
className="w-full bg-transparent border border-white/10 px-4 py-3 text-white placeholder:text-white/20 focus:outline-none focus:border-[#d4b08c] transition-colors font-mono text-sm"
/>
</div>

Expand All @@ -194,7 +194,7 @@ export default function SharePage() {
value={secret}
onChange={(e) => setSecret(e.target.value)}
placeholder={t("secretPlaceholder")}
className="w-full h-full bg-transparent border border-white/10 px-4 py-3 text-white placeholder:text-white/20 focus:outline-none focus:border-[#FF6B00] transition-colors resize-none font-mono text-sm"
className="w-full h-full bg-transparent border border-white/10 px-4 py-3 text-white placeholder:text-white/20 focus:outline-none focus:border-[#d4b08c] transition-colors resize-none font-mono text-sm"
/>
) : (
<div
Expand All @@ -207,9 +207,9 @@ export default function SharePage() {
onDrop={handleFileDrop}
className={`w-full h-full border px-4 flex items-center justify-center text-center cursor-pointer transition-colors ${
dragover
? "border-[#FF6B00] bg-[#FF6B00]/5"
? "border-[#d4b08c] bg-[#d4b08c]/5"
: file
? "border-[#FF6B00]/50 bg-[#FF6B00]/5"
? "border-[#d4b08c]/50 bg-[#d4b08c]/5"
: "border-white/10 hover:border-white/30"
}`}
>
Expand All @@ -221,7 +221,7 @@ export default function SharePage() {
/>
<div>
{file ? (
<p className="text-[#FF6B00] font-mono text-sm">{file.name}</p>
<p className="text-[#d4b08c] font-mono text-sm">{file.name}</p>
) : (
<>
<p className="text-white/40 text-sm mb-1">{t("dropzone")}</p>
Expand All @@ -247,7 +247,7 @@ export default function SharePage() {
onClick={() => setViews(n)}
className={`flex-1 h-9 text-sm transition-colors ${
views === n
? "bg-[#FF6B00] text-black"
? "bg-[#d4b08c] text-black"
: "border border-white/10 text-white/40 hover:text-white hover:border-white/30"
}`}
>
Expand All @@ -268,7 +268,7 @@ export default function SharePage() {
onClick={() => setTtl(v)}
className={`flex-1 h-9 text-sm transition-colors ${
ttl === v
? "bg-[#FF6B00] text-black"
? "bg-[#d4b08c] text-black"
: "border border-white/10 text-white/40 hover:text-white hover:border-white/30"
}`}
>
Expand All @@ -281,23 +281,23 @@ export default function SharePage() {

<ul className="space-y-1">
<li className="text-xs text-white/30 flex items-center gap-2">
<span className="w-1 h-1 bg-[#FF6B00] rounded-full" />
<span className="w-1 h-1 bg-[#d4b08c] rounded-full" />
{t("security.encrypted")}
</li>
<li className="text-xs text-white/30 flex items-center gap-2">
<span className="w-1 h-1 bg-[#FF6B00] rounded-full" />
<span className="w-1 h-1 bg-[#d4b08c] rounded-full" />
{t("security.server")}
</li>
<li className="text-xs text-white/30 flex items-center gap-2">
<span className="w-1 h-1 bg-[#FF6B00] rounded-full" />
<span className="w-1 h-1 bg-[#d4b08c] rounded-full" />
{t("security.destruct")}
</li>
</ul>

<button
type="submit"
disabled={!canSubmit || isGenerating}
className="w-full bg-[#FF6B00] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity disabled:opacity-30 disabled:cursor-not-allowed"
className="w-full bg-[#d4b08c] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity disabled:opacity-30 disabled:cursor-not-allowed"
>
{isGenerating ? t("generating") : t("button")}
</button>
Expand All @@ -311,7 +311,7 @@ export default function SharePage() {
}}
>
<div className="h-[38px] mb-6">
<p className="text-[#FF6B00] text-sm">{t("success")}</p>
<p className="text-[#d4b08c] text-sm">{t("success")}</p>
</div>

<div className="mb-6">
Expand All @@ -333,7 +333,7 @@ export default function SharePage() {
<button
type="button"
onClick={handleCopy}
className="w-full bg-[#FF6B00] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity mb-2"
className="w-full bg-[#d4b08c] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity mb-2"
>
{copied ? t("copied") : t("copy")}
</button>
Expand Down
14 changes: 7 additions & 7 deletions apps/web/app/[locale]/vault/settings/delete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,31 +37,31 @@ export function DeleteModal({ open, onClose }: Props) {

return (
<Modal open={open} onClose={handleClose} title="delete account">
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
<p className="text-red-700 text-sm font-medium">this action cannot be undone</p>
<p className="text-red-600 text-sm mt-1">
<div className="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg">
<p className="text-red-400 text-sm font-medium">this action cannot be undone</p>
<p className="text-red-400/80 text-sm mt-1">
all your vault items, api keys, and data will be permanently deleted.
</p>
</div>
<p className="text-stone-500 text-sm mb-4">
<p className="text-white/40 text-sm mb-4">
we recommend exporting your data before deleting your account.
</p>
<div className="mb-4">
<label className="block text-sm font-medium text-stone-700 mb-1.5">
<label className="block text-sm font-medium text-white/70 mb-1.5">
type &quot;delete my account&quot; to confirm
</label>
<input
type="text"
value={confirm}
onChange={(e) => setConfirm(e.target.value)}
className="w-full px-3 py-2.5 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-red-500/20 focus:border-red-500 transition-colors"
className="w-full px-3 py-2.5 bg-[#161616] border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-red-500/20 focus:border-red-500 transition-colors"
placeholder="delete my account"
/>
</div>
<div className="flex flex-col-reverse sm:flex-row gap-3">
<button
onClick={handleClose}
className="flex-1 py-2.5 bg-stone-100 text-stone-700 font-medium rounded-lg hover:bg-stone-200 transition-colors"
className="flex-1 py-2.5 bg-white/10 text-white/70 font-medium rounded-lg hover:bg-white/20 transition-colors"
>
cancel
</button>
Expand Down
16 changes: 8 additions & 8 deletions apps/web/app/[locale]/vault/settings/password.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,44 +63,44 @@ export function PasswordModal({ open, onClose }: Props) {
<Modal open={open} onClose={handleClose} title="change password">
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-stone-700 mb-1.5">current password</label>
<label className="block text-sm font-medium text-white/70 mb-1.5">current password</label>
<input
type="password"
value={current}
onChange={(e) => setCurrent(e.target.value)}
className="w-full px-3 py-2.5 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-colors"
className="w-full px-3 py-2.5 bg-[#161616] border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-[#d4b08c]/20 focus:border-[#d4b08c] transition-colors"
/>
</div>
<div>
<label className="block text-sm font-medium text-stone-700 mb-1.5">new password</label>
<label className="block text-sm font-medium text-white/70 mb-1.5">new password</label>
<input
type="password"
value={newPass}
onChange={(e) => setNewPass(e.target.value)}
className="w-full px-3 py-2.5 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-colors"
className="w-full px-3 py-2.5 bg-[#161616] border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-[#d4b08c]/20 focus:border-[#d4b08c] transition-colors"
/>
</div>
<div>
<label className="block text-sm font-medium text-stone-700 mb-1.5">confirm new password</label>
<label className="block text-sm font-medium text-white/70 mb-1.5">confirm new password</label>
<input
type="password"
value={confirm}
onChange={(e) => setConfirm(e.target.value)}
className="w-full px-3 py-2.5 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-colors"
className="w-full px-3 py-2.5 bg-[#161616] border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-[#d4b08c]/20 focus:border-[#d4b08c] transition-colors"
/>
</div>
{error && <p className="text-red-500 text-sm">{error}</p>}
<div className="flex flex-col-reverse sm:flex-row gap-3 pt-2">
<button
onClick={handleClose}
className="flex-1 py-2.5 bg-stone-100 text-stone-700 font-medium rounded-lg hover:bg-stone-200 transition-colors"
className="flex-1 py-2.5 bg-white/10 text-white/70 font-medium rounded-lg hover:bg-white/20 transition-colors"
>
cancel
</button>
<button
onClick={handleSubmit}
disabled={loading || !current || !newPass || !confirm}
className="flex-1 py-2.5 bg-emerald-500 text-white font-medium rounded-lg hover:bg-emerald-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="flex-1 py-2.5 bg-[#d4b08c] text-[#0a0a0a] font-medium rounded-lg hover:bg-[#d4b08c]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? "updating..." : "update password"}
</button>
Expand Down
14 changes: 7 additions & 7 deletions apps/web/app/[locale]/vault/vault/filters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@ export function TypeFilters({ selected, onSelect, counts }: Props) {
onClick={() => onSelect(null)}
className={`px-3 py-1.5 rounded-md text-xs font-medium flex items-center gap-1.5 transition-all ${
selected === null
? "bg-orange-500/10 text-orange-500 border border-orange-500/20"
: "bg-zinc-800 text-zinc-400 border border-transparent hover:text-zinc-300"
? "bg-[#d4b08c]/10 text-[#d4b08c] border border-[#d4b08c]/20"
: "bg-white/10 text-white/50 border border-transparent hover:text-white/60"
}`}
>
all
<span className={`${selected === null ? "text-orange-500/70" : "text-zinc-500"}`}>{total}</span>
<span className={`${selected === null ? "text-[#d4b08c]/70" : "text-white/40"}`}>{total}</span>
</button>
{types.map((type) => {
const count = counts[type] || 0;
Expand All @@ -37,13 +37,13 @@ export function TypeFilters({ selected, onSelect, counts }: Props) {
onClick={() => onSelect(isActive ? null : type)}
className={`px-3 py-1.5 rounded-md text-xs font-medium flex items-center gap-1.5 transition-all ${
isActive
? "bg-orange-500/10 text-orange-500 border border-orange-500/20"
: "bg-zinc-800 text-zinc-400 border border-transparent hover:text-zinc-300"
? "bg-[#d4b08c]/10 text-[#d4b08c] border border-[#d4b08c]/20"
: "bg-white/10 text-white/50 border border-transparent hover:text-white/60"
}`}
>
<span className={`w-3.5 h-3.5 ${isActive ? "text-orange-500" : "text-zinc-500"}`}>{typeIcons[type]}</span>
<span className={`w-3.5 h-3.5 ${isActive ? "text-[#d4b08c]" : "text-white/40"}`}>{typeIcons[type]}</span>
{typeLabels[type]}
<span className={`${isActive ? "text-orange-500/70" : "text-zinc-500"}`}>{count}</span>
<span className={`${isActive ? "text-[#d4b08c]/70" : "text-white/40"}`}>{count}</span>
</button>
);
})}
Expand Down
Loading