Merge pull request #47 from deponte-designer/feature/navbar-update2

Feature/navbar update2

src/App.css

@@ -38,7 +38,7 @@
     --purpleGhost: #F6EBF9;
     --ghostWhite: #fbfbff;
     --silver: #A2A2A2;
-    --gold: #F7BD39;
+    --gold: #F7BD39; 
 }
 
 .bold {
@@ -94,16 +94,23 @@ body,
     --bs-btn-disabled-bg: transparent;
     --bs-btn-disabled-border-color: var(--purpleSoft) !important;
     --bs-gradient: none;
+    --bs-border-radius: 2rem;
 }
 
-/* * ========== HOME STYLE ========== */
-/* [data-bs-theme=dark] {
+.form-control {
+    --bs-border-radius: 2rem;
+}
+
+
+/* * ========== Navbar STYLE ========== */
+[data-bs-theme=dark] {
     color-scheme: dark;
-    --bs-body-bg: #21252980 !important;
-} */
+    --bs-body-bg: rgba(33, 37, 41, 0.7) !important;
+}
 
 .nav-opacity {
-	background: rgba(0,0,0,0.6);
+	background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(5px);
 }
 
 /* * ========== HOME STYLE ========== */

src/components/CarouselHome.jsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import { Carousel, Container, Image, Row, Col, Card } from 'react-bootstrap';
+import Slider1 from '../assets/images/slider1-artists.jpg';
+import Slider2 from '../assets/images/slider2-events.jpg';
+
+
+// function CarouselHome() {
+//     return (
+//     //   <div>
+//         <Carousel className="carousel-custom">  {/*property: fade */}
+
+//           <Carousel.Item>
+//             <Image
+//               className="d-block w-100 carousel-img"
+//               src={Slider1}
+//               alt="First slide"
+//             />
+//             <Container className="carousel-content">
+//               <Carousel.Caption className="carousel-caption-custom">
+//                 <h2>Millions of Artists</h2>
+//                 <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+//               </Carousel.Caption>
+//             </Container>
+//           </Carousel.Item>
+
+//           <Carousel.Item>
+//             <Image
+//               className="d-block w-100 carousel-img"
+//               src={Slider2}
+//               alt="Second slide"
+//             />
+//             <Container className="carousel-content">
+//               <Carousel.Caption className="carousel-caption-custom">
+//                 <h2>Events for all</h2>
+//                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+//               </Carousel.Caption>
+//             </Container>
+//           </Carousel.Item>
+//         </Carousel>
+//         // </div>
+//   );
+// }
+
+//  export default CarouselHome;

src/components/DiscoverSection/index.jsx

@@ -37,6 +37,16 @@ const DiscoverSection = ({ artistData }) => {
     justifyContent: "space-between",
   }
 
+  const formatDate = (time, date) => {
+    console.log(time.split(":"), date.split("-"));
+    const timeFormat = new Date(...date.split("-"), ...time.split(":")).toTimeString()
+    console.log(timeFormat);
+    const timeFormat2 = new Date(...date.split("-"), ...time.split(":")).toLocaleTimeString("en-US", {hour:"numeric",minute:"numeric"})
+    console.log(timeFormat2);
+
+    return timeFormat2;
+  }
+
   return (
     <div className="discover-section-container jumbotron" style={discoverBorder}>
       <h2>Discover</h2>
@@ -49,8 +59,8 @@ const DiscoverSection = ({ artistData }) => {
             eventImg={event.images && event.images.length > 0 ? event.images[0].url : ''}
             eventName={event.name || ''}
             eventArtists={event._embedded && event._embedded.attractions ? event._embedded.attractions.map(attraction => attraction.name).join(', ') : ''}
-            eventDate={event.dates && event.dates.start && event.dates.start.localDate ? event.dates.start.localDate : ''}
-            eventTime={event.dates && event.dates.start && event.dates.start.localTime ? event.dates.start.localTime + ', Local time' : ''}
+            eventDate={event.dates && event.dates.start && event.dates.start.localDate ? `${new Date(event.dates.start.localDate).toDateString()}` : ''}
+            eventTime={event.dates && event.dates.start && event.dates.start.localTime ? `${formatDate(event.dates.start.localTime, event.dates.start.localDate)} , Local time` : ''}
             eventAddress={event._embedded && event._embedded.venues && event._embedded.venues.length > 0 ? `${event._embedded.venues[0].address.line1}, ${event._embedded.venues[0].city.name}, ${event._embedded.venues[0].postalCode}, ${event._embedded.venues[0].name} - ${event._embedded.venues[0].country.countryCode}` : ''}
             eventBuyTicket={event.url || ''}
           // {artistImage && (<img src={artistImage} alt={artist.name} />