admin/accounted
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(settings): WhatsApp brand mark on the WhatsApp settings page (#1418)

Browse Source 
The page had no visual signal that it configures a third-party channel,
so it read like any other Accounted setting. Adds an inline-SVG WhatsApp
mark next to the section title and on the button that opens WhatsApp
(replacing the generic lucide chat bubble, which was standing in for a
logo it is not).

Inline SVG rather than a bundled asset: no network request, scales, and
survives the CSP. SettingsSectionHeader gains an optional `mark` slot;
every other settings tab is untouched and stays mark-less on purpose, so
the rail does not turn into a sticker album. The green is the one place
brand colour appears in settings, which matches the design rule that
colour belongs to actors rather than chrome.

Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
2026-08-05 17:30:13 +02:00
committed by GitHub
co-authored by Jakob Wennberg Claude Fable 5
parent 88760ae6f6
commit 0449b1d0ea
4 changed files with 66 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/settings/SettingsRows.tsx
+12 -2
View File
@@ -21,13 +21,23 @@ interface SettingsSectionHeaderProps {
intro?: React.ReactNode
/** Right-aligned header action (e.g. "Förhandsvisa faktura", "Skapa nyckel"). */
action?: React.ReactNode
/**
* Brand mark for a section that represents a third-party channel
* (WhatsApp today). Sections that are just Accounted settings leave this
* unset: the serif title carries them, and a decorative icon per tab
* would turn the settings rail into a sticker album.
*/
mark?: React.ReactNode
}
export function SettingsSectionHeader({ title, intro, action }: SettingsSectionHeaderProps) {
export function SettingsSectionHeader({ title, intro, action, mark }: SettingsSectionHeaderProps) {
return (
<header>
<div className="flex items-baseline justify-between gap-4">
<h2 className="font-display text-xl tracking-tight">{title}</h2>
<div className="flex items-center gap-2.5">
{mark ? <span className="shrink-0 leading-none">{mark}</span> : null}
<h2 className="font-display text-xl tracking-tight">{title}</h2>
</div>
{action ? <div className="flex shrink-0 items-center gap-3">{action}</div> : null}
</div>
{intro ? (
components/settings/sections/WhatsAppSettingsContent.tsx
+6 -1
View File
@@ -2,6 +2,7 @@
import { useTranslations } from 'next-intl'
import { WhatsAppLinkPanel } from '@/components/extensions/general/WhatsAppLinkPanel'
import { WhatsAppMark } from '@/components/extensions/general/WhatsAppMark'
import { SettingsSectionHeader } from '@/components/settings/SettingsRows'
export function WhatsAppSettingsContent() {
@@ -10,7 +11,11 @@ export function WhatsAppSettingsContent() {
return (
<div>
<SettingsSectionHeader title={tNav('whatsapp')} intro={tIntro('whatsapp')} />
<SettingsSectionHeader
title={tNav('whatsapp')}
intro={tIntro('whatsapp')}
mark={<WhatsAppMark size={26} />}
/>
<WhatsAppLinkPanel />
</div>
)