From fb57e757c9b38bb899962c6aed18caca5f629442 Mon Sep 17 00:00:00 2001 From: Mimi Flynn <414934+mimiflynn@users.noreply.github.com> Date: Fri, 1 Nov 2024 15:14:02 -0400 Subject: [PATCH 1/4] refactor to separate components and utils --- .gitignore | 3 +- index.html | 2 +- src/App.css | 56 ++++---- src/App.jsx | 280 ++---------------------------------- src/components/Calendar.jsx | 235 ++++++++++++++++++++++++++++++ src/components/Header.jsx | 9 ++ src/hooks/useEscKey.jsx | 1 - src/utils/date-time.js | 24 ++++ src/utils/ics-download.js | 10 ++ src/utils/regex.js | 3 + src/utils/url-to-link.js | 21 +++ 11 files changed, 342 insertions(+), 302 deletions(-) create mode 100644 src/components/Calendar.jsx create mode 100644 src/components/Header.jsx create mode 100644 src/utils/date-time.js create mode 100644 src/utils/ics-download.js create mode 100644 src/utils/regex.js create mode 100644 src/utils/url-to-link.js diff --git a/.gitignore b/.gitignore index 4321d6565b7..d4f64077af2 100644 --- a/.gitignore +++ b/.gitignore @@ -12,7 +12,9 @@ /build /dist +# Local Dev /public/basic.ics +/public/events.json # misc .DS_Store @@ -27,4 +29,3 @@ yarn-error.log* # secrets calendar-service-account.json - diff --git a/index.html b/index.html index 3b7f6e66423..83d78d21e67 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - FINOS Calendar + FINOS Event Calendar diff --git a/src/App.css b/src/App.css index 9f5dcf8b516..d808ae30fe9 100644 --- a/src/App.css +++ b/src/App.css @@ -1,9 +1,9 @@ -body{ +body { padding: 0; margin: 0; } -#root{ +#root { min-width: fit-content; width: 100%; min-height: 100vh; @@ -13,13 +13,13 @@ body{ position: relative; } -.finos-calendar{ +.finos-calendar { max-width: 1280px; margin: 0 auto; padding: 2rem; } -.active-event{ +.active-event { background-color: #2c3e5065; } @@ -36,8 +36,8 @@ body{ word-break: break-word; } -.event-details-buttons{ - display:flex; +.event-details-buttons { + display: flex; justify-content: space-between; align-items: flex-end; padding: 8px 0; @@ -50,39 +50,39 @@ button.fc-button.finos-calendar-event-details-close { border: none; font-size: 1.5rem; cursor: pointer; - display:grid; + display: grid; place-content: center; padding: 6px; } -button.fc-button.finos-calendar-event-details-close img{ +button.fc-button.finos-calendar-event-details-close img { width: 25px; } -.event-title{ +.event-title { margin-bottom: 8px; } -.event-time{ +.event-time { font-size: 14px; margin-bottom: 6px; - display:flex; + display: flex; gap: 5px; } -.event-timeZone{ +.event-timeZone { font-size: 14px; margin-bottom: 6px; display: flex; gap: 5px; } -.event-location{ - display:flex; +.event-location { + display: flex; gap: 5px; } -.icon{ +.icon { padding-top: 3px; } @@ -109,19 +109,18 @@ button.fc-button.finos-calendar-event-details-close img{ } @media only screen and (max-width: 1000px) { - .finos-calendar { min-width: 600px; } .fc-daygrid-day-events { - font-size: .5em; + font-size: 0.5em; } .fc-daygrid-day-top { max-height: 1.3em; - font-size: .75em; - margin: 0em 0em .5em 0em + font-size: 0.75em; + margin: 0em 0em 0.5em 0em; } .fc-popover { @@ -135,8 +134,8 @@ button.fc-button.finos-calendar-event-details-close img{ } } -@media only screen and (max-width: 600px){ - .finos-calendar-event-details{ +@media only screen and (max-width: 600px) { + .finos-calendar-event-details { width: 90%; height: 100%; top: 0; @@ -144,22 +143,25 @@ button.fc-button.finos-calendar-event-details-close img{ } } -@media only screen and (prefers-color-scheme : dark){ - #root, .main, .finos-calendar, .finos-calendar-event-details, .event-details-buttons{ +@media only screen and (prefers-color-scheme: dark) { + body, + .finos-calendar, + .finos-calendar-event-details, + .event-details-buttons { background-color: #222; color: #eee; } - .fc-event:hover{ + .fc-event:hover { background-color: #3c3c3c; } - .active-event{ + .active-event { background-color: #eeeeee20; } - .fc-theme-standard .fc-popover{ + .fc-theme-standard .fc-popover { background-color: #222; color: #eee; } - .finos-calendar-event-details a{ + .finos-calendar-event-details a { color: #343; } } diff --git a/src/App.jsx b/src/App.jsx index c5bdd8fe837..cce4eaf60b8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,280 +1,16 @@ -import dayGridPlugin from '@fullcalendar/daygrid'; -import iCalendarPlugin from '@fullcalendar/icalendar'; -import interactionPlugin from '@fullcalendar/interaction'; -import FullCalendar from '@fullcalendar/react'; -import rrulePlugin from '@fullcalendar/rrule'; -import timeGridPlugin from '@fullcalendar/timegrid'; - -import { mdiCalendarRange, mdiClock, mdiClose, mdiMapMarkerOutline } from '@mdi/js'; -import Icon from '@mdi/react'; -import parse from 'html-react-parser'; -import { createRef, useCallback, useEffect, useMemo, useState } from 'react'; -import useEscKey from './hooks/useEscKey'; import './App.css'; - -const htmlRegex = /<\/*html-blob>/; +import Calendar from './components/Calendar'; +import Header from './components/Header'; function App() { - const calendarRef = createRef(); - const eventDetailRef = createRef(); - - const [loading, setLoading] = useState(true); - const [clickedEvent, setClickedEvent] = useState([]); - const [showEventDetails, setShowEventDetails] = useState(false); - const [eventDetails, setEventDetails] = useState(false); - const [aspectRatio, setAspectRatio] = useState( - window.outerWidth > window.innerHeight - ? 1.35 - : window.innerWidth / window.innerHeight - ); - const [initialView, setInitialView] = useState( - window.outerWidth > 600 ? 'dayGridMonth' : 'timeGridWeek' - ); - - useEscKey(() => setShowEventDetails(false)); - - const [popupPosition, setPopupPosition] = useState({}); - - const windowResize = () => { - setAspectRatio( - window.outerWidth > window.innerHeight - ? 1.35 - : window.innerWidth / window.innerHeight - ); - setInitialView(window.outerWidth > 600 ? 'dayGridMonth' : 'timeGridWeek'); - setShowEventDetails(false); - window.outerWidth < 600 && setPopupPosition({ left: 0, top: 0 }); - }; - - const createPopupPosition = (event) => { - const popup = { width: 330, height: 450 }; - let position = { top: event.pageY + 20, left: event.pageX + 50 }; - if ( - event.pageX + popup.width + 140 > window.outerWidth || - event.pageY + popup.height + 20 > document.body.scrollHeight - ) { - if (event.pageX + popup.width + 140 > window.outerWidth) { - position.left = event.pageX - popup.width - 50; - if (position.left < 0) position.left = position.left * -1; - } - if (event.pageY + popup.height + 20 > document.body.scrollHeight) { - position.top = event.pageY - popup.height - 70; - if (position.top < 0) position.top = position.top * -1; - } - } - setPopupPosition({ left: position.left + 'px', top: position.top + 'px' }); - }; - - const handleEventClick = useCallback( - (clickInfo) => { - window.outerWidth > 600 && createPopupPosition(clickInfo.jsEvent); - setEventDetails(clickInfo.event); - setShowEventDetails(true); - if (clickedEvent.length) { - clickedEvent[0].classList.remove('active-event'); - setClickedEvent([]); - } - const event = clickInfo.jsEvent.target.closest('a.fc-event'); - event.classList.add('active-event'); - setClickedEvent([event]); - }, - [clickedEvent] - ); - - useEffect(() => { - const closeOnOutsideClick = (e) => { - if (e.target.closest('.fc-event') || eventDetailRef.current == null) - return; - if (showEventDetails && !eventDetailRef.current.contains(e.target)) - setShowEventDetails(false); - }; - - document.body.addEventListener('click', closeOnOutsideClick); - return () => document.removeEventListener('click', closeOnOutsideClick); - }, [eventDetailRef, showEventDetails]); - - function downloadICSFile() { - const file = new Blob([eventDetails.extendedProps.ics], { - type: 'text/calendar', - }); - const element = document.createElement('a'); - element.href = URL.createObjectURL(file); - element.download = 'finos-event.ics'; - document.body.appendChild(element); - element.click(); - } - - const dateOptions = { - weekday: 'long', - year: 'numeric', - month: 'long', - day: 'numeric', - }; - const timeOptions = { - hour: '2-digit', - minute: '2-digit', - }; - function printDate(date) { - if (date) { - return date.toLocaleDateString(undefined, dateOptions); - } else return 'NONE'; - } - - function printTime(date) { - if (date) { - const str = date.toLocaleDateString(undefined, timeOptions); - return str.split(',')[1].trim(); - } else return 'NONE'; - } - - const renderEventDetails = () => { - let description = eventDetails.extendedProps.description - ? eventDetails.extendedProps.description.replace(htmlRegex, '') - : 'No description'; - const eventLocation = eventDetails.extendedProps.location; - const fromDate = printDate(eventDetails.start); - const toDate = printDate(eventDetails.end); - const fromTime = printTime(eventDetails.start); - const toTime = printTime(eventDetails.end); - const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; - let eventTime = ''; - if (fromDate == toDate) { - eventTime = fromDate + ' ' + fromTime + ' - ' + toTime; - } else { - eventTime = - From: + - fromDate + - ' - ' + - toDate + -
+ - To: + - fromTime + - ' ' + - toTime; - } - - // let seriesICS = ''; - // if (eventDetails.extendedProps.rootIcsLink != null) { - // seriesICS = ( - // Series ICS - // ); - // } - - const extractUrls = (text) => { - const urlPattern = /(? { - const urlPattern = /]*?\s+)?href="([^"]*)"[^>]*>.*?<\/a>/g; - return text.match(urlPattern) || []; - }; - - function replaceUrlsWithAnchorTags(inputText) { - const urls = extractUrls(inputText); - const outputText = urls.reduce((text, url) => { - const anchorTag = `${url}`; - const isAlreadyAnchorTagged = new RegExp( - `]*href\\s*=\\s*['"]?${url}['"]?[^>]*>.*?<\\/a>` - ).test(text); - return isAlreadyAnchorTagged ? text : text.replace(url, anchorTag); - }, inputText); - return outputText; - } - let formattedDescription = description; - if (description) { - if (extractUrls(description).length > extractAnchors(description).length) - formattedDescription = replaceUrlsWithAnchorTags(description); - } - - return ( -
-
- - -
- - {/*
{seriesICS}
*/} -

