starred/webmail
1
0
Fork 0
mirror of https://github.com/bulwarkmail/webmail.git synced 2026-10-31 16:13:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: use theme colours for folder icons, stars and contact form errors instead of fixed blue, amber and pink

Browse Source
This commit is contained in:
Linus Rath
2026-10-28 04:45:59 +01:00
parent d24b917c22
commit c04f850b16
8 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/contacts/contact-form.tsx
+9 -7
View File
@@ -698,7 +698,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
<div className="flex-1 overflow-y-auto">
<div className="px-6 py-4 max-w-3xl">
{error && (
<div className="text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950 px-3 py-2 rounded-lg border border-red-200 dark:border-red-900 mb-4">
<div role="alert" className="text-sm text-destructive bg-destructive/10 px-3 py-2 rounded-md mb-4">
{error}
</div>
)}
@@ -716,6 +716,8 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
name={previewName || undefined}
email={previewEmail || undefined}
contactPhoto={previewPhoto}
// Nothing typed yet: a neutral circle, not a coloured "?".
fallbackColor={previewName || previewEmail ? undefined : "var(--color-muted-foreground)"}
size="lg"
className="!w-20 !h-20 !text-xl"
/>
@@ -737,7 +739,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
<div className="flex flex-col gap-1 min-w-0 flex-1">
<p className="text-xs text-muted-foreground">{t("photo_hint")}</p>
{photoError && (
<p className="text-xs text-red-600 dark:text-red-400">{photoError}</p>
<p className="text-xs text-destructive">{photoError}</p>
)}
{previewPhoto && (
<button
@@ -802,7 +804,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<label className="text-xs text-muted-foreground mb-1 block">
{t("organization")} <span className="text-red-500">*</span>
{t("organization")} <span className="text-destructive">*</span>
</label>
<Input value={organization} onChange={(e) => setOrganization(e.target.value)} placeholder={t("organization_placeholder")} autoFocus />
</div>
@@ -820,13 +822,13 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
</div>
<div>
<label className="text-xs text-muted-foreground mb-1 block">
{t("given_name")} <span className="text-red-500">*</span>
{t("given_name")} <span className="text-destructive">*</span>
</label>
<Input value={givenName} onChange={(e) => setGivenName(e.target.value)} placeholder={t("given_name")} autoFocus />
</div>
<div>
<label className="text-xs text-muted-foreground mb-1 block">
{t("surname")} <span className="text-red-500">*</span>
{t("surname")} <span className="text-destructive">*</span>
</label>
<Input value={surname} onChange={(e) => setSurname(e.target.value)} placeholder={t("surname")} />
</div>
@@ -869,7 +871,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
}}
onBlur={() => handleEmailBlur(i, entry.address)}
placeholder={t("email_placeholder")}
className={cn("flex-1", emailErrors[i] && "border-red-500 focus:ring-red-500")}
className={cn("flex-1", emailErrors[i] && "border-destructive focus-visible:border-destructive")}
/>
<Select
value={entry.context}
@@ -890,7 +892,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
)}
</div>
{emailErrors[i] && (
<p className="text-xs text-red-600 dark:text-red-400 mt-1 ms-1">{emailErrors[i]}</p>
<p className="text-xs text-destructive mt-1 ms-1">{emailErrors[i]}</p>
)}
</div>
))}
components/contacts/contact-group-form.tsx
+1 -1
View File
@@ -94,7 +94,7 @@ export function ContactGroupForm({
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
{error && (
<div className="text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950 px-3 py-2 rounded">
<div role="alert" className="text-sm text-destructive bg-destructive/10 px-3 py-2 rounded-md">
{error}
</div>
)}
components/files/file-details-panel.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ export function FileDetailsPanel({
<div className="aspect-[4/3] rounded-lg bg-muted/50 flex items-center justify-center">
{selection.length > 1
? <Files className="w-14 h-14 text-muted-foreground" />
: <FolderOpen className="w-14 h-14 text-blue-500" />}
: <FolderOpen className="w-14 h-14 text-primary" />}
</div>
<div>
<p className="font-medium break-words">
components/files/file-icons.tsx
+1 -1
View File
@@ -156,5 +156,5 @@ export function getSymlinkIcon(size: FileIconSize, label: string) {
}
export function getFolderIcon(size: FileIconSize, colored = true) {
return <Folder className={`${ICON_SIZE_CLASSES[size]} shrink-0 ${colored ? "text-blue-500" : "text-muted-foreground"}`} />;
return <Folder className={`${ICON_SIZE_CLASSES[size]} shrink-0 ${colored ? "text-primary" : "text-muted-foreground"}`} />;
}
components/files/file-picker-dialog.tsx
+2 -2
View File
@@ -210,7 +210,7 @@ export function FilePickerDialog({ client, onClose, onPick }: FilePickerDialogPr
{here === null && !needle && sharedRoots.length > 0 && folderRow(
SHARED_WITH_ME,
t("shared_with_me"),
<Users className="w-5 h-5 shrink-0 text-blue-500" />,
<Users className="w-5 h-5 shrink-0 text-primary" />,
() => openFolder(SHARED_WITH_ME, t("shared_with_me")),
)}
{entries.map((node) =>
@@ -218,7 +218,7 @@ export function FilePickerDialog({ client, onClose, onPick }: FilePickerDialogPr
? folderRow(
node.id,
node.name,
<Folder className="w-5 h-5 shrink-0 text-blue-500" />,
<Folder className="w-5 h-5 shrink-0 text-primary" />,
() => openFolder(node.id, node.name),
sharedBy(node),
)
components/files/file-views.tsx
+2 -2
View File
@@ -264,7 +264,7 @@ function FileListRow({ resource, isSelected, isFocused, isDropTarget, isCut, isS
>
{resource.name}
</button>
{isStarred && <Star className="w-3.5 h-3.5 shrink-0 text-amber-500 fill-current" aria-label={t("favorites")} />}
{isStarred && <Star className="w-3.5 h-3.5 shrink-0 text-amber-400 fill-amber-400" aria-label={t("favorites")} />}
<ShareBadge resource={resource} t={t} />
</div>
{touch && (
@@ -416,7 +416,7 @@ function FolderTile({ resource, isSelected, isFocused, isDropTarget, isCut, isSt
>
{resource.name}
</button>
{isStarred && <Star className="w-3.5 h-3.5 shrink-0 text-amber-500 fill-current" aria-label={t("favorites")} />}
{isStarred && <Star className="w-3.5 h-3.5 shrink-0 text-amber-400 fill-amber-400" aria-label={t("favorites")} />}
<ShareBadge resource={resource} t={t} />
<IconButton
data-item-action
components/files/files-app.tsx
+1 -1
View File
@@ -800,7 +800,7 @@ export function FilesApp({ linkSegments: routeSegments }: FilesAppProps = {}) {
{!filesEnabled ? (
<div className="flex items-center justify-center h-full">
<div className="max-w-lg text-center space-y-3 px-4">
<AlertTriangle className="w-10 h-10 text-yellow-500 mx-auto" />
<AlertTriangle className="w-10 h-10 text-amber-600 dark:text-amber-400 mx-auto" />
<p className="text-sm font-medium">{t("disabled_title")}</p>
<p className="text-xs text-muted-foreground">{t("disabled_description")}</p>
</div>
components/files/files-sidebar.tsx
+1 -1
View File
@@ -343,7 +343,7 @@ export function FilesSidebar({
style={{ ...ROW_STYLE, paddingInlineStart: "26px" }}
title={path}
>
<Star className="w-4 h-4 shrink-0 text-amber-500 fill-current" />
<Star className="w-4 h-4 shrink-0 text-amber-400 fill-amber-400" />
<span className="truncate">{path === "/" ? t("my_files") : path.split("/").pop()}</span>
</button>
))}