style(webui): unify settings and dark mode surfaces (#5058)
This commit is contained in:
chengyongru
@@ -137,7 +137,6 @@ export function ChannelLogo({
|
||||
return (
|
||||
<span
|
||||
className="grid h-10 w-10 shrink-0 place-items-center rounded-[12px] border border-border/45 bg-background"
|
||||
style={{ boxShadow: `inset 0 0 0 1px ${color}22` }}
|
||||
>
|
||||
<img
|
||||
src={logoUrl}
|
||||
@@ -156,7 +155,7 @@ export function ChannelLogo({
|
||||
return (
|
||||
<span
|
||||
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[12px] border border-border/45 bg-background"
|
||||
style={{ color, boxShadow: `inset 0 0 0 1px ${color}18` }}
|
||||
style={{ color }}
|
||||
aria-hidden
|
||||
>
|
||||
<Icon className="h-5 w-5" strokeWidth={2.25} />
|
||||
@@ -167,7 +166,7 @@ export function ChannelLogo({
|
||||
return (
|
||||
<span
|
||||
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[12px] border border-border/45 bg-background text-[11px] font-bold"
|
||||
style={{ color, boxShadow: `inset 0 0 0 1px ${color}18` }}
|
||||
style={{ color }}
|
||||
aria-hidden
|
||||
>
|
||||
{initials}
|
||||
|
||||
@@ -144,7 +144,7 @@ export function ChannelInstancesPanel({
|
||||
};
|
||||
|
||||
return (
|
||||
<aside className="min-h-full rounded-[20px] border border-border/80 bg-background p-5 shadow-none">
|
||||
<aside className="min-h-full rounded-[20px] bg-settings-surface p-5">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex min-w-0 items-start gap-3">
|
||||
<ChannelLogo feature={feature} showBrandLogos={showBrandLogos} />
|
||||
@@ -177,10 +177,10 @@ export function ChannelInstancesPanel({
|
||||
<article
|
||||
key={instance.id}
|
||||
className={cn(
|
||||
"overflow-hidden rounded-[18px] border transition-colors",
|
||||
"overflow-hidden rounded-[18px] border border-transparent transition-colors",
|
||||
expanded
|
||||
? "border-border/75 bg-card/95 shadow-sm"
|
||||
: "border-border/55 bg-background hover:border-border/75 hover:bg-muted/15",
|
||||
? "bg-background"
|
||||
: "bg-background/70 hover:bg-muted",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-3 px-3 py-3">
|
||||
@@ -398,7 +398,7 @@ function ChannelInstanceAvatar({
|
||||
return (
|
||||
<span
|
||||
className="grid h-11 w-11 shrink-0 place-items-center overflow-hidden rounded-full border border-border/45 bg-background text-[10px] font-bold"
|
||||
style={{ color, boxShadow: `inset 0 0 0 1px ${color}18` }}
|
||||
style={{ color }}
|
||||
aria-hidden
|
||||
>
|
||||
{remoteAvatarUrl ? (
|
||||
|
||||
@@ -80,10 +80,8 @@ export function ChannelCatalogRow({
|
||||
aria-pressed={selected}
|
||||
onClick={onSelect}
|
||||
className={cn(
|
||||
"group flex w-full min-w-0 items-center gap-3 rounded-[14px] border px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border/80",
|
||||
selected
|
||||
? "border-border/55 bg-muted/35"
|
||||
: "border-transparent hover:border-border/45 hover:bg-muted/25",
|
||||
"group flex w-full min-w-0 items-center gap-3 rounded-[14px] border border-transparent px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border/80",
|
||||
selected ? "bg-background" : "hover:bg-muted",
|
||||
)}
|
||||
>
|
||||
<ChannelLogo feature={feature} showBrandLogos={showBrandLogos} />
|
||||
@@ -181,7 +179,7 @@ export function ChannelSetupPanel({
|
||||
});
|
||||
|
||||
return (
|
||||
<aside className="min-h-full rounded-[20px] border border-border/80 bg-background p-5 shadow-none">
|
||||
<aside className="min-h-full rounded-[20px] bg-settings-surface p-5">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex min-w-0 items-start gap-3">
|
||||
<ChannelLogo feature={feature} showBrandLogos={showBrandLogos} />
|
||||
@@ -398,7 +396,7 @@ function ChannelSetupSurface({
|
||||
|
||||
return (
|
||||
<form
|
||||
className="mt-5 overflow-hidden rounded-[16px] border border-border/70 bg-background shadow-none"
|
||||
className="mt-5 overflow-hidden rounded-[16px] bg-background/55"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
if (mode === "credentials") void saveCredentialSettings();
|
||||
|
||||
@@ -57,7 +57,7 @@ export function ChannelGuideLink({
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className={cn(
|
||||
"inline-flex max-w-full items-center gap-2 border border-border/65 bg-background/90 font-semibold text-foreground shadow-sm transition-colors hover:border-border hover:bg-muted/45",
|
||||
"inline-flex max-w-full items-center gap-2 border border-border/45 bg-background/90 font-semibold text-foreground transition-colors hover:bg-muted",
|
||||
compact
|
||||
? "shrink-0 rounded-full py-1 pl-1 pr-2.5 text-[11.5px]"
|
||||
: "mt-3 rounded-[12px] py-1.5 pl-1.5 pr-3 text-[12px]",
|
||||
@@ -68,7 +68,7 @@ export function ChannelGuideLink({
|
||||
"grid shrink-0 place-items-center overflow-hidden border border-border/45 bg-background font-bold",
|
||||
compact ? "h-5 w-5 rounded-full text-[9px]" : "h-6 w-6 rounded-[7px] text-[10px]",
|
||||
)}
|
||||
style={{ color, boxShadow: `inset 0 0 0 1px ${color}16` }}
|
||||
style={{ color }}
|
||||
aria-hidden
|
||||
>
|
||||
{logoUrl ? (
|
||||
@@ -135,11 +135,11 @@ export function ChannelOfficialLink({
|
||||
href={setup.officialUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex max-w-full shrink-0 items-center gap-2 rounded-full border border-border/65 bg-background/90 py-1 pl-1 pr-2.5 text-[11.5px] font-semibold text-foreground shadow-sm transition-colors hover:border-border hover:bg-muted/45"
|
||||
className="inline-flex max-w-full shrink-0 items-center gap-2 rounded-full border border-border/45 bg-background/90 py-1 pl-1 pr-2.5 text-[11.5px] font-semibold text-foreground transition-colors hover:bg-muted"
|
||||
>
|
||||
<span
|
||||
className="grid h-5 w-5 shrink-0 place-items-center overflow-hidden rounded-full border border-border/45 bg-background"
|
||||
style={{ color, boxShadow: `inset 0 0 0 1px ${color}16` }}
|
||||
style={{ color }}
|
||||
aria-hidden
|
||||
>
|
||||
{logoUrl ? (
|
||||
@@ -231,7 +231,7 @@ export function ChannelProviderPresets({
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-label={t("settings.channels.providerPreset", { defaultValue: "Provider" })}
|
||||
className="grid rounded-[10px] bg-muted/75 p-0.5 text-[12px] font-medium text-muted-foreground shadow-[inset_0_0_0_1px_rgba(15,23,42,0.035)]"
|
||||
className="grid rounded-[10px] bg-muted p-0.5 text-[12px] font-medium text-muted-foreground"
|
||||
style={{ gridTemplateColumns: `repeat(${presets.length}, minmax(0, 1fr))` }}
|
||||
>
|
||||
{presets.map((preset) => (
|
||||
@@ -247,7 +247,7 @@ export function ChannelProviderPresets({
|
||||
className={cn(
|
||||
"min-h-8 rounded-[8px] px-2 py-1.5 transition-colors hover:text-foreground",
|
||||
selected === preset.id
|
||||
&& "bg-background text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.10),inset_0_0_0_1px_rgba(15,23,42,0.055)]",
|
||||
&& "bg-background text-foreground ring-1 ring-inset ring-border/45",
|
||||
)}
|
||||
>
|
||||
{preset.label}
|
||||
@@ -360,7 +360,7 @@ export function ChannelSetupSteps({
|
||||
<ol className="space-y-1.5">
|
||||
{steps.map((step, index) => (
|
||||
<li key={step} className="flex gap-2">
|
||||
<span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-background text-[10px] font-semibold text-muted-foreground shadow-sm">
|
||||
<span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span>{step}</span>
|
||||
|
||||
@@ -159,7 +159,7 @@ export function CredentialForm({
|
||||
<span
|
||||
role="radiogroup"
|
||||
aria-label={field.label}
|
||||
className="mt-1 grid rounded-[10px] bg-muted/75 p-0.5 text-[12px] font-medium text-muted-foreground shadow-[inset_0_0_0_1px_rgba(15,23,42,0.035)]"
|
||||
className="mt-1 grid rounded-[10px] bg-muted p-0.5 text-[12px] font-medium text-muted-foreground"
|
||||
style={{ gridTemplateColumns: `repeat(${field.options.length}, minmax(0, 1fr))` }}
|
||||
>
|
||||
{field.options.map((option) => (
|
||||
@@ -172,7 +172,7 @@ export function CredentialForm({
|
||||
className={cn(
|
||||
"min-h-8 rounded-[8px] px-2 py-1.5 transition-colors hover:text-foreground",
|
||||
selectedOption === option.value
|
||||
&& "bg-background text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.10),inset_0_0_0_1px_rgba(15,23,42,0.055)]",
|
||||
&& "bg-background text-foreground ring-1 ring-inset ring-border/45",
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
|
||||
Reference in New Issue
Block a user