monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(app): update prompt input styling - 14px border radius, card hover states, and 8px padding

Browse Source
This commit is contained in:
David Hill
2026-01-23 20:30:28 +00:00
parent 328bd3fb02
commit 56ece04dd5
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/app/src/components/prompt-input.tsx
View File

@@ -1661,7 +1661,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
classList={{ classList={{
"group/prompt-input": true, "group/prompt-input": true,
"bg-surface-raised-stronger-non-alpha shadow-xs-border relative": true, "bg-surface-raised-stronger-non-alpha shadow-xs-border relative": true,
"rounded-md overflow-clip focus-within:shadow-xs-border": true, "rounded-[14px] overflow-clip focus-within:shadow-xs-border": true,
"border-icon-info-active border-dashed": store.dragging, "border-icon-info-active border-dashed": store.dragging,
[props.class ?? ""]: !!props.class, [props.class ?? ""]: !!props.class,
}} }}
@@ -1681,8 +1681,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
return ( return (
<div <div
classList={{ classList={{
"shrink-0 flex flex-col gap-1 rounded-[6px] bg-surface-base border border-border-base px-2 py-1 max-w-[320px]": true, "group shrink-0 flex flex-col gap-1 rounded-[6px] bg-background-stronger border border-border-base pl-2 pr-1 py-1 max-w-[320px]": true,
"cursor-pointer hover:bg-surface-raised-base-hover": !!item.commentID, "cursor-pointer hover:bg-surface-interactive-weak": !!item.commentID,
}} }}
onClick={() => { onClick={() => {
if (!item.commentID) return if (!item.commentID) return
@@ -1710,7 +1710,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
type="button" type="button"
icon="close" icon="close"
variant="ghost" variant="ghost"
class="h-5 w-5" class="h-5 w-5 opacity-0 group-hover:opacity-100"
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
if (item.commentID) comments.remove(item.path, item.commentID) if (item.commentID) comments.remove(item.path, item.commentID)
@@ -1788,14 +1788,14 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
classList={{ classList={{
"select-text": true, "select-text": true,
"w-full px-5 py-3 pr-12 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true, "w-full px-2 py-3 pr-12 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
"[&_[data-type=file]]:text-syntax-property": true, "[&_[data-type=file]]:text-syntax-property": true,
"[&_[data-type=agent]]:text-syntax-type": true, "[&_[data-type=agent]]:text-syntax-type": true,
"font-mono!": store.mode === "shell", "font-mono!": store.mode === "shell",
}} }}
/> />
<Show when={!prompt.dirty()}> <Show when={!prompt.dirty()}>
<div class="absolute top-0 inset-x-0 px-5 py-3 pr-12 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate"> <div class="absolute top-0 inset-x-0 px-2 py-3 pr-12 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate">
{store.mode === "shell" {store.mode === "shell"
? language.t("prompt.placeholder.shell") ? language.t("prompt.placeholder.shell")
: language.t("prompt.placeholder.normal", { example: language.t(EXAMPLES[store.placeholder]) })} : language.t("prompt.placeholder.normal", { example: language.t(EXAMPLES[store.placeholder]) })}