fix(event-summary-update): change styling on hover and in selector

src/components/App/App.scss

@@ -1,9 +1,5 @@
 @import 'styles/colors.scss';
 
-.app {
-
-};
-
 #page-content {
     max-width: 844px;
 };
@@ -14,4 +10,17 @@
 
 .pointer {
     cursor: pointer;
-};
+};
+
+@font-face {
+    font-family: "Cairo";
+    src: local("Cairo"), url(../../fonts/Cairo/static/Cairo-Regular.ttf) format("truetype")
+}
+
+.app {
+    font-family: Cairo;
+}
+
+.hover-dark:hover {
+    background-color: $dark!important
+}

src/components/Pages/EventSearch/EventSearch.tsx

@@ -4,7 +4,7 @@ import { useActions } from 'hooks/useActions';
 import useIsLoading from 'hooks/useIsLoading';
 import { useTypedSelector } from 'hooks/useTypedSelector';
 
-import EventList from 'components/EventsList/EventList';
+import EventList from 'components/Pages/EventSearch/EventsList/EventList';
 import MetroSelector from 'components/MetroSelector/MetroSelector';
 
 import './eventSearch.scss';

src/components/Pages/EventSearch/EventsList/EventList.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Badge, Col, Row } from 'react-bootstrap';
+import { useTypedSelector } from 'hooks/useTypedSelector';
+import './eventList.scss';
+
+const EventList = () => {
+    const { data } = useTypedSelector((state) => state.events);
+    const { selected } = useTypedSelector((state) => state.metroAreas);
+
+    return (
+        <div id="event-list" className="rounded-4">
+            {selected && data.length === 0 ? (
+                <div className="w-100 text-primary text-center">
+                    No events found
+                </div>
+            ) : (
+                data.map((event, eventIndex: number) => {
+                    return (
+                        <div
+                            className="event-summary text-white mb-3 p-3 bg-light hover-dark rounded"
+                            key={`event-${eventIndex}`}
+                        >
+                            <a
+                                className="text-decoration-none"
+                                href={event.tickets_url}
+                                target="_blank"
+                                rel="noreferrer"
+                            >
+                                <Row>
+                                    <Col xs={7}>
+                                        <h4>{event.artist.name}</h4>
+                                    </Col>
+                                    <Col
+                                        xs={5}
+                                        className="d-flex justify-content-end"
+                                    >
+                                        <h6>{event.date}</h6>
+                                    </Col>
+                                </Row>
+                                {event.event_name !== event.artist.name && (
+                                    <Row className="my-1">
+                                        <Col xs={12}>
+                                            <small>{event.event_name}</small>
+                                        </Col>
+                                    </Row>
+                                )}
+                                <div className="mb-1">
+                                    <small>{event.venue}</small>
+                                </div>
+
+                                <Row className="">
+                                    <Col xs={12} className="">
+                                        {/* Create a set of badges to map */}
+                                        {event.artist.headliner && (
+                                            <Badge
+                                                bg="dark"
+                                                className="mx-1  align-middle py-auto"
+                                            >
+                                                Headliner
+                                            </Badge>
+                                        )}
+
+                                        {event.type.toLowerCase() ===
+                                            'festival' && (
+                                            <Badge
+                                                bg="dark"
+                                                className="mx-1  align-middle py-auto"
+                                            >
+                                                Festival
+                                            </Badge>
+                                        )}
+
+                                        {event.genres.map((genre) => {
+                                            return (
+                                                <Badge
+                                                    bg="dark"
+                                                    className="mx-1  align-middle py-auto"
+                                                >
+                                                    {genre}
+                                                </Badge>
+                                            );
+                                        })}
+                                    </Col>
+                                </Row>
+                            </a>
+                        </div>
+                    );
+                })
+            )}
+        </div>
+    );
+};
+
+export default EventList;

src/components/Pages/EventSearch/EventsList/eventList.scss

@@ -0,0 +1,26 @@
+@import 'styles/colors.scss';
+
+#event-list {
+    overflow-y: scroll;
+    scrollbar-width: none;
+};
+
+table {
+    table-layout: fixed;
+    overflow-y: scroll;
+}
+
+a:hover {
+    color: $white!important;
+}
+
+.event-summary {
+    // border: 2px solid $light;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+}
+
+// .event-summary:hover {
+//     border: 2px solid $light!important;
+// }

src/components/Shared/Selector/Selector.tsx

@@ -71,26 +71,21 @@ const Selector = ({
                 <div id="list-overlay">
                     {/* 
                         TODO: Fade to new color on hover
-                    */}
-                    <div className="d-flex justify-content-end p-4 mb-3">
-                        <Button
-                            className="close-list bg-light text-primary border-none"
-                            onClick={handleShowOptions}
-                        >
-                            &times;
-                        </Button>
-                    </div>
-
-                    {/* 
-                        TODO: Change color of selected item in list
                         TODO: Upon option hover, fade to new color
                     */}
                     <div className="mx-auto p-3" id="list-table">
                         <ListGroup className="">
+                            <ListGroup.Item
+                                className={`option pointer p-3 text-primary text-center hover-dark bg-danger`}
+                                key={`option-exit`}
+                                onClick={handleShowOptions}
+                            >
+                                &times;
+                            </ListGroup.Item>
                             {listOptions.map((name: string, index: number) => {
                                 return (
                                     <ListGroup.Item
-                                        className={`pointer p-3 text-primary text-center
+                                        className={`option pointer p-3 text-primary text-center hover-dark
                                             ${
                                                 selected === name
                                                     ? 'bg-dark'

src/components/Shared/Selector/selector.scss

@@ -22,11 +22,12 @@
     /* Black w/ opacity */
 }
 
-#list-table {
+#list-overlay > div {
     max-width: 844px;
 };
 
 .close-list {
     position: fixed;
     z-index: 3;
-}
+}
+