Fix Overflow in calendar

frontend/src/App.jsx

@@ -4,12 +4,12 @@ import { Route, Routes, useLocation } from "react-router-dom";
 import TestAuth from "./components/testAuth";
 import LoginPage from "./components/authentication/LoginPage";
 import SignUpPage from "./components/authentication/SignUpPage";
-import NavBar from "./components/Nav/Navbar";
+import NavBar from "./components/navigations/Navbar";
 import Home from "./components/Home";
 import ProfileUpdate from "./components/ProfileUpdatePage";
 import Calendar from "./components/calendar/calendar";
 import KanbanBoard from "./components/kanbanBoard/kanbanBoard";
-import IconSideNav from "./components/IconSideNav";
+import IconSideNav from "./components/navigations/IconSideNav";
 import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
 
 const App = () => {

frontend/src/components/calendar/calendar.jsx

@@ -5,7 +5,6 @@ import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import { getEvents, createEventId } from "./TaskDataHandler";
-import './index.css'
 
 export default class Calendar extends React.Component {
   state = {
@@ -15,9 +14,9 @@ export default class Calendar extends React.Component {
 
   render() {
     return (
-      <div className="demo-app">
+      <div className="flex font-sans w-full h-screen">
         {this.renderSidebar()}
-        <div className="demo-app-main">
+        <div className="flex-grow p-16 overflow-y-auto h-full max-h-screen">
           <FullCalendar
             plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
             headerToolbar={{
@@ -31,16 +30,11 @@ export default class Calendar extends React.Component {
             selectMirror={true}
             dayMaxEvents={true}
             weekends={this.state.weekendsVisible}
-            initialEvents={getEvents} // alternatively, use the `events` setting to fetch from a feed
+            initialEvents={getEvents}
             select={this.handleDateSelect}
-            eventContent={renderEventContent} // custom render function
+            eventContent={renderEventContent}
             eventClick={this.handleEventClick}
-            eventsSet={this.handleEvents} // called after events are initialized/added/changed/removed
+            eventsSet={this.handleEvents}
-            /* you can update a remote database when these fire:
-            eventAdd={function(){}}
-            eventChange={function(){}}
-            eventRemove={function(){}}
-            */
           />
         </div>
       </div>
@@ -49,23 +43,30 @@ export default class Calendar extends React.Component {
 
   renderSidebar() {
     return (
-      <div className="demo-app-sidebar">
+      <div className="w-72 bg-blue-100 border-r border-blue-200 p-8 flex-shrink-0">
-        <div className="demo-app-sidebar-section">
+        <div className="mb-8">
-          <h2>Instructions</h2>
+          <h2 className="text-xl font-bold">Instructions</h2>
-          <ul>
+          <ul className="list-disc pl-4">
             <li>Select dates and you will be prompted to create a new event</li>
             <li>Drag, drop, and resize events</li>
             <li>Click an event to delete it</li>
           </ul>
         </div>
-        <div className="demo-app-sidebar-section">
+
-          <label>
+        <div className="mb-8">
-            <input type="checkbox" checked={this.state.weekendsVisible} onChange={this.handleWeekendsToggle}></input>
+          <label className="flex items-center">
-            toggle weekends
+            <input
+              type="checkbox"
+              checked={this.state.weekendsVisible}
+              onChange={this.handleWeekendsToggle}
+              className="mr-2"
+            />
+            Toggle weekends
           </label>
         </div>
-        <div className="demo-app-sidebar-section">
+
-          <h2>All Events ({this.state.currentEvents.length})</h2>
+        <div>
+          <h2 className="text-xl font-bold">All Events ({this.state.currentEvents.length})</h2>
           <ul>{this.state.currentEvents.map(renderSidebarEvent)}</ul>
         </div>
       </div>
@@ -78,7 +79,7 @@ export default class Calendar extends React.Component {
     });
   };
 
-  handleDateSelect = selectInfo => {
+  handleDateSelect = (selectInfo) => {
     let title = prompt("Please enter a new title for your event");
     let calendarApi = selectInfo.view.calendar;
 
@@ -95,13 +96,13 @@ export default class Calendar extends React.Component {
     }
   };
 
-  handleEventClick = clickInfo => {
+  handleEventClick = (clickInfo) => {
     if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
       clickInfo.event.remove();
     }
   };
 
-  handleEvents = events => {
+  handleEvents = (events) => {
     this.setState({
       currentEvents: events,
     });

frontend/src/components/calendar/index.css

@@ -1,55 +0,0 @@
-
-html,
-body,
-body > div { /* the react root */
-  margin: 0;
-  padding: 0;
-  height: 100%;
-}
-
-h2 {
-  margin: 0;
-  font-size: 16px;
-}
-
-ul {
-  margin: 0;
-  padding: 0 0 0 1.5em;
-}
-
-li {
-  margin: 1.5em 0;
-  padding: 0;
-}
-
-b { /* used for event dates/times */
-  margin-right: 3px;
-}
-
-.demo-app {
-  display: flex;
-  min-height: 100%;
-  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
-  font-size: 14px;
-}
-
-.demo-app-sidebar {
-  width: 300px;
-  line-height: 1.5;
-  background: #eaf9ff;
-  border-right: 1px solid #d3e2e8;
-}
-
-.demo-app-sidebar-section {
-  padding: 2em;
-}
-
-.demo-app-main {
-  flex-grow: 1;
-  padding: 3em;
-}
-
-.fc { /* the calendar root */
-  max-width: 1100px;
-  margin: 0 auto;
-}

frontend/src/components/navigations/Navbar.jsx

@@ -4,7 +4,7 @@ import IsAuthenticated from "../authentication/IsAuthenticated";
 import axiosapi from "../../api/AuthenticationApi";
 
 const settings = {
-  Profile: '/profile',
+  Profile: '/update_profile',
   Account: '/account',
 };