Added schedule backgroud (#210)

* Added schedule backgroud, moved ScheduleTimer to its own directory

* Changed chest and title to svg, reordered Header.tsx imports, renamed schedule-background.svg

apps/site/src/app/schedule/Header/Header.module.scss

@@ -1,8 +1,8 @@
 .header {
-	margin-top: 200px;
 	height: auto;
 	display: flex;
 	flex-direction: column;
-	gap: 50px;
 	align-items: center;
+
+	gap: 50px;
 }

apps/site/src/app/schedule/Header/Header.tsx

@@ -1,11 +1,11 @@
 "use client";
+import Image from "next/image";
 
 import Countdown from "../Countdown/Countdown";
 
-import Image from "next/image";
-import Chest from "@/assets/images/schedule-chest.png";
+import Chest from "@/assets/images/schedule-chest.svg";
 import OpenChest from "@/assets/images/schedule-chest-open.svg";
-import Title from "@/assets/images/schedule-title.png";
+import Title from "@/assets/images/schedule-title.svg";
 import styles from "./Header.module.scss";
 
 interface HeaderProps {

apps/site/src/app/schedule/Schedule.module.scss

@@ -1,21 +1,26 @@
 @use "bootstrap-utils" as bootstrap;
 
-$container-padding: 8rem;
+$sm-width: 170vw;
+$md-width: 140vw;
+$width: 100vw;
 
-.schedule {
-	h1 {
-		text-align: center;
+.background {
+	position: absolute;
+	width: $sm-width;
+	left: calc((100% - $sm-width) / 2);
+	padding-top: 0;
 
-		@include bootstrap.rfs(8rem, margin-bottom);
-	}
-
-	margin: 10rem 1rem;
+	z-index: -1;
 
 	@include bootstrap.media-breakpoint-up(md) {
-		margin: 10rem 7rem;
+		padding-top: 50px;
+		width: $md-width;
+		left: calc((100% - $md-width) / 2);
 	}
 
-	h2 {
-		text-align: center;
+	@include bootstrap.media-breakpoint-up(xxl) {
+		height: auto;
+		width: $width;
+		left: calc((100% - $width) / 2);
 	}
 }

apps/site/src/app/schedule/Schedule.tsx

@@ -1,9 +1,22 @@
+import Image from "next/image";
+
 import { getSchedule } from "./getSchedule";
+import ScheduleTimer from "./ScheduleTimer/ScheduleTimer";
+
+import background from "@/assets/images/schedule-background.svg";
 
 import styles from "./Schedule.module.scss";
-import ScheduleTimer from "./ScheduleTimer";
 
 export default async function Schedule() {
 	const schedule = await getSchedule();
-	return <ScheduleTimer schedule={schedule}></ScheduleTimer>;
+	return (
+		<>
+			<Image
+				src={background}
+				alt="cloud background"
+				className={styles.background}
+			/>
+			<ScheduleTimer schedule={schedule} />
+		</>
+	);
 }

apps/site/src/app/schedule/ScheduleTimer/ScheduleTimer.module.scss

@@ -0,0 +1,3 @@
+.timer {
+	padding-top: 200px;
+}

apps/site/src/app/schedule/ScheduleTimer.tsx → apps/site/src/app/schedule/ScheduleTimer/ScheduleTimer.tsx

@@ -1,11 +1,13 @@
 "use client";
-
-import Header from "./Header/Header";
-import DayOne from "./DayOne/DayOne";
-import DayTwo from "./DayTwo/DayTwo";
-import DayThree from "./DayThree/DayThree";
 import { useEffect, useState } from "react";
 
+import Header from "../Header/Header";
+import DayOne from "../DayOne/DayOne";
+import DayTwo from "../DayTwo/DayTwo";
+import DayThree from "../DayThree/DayThree";
+
+import styles from "./ScheduleTimer.module.scss";
+
 interface ScheduleProps {
 	schedule: Array<any>;
 }
@@ -38,12 +40,12 @@ const ScheduleTimer: React.FC<ScheduleProps> = ({ schedule }) => {
 	);
 
 	return (
-		<>
+		<div className={styles.timer}>
 			<Header time={time} />
 			<DayOne schedule={dayOne} time={time} />
 			<DayTwo schedule={dayTwo} time={time} />
 			<DayThree schedule={dayThree} time={time} />
-		</>
+		</div>
 	);
 };