Files
accounted/components/settings/sections/WhatsAppSettingsContent.tsx
T
Jakob Wennberg 0449b1d0ea feat(settings): WhatsApp brand mark on the WhatsApp settings page (#1418)
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>
2026-08-05 17:30:13 +02:00

23 lines
653 B
TypeScript

'use client'
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() {
const tNav = useTranslations('settings_nav')
const tIntro = useTranslations('settings_intro')
return (
<div>
<SettingsSectionHeader
title={tNav('whatsapp')}
intro={tIntro('whatsapp')}
mark={<WhatsAppMark size={26} />}
/>
<WhatsAppLinkPanel />
</div>
)
}