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

fix(ui): style comment popovers - 14px radius, move label below, use text-weak for label, text-strong 14px for comment

Browse Source
This commit is contained in:
David Hill
2026-01-24 05:12:36 +00:00
parent c66da17364
commit af6bd9d3b1
4 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/app/src/pages/session.tsx
View File

@@ -2030,13 +2030,13 @@ export default function Page() {
<Icon name="comment" size="small" style={{ color: "var(--white)" }} /> <Icon name="comment" size="small" style={{ color: "var(--white)" }} />
</button> </button>
<Show when={openedComment() === comment.id}> <Show when={openedComment() === comment.id}>
<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-0 right-[calc(100%+12px)] z-40 min-w-[200px] max-w-[320px] rounded-[14px] bg-surface-raised-stronger-non-alpha border border-border-base p-3">
<div class="flex flex-col gap-1.5"> <div class="flex flex-col gap-1.5">
<div class="text-12-regular text-text-base whitespace-pre-wrap"> <div class="text-14-regular text-text-strong whitespace-pre-wrap">
{comment.comment} {comment.comment}
</div> </div>
<div class="text-12-medium text-text-strong whitespace-nowrap"> <div class="text-12-medium text-text-weak whitespace-nowrap">
{getFilename(comment.file)}:{commentLabel(comment.selection)} Comment on {commentLabel(comment.selection)}
</div> </div>
</div> </div>
</div> </div>

11
packages/ui/src/components/session-review.css
View File

@@ -82,10 +82,9 @@
z-index: 6; z-index: 6;
min-width: 200px; min-width: 200px;
max-width: min(320px, calc(100vw - 48px)); max-width: min(320px, calc(100vw - 48px));
border-radius: var(--radius-md); border-radius: 14px;
background-color: var(--surface-raised-stronger-non-alpha); background-color: var(--surface-raised-stronger-non-alpha);
border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent); border: 1px solid var(--border-base);
box-shadow: var(--shadow-md);
padding: 12px; padding: 12px;
} }
@@ -271,15 +270,15 @@
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: var(--text-strong); color: var(--text-weak);
} }
[data-slot="session-review-comment-hover-text"], [data-slot="session-review-comment-hover-text"],
[data-slot="session-review-comment-popover-text"] { [data-slot="session-review-comment-popover-text"] {
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-base);
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
color: var(--text-base); color: var(--text-strong);
white-space: pre-wrap; white-space: pre-wrap;
} }

2
packages/ui/src/components/session-review.tsx
View File

@@ -588,7 +588,7 @@ export const SessionReview = (props: SessionReviewProps) => {
<div data-slot="session-review-comment-popover"> <div data-slot="session-review-comment-popover">
<div data-slot="session-review-comment-popover-text">{comment.comment}</div> <div data-slot="session-review-comment-popover-text">{comment.comment}</div>
<div data-slot="session-review-comment-popover-label"> <div data-slot="session-review-comment-popover-label">
{getFilename(comment.file)}:{selectionLabel(comment.selection)} Comment on {selectionLabel(comment.selection)}
</div> </div>
</div> </div>
</div> </div>

1
packages/ui/src/styles/tailwind/index.css
View File

@@ -66,6 +66,7 @@
--shadow-xs-border-select: var(--shadow-xs-border-select); --shadow-xs-border-select: var(--shadow-xs-border-select);
--shadow-xs-border-focus: var(--shadow-xs-border-focus); --shadow-xs-border-focus: var(--shadow-xs-border-focus);
--shadow-xs-border-hover: var(--shadow-xs-border-hover); --shadow-xs-border-hover: var(--shadow-xs-border-hover);
--shadow-lg-border-base: var(--shadow-lg-border-base);
--animate-pulse: var(--animate-pulse); --animate-pulse: var(--animate-pulse);
} }