Fixing owl logo on home page

src/pages/events/EventList.tsx

@@ -3,6 +3,8 @@ import { EventObject } from '../../tools/CustomTypes'
 
 import Styles from './EventListStyles'
 
+const dayOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+
 class EventList extends React.Component<{events: EventObject[], loading: boolean}, never> {
 	render (): React.ReactElement {
 		if (this.props.events.length === 0) {
@@ -14,8 +16,11 @@ class EventList extends React.Component<{events: EventObject[], loading: boolean
 					return (
 						<Styles.EventItemContainer key={i}>
 							<h2 className='title'>{event.title}</h2>
-							<div className='date'>
+							<div className='date' style={{display: 'flex', flexDirection: 'column', rowGap: '13%'}}>
 								<p>{!isNaN(event.date.getMonth()) ? `${event.date.getMonth() + 1}/${event.date.getDate()}` : 'TBD'}</p>
+								<p className='day-of-week' style={{margin: '0'}}>
+									{event?.weekly ? `Weekly on ${dayOfWeek[event.date.getDay()]}'s` : ''}
+								</p>
 							</div>
 							<div className='location'>
 								<p>Location: {event.location}</p>

src/pages/events/EventListStyles.tsx

@@ -65,5 +65,9 @@ export default class EventListStyles {
 		& > div > p {
 			margin: 0;
 		}
+
+		& > div > .day-of-week {
+			${FONT_FAMILY.BODY}
+		}
 	`
 }

src/pages/events/Events.tsx

@@ -10,7 +10,7 @@ import Contact from '../general/contact/Contact'
 import { EventObject } from '../../tools/CustomTypes'
 import { COLORS } from '../../tools/Constants'
 import { getEvents } from '../../tools/services/getEvents'
-import EventSignUp from './EventSignUp'
+// import EventSignUp from './EventSignUp'
 import EVENT_SIGNUP_INFO from '../../data/EventSignUpInfo'
 
 export type EventsState = {
@@ -59,9 +59,10 @@ class Events extends React.Component<unknown, EventsState>{
 					<h2 className='title'>Events</h2>
 					<AiOutlineDash/>
 				</Styles.TitleContainer>
-				<Styles.EventSignUps>
+				{/* Uncomment for event sign-ups */}
+				{/* <Styles.EventSignUps>
 					{EVENT_SIGNUP_INFO.map((event, i) => <EventSignUp key={i} events={event}/>)}
-				</Styles.EventSignUps>
+				</Styles.EventSignUps> */}
 				{this.renderEvents(parseFloat(width) * 0.03)}
 				<Contact/>
 			</Styles.EventsContainer>

src/pages/events/EventsStyles.tsx

@@ -9,7 +9,8 @@ export default class EventsStyles {
 		align-items: center;
 		grid-template-rows: 
 			calc(var(--vh) * .2)
-			calc(var(--vh) * .2)
+			/* Uncomment for event sign-ups */
+			/* calc(var(--vh) * .2) */
 			calc(var(--vh) * ${props => props.numOfEvents === 0 ? 1 : props.numOfEvents} * .2)
 			calc(var(--vh) * .2);
 

src/pages/home/Home.tsx

@@ -12,9 +12,9 @@ import Button from '../general/button/Button'
 // Images
 import nasaLogo from '../../assets/pics/logos/nasa.png'
 import HOME_CAROUSEL_INFO from '../../data/HomeCarouselInfo'
-import TOwl from '../../assets/pics/logos/TransRoboOwl.svg'
 const  TEAMS = `https://teams.microsoft.com/l/team/19%3aeaf903fd81cd48eba95d8e769ed78544%40thread.tacv2/conversations?groupId=8f
 		78ecbb-62f3-4b2c-bda7-7488eca908ee&tenantId=716e81ef-b522-4473-8e31-10bd02ccf6e5`
+
 const Home = (): React.ReactElement => {
 	return (
 		<Styles.HomeContainer>
@@ -36,37 +36,27 @@ const Home = (): React.ReactElement => {
 				<img src={nasaLogo} alt='NASA'/>
 			</Styles.VideoSource>
 
-			<Styles.SectionHeader>
-				<h2>
-					<img src={TOwl}
-						alt='Owl'
-						style={{
-							width: '150px',   // Set the width of the image
-							height: '150px', // Set the height of the image
-							margin: '0 0 0 -100px',// Set the margin around the image
-							float: 'left'
-							// us a .docx
-
-						}}
-					/>
-						Sign up and contact us on teams!</h2>
-				<div className='button-container'>
-					<Button text={'Sign up here!'} size={'large'} source={'https://forms.gle/rp6BY6h4doLkZQ2E8'}/>
-					<Button text='Join Teams Here!' source={TEAMS}/>
-				</div>
-			</Styles.SectionHeader>
+			<Styles.SectionHeaderGradient>
+				<Styles.SectionHeader>
+					<h2>Sign up and contact us on teams!</h2>
+					<div className='button-container'>
+						<Button text={'Sign up here!'} size={'large'} source={'https://forms.gle/rp6BY6h4doLkZQ2E8'}/>
+						<Button text='Join Teams Here!' source={TEAMS}/>
+					</div>
+				</Styles.SectionHeader>
+			</Styles.SectionHeaderGradient>
 
 
 
 			<Carousel slideInfo={HOME_CAROUSEL_INFO}/>
 
-			<Styles.SectionHeader>
+			<Styles.MerchHeader>
 				<h2>Help Temple Space Exploration get to the moon!</h2>
 				<div className='button-container'>
 					<Button source={'https://temple-robotics.creator-spring.com/?'} text={'Buy Merchandise'} size={'large'}/>
 					<Button source={'/sponsors'} text={'Become a Sponsor'} size={'large'} local/>
 				</div>
-			</Styles.SectionHeader>
+			</Styles.MerchHeader>
 
 			{/* TODO: Put in a merchandise section */}
 

src/pages/home/HomeStyles.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 
 import { COLORS, FONT_FAMILY } from '../../tools/Constants'
+import TOwl from '../../assets/pics/logos/TransRoboOwl.svg'
 
 export default class HomeStyles {
 
@@ -54,7 +55,38 @@ export default class HomeStyles {
 		${FONT_FAMILY.SUBTITLE}
 	`
 
+	static readonly SectionHeaderGradient = styled.div`
+		display: flex;
+		height: 100%;
+		background: linear-gradient(200deg, ${COLORS.PRIMARY}, #996b72, ${COLORS.PRIMARY});
+	`
+
 	static readonly SectionHeader = styled.div`
+		display: flex;
+		justify-content: center;
+		width: 100%;
+		flex-direction: column;
+		background-image: url(${TOwl});
+		background-repeat: no-repeat no-repeat;
+		background-position: center;
+		row-gap: 10%;
+		height: 80%;
+		align-self: center;
+
+		& > h2 {
+			text-align: center;
+			${FONT_FAMILY.SECONDARY_TITLE}
+		}
+
+		& > .button-container {
+			width: 100%;
+			display: flex;
+			column-gap: 10%;
+			justify-content: center;
+		}
+	`
+
+	static readonly MerchHeader = styled.div`
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -76,13 +108,6 @@ export default class HomeStyles {
 			justify-content: center;
 			align-items: center;
 		}
-
-		& > img {
-			width: 50%;   // Set the width of the image
-			height: 50%; // Set the height of the image
-			float: left;
-			/* margin: 0 0 0 -500px; */
-		}
 	`
 
 	static readonly VideoSource = styled.div`

src/tools/services/getEvents.tsx

@@ -30,8 +30,10 @@ function handleWeeklyEvents(events: EventObject[]): EventObject[] {
 	// Handle weekly dates
 	events.forEach(event => {
 		const currentDayForWeek = new Date()
-		if (event.weekly) {
-			event.date.setDate(currentDayForWeek.getDate() + (7 + event.date.getDay() - currentDayForWeek.getDay()) % 7)
+		const dayOffset = (7 + event.date.getDay() - currentDayForWeek.getDay()) % 7
+		if (event.weekly && event.date < currentDayForWeek) {
+			const newDate = currentDayForWeek.getTime() + dayOffset * 24 * 60 * 60 * 1000
+			event.date = new Date(newDate)
 		}
 	})