{eventDetails.title}

-
-
- -
-
{eventTime}
-
-
-
- -
-
Time Zone: {timeZone}
-
- {eventLocation && ( -
-
- -
-
{eventLocation}
-
- )} -
- {parse(formattedDescription)} -
- ); - }; - - const renderFullCalendar = useMemo( - () => ( - setLoading(isLoading)} - /> - ), - [aspectRatio, initialView, calendarRef, handleEventClick] - ); - return (
-
- {renderFullCalendar} -
- {showEventDetails && renderEventDetails()} - {loading &&
} - {loading &&
Loading...
} +
+
+
+
+ +
); } diff --git a/src/components/Calendar.jsx b/src/components/Calendar.jsx new file mode 100644 index 00000000000..fc5212cefe2 --- /dev/null +++ b/src/components/Calendar.jsx @@ -0,0 +1,235 @@ +import dayGridPlugin from '@fullcalendar/daygrid'; +import iCalendarPlugin from '@fullcalendar/icalendar'; +import interactionPlugin from '@fullcalendar/interaction'; +import FullCalendar from '@fullcalendar/react'; +import rrulePlugin from '@fullcalendar/rrule'; +import timeGridPlugin from '@fullcalendar/timegrid'; + +import { + mdiCalendarRange, + mdiClock, + mdiClose, + mdiMapMarkerOutline, +} from '@mdi/js'; +import Icon from '@mdi/react'; +import parse from 'html-react-parser'; +import { createRef, useCallback, useEffect, useMemo, useState } from 'react'; + +import useEscKey from '../hooks/useEscKey'; +import { printDate, printTime } from '../utils/date-time'; +import { downloadICSFile } from '../utils/ics-download'; +import { htmlRegex } from '../utils/regex'; +import { + extractAnchors, + extractUrls, + replaceUrlsWithAnchorTags, +} from '../utils/url-to-link'; + +function Calendar() { + const calendarRef = createRef(); + const eventDetailRef = createRef(); + + const [loading, setLoading] = useState(true); + const [clickedEvent, setClickedEvent] = useState([]); + const [showEventDetails, setShowEventDetails] = useState(false); + const [eventDetails, setEventDetails] = useState(false); + const [aspectRatio, setAspectRatio] = useState( + window.outerWidth > window.innerHeight + ? 1.35 + : window.innerWidth / window.innerHeight + ); + const [initialView, setInitialView] = useState( + window.outerWidth > 600 ? 'dayGridMonth' : 'timeGridWeek' + ); + + useEscKey(() => setShowEventDetails(false)); + + const [popupPosition, setPopupPosition] = useState({}); + + const windowResize = () => { + setAspectRatio( + window.outerWidth > window.innerHeight + ? 1.35 + : window.innerWidth / window.innerHeight + ); + setInitialView(window.outerWidth > 600 ? 'dayGridMonth' : 'timeGridWeek'); + setShowEventDetails(false); + window.outerWidth < 600 && setPopupPosition({ left: 0, top: 0 }); + }; + + const createPopupPosition = (event) => { + const popup = { width: 330, height: 450 }; + let position = { top: event.pageY + 20, left: event.pageX + 50 }; + if ( + event.pageX + popup.width + 140 > window.outerWidth || + event.pageY + popup.height + 20 > document.body.scrollHeight + ) { + if (event.pageX + popup.width + 140 > window.outerWidth) { + position.left = event.pageX - popup.width - 50; + if (position.left < 0) position.left = position.left * -1; + } + if (event.pageY + popup.height + 20 > document.body.scrollHeight) { + position.top = event.pageY - popup.height - 70; + if (position.top < 0) position.top = position.top * -1; + } + } + setPopupPosition({ left: position.left + 'px', top: position.top + 'px' }); + }; + + const handleEventClick = useCallback( + (clickInfo) => { + window.outerWidth > 600 && createPopupPosition(clickInfo.jsEvent); + setEventDetails(clickInfo.event); + setShowEventDetails(true); + if (clickedEvent.length) { + clickedEvent[0].classList.remove('active-event'); + setClickedEvent([]); + } + const event = clickInfo.jsEvent.target.closest('a.fc-event'); + event.classList.add('active-event'); + setClickedEvent([event]); + }, + [clickedEvent] + ); + + useEffect(() => { + const closeOnOutsideClick = (e) => { + if (e.target.closest('.fc-event') || eventDetailRef.current == null) + return; + if (showEventDetails && !eventDetailRef.current.contains(e.target)) + setShowEventDetails(false); + }; + + document.body.addEventListener('click', closeOnOutsideClick); + return () => document.removeEventListener('click', closeOnOutsideClick); + }, [eventDetailRef, showEventDetails]); + + const renderEventDetails = () => { + let description = eventDetails.extendedProps.description + ? eventDetails.extendedProps.description.replace(htmlRegex, '') + : 'No description'; + const eventLocation = eventDetails.extendedProps.location; + const fromDate = printDate(eventDetails.start); + const toDate = printDate(eventDetails.end); + const fromTime = printTime(eventDetails.start); + const toTime = printTime(eventDetails.end); + const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; + let eventTime = ''; + if (fromDate == toDate) { + eventTime = fromDate + ' ' + fromTime + ' - ' + toTime; + } else { + eventTime = + From: + + fromDate + + ' - ' + + toDate + +
+ + To: + + fromTime + + ' ' + + toTime; + } + + let formattedDescription = description; + + if (description) { + if (extractUrls(description).length > extractAnchors(description).length) + formattedDescription = replaceUrlsWithAnchorTags(description); + } + + return ( +
+
+ + +
+ + {/*
{seriesICS}
*/} +

{eventDetails.title}

+
+
+ +
+
{eventTime}
+
+
+
+ +
+
Time Zone: {timeZone}
+
+ {eventLocation && ( +
+
+ +
+
{eventLocation}
+
+ )} +
+ {parse(formattedDescription)} +
+ ); + }; + + const renderFullCalendar = useMemo( + () => ( + setLoading(isLoading)} + /> + ), + [aspectRatio, initialView, calendarRef, handleEventClick] + ); + + return ( +
+
+ {renderFullCalendar} +
+ {showEventDetails && renderEventDetails()} + {loading &&
} + {loading &&
Loading...
} +
+ ); +} + +export default Calendar; diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 00000000000..8bbacb30a14 --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,9 @@ +const Header = () => { + return ( +
+

FINOS Event Calendar

+
+ ); +}; + +export default Header; diff --git a/src/hooks/useEscKey.jsx b/src/hooks/useEscKey.jsx index c0de6636d52..cff9ba6721f 100644 --- a/src/hooks/useEscKey.jsx +++ b/src/hooks/useEscKey.jsx @@ -15,7 +15,6 @@ export default function useEscKey(handleClose) { useEffect(() => { document.addEventListener(KEY_EVENT_TYPE, handleEscKey, false); - return () => { document.removeEventListener(KEY_EVENT_TYPE, handleEscKey, false); }; diff --git a/src/utils/date-time.js b/src/utils/date-time.js new file mode 100644 index 00000000000..3d05fa97d66 --- /dev/null +++ b/src/utils/date-time.js @@ -0,0 +1,24 @@ +const dateOptions = { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric', +}; + +const timeOptions = { + hour: '2-digit', + minute: '2-digit', +}; + +export function printDate(date) { + if (date) { + return date.toLocaleDateString(undefined, dateOptions); + } else return 'NONE'; +} + +export function printTime(date) { + if (date) { + const str = date.toLocaleDateString(undefined, timeOptions); + return str.split(',')[1].trim(); + } else return 'NONE'; +} diff --git a/src/utils/ics-download.js b/src/utils/ics-download.js new file mode 100644 index 00000000000..d50cb319aca --- /dev/null +++ b/src/utils/ics-download.js @@ -0,0 +1,10 @@ +export function downloadICSFile(eventDetails) { + const file = new Blob([eventDetails.extendedProps.ics], { + type: 'text/calendar', + }); + const element = document.createElement('a'); + element.href = URL.createObjectURL(file); + element.download = 'finos-event.ics'; + document.body.appendChild(element); + element.click(); +} diff --git a/src/utils/regex.js b/src/utils/regex.js new file mode 100644 index 00000000000..dd9409d08d6 --- /dev/null +++ b/src/utils/regex.js @@ -0,0 +1,3 @@ +export const htmlRegex = /<\/*html-blob>/; +export const urlPattern = /]*?\s+)?href="([^"]*)"[^>]*>.*?<\/a>/g; +export const tagUrlPattern = /(? { + const anchorTag = `${url}`; + const isAlreadyAnchorTagged = new RegExp( + `]*href\\s*=\\s*['"]?${url}['"]?[^>]*>.*?<\\/a>` + ).test(text); + return isAlreadyAnchorTagged ? text : text.replace(url, anchorTag); + }, inputText); + return outputText; +} From fc7c5952568c2428eb2785b63defa649ba60d630 Mon Sep 17 00:00:00 2001 From: Mimi Flynn <414934+mimiflynn@users.noreply.github.com> Date: Fri, 1 Nov 2024 16:33:14 -0400 Subject: [PATCH 2/4] header component --- src/App.jsx | 2 +- src/components/Header.jsx | 2 ++ src/main.jsx | 4 ++-- src/{ => styles}/App.css | 20 +++++++------------- src/styles/Header.css | 9 +++++++++ src/{ => styles}/index.css | 5 +++++ 6 files changed, 26 insertions(+), 16 deletions(-) rename src/{ => styles}/App.css (90%) create mode 100644 src/styles/Header.css rename src/{ => styles}/index.css (79%) diff --git a/src/App.jsx b/src/App.jsx index cce4eaf60b8..1c94da4d636 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,4 +1,4 @@ -import './App.css'; +import './styles/App.css'; import Calendar from './components/Calendar'; import Header from './components/Header'; diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 8bbacb30a14..53175056486 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,3 +1,5 @@ +import '../styles/Header.css'; + const Header = () => { return (
diff --git a/src/main.jsx b/src/main.jsx index f8df67d5788..2be1bec28a1 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,10 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App.jsx'; -import './index.css'; +import './styles/index.css'; ReactDOM.createRoot(document.getElementById('root')).render( - , + ); diff --git a/src/App.css b/src/styles/App.css similarity index 90% rename from src/App.css rename to src/styles/App.css index d808ae30fe9..9f47a843d62 100644 --- a/src/App.css +++ b/src/styles/App.css @@ -10,11 +10,11 @@ body { } .main { - position: relative; + margin: 0 auto; + max-width: var(--content-width); } .finos-calendar { - max-width: 1280px; margin: 0 auto; padding: 2rem; } @@ -40,7 +40,7 @@ body { display: flex; justify-content: space-between; align-items: flex-end; - padding: 8px 0; + padding: 0.6rem 0; position: sticky; background-color: white; top: 0; @@ -52,7 +52,7 @@ button.fc-button.finos-calendar-event-details-close { cursor: pointer; display: grid; place-content: center; - padding: 6px; + padding: 0.5rem; } button.fc-button.finos-calendar-event-details-close img { @@ -60,19 +60,17 @@ button.fc-button.finos-calendar-event-details-close img { } .event-title { - margin-bottom: 8px; + margin-bottom: 0.6rem; } .event-time { - font-size: 14px; - margin-bottom: 6px; + margin-bottom: 0.5rem; display: flex; gap: 5px; } .event-timeZone { - font-size: 14px; - margin-bottom: 6px; + margin-bottom: 0.6rem; display: flex; gap: 5px; } @@ -113,10 +111,6 @@ button.fc-button.finos-calendar-event-details-close img { min-width: 600px; } - .fc-daygrid-day-events { - font-size: 0.5em; - } - .fc-daygrid-day-top { max-height: 1.3em; font-size: 0.75em; diff --git a/src/styles/Header.css b/src/styles/Header.css new file mode 100644 index 00000000000..562282a70e8 --- /dev/null +++ b/src/styles/Header.css @@ -0,0 +1,9 @@ +header { + background-color: var(--finos-accent); + color: white; +} + +h1.logo { + margin: 0; + padding: 2rem; +} diff --git a/src/index.css b/src/styles/index.css similarity index 79% rename from src/index.css rename to src/styles/index.css index b774814541a..b5c447bbaad 100644 --- a/src/index.css +++ b/src/styles/index.css @@ -2,10 +2,15 @@ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; + font-size: 14px; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; + + --content-width: 1280px; + + --finos-accent: #00b5e2; } From 3130d737f359109ac4251957b76ad41823963021 Mon Sep 17 00:00:00 2001 From: Mimi Flynn <414934+mimiflynn@users.noreply.github.com> Date: Fri, 1 Nov 2024 16:39:23 -0400 Subject: [PATCH 3/4] backrground alignment --- src/components/Calendar.jsx | 2 +- src/styles/App.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Calendar.jsx b/src/components/Calendar.jsx index fc5212cefe2..9c6087ac027 100644 --- a/src/components/Calendar.jsx +++ b/src/components/Calendar.jsx @@ -221,7 +221,7 @@ function Calendar() { ); return ( -
+
{renderFullCalendar}
diff --git a/src/styles/App.css b/src/styles/App.css index 9f47a843d62..d53b9695f7f 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -9,7 +9,7 @@ body { min-height: 100vh; } -.main { +.content { margin: 0 auto; max-width: var(--content-width); } From 350d531ba39979413811176462772e92ea29e62d Mon Sep 17 00:00:00 2001 From: Mimi Date: Tue, 10 Dec 2024 11:19:13 -0500 Subject: [PATCH 4/4] Audit Fix --- package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index a072352a553..927b9c20411 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2390,9 +2390,9 @@ "hasInstallScript": true }, "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, "dependencies": { "path-key": "^3.1.0", @@ -4904,9 +4904,9 @@ "license": "MIT" }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", "dev": true, "funding": [ {