diff options
| -rw-r--r-- | frontend/src/components/AnnouncementsDisplay.tsx | 106 |
1 files changed, 54 insertions, 52 deletions
diff --git a/frontend/src/components/AnnouncementsDisplay.tsx b/frontend/src/components/AnnouncementsDisplay.tsx index e382f7a6..226f63d8 100644 --- a/frontend/src/components/AnnouncementsDisplay.tsx +++ b/frontend/src/components/AnnouncementsDisplay.tsx @@ -82,13 +82,15 @@ export function AnnouncementsDisplay() { return ( <PanelSection> - {currentlyDisplayingAnnouncements.map((announcement) => ( - <Announcement - key={announcement.id} - announcement={announcement} - onHide={() => hideAnnouncement(announcement.id)} - /> - ))} + <Focusable style={{display: "flex", flexDirection: "column", gap: "0.5rem"}}> + {currentlyDisplayingAnnouncements.map((announcement) => ( + <Announcement + key={announcement.id} + announcement={announcement} + onHide={() => hideAnnouncement(announcement.id)} + /> + ))} + </Focusable> </PanelSection> ); } @@ -107,58 +109,58 @@ function Announcement({ announcement, onHide }: { announcement: Announcement; on borderStyle: 'solid', padding: '0.7rem', display: 'flex', - flexDirection: 'column', - position: 'relative', + alignItems: "center", + justifyContent: "space-between" }} > - <div style={{ display: 'flex', justifyContent: 'space-between' }}> <span style={{ fontWeight: 'bold' }}>{announcement.title}</span> - <DialogButton - style={{ - 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 + <Focusable style={{display: "flex", alignItems: "center", gap: "0.5rem"}}> + <DialogButton style={{ - height: '.75rem', + width: '1rem', + minWidth: '1rem', + height: '1rem', + padding: '0', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', }} - /> - </DialogButton> - <DialogButton - style={{ - width: '1rem', - minWidth: '1rem', - height: '1rem', - padding: '0', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }} - onClick={() => onHide()} - > - <FaTimes + onClick={() => + showModal( + <AnnouncementModal + announcement={announcement} + onHide={() => { + console.log('On Hide'); + }} + />, + ) + } + > + <FaInfo + style={{ + height: '.75rem', + }} + /> + </DialogButton> + <DialogButton style={{ - height: '.75rem', + width: '1rem', + minWidth: '1rem', + height: '1rem', + padding: '0', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', }} - /> - </DialogButton> - </div> + onClick={() => onHide()} + > + <FaTimes + style={{ + height: '.75rem', + }} + /> + </DialogButton> + </Focusable> </Focusable> ); } |