Nelson event calender

main-site/components/events-calendar-section/EventsCalendarSection.styles.ts

@@ -22,16 +22,18 @@ const StyledEventsContainer = styled.div`
   position: relative;
   display: flex;
   justify-content: center;
+  align-items: center;
+  flex-direction: column;
 `;
 
-const StyledEventsBox = styled.div<{ elapsedEvent: boolean}>`
+const StyledEventsBox = styled.div<{ elapsedEvent: boolean }>`
   border-radius: 2em;
-
-  background-color: ${(props): string => (props.elapsedEvent ? colors.TEXT_BROWN : colors.BUTTON_DARK_GREEN)};
+  background-color: ${colors.SAND_HIGHLIGHTS};
   position: relative;
   flex-direction: column;
   display: flex;
   margin: 2em 1.5em;
+  padding: 0 1em;
   @media ${max.desktop} {
     margin: 2em 1em;
   }
@@ -44,38 +46,51 @@ const StyledEventsBox = styled.div<{ elapsedEvent: boolean}>`
 `;
 
 const StyledTextContainer = styled.div`
-  display: flex;
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  grid-auto-flow: row;
   margin: 2em;
   padding-top: 0.5em;
-  padding-bottom: 4em;
-
-
-
+  gap: 6em;
 
   @media ${max.tablet} {
-    margin: 1.5em;
-  }
-  @media ${max.tabletSm} {
-    padding-left: 1em;
+    margin: 1em 0;
+    height: fit-content;
+    grid-template-rows: 2fr 1fr;
+    grid-auto-flow: column;
+    grid-template-columns: none;
+    gap: 1em;
   }
   @media ${max.mobile} {
     margin: 2em;
     padding-left: 0.5em;
   }
 `;
 
-const TextLeftContainer = styled.div`
+const EventsLeftContainer = styled.div`
   width: 95%;
-  @media ${max.tabletSm} {
+  display: grid;
+
+  @media ${max.tablet} {
     width: 93%;
   }
 `;
 
+const EventsRightContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 2em;
+  @media ${max.tablet} {
+    gap: 0;
+  }
+`;
+
 const StyledEventsCalendar = styled.div`
   border-radius: 2em;
   width: 60%;
-  
-  background-color: ${colors.BUTTON_GREEN};
+
+  background-color: ${colors.YELLOW_GREEN};
   position: relative;
   @media ${max.tabletLg} {
     width: 80%;
@@ -87,48 +102,39 @@ const StyledEventsCalendar = styled.div`
   }
 `;
 
-const StyledEventsCactus = styled.img`
+const StyledEventsSeaweed = styled.img<{ numberOfEvents: number }>`
   position: absolute;
-  @media ${min.tabletSm} {
+  bottom: 0;
+  left: -8vw;
+    width: 11vw;
+`;
+
+const StyledEventsFishSchool = styled.img`
+  position: absolute;
+  height: 10vw;
+  @media ${min.tablet} {
+    top: -16vh;
     right: 2em;
-    top: 50em;
-    height: 16em;
   }
   @media ${min.desktop} {
+    top: -16vh;
     right: 5em;
-    top: 40em;
-    height: 20em;
   }
   @media ${min.desktopLg} {
-    right: 10em;
-    top: 45em;
-    height: 25em;
-  }
-`;
-
-const StyledEventsGrass = styled.img`
-  position: absolute;
-  @media ${min.tabletSm} {
-    height: 10em;
-    left: 2em;
-    top: -8em;
-  }
-  @media ${min.tabletLg} {
-    height: 15em;
-    left: 2em;
-    top: -8em;
+    top: -20vh;
+    right: 8vw;
   }
 `;
 
 const EventsHeader = styled(P)`
   font-family: ${fonts.nunitoSansSemibold};
   line-height: 1.2em;
   letter-spacing: 0.08em;
-    
+  color: #193c60;
   font-size: 1.7em;
-  @media ${max.tabletSm} {
-    font-size: 1em;
-
+  font-weight: bolder;
+  @media ${max.tablet} {
+    font-size: 1.3em;
   }
   @media ${max.mobile} {
     font-size: 0.6em;
@@ -137,13 +143,18 @@ const EventsHeader = styled(P)`
 
 const EventsP = styled(P)`
   font-size: 1.1em;
+  color: ${colors.BLACK};
+  @media ${max.tablet} {
+    font-size: 0.8em;
+  }
 `;
 
 const EventsSubHeader = styled(P)`
   font-family: ${fonts.nunitoSansSemibold};
-  font-size: 1.5em;
+  font-size: 1.2em;
   line-height: 2em;
-  @media ${max.tabletSm} {
+  color: ${colors.BLACK};
+  @media ${max.tablet} {
     font-size: 0.8em;
   }
   @media ${max.mobile} {
@@ -153,32 +164,75 @@ const EventsSubHeader = styled(P)`
 
 const StyledH2 = styled(H2)`
   text-align: center;
+  color: ${colors.WHITE};
 `;
 
 const EventsPBolded = styled(P)`
   font-family: ${fonts.nunitoSansSemibold};
   font-size: 1.1em;
+  color: ${colors.BLACK};
 `;
 
