lucasrguerra/LambdaMail
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(webmail): the new interface - logo, dark and light themes, command menu

Browse Source 
A mark (a lambda on an ultramarine tile with the flap of an envelope), the
favicon, home-screen icons and an install manifest. Every colour is a variable
defined once per theme, and the Tailwind scales the screens already use read
them, so dark (the default) and light are a change of values and not of
classes. Geist is served by the app itself. Ctrl+K opens a command menu for
folders, actions, accounts and appearance, and typing something that matches no
command searches the mail; c writes a message and / goes to the search field.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Lucas RayanandClaude Sonnet 5.5 committed 2026-10-22 22:33:15 -03:00
1 parent 6b97807856
commit e667843b59
38 files changed
+1161 -316
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

services/webmail/src/components/Composer.tsx
+8 -8
View File
@@ -378,12 +378,12 @@ export function Composer({ initial, variant = "page", onSent, onDiscarded }: Com
};
/** One row of the compose sheet: a fixed-width label beside the control. */
const fieldRow = "flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2.5 shadow-[inset_0_-1px_0_0_rgba(233,233,237,0.07)]";
const fieldRow = "flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2.5 shadow-[inset_0_-1px_0_0_rgb(var(--ink)/0.07)]";
const fieldLabel = "w-14 flex-none text-[12.5px] leading-snug text-slate-400";
const bareInput =
"min-h-[30px] min-w-[160px] flex-1 border-0 bg-transparent text-sm text-slate-100 placeholder-slate-500 focus:outline-none";
const toolButton =
"flex h-8 w-8 items-center justify-center rounded-lg text-slate-300 transition-colors hover:bg-white/[0.07] hover:text-slate-100";
"flex h-8 w-8 items-center justify-center rounded-lg text-slate-300 transition-colors hover:bg-ink/[0.07] hover:text-slate-100";
return (
<div className={inline ? "" : "flex-1 overflow-y-auto bg-dark-bg px-5 pb-11 pt-7 sm:px-8"}>
@@ -409,7 +409,7 @@ export function Composer({ initial, variant = "page", onSent, onDiscarded }: Com
disabled={sending}
title={t("mail.highImportanceHint")}
className={`inline-flex h-10 items-center gap-2 rounded-xl px-3.5 text-sm shadow-edge transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 ${
important ? "bg-rose-900/70 text-rose-100" : "bg-dark-card text-slate-200 hover:bg-white/[0.07]"
important ? "bg-rose-900/70 text-rose-100" : "bg-dark-card text-slate-200 hover:bg-ink/[0.07]"
}`}
>
<Flag className="h-4 w-4" fill={important ? "currentColor" : "none"} />
@@ -531,7 +531,7 @@ export function Composer({ initial, variant = "page", onSent, onDiscarded }: Com
)}
{/* Formatting Toolbar */}
<div className="flex flex-wrap items-center gap-0.5 px-3 py-2 shadow-[inset_0_-1px_0_0_rgba(233,233,237,0.07)]">
<div className="flex flex-wrap items-center gap-0.5 px-3 py-2 shadow-[inset_0_-1px_0_0_rgb(var(--ink)/0.07)]">
<button type="button" onClick={() => executeFormat("bold")} className={toolButton} title={t("mail.bold")}>
<Bold className="h-4 w-4" />
</button>
@@ -554,7 +554,7 @@ export function Composer({ initial, variant = "page", onSent, onDiscarded }: Com
>
<Strikethrough className="h-4 w-4" />
</button>
<span className="mx-1.5 h-[18px] w-px bg-white/[0.14]" />
<span className="mx-1.5 h-[18px] w-px bg-ink/[0.14]" />
<button
type="button"
onClick={() => executeFormat("insertUnorderedList")}
@@ -571,7 +571,7 @@ export function Composer({ initial, variant = "page", onSent, onDiscarded }: Com
>
<ListOrdered className="h-4 w-4" />
</button>
<span className="mx-1.5 h-[18px] w-px bg-white/[0.14]" />
<span className="mx-1.5 h-[18px] w-px bg-ink/[0.14]" />
<button
type="button"
onClick={() => {
@@ -598,8 +598,8 @@ export function Composer({ initial, variant = "page", onSent, onDiscarded }: Com
/>
{/* Attachment Selector & Display */}
<div className="flex flex-wrap items-center gap-2.5 px-4 py-3.5 shadow-[inset_0_1px_0_0_rgba(233,233,237,0.07)]">
<label className="flex flex-none cursor-pointer items-center gap-2 rounded-[10px] border border-white/[0.14] px-3 py-2 text-[13px] text-slate-200 transition-colors hover:bg-white/[0.07]">
<div className="flex flex-wrap items-center gap-2.5 px-4 py-3.5 shadow-[inset_0_1px_0_0_rgb(var(--ink)/0.07)]">
<label className="flex flex-none cursor-pointer items-center gap-2 rounded-[10px] border border-ink/[0.14] px-3 py-2 text-[13px] text-slate-200 transition-colors hover:bg-ink/[0.07]">
<Paperclip className="h-[15px] w-[15px]" />
<span>{t("mail.addFiles")}</span>
<input type="file" multiple onChange={handleFileUpload} className="hidden" />