scriptoriumadmin/claude-prism
1
0
Fork 0
mirror of https://github.com/delibae/claude-prism.git synced 2026-08-28 05:14:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: update ChatComposer component styles for improved UI consistency

Browse source
This commit is contained in:
Gerard-Devlin 2026-06-23 09:45:37 +08:00
parent 8785f4ea49
commit ad4500935d
1 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
apps/desktop/src/components/claude-chat/chat-composer.tsx
View file

@ -1353,7 +1353,7 @@ export const ChatComposer: FC<{ isOpen?: boolean }> = ({ isOpen }) => {
createPortal( createPortal(
<div <div
ref={modelPickerRef} ref={modelPickerRef}
className="fixed w-[28rem] max-w-[calc(100vw-1rem)] rounded-lg border border-border bg-background shadow-lg" className="fixed w-[28rem] max-w-[calc(100vw-1rem)] overflow-hidden rounded-xl border border-border bg-popover/95 p-1.5 text-popover-foreground shadow-lg backdrop-blur-sm"
style={{ style={{
left: pickerPos.left, left: pickerPos.left,
bottom: pickerPos.bottom, bottom: pickerPos.bottom,
@ -1361,14 +1361,14 @@ export const ChatComposer: FC<{ isOpen?: boolean }> = ({ isOpen }) => {
}} }}
> >
<div className="grid grid-cols-[minmax(0,11.5rem)_minmax(0,1fr)]"> <div className="grid grid-cols-[minmax(0,11.5rem)_minmax(0,1fr)]">
<div className="max-h-80 overflow-y-auto border-border border-r p-1"> <div className="max-h-80 overflow-y-auto border-border border-r pr-1">
<div className="px-2 py-1 font-medium text-muted-foreground text-xs"> <div className="px-2 py-1 font-medium text-muted-foreground text-xs">
Provider Provider
</div> </div>
{showClaudeProvider && ( {showClaudeProvider && (
<button <button
className={cn( className={cn(
"flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm transition-colors", "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors",
claudeProviderActive claudeProviderActive
? "bg-accent text-accent-foreground" ? "bg-accent text-accent-foreground"
: "hover:bg-muted", : "hover:bg-muted",
@ -1428,7 +1428,7 @@ export const ChatComposer: FC<{ isOpen?: boolean }> = ({ isOpen }) => {
role="button" role="button"
tabIndex={0} tabIndex={0}
className={cn( className={cn(
"group/provider flex w-full cursor-pointer items-center gap-2 rounded-md py-1.5 pr-1 pl-3 text-left text-sm transition-colors", "group/provider flex w-full cursor-pointer items-center gap-2 rounded-lg py-2 pr-1 pl-3 text-left text-sm transition-colors",
active active
? "bg-accent text-accent-foreground" ? "bg-accent text-accent-foreground"
: "hover:bg-muted", : "hover:bg-muted",
@ -1463,7 +1463,7 @@ export const ChatComposer: FC<{ isOpen?: boolean }> = ({ isOpen }) => {
{active && <CheckIcon className="size-3 shrink-0" />} {active && <CheckIcon className="size-3 shrink-0" />}
<button <button
type="button" type="button"
className="flex size-6 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" className="flex size-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
aria-label={`Delete ${displayName}`} aria-label={`Delete ${displayName}`}
title="Delete provider" title="Delete provider"
disabled={!!deletingProviderId} disabled={!!deletingProviderId}
@ -1485,7 +1485,7 @@ export const ChatComposer: FC<{ isOpen?: boolean }> = ({ isOpen }) => {
); );
})} })}
<button <button
className="mt-1 flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground" className="mt-1 flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground"
onClick={() => { onClick={() => {
setModelPickerOpen(false); setModelPickerOpen(false);
setProviderSetupOpen(true); setProviderSetupOpen(true);
@ -1501,10 +1501,10 @@ export const ChatComposer: FC<{ isOpen?: boolean }> = ({ isOpen }) => {
</button> </button>
</div> </div>
<div className="flex max-h-80 min-w-0 flex-col"> <div className="flex max-h-80 min-w-0 flex-col pl-1">
<div <div
ref={providerModelListRef} ref={providerModelListRef}
className="min-h-0 flex-1 overflow-y-auto p-1" className="min-h-0 flex-1 overflow-y-auto"
> >
<div className="px-2 py-1 font-medium text-muted-foreground text-xs"> <div className="px-2 py-1 font-medium text-muted-foreground text-xs">
Model Model
@ -1514,7 +1514,7 @@ export const ChatComposer: FC<{ isOpen?: boolean }> = ({ isOpen }) => {
<button <button
key={m.id} key={m.id}
className={cn( className={cn(
"flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm transition-colors", "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors",
selectedModel === m.id selectedModel === m.id
? "bg-accent text-accent-foreground" ? "bg-accent text-accent-foreground"
: "hover:bg-muted", : "hover:bg-muted",
@ -1551,7 +1551,7 @@ export const ChatComposer: FC<{ isOpen?: boolean }> = ({ isOpen }) => {
} }
}} }}
className={cn( className={cn(
"flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm transition-colors", "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors",
directProviderModel === modelId directProviderModel === modelId
? "bg-accent text-accent-foreground" ? "bg-accent text-accent-foreground"
: "hover:bg-muted", : "hover:bg-muted",