From 4e089d9b6b68944a040bccdf1276d5a4ea3a79f2 Mon Sep 17 00:00:00 2001
From: Steven RYDELL <srydell@gmx.com>
Date: Thu, 30 Jul 2026 18:09:51 +0200
Subject: [PATCH] fix(appearance): keep Rounded corners preview curved in
 square mode

---
 CHANGELOG.md                               |  1 +
 src/features/appearance/AppearancePage.tsx | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 24ed8e8..5485430 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,6 +29,7 @@ All notable changes to this project will be documented in this file. This projec
 - Custom logos no longer flash the default Stalwart logo while loading.
 - Icon/label alignment in backend select triggers.
 - Web Applications list shows an Enabled column again.
+- Appearance Corners preview: only the Rounded choice forces rounded radius on its card and sample; Square stays sharp even when the global theme is square.
 
 ### Known limitations (confirmed backend-side, not fixable from this fork)
 - Level/Event filters on Log Entries are client-side only (see Added above) because the backend's JMAP query engine rejects `level`/`event` as filter conditions ([webui#15](https://github.com/stalwartlabs/webui/issues/15)).
diff --git a/src/features/appearance/AppearancePage.tsx b/src/features/appearance/AppearancePage.tsx
index e83e938..d5630a8 100644
--- a/src/features/appearance/AppearancePage.tsx
+++ b/src/features/appearance/AppearancePage.tsx
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
  */
 
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Check, Moon, Sun } from 'lucide-react';
 
@@ -12,6 +12,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { cn } from '@/lib/utils';
 import { COLOR_THEMES, useUIStore } from '@/stores/uiStore';
 
+/** Matches `:root { --radius: 0.5rem }` so only the Rounded choice stays curved in square mode. */
+const ROUNDED_RADIUS_STYLE = { '--radius': '0.5rem' } as CSSProperties;
+
 export function AppearancePage() {
   const { t } = useTranslation();
   const theme = useUIStore((s) => s.theme);
@@ -82,6 +85,7 @@ export function AppearancePage() {
             selected={radius === 'rounded'}
             onClick={() => setRadius('rounded')}
             label={t('appearance.rounded', 'Rounded')}
+            style={ROUNDED_RADIUS_STYLE}
           >
             <span className="h-6 w-10 rounded-md border-2 border-current" />
           </OptionCard>
@@ -89,6 +93,7 @@ export function AppearancePage() {
             selected={radius === 'square'}
             onClick={() => setRadius('square')}
             label={t('appearance.square', 'Square')}
+            className="rounded-none"
           >
             <span className="h-6 w-10 rounded-none border-2 border-current" />
           </OptionCard>
@@ -103,22 +108,28 @@ function OptionCard({
   onClick,
   label,
   children,
+  className,
+  style,
 }: {
   selected: boolean;
   onClick: () => void;
   label: string;
   children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
 }) {
   return (
     <button
       type="button"
       onClick={onClick}
       aria-pressed={selected}
+      style={style}
       className={cn(
         'relative flex flex-col items-center gap-2 rounded-lg border bg-field p-4 text-sm transition-colors',
         selected
           ? 'border-primary text-foreground'
           : 'border-border text-muted-foreground hover:bg-accent/50 hover:text-foreground',
+        className,
       )}
     >
       {selected && <Check className="absolute right-2 top-2 h-4 w-4 text-primary" />}