css extraction mission

src/components/AboutUs/AboutUs.css

@@ -0,0 +1,47 @@
+/* About Us View Styles */
+
+.aboutus-container {
+  background-color: var(--theme-color-3);
+  color: var(--theme-color-2);
+  padding: 50px 20px 20px 20px;
+  line-height: 1.6;
+}
+
+.aboutus-heading {
+  color: var(--theme-color-2);
+}
+
+.aboutus-subheading {
+  color: var(--theme-color-2);
+  border-bottom: 2px solid var(--theme-color-1);
+  padding-bottom: 10px;
+}
+
+.team-container {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.team-member {
+  width: 200px;
+  background-color: var(--theme-color-2);
+  border-radius: 10px;
+  text-align: center;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 10px;
+}
+
+.team-image {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+
+.team-name {
+  margin-top: 10px;
+  font-weight: bold;
+}

src/components/AboutUs/AboutUs.js

@@ -4,6 +4,7 @@ import court from "./court.png";
 import andrew from "./andrew.png";
 import cam from "./cam.png";
 import hannah from "./hannah.png";
+import './AboutUs.css';
 
 function AboutUs() {
   const teamMembers = [
@@ -15,15 +16,15 @@ function AboutUs() {
   ];
 
   return (
-    <div className="container" data-testid="about-us-container"> 
-      <h2 className="heading">About Us</h2> 
+    <div className="aboutus-container" data-testid="aboutus-container"> 
+      <h2 className="aboutus-heading">About Us</h2> 
       <p>
         Welcome to SoundByte: A visionary initiative by a dedicated team of students from the University of Florida. Recognizing the challenges EDM enthusiasts face in navigating event information, we have transformed the EdmTrain website into a dynamic, map-based platform. This innovative approach aims to streamline the discovery process, making it easier for users to find events that resonate with their location and preferences.
       </p>
       <p>
         Our vision extends beyond mere functionality; we aim to create an experience. By leveraging real-time data from the EdmTrain API and integrating advanced geolocation features, we&apos;re building a platform that not only looks great but feels personal to every user. It&apos;s about connecting fans with events in a way that&apos;s engaging and efficient.
       </p>
-      <h3 className="sub-heading">Meet the Developers</h3> 
+      <h3 className="aboutus-subheading">Meet the Developers</h3> 
       <div className="team-container"> 
         {teamMembers.map((member) => (
           <div className="team-member" key={member.name} data-testid="team-member"> 

src/components/EventFilter/EventFilter.css

@@ -0,0 +1,80 @@
+/* Event Filter Styles */
+
+/* City Picker Styles */
+.citypicker-container {
+  position: relative;
+  width: 30%;
+}
+
+.citypicker-input {
+  width: 100%;
+  padding: 5px;
+  margin-bottom: 0;
+  border: 1px solid #ccc;
+  border-radius: 5px !important;
+}
+
+.citypicker-dropdown {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  width: 100%;
+  max-height: 200px;
+  overflow-y: auto;
+  background-color: var(--theme-color-2);
+  border: 1px solid #ccc;
+  border-top: none;
+  z-index: 1001;
+}
+
+.citypicker-dropdown-item {
+  padding: 10px;
+  cursor: pointer;
+  background-color: transparent;
+}
+
+.citypicker-dropdown-item.highlighted {
+  background-color: #f0f0f0;
+}
+
+/* Date Picker Styles */
+.datepicker, .react-datepicker {
+  width: 100%;
+  padding: 5px;
+  background-color: #f0f0f0;
+  border-radius: 5px;
+  outline: none;
+}
+
+.datepicker:hover, .datepicker:focus, .react-datepicker__day:hover, .react-datepicker__day--selected, .react-datepicker__day--keyboard-selected {
+  border-color: var(--theme-color-3);
+}
+
+.react-datepicker__header {
+  background-color: var(--theme-color-3);
+  color: var(--theme-color-2);
+}
+
+.react-datepicker__day--today {
+  font-weight: bold;
+}
+
+.react-datepicker__day--outside-month {
+  color: #ccc;
+}
+
+.react-datepicker__month-container {
+  background-color: var(--theme-color-2);
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.react-datepicker__month {
+  margin: 0.4rem;
+}
+
+.react-datepicker__year-dropdown-container, .react-datepicker__month-dropdown-container, .react-datepicker__time-container {
+  display: none;
+}

src/components/Searchbar/Searchbar.js → src/components/EventFilter/EventFilter.js

@@ -3,8 +3,9 @@ import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import Sidebar from '../Sidebar/Sidebar';
 import CitiesContext from '../../contexts/CitiesContext';
+import './EventFilter.css';
 
-function Searchbar({ searchStart, setStartDate, searchEnd, setEndDate, setSearchLocation }) {
+function EventFilter({ searchStart, setStartDate, searchEnd, setEndDate, setSearchLocation }) {
   const cities = useContext(CitiesContext);
   const [showSidebar, setShowSidebar] = useState(false);
   const [matchedCities, setMatchedCities] = useState([]);
@@ -134,4 +135,4 @@ function Searchbar({ searchStart, setStartDate, searchEnd, setEndDate, setSearch
   );
 }
 
-export default Searchbar;
+export default EventFilter;

src/components/EventMap/EventMap.css

@@ -0,0 +1,42 @@
+/* Event Map Styles */
+
+.event-map-container  {
+  height: 85vh;
+  width: 100%;
+  z-index: 1;
+}
+
+/* Leaflet Map Styles */
+.leaflet-layer, .leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control-attribution {
+  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
+}
+
+.marker-cluster span {
+  font-family: 'Roboto', sans-serif !important;
+  font-weight: 700 !important;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.marker-cluster-small {
+  background-color: #FFFF33 !important; /* Neon Yellow */
+}
+
+.marker-cluster-small div {
+  background-color: #FFFF66 !important; /* Lighter Neon Yellow */
+}
+
+.marker-cluster-medium {
+  background-color: #FF5F1F !important; /* Neon Orange */
+}
+
+.marker-cluster-medium div {
+  background-color: #FF7F50 !important; /* Lighter Neon Orange */
+}
+
+.marker-cluster-large {
+  background-color: #FF073A !important; /* Neon Red */
+}
+
+.marker-cluster-large div {
+  background-color: #FF5175 !important; /* Lighter Neon Red */
+}

src/components/EventMap/EventMap.js

@@ -1,11 +1,12 @@
 import React, { useEffect } from 'react';
 import { MapContainer, TileLayer, useMap } from 'react-leaflet';
 import L from 'leaflet';
-import { createCustomIcon } from '../../utils/icons';
 import 'leaflet.markercluster/dist/leaflet.markercluster';
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
+import { createCustomIcon } from '../../utils/icons';
 import MapCenterUpdater from '../MapCenterUpdater/MapCenterUpdater';
 import useCurrentPosition from '../../hooks/useCurrentPosition';
+import './EventMap.css';
 
 function ClusteredMarkers({ filteredEvents, customIcon }) {
   const map = useMap();
@@ -72,7 +73,7 @@ function EventMap({ filteredEvents, center, bounds }) {
   }, [center, setCurrentPosition]);
 
   return (
-    <MapContainer center={currentPosition} minZoom={3} zoom={13} maxBounds={[[90, -180], [-90, 180]]} className="event-map-layout">
+    <MapContainer center={currentPosition} minZoom={3} zoom={13} maxBounds={[[90, -180], [-90, 180]]} className="event-map-container">
       <TileLayer
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

src/components/EventsPage/EventsPage.js

@@ -1,7 +1,7 @@
 import React, { useState, useContext } from 'react';
 import EventsContext from '../../contexts/EventsContext';
 import filterEvents from '../../hooks/filterEvents';
-import Searchbar from '../Searchbar/Searchbar';
+import EventFilter from '../EventFilter/EventFilter';
 
 function EventsPage() {
   const { events } = useContext(EventsContext);
@@ -61,7 +61,7 @@ function EventsPage() {
   return (
     <div className="events-container">
       <div className="searchbar-margin">
-        <Searchbar
+        <EventFilter
           searchStart={searchStart}
           setStartDate={setStart}
           searchEnd={searchEnd}

src/components/Home/Home.js

@@ -1,7 +1,7 @@
 import React, { useState, useContext } from 'react';
 import EventsContext from '../../contexts/EventsContext';
 import filterEvents from '../../hooks/filterEvents';
-import Searchbar from '../Searchbar/Searchbar';
+import EventFilter from '../EventFilter/EventFilter';
 import EventMap from '../EventMap/EventMap';
 import Sidebar from '../Sidebar/Sidebar';
 
@@ -24,7 +24,7 @@ function Home() {
   return (
     <div className="home-container">
       <div className="main-map-container main-border">
-        <Searchbar
+        <EventFilter
           searchStart={searchStart}
           setStartDate={setStart}
           searchEnd={searchEnd}

src/components/Navbar/Navbar.css

@@ -0,0 +1,54 @@
+/* Navbar Styles */
+
+.custom-navbar {
+  background-color: var(--theme-color-3);
+}
+
+.custom-navbar .navbar-collapse {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.custom-navbar .navbar-logo {
+  height: 50px;
+}
+
+.custom-navbar a, .custom-navbar .nav-link {
+  color: var(--theme-color-1);
+}
+
+.custom-navbar .nav-link.active {
+  /* Need to override Bootstrap's default active link color */
+  color: var(--theme-color-1) !important;
+  background-color: transparent !important; 
+}
+
+.custom-navbar ul li {
+  display: inline-block;
+  margin: 0 20px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.custom-navbar .link-style {
+  position: relative;
+}
+
+.custom-navbar .link-style::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background-color: var(--theme-color-1);
+  transform: scaleX(0);
+  transition: transform 0.3s ease-in-out;
+}
+
+.custom-navbar .link-style:hover::before {
+  transform: scaleX(1);
+}
+
+.custom-navbar .link-style .nav-link:hover {
+  color: var(--theme-color-1);
+  animation: flicker 1.5s infinite alternate;
+}

src/components/Navbar/Navbar.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import logo from '../../common/logo.svg';
+import './Navbar.css';
 
 function Navbar() {
   const getNavLinkClass = ({ isActive }) => isActive ? 'nav-link active' : 'nav-link';

src/components/Sidebar/Sidebar.css

@@ -0,0 +1,7 @@
+/* Sidebar Styles */
+
+.map-sidebar-container {
+  width: 95%;
+  background-color: var(--theme-color-3);
+  padding: 5px;
+}

src/components/Sidebar/Sidebar.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import './Sidebar.css';
 
 function Sidebar({ events }) {
   if (!events || events.length === 0) {
     return null;
   }
 
   return (
-    <div className="sidebar-container">
+    <div className="map-sidebar-container">
       {events && events.length > 0 ? (
         events.map(event => (
           <div