updated requirements.txt and worked on showGCalBtn style

backend/api/README.md

@@ -16,7 +16,9 @@ To test, you can utilize this command: `python3 test_api.py`
 --------
 
 In a different terminal, open to the backend folder,
-then use this command `redis-server` to start the redis server to store tokens
+then use `redis-server` to start the redis server to store tokens.
+
+If command not found, install redis by `brew install redis`
 
 --------
 

backend/requirements.txt

@@ -1,29 +1,49 @@
+async-timeout==5.0.1
 blinker==1.8.2
+brotlipy==0.7.0
+cachelib==0.13.0
 cachetools==5.4.0
 certifi==2024.7.4
-charset-normalizer==3.3.2
 click==8.1.7
+conda==4.10.3
+dnspython==2.7.0
 Flask==3.0.3
+Flask-Cors==5.0.0
+Flask-PyMongo==2.3.0
+Flask-Session==0.8.0
 google-api-core==2.19.1
 google-api-python-client==2.138.0
 google-auth==2.32.0
 google-auth-httplib2==0.2.0
 google-auth-oauthlib==1.2.1
 googleapis-common-protos==1.63.2
+greenlet==3.1.1
 httplib2==0.22.0
 idna==3.7
+ipython-genutils==0.2.0
+ipython-sql==0.5.0
 itsdangerous==2.2.0
-Jinja2==3.1.4
 MarkupSafe==2.1.5
+msgspec==0.19.0
 oauthlib==3.2.2
+ply==3.11
+prettytable==3.12.0
 proto-plus==1.24.0
 protobuf==5.27.2
+psycopg2==2.9.10
 pyasn1==0.6.0
 pyasn1_modules==0.4.0
+pycosat==0.6.3
+pymongo==4.10.1
 pyparsing==3.1.2
-requests==2.32.3
+PyQt5==5.15.10
+python-dotenv==1.0.1
+redis==5.2.1
 requests-oauthlib==2.0.0
 rsa==4.9
+SQLAlchemy==2.0.37
+sqlparse==0.5.3
 uritemplate==4.1.1
 urllib3==2.2.2
+webencodings==0.5.1
 Werkzeug==3.0.3

frontend/src/components/calendar/Calendar.tsx

@@ -1,10 +1,11 @@
-import React, { RefObject, useRef, useState } from "react";
+import React, { RefObject, useEffect, useRef, useState } from "react";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from '@fullcalendar/interaction';
 import { INITIAL_EVENTS, createEventId } from './event-utils';
 import { DateSelectArg, EventApi, EventClickArg, EventContentArg } from "fullcalendar";
+import "./index.css";
 
 // for dropdown
 import MenuItem from '@mui/material/MenuItem';
@@ -41,6 +42,24 @@ export default function Calendar({showSearchBar, events, calendarRef, handleRemo
 
     // console.log(events);
 
+    // Define a custom function to dynamically update button styles
+    const updateButtonStyles = () => {
+      const button = document.querySelector(".fc-GCalBtn-button");
+      if (button) {
+        button.setAttribute(
+          "style",
+          `background-color: ${showGCal ? "#1F4C4C" : "#182C4B"};
+          color: white;
+          border: none;
+          `
+        );
+      }
+    };
+
+    useEffect(() => {
+      updateButtonStyles();
+    }, [showGCal]);
+
     const handleDropdown = (event: SelectChangeEvent<string>) => {
         const {target: { value }} = event;
         setCurrView(value);
@@ -126,6 +145,7 @@ export default function Calendar({showSearchBar, events, calendarRef, handleRemo
                 click: () => {setShowGCal((prev)=> !prev)}
               }
             }}
+
             editable={true}
             selectable={true}
             selectMirror={true}

frontend/src/components/calendar/index.css

@@ -1,57 +1,19 @@
 
-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;
+.fc { /* the calendar root */
+  max-width: 1100px;
+  margin: 0 auto;
 }
 
-.demo-app-main {
-
-  flex-grow: 1;
-  padding: 3em;
-
+/* .fc-GCalBtn-button {
+  background-color: #007bff; 
+  color: white;            
+  border: none;             
+  border-radius: 4px;      
+  padding: 5px 10px;    
+  cursor: pointer;    
 }
 
-.fc { /* the calendar root */
-  max-width: 1100px;
-  margin: 0 auto;
-}
+.fc-GCalBtn-button:hover {
+  background-color: red !important; 
+} */