add in scroll hint

This commit is contained in:
Beebles
2025-09-26 16:21:08 -06:00
parent ef27046143
commit 50cb08cce9
@@ -131,7 +131,7 @@ function Announcement({ announcement, onHide }: { announcement: Announcement; on
<AnnouncementModal <AnnouncementModal
announcement={announcement} announcement={announcement}
onHide={() => { onHide={() => {
console.log('On Hide'); onHide();
}} }}
/>, />,
) )
@@ -202,6 +202,7 @@ function AnnouncementModal({
</style> </style>
<Focusable style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', height: 'calc(100vh - 200px)' }}> <Focusable style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', height: 'calc(100vh - 200px)' }}>
<span style={{ fontWeight: 'bold', fontSize: '1.25rem' }}>{announcement.title}</span> <span style={{ fontWeight: 'bold', fontSize: '1.25rem' }}>{announcement.title}</span>
<span style={{ opacity: 0.5 }}>Use your finger to scroll</span>
<ScrollPanelGroup <ScrollPanelGroup
// @ts-ignore // @ts-ignore
focusable={false} focusable={false}
@@ -218,7 +219,6 @@ function AnnouncementModal({
<WithSuspense> <WithSuspense>
<MarkdownRenderer <MarkdownRenderer
onDismiss={() => { onDismiss={() => {
console.log('Dismiss');
closeModal?.(); closeModal?.();
}} }}
> >
@@ -227,8 +227,15 @@ function AnnouncementModal({
</WithSuspense> </WithSuspense>
</ScrollPanelGroup> </ScrollPanelGroup>
<Focusable style={{ display: 'flex', gap: '0.5rem' }}> <Focusable style={{ display: 'flex', gap: '0.5rem' }}>
<DialogButton onClick={() => onHide()}>Close Popup</DialogButton> <DialogButton onClick={() => closeModal?.()}>Close</DialogButton>
<DialogButton onClick={() => onHide()}>Close and Hide Announcement</DialogButton> <DialogButton
onClick={() => {
// onHide();
closeModal?.();
}}
>
Close and Hide Announcement
</DialogButton>
</Focusable> </Focusable>
</Focusable> </Focusable>
</ModalRoot> </ModalRoot>