diff options
| author | David Hill <[email protected]> | 2026-01-23 19:47:44 +0000 |
|---|---|---|
| committer | David Hill <[email protected]> | 2026-01-24 06:18:54 +0000 |
| commit | ae84e9909a3318aa840c98c5720b1cd75fbe79df (patch) | |
| tree | 041b821da92782ac78d964c0ddc1e8c07d6c00a2 /packages/app/src | |
| parent | b978ca11da89209900931ca0c31fd9e769b98f78 (diff) | |
| download | opencode-ae84e9909a3318aa840c98c5720b1cd75fbe79df.tar.gz opencode-ae84e9909a3318aa840c98c5720b1cd75fbe79df.zip | |
fix(app): improve comment popup styling and add new comment icon
Diffstat (limited to 'packages/app/src')
| -rw-r--r-- | packages/app/src/pages/session.tsx | 23 |
1 files changed, 14 insertions, 9 deletions
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx index 2df35856e..b41afb18c 100644 --- a/packages/app/src/pages/session.tsx +++ b/packages/app/src/pages/session.tsx @@ -2047,21 +2047,22 @@ export default function Page() { <div class="absolute right-6 z-30" style={{ top: `${draftTop() ?? 0}px` }}> <button type="button" - class="size-5 rounded-md flex items-center justify-center bg-surface-warning-base border border-border-warning-base text-icon-warning-active shadow-xs hover:bg-surface-warning-weak hover:border-border-warning-hover focus:outline-none focus-visible:shadow-xs-border-focus" + class="size-5 rounded-md flex items-center justify-center shadow-xs focus:outline-none focus-visible:shadow-xs-border-focus" + style={{ + background: "var(--icon-interactive-base)", + color: "var(--white)", + }} onClick={() => textarea?.focus()} > - <Icon name="speech-bubble" size="small" /> + <Icon name="comment" size="small" style={{ color: "var(--white)" }} /> </button> - <div class="absolute top-0 right-[calc(100%+12px)] z-40 min-w-[200px] max-w-[320px] rounded-md bg-surface-raised-stronger-non-alpha border border-border-base shadow-md p-3"> + <div class="absolute top-[calc(100%+4px)] right-[-8px] z-40 w-[380px] rounded-[14px] bg-surface-raised-stronger-non-alpha border border-border-base shadow-lg-border-base p-2"> <div class="flex flex-col gap-2"> - <div class="text-12-medium text-text-strong"> - Commenting on {getFilename(path() ?? "")}:{commentLabel(range())} - </div> <textarea ref={textarea} - class="w-[320px] max-w-[calc(100vw-48px)] resize-vertical p-2 rounded-sm bg-surface-base border border-border-base text-text-strong text-12-regular leading-5 focus:outline-none focus:shadow-xs-border-focus" + class="w-full resize-vertical p-2 rounded-[6px] bg-surface-base border border-border-base text-text-strong text-12-regular leading-5 focus:outline-none focus:shadow-xs-border-select" rows={3} - placeholder="Add a comment" + placeholder="Add comment" value={draft()} onInput={(e) => setDraft(e.currentTarget.value)} onKeyDown={(e) => { @@ -2076,7 +2077,11 @@ export default function Page() { setCommenting(null) }} /> - <div class="flex justify-end gap-2"> + <div class="flex items-center gap-2"> + <div class="text-12-medium text-text-weak ml-2"> + Commenting on {commentLabel(range())} + </div> + <div class="flex-1" /> <Button size="small" variant="ghost" onClick={() => setCommenting(null)}> Cancel </Button> |