-const EventsLocationP = styled(P)`
+const EventsImage = styled.img`
+  height: 5vh;
+  width: 5vh;
+  align-self: flex-end;
+  @media ${max.tablet} {
+    position: absolute;
+    top: 2em;
+    right: 2em;
+  }
+`;
+
+const EventsLocationContainer = styled.div`
+  border: 1px solid ${colors.YELLOW_GREEN};
+  padding: 2em;
+  border-radius: 10px;
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  @media ${min.tabletLg && max.desktopLg} {
+    grid-template-columns: 1fr;
+    grid-auto-flow: row;
+  }
+
+  @media ${max.tablet} {
+    grid-template-columns: 1fr 2fr;
+    padding: 0.3em;
+    font-size: xx-large;
+  }
+`;
+
+const EventsLocationPQuestion = styled(P)`
   font-size: 1em;
-  position: absolute;
   right: 2em;
   bottom: 2em;
-  @media ${max.tabletSm} {
+  color: black;
+
+  @media ${max.tablet} {
     font-size: 0.5em;
     bottom: 1.5em;
+    justify-self: left;
   }
 `;
 
-
-
+const EventsLocationP = styled(P)`
+  font-size: 1em;
+  right: 2em;
+  bottom: 2em;
+  color: ${colors.BLACK};
+  @media ${max.tablet} {
+    font-size: 0.5em;
+    bottom: 1.5em;
+    justify-self: flex-end;
+    text-align: right;
+  }
+`;
 
 export {
   StyledSectionContainer,
   StyledEventsCalendar,
-  StyledEventsCactus,
-  StyledEventsGrass,
+  StyledEventsSeaweed,
+  StyledEventsFishSchool,
   StyledEventsContainer,
   EventsHeader,
   EventsSubHeader,
@@ -187,7 +241,11 @@ export {
   StyledEventsBox,
   StyledTextContainer,
   EventsLocationP,
-  TextLeftContainer,
+  EventsLeftContainer,
+  EventsRightContainer,
   StyledH2,
-  StyledDesktopTextsContainer
+  StyledDesktopTextsContainer,
+  EventsLocationContainer,
+  EventsImage,
+  EventsLocationPQuestion
 };

main-site/components/events-calendar-section/EventsCalendarSection.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
-import EventsGrass from '../../../shared-ui/images/events-grass.svg';
-import EventsCactus from '../../../shared-ui/images/events-cactus.svg';
+import EventsSeaweed from '../../../shared-ui/images/seaweed-rock.svg';
+import EventsSeaweedDark from '../../../shared-ui/images/seaweed-rock-dark.svg';
+import EventsFishSchool from '../../../shared-ui/images/school-fish.svg';
+import EventsFishSchoolDark from '../../../shared-ui/images/school-fish-dark.svg';
+
 import {
-  StyledEventsCactus,
-  StyledEventsGrass,
+  StyledEventsSeaweed,
+  StyledEventsFishSchool,
   StyledEventsContainer,
   StyledEventsCalendar,
   StyledSectionContainer,
@@ -12,19 +15,23 @@ import {
 import { min } from '../../../shared-ui/lib/responsive';
 import useMatchMedia from 'react-use-match-media';
 import DesktopTexts from './texts/DesktopTexts';
+import { eventsCalendarData } from '../../lib/data';
 
-const EventsCalendarSection: React.FC = () => {
+const EventsCalendarSection: React.FC = ({ isDay }) => {
   const isDesktop = useMatchMedia(min.tablet);
   return (
     <div id="calendar">
       <StyledSectionContainer>
         <StyledH2>Events Calendar</StyledH2>
         <StyledEventsContainer>
-          {isDesktop && <StyledEventsGrass src={EventsGrass} />}
+          {isDesktop && (
+            <StyledEventsFishSchool
+              src={isDay ? EventsFishSchool : EventsFishSchoolDark}
+            />
+          )}
           <StyledEventsCalendar>
-            <DesktopTexts />
+            <DesktopTexts isDay = {isDay} />
           </StyledEventsCalendar>
-          {isDesktop && <StyledEventsCactus src={EventsCactus} />}
         </StyledEventsContainer>
       </StyledSectionContainer>
     </div>

main-site/components/events-calendar-section/texts/DesktopTexts.tsx

@@ -1,44 +1,58 @@
 import React from 'react';
 import {
   EventsHeader,
-  EventsPBolded,
   EventsSubHeader,
   EventsP,
   StyledEventsBox,
   StyledTextContainer,
   EventsLocationP,
-  TextLeftContainer,
-  StyledDesktopTextsContainer
+  EventsLeftContainer,
+  StyledDesktopTextsContainer,
+  EventsRightContainer,
+  EventsLocationContainer,
+  EventsImage,
+  EventsLocationPQuestion,
+  StyledEventsSeaweed
 } from '../EventsCalendarSection.styles';
-import { EventsCalendarData } from '../../../lib/types';
 import { eventsCalendarData } from '../../../lib/data';
+import MissingPhoto from '../../../../shared-ui/images/missing_image.png';
+import { max, min } from '../../../../shared-ui/lib/responsive';
+import useMatchMedia from 'react-use-match-media';
+import EventsSeaweed from '../../../../shared-ui/images/seaweed-rock.svg';
+import EventsSeaweedDark from '../../../../shared-ui/images/seaweed-rock-dark.svg';
 
-const DesktopTexts: React.FC = () => {
+const DesktopTexts: React.FC = ({isDay}) => {
   const currentDate = new Date();
+  const isTablet = useMatchMedia(min.tablet);
+  const isMobile = useMatchMedia(max.tabletLg);
+  const isDesktop = useMatchMedia(max.desktopLg);
 
   return (
     <StyledDesktopTextsContainer>
       {eventsCalendarData.map((event) => (
         <StyledEventsBox elapsedEvent = {currentDate > event.date}>
           <StyledTextContainer>
-            <TextLeftContainer>
+            <EventsLeftContainer>
               <EventsHeader>
-                {event.title} -- {event.date.getMonth()}/{event.date.getDate()} {event.time}
+                {event.title}
               </EventsHeader>
-              {event.subtitle && <EventsSubHeader>{event.subtitle}</EventsSubHeader>}
-              {event.punchline && <EventsPBolded>{event.punchline}</EventsPBolded>}
-              <br/>
+              {<EventsSubHeader>Prerequisites: {isMobile && <br/>}{event.prerequisites || "XXX, XXX"}</EventsSubHeader>}
               {event.description && <EventsP>{event.description}</EventsP>}
-              {event.prerequisites && <EventsSubHeader>Prerequisites: {event.prerequisites}</EventsSubHeader>}
-            </TextLeftContainer>
-            <EventsLocationP>
-              {event.location}<br/>
-              {event.room}
-            </EventsLocationP>
-
+            </EventsLeftContainer>
+            <EventsRightContainer>
+              <EventsImage src={ event.image || MissingPhoto}></EventsImage>
+              <EventsLocationContainer>
+                <EventsLocationPQuestion>When?</EventsLocationPQuestion>
+                <EventsLocationP>{event.date.toDateString()}<br/>{event.time}</EventsLocationP>
+                {isTablet && isDesktop && <br></br>}
+                <EventsLocationPQuestion>Where?</EventsLocationPQuestion>
+                <EventsLocationP>{event.room}</EventsLocationP>
+              </EventsLocationContainer>
+            </EventsRightContainer>
           </StyledTextContainer>
         </StyledEventsBox>
       ))}
+      {!isMobile && <StyledEventsSeaweed src={isDay ? EventsSeaweed : EventsSeaweedDark } numberOfEvents = {eventsCalendarData.length}/>}
     </StyledDesktopTextsContainer>
   );
 };