fix styling issues

This commit is contained in:
Beebles
2025-09-26 15:34:37 -06:00
parent 9b38abd13f
commit 7fff611d55
@@ -82,13 +82,15 @@ export function AnnouncementsDisplay() {
return ( return (
<PanelSection> <PanelSection>
{currentlyDisplayingAnnouncements.map((announcement) => ( <Focusable style={{display: "flex", flexDirection: "column", gap: "0.5rem"}}>
<Announcement {currentlyDisplayingAnnouncements.map((announcement) => (
key={announcement.id} <Announcement
announcement={announcement} key={announcement.id}
onHide={() => hideAnnouncement(announcement.id)} announcement={announcement}
/> onHide={() => hideAnnouncement(announcement.id)}
))} />
))}
</Focusable>
</PanelSection> </PanelSection>
); );
} }
@@ -107,58 +109,58 @@ function Announcement({ announcement, onHide }: { announcement: Announcement; on
borderStyle: 'solid', borderStyle: 'solid',
padding: '0.7rem', padding: '0.7rem',
display: 'flex', display: 'flex',
flexDirection: 'column', alignItems: "center",
position: 'relative', justifyContent: "space-between"
}} }}
> >
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span style={{ fontWeight: 'bold' }}>{announcement.title}</span> <span style={{ fontWeight: 'bold' }}>{announcement.title}</span>
<DialogButton <Focusable style={{display: "flex", alignItems: "center", gap: "0.5rem"}}>
style={{ <DialogButton
width: '1rem',
minWidth: '1rem',
height: '1rem',
padding: '0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
onClick={() =>
showModal(
<AnnouncementModal
announcement={announcement}
onHide={() => {
console.log('On Hide');
}}
/>,
)
}
>
<FaInfo
style={{ style={{
height: '.75rem', width: '1rem',
minWidth: '1rem',
height: '1rem',
padding: '0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}} }}
/> onClick={() =>
</DialogButton> showModal(
<DialogButton <AnnouncementModal
style={{ announcement={announcement}
width: '1rem', onHide={() => {
minWidth: '1rem', console.log('On Hide');
height: '1rem', }}
padding: '0', />,
display: 'flex', )
alignItems: 'center', }
justifyContent: 'center', >
}} <FaInfo
onClick={() => onHide()} style={{
> height: '.75rem',
<FaTimes }}
/>
</DialogButton>
<DialogButton
style={{ style={{
height: '.75rem', width: '1rem',
minWidth: '1rem',
height: '1rem',
padding: '0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}} }}
/> onClick={() => onHide()}
</DialogButton> >
</div> <FaTimes
style={{
height: '.75rem',
}}
/>
</DialogButton>
</Focusable>
</Focusable> </Focusable>
); );
} }