|
|
@@ -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>
|
David Hill