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

feat(settings): Fönster redesign - flat rows, ? help, dirty save bar (#1193)

Browse Source 
* feat(settings): Fönster redesign - flat rows, help behind ?, dirty save bar

Founder-approved concept (2026-07-25) applied to the whole settings
surface, modal and full-page variants alike:

- New primitives in components/settings/SettingsRows.tsx: section header
  (serif title + one-line intro), eyebrow groups, hairline label/control
  rows, flat inputs/selects/textareas, segmented control, animated
  reveal for gated settings, danger zone.
- Every static explanation paragraph moved behind a "?" popover
  (HelpPopover) at row or group level; dynamic status stays visible.
- Modal chrome: company kicker over serif title, fixed 920x680 window.
- SettingsFormWrapper: save is a sticky bar that appears only when the
  form is dirty; collapses to zero height when clean.
- All 11 sections converted (Konto, Abonnemang, Företag, Bokföring,
  Skatt, Löner, Fakturering, Mallar, Bank incl. Enable Banking-panel,
  Assistenten, API) with handlers, validation, role/entitlement/sandbox
  gates and i18n keys preserved; checkboxes became switches, cards
  dissolved into groups.
- Fix: Escape with an open help popover closed the whole settings
  modal; it now closes the popover first.
- New i18n keys: settings_intro.*, group labels, wrapper_unsaved
  (sv+en).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(settings): founder feedback round 1 on the Fönster redesign

- Abonnemang paying state: status and manage split into two rows so the
  row no longer wraps awkwardly; the included-features list now shows
  for paying companies too.
- Logos where the counterpart has one: BankID mark on the security row
  and on the Koppla BankID button, Skatteverket mark on the connection
  rows.
- Buttons are unmistakably buttons: 27 text-labeled row actions went
  from ghost to outline pills; icon-only actions stay quiet.
- The agent-knowledge view (Regler & profil: Dina regler, Momsprofil,
  Konventioner) converted to the flat row language; it was the last
  old-style surface inside settings. Descriptions moved behind "?",
  rules render as hairline rows, the per-row "Regel" chip demoted to
  muted text.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(settings): address review-bot findings on the Fönster redesign

- SettingsFormWrapper marks the form dirty on switch clicks too: Radix
  Switch is a button and fires no input event, so switch-only changes
  (f-skatt, KU, ROT/RUT, OSS...) never revealed the save bar.
- i18n: the migrated hardcoded strings got keys in both locales
  (fiscal-period start date/range/months, security set-password trio);
  dates in ApiKeysPanel/OAuthClientsPanel/CalendarFeedSettings now pass
  the active locale to formatDateLong.
- A11y: member remove/revoke buttons and the invite role select got
  correct accessible names; BankNameCombobox accepts aria-label wired
  from its row; the pinned-fact icon exposes role img.
- BankIdSettings: explicit Avbryt under the QR block so a cancelled
  BankID flow cannot strand isLinking.
- VoucherSeriesManager: clear the skeleton when no company is resolved.

Verified end to end in sandbox: switch-only dirty bar, PUT /api/settings
200 for text and switch saves, persistence across hard reload.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
2026-07-25 23:55:08 +02:00
committed by GitHub
co-authored by Claude Fable 5
parent d54b43f80f
commit 6d9846b1e7
30 changed files with 400 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/settings/AccountDangerZone.tsx
+2 -2
View File
@@ -122,7 +122,7 @@ export function AccountDangerZone() {
>
<span className="text-sm">{b.name}</span>
<SettingsRowEnd>
<Button variant="ghost" size="sm" asChild>
<Button variant="outline" size="sm" asChild>
<Link href="/settings/company">{t('blockers_manage')}</Link>
</Button>
</SettingsRowEnd>
@@ -138,7 +138,7 @@ export function AccountDangerZone() {
>
<SettingsRowNote>{tRetention('account_title')}</SettingsRowNote>
<SettingsRowEnd>
<Button variant="ghost" size="sm" asChild>
<Button variant="outline" size="sm" asChild>
<Link href="/reports?type=sie">
<ExternalLink className="mr-2 h-3.5 w-3.5" />
{t('export_sie')}
components/settings/AgentMemoryPanel.tsx
+6 -6
View File
@@ -191,7 +191,7 @@ export function AgentMemoryPanel() {
/>
{canWrite && (
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={() => setShowAdd((v) => !v)}
disabled={adding}
@@ -228,7 +228,7 @@ export function AgentMemoryPanel() {
</SettingsSelect>
</div>
<div className="flex items-center gap-2">
<Button variant="ghost" size="sm" onClick={() => { setShowAdd(false); setNewContent('') }}>
<Button variant="outline" size="sm" onClick={() => { setShowAdd(false); setNewContent('') }}>
Avbryt
</Button>
<Button size="sm" onClick={addMemory} disabled={adding || newContent.trim().length < 2}>
@@ -347,7 +347,7 @@ export function AgentMemoryPanel() {
{isEditing ? (
<>
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={() => setEditingId(null)}
disabled={isBusy}
@@ -366,7 +366,7 @@ export function AgentMemoryPanel() {
) : row.is_active ? (
<>
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={() => startEdit(row)}
disabled={isBusy}
@@ -375,7 +375,7 @@ export function AgentMemoryPanel() {
Redigera
</Button>
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={() => patch(row.id, { is_active: false })}
disabled={isBusy}
@@ -390,7 +390,7 @@ export function AgentMemoryPanel() {
</>
) : (
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={() => patch(row.id, { is_active: true })}
disabled={isBusy}
components/settings/ApiKeysPanel.tsx
+6 -5
View File
@@ -1,6 +1,6 @@
'use client'
import { useTranslations } from 'next-intl'
import { useLocale, useTranslations } from 'next-intl'
import { useState, useEffect, useCallback } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
@@ -187,7 +187,7 @@ function CopyBlock({ text, copyAriaLabel }: { text: string; copyAriaLabel: strin
{text}
</pre>
<Button
variant="ghost"
variant="outline"
size="sm"
className="absolute right-1.5 top-1.5 h-7 w-7 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
onClick={handleCopy}
@@ -249,6 +249,7 @@ function ScopeCard({
export function ApiKeysPanel() {
const t = useTranslations('settings_api_keys')
const locale = useLocale()
const { toast } = useToast()
const { dialogProps: revokeDialogProps, confirm: confirmRevoke } = useDestructiveConfirm()
const { dialogProps: sodDialogProps, confirm: confirmSod } = useDestructiveConfirm()
@@ -439,10 +440,10 @@ export function ApiKeysPanel() {
<span className="font-mono">{key.key_prefix}...</span>
</span>
<span className="shrink-0 text-xs tabular-nums text-muted-foreground">
{t('created')} {formatDateLong(key.created_at)}
{t('created')} {formatDateLong(key.created_at, locale)}
{' · '}
{key.last_used_at
? t('used_on', { date: formatDateLong(key.last_used_at) })
? t('used_on', { date: formatDateLong(key.last_used_at, locale) })
: t('never_used')}
</span>
</div>
@@ -685,7 +686,7 @@ export function ApiKeysPanel() {
{newKeyValue}
</code>
<Button
variant="ghost"
variant="outline"
size="sm"
className="absolute right-2 top-2"
onClick={handleCopy}
components/settings/BankIdSettings.tsx
+30 -4
View File
@@ -1,5 +1,6 @@
'use client'
import Image from 'next/image'
import { useTranslations } from 'next-intl'
import { useState, useEffect, useCallback } from 'react'
import { createClient } from '@/lib/supabase/client'
@@ -91,7 +92,19 @@ export function BankIdSettings() {
return (
<>
<SettingsRow
label={t('title')}
label={
<span className="inline-flex items-center gap-2">
<Image
src="/logos/bankid-seeklogo.svg"
alt=""
aria-hidden="true"
width={16}
height={16}
className="dark:invert"
/>
{t('title')}
</span>
}
help={identity ? t('linked_description') : t('not_linked_description')}
borderless={isLinking}
>
@@ -105,7 +118,7 @@ export function BankIdSettings() {
</SettingsRowNote>
<SettingsRowEnd>
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={handleUnlink}
disabled={isUnlinking}
@@ -121,7 +134,15 @@ export function BankIdSettings() {
<SettingsRowNote>{t('link_bankid_description')}</SettingsRowNote>
) : (
<SettingsRowEnd>
<Button variant="ghost" size="sm" onClick={() => setIsLinking(true)}>
<Button variant="outline" size="sm" onClick={() => setIsLinking(true)}>
<Image
src="/logos/bankid-seeklogo.svg"
alt=""
aria-hidden="true"
width={16}
height={16}
className="mr-2 dark:invert"
/>
{t('link_button')}
</Button>
</SettingsRowEnd>
@@ -131,8 +152,13 @@ export function BankIdSettings() {
{/* QR flow: an expanding block below the row. Mounted only while
linking so the BankID session starts exactly when requested. */}
{isLinking && (
<div className="flex flex-col items-center border-b border-border px-1 py-4">
<div className="flex flex-col items-center gap-3 border-b border-border px-1 py-4">
<BankIdAuth mode="link" onComplete={handleLinkComplete} />
{/* BankIdAuth's own Avbryt only resets its internal session; give
the row an exit so isLinking can't get stuck. */}
<Button variant="outline" size="sm" onClick={() => setIsLinking(false)}>
{t('cancel_linking')}
</Button>
</div>
)}
</>
components/settings/BankNameCombobox.tsx
+3 -1
View File
@@ -28,9 +28,10 @@ interface BankNameComboboxProps {
value?: string
onChange?: (value: string) => void
enableBankingEnabled?: boolean
'aria-label'?: string
}
export function BankNameCombobox({ defaultValue = '', value: controlledValue, onChange, enableBankingEnabled = false }: BankNameComboboxProps) {
export function BankNameCombobox({ defaultValue = '', value: controlledValue, onChange, enableBankingEnabled = false, 'aria-label': ariaLabel }: BankNameComboboxProps) {
const isControlled = controlledValue !== undefined
const [internalValue, setInternalValue] = useState(defaultValue)
const value = isControlled ? controlledValue : internalValue
@@ -131,6 +132,7 @@ export function BankNameCombobox({ defaultValue = '', value: controlledValue, on
<div ref={containerRef} className="relative">
<input type="hidden" name="bank_name" value={value} />
<Input
aria-label={ariaLabel}
ref={inputRef}
type="text"
placeholder="t.ex. Nordea"
components/settings/BookingTemplatesPanel.tsx
+2 -2
View File
@@ -139,7 +139,7 @@ export function BookingTemplatesPanel() {
{canWrite && (
<div className="flex shrink-0 items-center gap-1">
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={handleExport}
className="text-muted-foreground hover:text-foreground"
@@ -148,7 +148,7 @@ export function BookingTemplatesPanel() {
{t('export')}
</Button>
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={() => importRef.current?.click()}
className="text-muted-foreground hover:text-foreground"
components/settings/CalendarFeedSettings.tsx
+7 -10
View File
@@ -1,6 +1,7 @@
'use client'
import { useTranslations } from 'next-intl'
import { useLocale, useTranslations } from 'next-intl'
import { formatDateLong } from '@/lib/utils'
import { useState, useEffect } from 'react'
import { Switch } from '@/components/ui/switch'
import { Button } from '@/components/ui/button'
@@ -23,6 +24,7 @@ interface CalendarFeedWithUrls extends CalendarFeed {
export function CalendarFeedSettings() {
const t = useTranslations('settings_calendar_feed')
const locale = useLocale()
const { toast } = useToast()
const [isLoading, setIsLoading] = useState(true)
@@ -176,7 +178,7 @@ export function CalendarFeedSettings() {
<SettingsGroup label={t('title')} help={t('description')}>
<SettingsRow label={t('activate_sync')} help={t('empty_intro')}>
<SettingsRowEnd>
<Button variant="ghost" size="sm" onClick={createFeed} disabled={isSaving}>
<Button variant="outline" size="sm" onClick={createFeed} disabled={isSaving}>
{isSaving ? (
<>
<Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
@@ -221,7 +223,7 @@ export function CalendarFeedSettings() {
{copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
</Button>
<SettingsRowEnd>
<Button variant="ghost" size="sm" onClick={openWebcal}>
<Button variant="outline" size="sm" onClick={openWebcal}>
<Calendar className="mr-2 h-3.5 w-3.5" />
{t('add_to_apple_calendar')}
</Button>
@@ -233,19 +235,14 @@ export function CalendarFeedSettings() {
{feed.last_accessed_at && (
<SettingsRowNote className="tabular-nums">
{t('last_fetched')}{' '}
{new Date(feed.last_accessed_at).toLocaleDateString('sv-SE', {
day: 'numeric',
month: 'short',
hour: '2-digit',
minute: '2-digit',
})}
{formatDateLong(feed.last_accessed_at, locale)}
{' · '}
{t('times_count', { count: feed.access_count })}
</SettingsRowNote>
)}
<SettingsRowEnd>
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={regenerateToken}
disabled={isRegenerating}
components/settings/CompanyMembersSection.tsx
+3 -3
View File
@@ -188,7 +188,7 @@ export function CompanyMembersSection() {
variant="ghost"
size="icon"
className="h-8 w-8 shrink-0 text-muted-foreground hover:text-destructive"
aria-label={t('members_removed')}
aria-label={t('members_remove_aria')}
onClick={() => handleRemoveMember(member.id)}
disabled={removingId === member.id}
>
@@ -225,7 +225,7 @@ export function CompanyMembersSection() {
variant="ghost"
size="icon"
className="h-8 w-8 shrink-0 text-muted-foreground hover:text-destructive"
aria-label={t('members_invite_revoked')}
aria-label={t('members_revoke_aria')}
onClick={() => handleRevokeInvite(inv.id)}
disabled={revokingId === inv.id}
>
@@ -258,7 +258,7 @@ export function CompanyMembersSection() {
<SettingsSelect
value={inviteRole}
onChange={(e) => setInviteRole(e.target.value)}
aria-label={t('members_invite_email_label')}
aria-label={t('members_role_label')}
>
<option value="viewer">{t('members_role_viewer')}</option>
<option value="member">{t('members_role_member')}</option>
components/settings/CounterpartyTemplatesPanel.tsx
+1 -1
View File
@@ -216,7 +216,7 @@ export function CounterpartyTemplatesPanel() {
{/* Delete */}
<div className="flex justify-end pt-1">
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={() => handleDelete(tt.id)}
disabled={deletingId === tt.id}
components/settings/FiscalPeriodEditor.tsx
+6 -6
View File
@@ -197,9 +197,9 @@ export function FiscalPeriodEditor() {
</p>
<SettingsRow
label="Startdatum"
label={t('fp_start_date_label')}
htmlFor="fiscal-period-start"
help="Första räkenskapsåret kan börja valfri dag."
help={t('fp_start_date_help')}
align="baseline"
>
<SettingsInput
@@ -230,9 +230,9 @@ export function FiscalPeriodEditor() {
<p className="px-1 pt-3 text-xs text-muted-foreground">
{t('fp_summary_title')}:{' '}
<span className="tabular-nums">
{formatSwedishDate(startDate)} till {formatSwedishDate(endDate)}
{t('fp_range', { start: formatSwedishDate(startDate), end: formatSwedishDate(endDate) })}
</span>
{validation.months !== null && <> · {validation.months} månader</>}
{validation.months !== null && <> · {t('fp_months', { count: validation.months })}</>}
</p>
)}
{validation.error && (
@@ -242,7 +242,7 @@ export function FiscalPeriodEditor() {
<div className="flex justify-end gap-2 px-1 pt-3">
<Button
type="button"
variant="ghost"
variant="outline"
size="sm"
onClick={handleReset}
disabled={!isDirty || isSaving}
@@ -311,7 +311,7 @@ function BlockedRow({
>
<Lock aria-hidden="true" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<span className="tabular-nums">
{formatSwedishDate(period.period_start)} till {formatSwedishDate(period.period_end)}
{t('fp_range', { start: formatSwedishDate(period.period_start), end: formatSwedishDate(period.period_end) })}
</span>
<SettingsRowNote>
{(isCalendarYear(period) ? t('fp_blocked_calendar_year') : t('fp_blocked_broken_year')).trim()}
components/settings/FiscalYearsManager.tsx
+3 -3
View File
@@ -146,7 +146,7 @@ export function FiscalYearsManager() {
)}
{canManage && status === 'open' && (
<Button
variant="ghost"
variant="outline"
size="sm"
className="text-muted-foreground hover:text-foreground"
disabled={isMutating}
@@ -164,7 +164,7 @@ export function FiscalYearsManager() {
)}
{canManage && status === 'locked' && (
<Button
variant="ghost"
variant="outline"
size="sm"
className="text-muted-foreground hover:text-foreground"
disabled={isMutating}
@@ -189,7 +189,7 @@ export function FiscalYearsManager() {
{/* Trailing quiet action: create the next fiscal year. */}
<div className="px-1 pt-3">
<Button
variant="ghost"
variant="outline"
size="sm"
className="text-muted-foreground hover:text-foreground"
onClick={() => setDialogOpen(true)}
components/settings/InstallAppSection.tsx
+1 -1
View File
@@ -83,7 +83,7 @@ export function InstallAppSection() {
<SettingsRow label={t('install_app_title')} help={t('install_app_description')}>
{installPrompt ? (
<SettingsRowEnd>
<Button variant="ghost" size="sm" onClick={handleInstall}>
<Button variant="outline" size="sm" onClick={handleInstall}>
<MonitorDown className="mr-2 h-3.5 w-3.5" />
{t('install_app_button')}
</Button>
components/settings/InvoicePaymentAccountsSettings.tsx
+1
View File
@@ -351,6 +351,7 @@ export function InvoicePaymentAccountsSettings({
{/* Typeahead combobox stays boxed on purpose: it is a picker, not a field. */}
<div className="min-w-0 flex-1 sm:max-w-64">
<BankNameCombobox
aria-label={t('bank_label')}
value={value(activeAccount, 'bank_name')}
onChange={(next) => updateField('bank_name', next)}
enableBankingEnabled={hasBankingExtension}
components/settings/LogoUpload.tsx
+1 -1
View File
@@ -135,7 +135,7 @@ export function LogoUpload({ logoUrl, onUpdate }: LogoUploadProps) {
{t('logo_change')}
</Button>
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={handleDelete}
disabled={isDeleting}
components/settings/OAuthClientsPanel.tsx
+3 -2
View File
@@ -1,6 +1,6 @@
'use client'
import { useTranslations } from 'next-intl'
import { useLocale, useTranslations } from 'next-intl'
import { useState, useEffect, useCallback } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
@@ -31,6 +31,7 @@ interface OAuthClient {
export function OAuthClientsPanel() {
const t = useTranslations('settings_oauth_clients')
const locale = useLocale()
const { toast } = useToast()
const { dialogProps: revokeDialogProps, confirm: confirmRevoke } = useDestructiveConfirm()
@@ -152,7 +153,7 @@ export function OAuthClientsPanel() {
{c.redirect_uri}
</code>
<span className="shrink-0 text-xs tabular-nums text-muted-foreground">
{t('registered_on')} {formatDateLong(c.created_at)}
{t('registered_on')} {formatDateLong(c.created_at, locale)}
</span>
</div>
<Button
components/settings/SecuritySettings.tsx
+6 -6
View File
@@ -177,8 +177,8 @@ export function SecuritySettings() {
{/* BankID-only users with no password: set-password row before the rest */}
{hasPassword === false && (
<SettingsRow
label="Sätt ett lösenord"
help="Du loggade in med BankID och har inget lösenord ännu. Sätt ett lösenord för att kunna aktivera 2FA eller logga in när BankID inte är tillgängligt."
label={t('set_password_title')}
help={t('set_password_description')}
>
<SettingsRowEnd>
<Button
@@ -187,7 +187,7 @@ export function SecuritySettings() {
router.push('/account/set-password?returnTo=/settings/account')
}
>
Sätt lösenord
{t('set_password_button')}
</Button>
</SettingsRowEnd>
</SettingsRow>
@@ -276,7 +276,7 @@ export function SecuritySettings() {
<SettingsRowNote>{t('mfa_required_note')}</SettingsRowNote>
) : (
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={handleUnenrollMfa}
disabled={isUnenrolling}
@@ -302,7 +302,7 @@ export function SecuritySettings() {
<SettingsRowEnd>
{hasPassword === false ? (
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={() =>
router.push('/account/set-password?returnTo=/mfa/enroll')
@@ -312,7 +312,7 @@ export function SecuritySettings() {
</Button>
) : (
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={() =>
router.push(`/mfa/enroll?returnTo=${encodeURIComponent('/settings/account')}`)
components/settings/SettingsFormWrapper.tsx
+7
View File
@@ -105,6 +105,13 @@ export function SettingsFormWrapper({ children, onSave, className }: SettingsFor
<form
onSubmit={handleSubmit}
onInput={() => setDirty(true)}
// Radix Switch renders a button, so toggling it fires no form input
// event; catch those clicks too or switch-only changes never reveal
// the save bar.
onClickCapture={(e) => {
const el = e.target as HTMLElement
if (el.closest('[role="switch"]:not([disabled])')) setDirty(true)
}}
className={className}
>
{children}
components/settings/SkatteverketConnectPanel.tsx
+19 -3
View File
@@ -1,6 +1,7 @@
'use client'
import { useTranslations } from 'next-intl'
import Image from 'next/image'
import { useCallback, useEffect, useRef, useState } from 'react'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
@@ -275,7 +276,12 @@ function SkatteverketPersonalConnectionCard() {
if (loading) {
return (
<SettingsGroup>
<SettingsRow label={t('title')} help={connectHelp} borderless>
<SettingsRow label={
<span className="inline-flex items-center gap-2">
<Image src="/logos/skatteverket.svg" alt="" aria-hidden="true" width={14} height={14} className="dark:invert" />
{t('title')}
</span>
} help={connectHelp} borderless>
<SettingsRowNote>{t('loading_status')}</SettingsRowNote>
</SettingsRow>
</SettingsGroup>
@@ -286,7 +292,12 @@ function SkatteverketPersonalConnectionCard() {
return (
<SettingsGroup>
{status?.disabled && <WarningLine>{t('disabled_message')}</WarningLine>}
<SettingsRow label={t('title')} help={connectHelp} borderless={!hasSkatteverket}>
<SettingsRow label={
<span className="inline-flex items-center gap-2">
<Image src="/logos/skatteverket.svg" alt="" aria-hidden="true" width={14} height={14} className="dark:invert" />
{t('title')}
</span>
} help={connectHelp} borderless={!hasSkatteverket}>
<EnvironmentBadge environment={status?.environment} disabled={status?.disabled} />
<SettingsRowEnd>
<Button
@@ -328,7 +339,12 @@ function SkatteverketPersonalConnectionCard() {
</WarningLine>
)}
<SettingsRow label={t('title')} help={connectHelp}>
<SettingsRow label={
<span className="inline-flex items-center gap-2">
<Image src="/logos/skatteverket.svg" alt="" aria-hidden="true" width={14} height={14} className="dark:invert" />
{t('title')}
</span>
} help={connectHelp}>
{status.expired ? (
<Badge variant="warning">{t('expired')}</Badge>
) : (
components/settings/TaxAssessmentNoticesPanel.tsx
+3 -3
View File
@@ -198,7 +198,7 @@ export function TaxAssessmentNoticesPanel() {
{saving ? t('saving') : t(editingId ? 'update_action' : 'save_action')}
</Button>
{editingId && (
<Button type="button" variant="ghost" size="sm" onClick={resetForm} disabled={saving}>
<Button type="button" variant="outline" size="sm" onClick={resetForm} disabled={saving}>
{t('cancel')}
</Button>
)}
@@ -221,11 +221,11 @@ export function TaxAssessmentNoticesPanel() {
</SettingsRowNote>
</div>
<div className="flex shrink-0 gap-2">
<Button type="button" variant="ghost" size="sm" onClick={() => editNotice(notice)} disabled={saving}>
<Button type="button" variant="outline" size="sm" onClick={() => editNotice(notice)} disabled={saving}>
<Pencil className="mr-2 h-4 w-4" />
{t('edit')}
</Button>
<Button type="button" variant="ghost" size="sm" onClick={() => void archiveNotice(notice)} disabled={saving}>
<Button type="button" variant="outline" size="sm" onClick={() => void archiveNotice(notice)} disabled={saving}>
<Trash2 className="mr-2 h-4 w-4" />
{t('archive')}
</Button>
components/settings/TemplateForm.tsx
+1 -1
View File
@@ -251,7 +251,7 @@ export function TemplateForm({
/>
<Button
type="button"
variant="ghost"
variant="outline"
size="sm"
onClick={() => removeLine(i)}
disabled={lines.length <= 2}
components/settings/VoucherSeriesManager.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ export function VoucherSeriesManager({ defaultSeries }: VoucherSeriesManagerProp
const [isLoading, setIsLoading] = useState(true)
const fetchSeries = useCallback(async () => {
if (!company?.id) return
if (!company?.id) { setIsLoading(false); return }
const supabase = createClient()
const { data } = await supabase
.from('voucher_sequences')
components/settings/sections/AccountSettingsContent.tsx
+3 -3
View File
@@ -225,7 +225,7 @@ export function AccountSettingsContent() {
<SettingsGroup label={tSettings('legal_title')}>
<SettingsRow label={tSettings('legal_privacy')}>
<SettingsRowEnd>
<Button variant="ghost" size="sm" asChild>
<Button variant="outline" size="sm" asChild>
<Link href="/privacy" target="_blank" rel="noopener noreferrer">
<ExternalLink className="mr-2 h-3.5 w-3.5" />
{tCommon('open')}
@@ -235,7 +235,7 @@ export function AccountSettingsContent() {
</SettingsRow>
<SettingsRow label={tSettings('legal_dpa')}>
<SettingsRowEnd>
<Button variant="ghost" size="sm" asChild>
<Button variant="outline" size="sm" asChild>
<Link href="/dpa" target="_blank" rel="noopener noreferrer">
<ExternalLink className="mr-2 h-3.5 w-3.5" />
{tCommon('open')}
@@ -249,7 +249,7 @@ export function AccountSettingsContent() {
<SettingsGroup>
<SettingsRow label={tCommon('logout')} help={tCommon('logout_description')}>
<SettingsRowEnd>
<Button variant="ghost" size="sm" onClick={handleLogout}>
<Button variant="outline" size="sm" onClick={handleLogout}>
<LogOut className="mr-2 h-3.5 w-3.5" />
{tCommon('logout')}
</Button>
components/settings/sections/BillingSettingsContent.tsx
+15 -2
View File
@@ -153,14 +153,27 @@ export function BillingSettingsContent() {
<div>
{header}
<SettingsGroup label="Ditt abonnemang">
<SettingsRow label="Status" borderless>
<span>Aktivt</span>
<SettingsRow label="Status">
<span className="font-medium">Aktivt</span>
<SettingsRowNote>Du kan hantera eller avsluta det när som helst.</SettingsRowNote>
</SettingsRow>
<SettingsRow label="Hantera" borderless>
<SettingsRowNote>Byt kort, ändra plan eller säg upp via Stripes kundportal.</SettingsRowNote>
<SettingsRowEnd>
<BillingActions isPaying configured={view.configured} />
</SettingsRowEnd>
</SettingsRow>
</SettingsGroup>
<SettingsGroup label="I abonnemanget">
<ul className="space-y-2 px-1 pt-3">
{INCLUDED.map((item) => (
<li key={item} className="flex items-start gap-2 text-sm">
<Check aria-hidden="true" className="mt-1 h-3.5 w-3.5 shrink-0 text-foreground" />
<span>{item}</span>
</li>
))}
</ul>
</SettingsGroup>
</div>
)
}