diff options
Diffstat (limited to 'packages/app/src/components/dialog-release-notes.tsx')
| -rw-r--r-- | packages/app/src/components/dialog-release-notes.tsx | 134 |
1 files changed, 70 insertions, 64 deletions
diff --git a/packages/app/src/components/dialog-release-notes.tsx b/packages/app/src/components/dialog-release-notes.tsx index d3ee7e201..c6f2f3930 100644 --- a/packages/app/src/components/dialog-release-notes.tsx +++ b/packages/app/src/components/dialog-release-notes.tsx @@ -73,80 +73,86 @@ export function DialogReleaseNotes(props: { highlights: Highlight[] }) { }) return ( - <Dialog class="dialog-release-notes"> + <Dialog + size="large" + fit + class="w-[min(calc(100vw-40px),720px)] h-[min(calc(100vh-40px),400px)] -mt-20 min-h-0 overflow-hidden" + > {/* Hidden element to capture initial focus and handle escape */} <div ref={focusTrap} tabindex="0" class="absolute opacity-0 pointer-events-none" /> - {/* Left side - Text content */} - <div class="flex flex-col flex-1 min-w-0 p-8"> - {/* Top section - feature content (fixed position from top) */} - <div class="flex flex-col gap-2 pt-22"> - <div class="flex items-center gap-2"> - <h1 class="text-16-medium text-text-strong">{feature()?.title ?? ""}</h1> + <div class="flex flex-1 min-w-0 min-h-0"> + {/* Left side - Text content */} + <div class="flex flex-col flex-1 min-w-0 p-8"> + {/* Top section - feature content (fixed position from top) */} + <div class="flex flex-col gap-2 pt-22"> + <div class="flex items-center gap-2"> + <h1 class="text-16-medium text-text-strong">{feature()?.title ?? ""}</h1> + </div> + <p class="text-14-regular text-text-base">{feature()?.description ?? ""}</p> </div> - <p class="text-14-regular text-text-base">{feature()?.description ?? ""}</p> - </div> - - {/* Spacer to push buttons to bottom */} - <div class="flex-1" /> - {/* Bottom section - buttons and indicators (fixed position) */} - <div class="flex flex-col gap-12"> - <div class="flex flex-col items-start gap-3"> - {isLast() ? ( - <Button variant="primary" size="large" onClick={handleClose}> - Get started - </Button> - ) : ( - <Button variant="secondary" size="large" onClick={handleNext}> - Next + {/* Spacer to push buttons to bottom */} + <div class="flex-1" /> + + {/* Bottom section - buttons and indicators (fixed position) */} + <div class="flex flex-col gap-12"> + <div class="flex flex-col items-start gap-3"> + {isLast() ? ( + <Button variant="primary" size="large" onClick={handleClose}> + Get started + </Button> + ) : ( + <Button variant="secondary" size="large" onClick={handleNext}> + Next + </Button> + )} + + <Button variant="ghost" size="small" onClick={handleDisable}> + Don't show these in the future </Button> - )} - - <Button variant="ghost" size="small" onClick={handleDisable}> - Don't show these in the future - </Button> - </div> + </div> - {paged() && ( - <div class="flex items-center gap-1.5 -my-2.5"> - {props.highlights.map((_, i) => ( - <button - type="button" - class="h-6 flex items-center cursor-pointer bg-transparent border-none p-0 transition-all duration-200" - classList={{ - "w-8": i === index(), - "w-3": i !== index(), - }} - onClick={() => setIndex(i)} - > - <div - class="w-full h-0.5 rounded-[1px] transition-colors duration-200" + {paged() && ( + <div class="flex items-center gap-1.5 -my-2.5"> + {props.highlights.map((_, i) => ( + <button + type="button" + class="h-6 flex items-center cursor-pointer bg-transparent border-none p-0 transition-all duration-200" classList={{ - "bg-icon-strong-base": i === index(), - "bg-icon-weak-base": i !== index(), + "w-8": i === index(), + "w-3": i !== index(), }} - /> - </button> - ))} - </div> - )} + onClick={() => setIndex(i)} + > + <div + class="w-full h-0.5 rounded-[1px] transition-colors duration-200" + classList={{ + "bg-icon-strong-base": i === index(), + "bg-icon-weak-base": i !== index(), + }} + /> + </button> + ))} + </div> + )} + </div> </div> - </div> - {/* Right side - Media content (edge to edge) */} - {feature()?.media && ( - <div class="flex-1 min-w-0 bg-surface-base overflow-hidden rounded-r-xl"> - {feature()!.media!.type === "image" ? ( - <img - src={feature()!.media!.src} - alt={feature()!.media!.alt ?? feature()?.title ?? "Release preview"} - class="w-full h-full object-cover" - /> - ) : ( - <video src={feature()!.media!.src} autoplay loop muted playsinline class="w-full h-full object-cover" /> - )} - </div> - )} + {/* Right side - Media content (edge to edge) */} + {feature()?.media && ( + <div class="flex-1 min-w-0 bg-surface-base overflow-hidden rounded-r-xl"> + {feature()!.media!.type === "image" ? ( + <img + src={feature()!.media!.src} + alt={feature()!.media!.alt ?? feature()?.title ?? "Release preview"} + class="w-full h-full object-cover" + /> + ) : ( + <video src={feature()!.media!.src} autoplay loop muted playsinline class="w-full h-full object-cover" /> + )} + </div> + )} + </div> </Dialog> ) } |