overhaul babyyyy

d3rpp-dev · Nov 19, 2024 · b277107 · b277107
1 parent 545da60
commit b277107
Show file tree

Hide file tree

Showing 15 changed files with 44 additions and 98 deletions.
diff --git a/src/lib/components/headers/app-header.svelte b/src/lib/components/headers/app-header.svelte
@@ -1,41 +1,33 @@
 <script lang="ts">
 	import type { User } from "lucia";
 	import { AccountHeaderComponent } from "@/account";
-	import { page } from "$app/stores";
-	import { derived } from "svelte/store";
 
 	interface Props {
 		user: User | null;
 	}
 
 	const { user }: Props = $props();
-
-	//need to add pathways for each page
-	const isHomePage = derived(page, ($page) => $page.url.pathname === "/");
-	const isUploadPage = derived(page, ($page) => $page.url.pathname === "/");
-	const isProfilePage = derived(
-		page,
-		($page) => $page.url.pathname === "/app/account",
-	);
 </script>
 
 <header
-	class="sticky top-0 z-50 w-full bg-gradient-to-b from-[#202020] to-[#020202]"
+	class="sticky top-0 z-50 w-full bg-gradient-to-b from-[#000013] to-[#000000]"
 >
+	<!-- Div that contains the icon and text logos -->
+
 	<div
 		class="container mx-auto flex h-24 max-w-screen-2xl items-center px-4 2xl:px-0"
 	>
 		<!-- need to add link -->
-		<a href="/">
+		<a href="/app">
 			<div class="flex items-center md:mr-4">
 				<img
-					src="src/lib/logos/Logo-Green.svg"
+					src="src/lib/logos/BirdPink.svg"
 					alt="JailBird Green"
 					class="h-16"
 				/>
 
 				<img
-					src="src/lib/logos/JailBirdText.svg"
+					src="src/lib/logos/JailBirdTextWhite.svg"
 					alt=""
 					class="h-16 pl-4"
 				/>
@@ -47,94 +39,25 @@
 		>
 			<div>
 				<!-- need to add link -->
-				<a
-					href="/"
-					class="group flex flex-col items-center hover:text-[#6CFF96]"
-				>
+				<a href="/app" class="group flex flex-col items-center">
 					<img
-						src={$isHomePage
-							? "src/lib/menuIcons/homeGreen.svg"
-							: "src/lib/menuIcons/homeWhite.svg"}
+						src="src/lib/menuIcons/newHome.svg"
 						alt="Home Icon"
 						style="height: 40px;"
 						class="group-hover:hidden"
 					/>
 					<img
-						src="src/lib/menuIcons/homeGreen.svg"
-						alt="Home Icon Hover"
-						style="height: 40px;"
-						class="hidden group-hover:block"
-					/>
-
-					<p
-						class="text-white-600 group-hover:text-[#6CFF96]"
-						style="font-family: futura, sans-serif; font-weight: 600; font-style: normal; font-size: 1.25rem;"
-						class:active-text={$isHomePage}
-					>
-						Home
-					</p>
-				</a>
-			</div>
-
-			<div>
-				<!-- need to add link -->
-				<a
-					href="/"
-					class="group flex flex-col items-center hover:text-[#6CFF96]"
-				>
-					<img
-						src={$isUploadPage
-							? "src/lib/menuIcons/uploadGreen.svg"
-							: "src/lib/menuIcons/uploadWhite.svg"}
-						alt="Upload File Icon"
-						style="height: 40px;"
-						class="group-hover:hidden"
-					/>
-
-					<img
-						src="src/lib/menuIcons/uploadGreen.svg"
+						src="src/lib/menuIcons/newHomePink.svg"
 						alt="Home Icon Hover"
 						style="height: 40px;"
 						class="hidden group-hover:block"
 					/>
-
-					<p
-						class="text-white-600 group-hover:text-[#6CFF96]"
-						style="font-family: futura, sans-serif; font-weight: 600; font-style: normal; font-size: 1.25rem;"
-						class:active-text={$isUploadPage}
-					>
-						Shared Files
-					</p>
 				</a>
 			</div>
 
 			<div>
-				<!-- need to add link -->
-				<a
-					href="/"
-					class="group flex flex-col items-center hover:text-[#6CFF96]"
-				>
-					<AccountHeaderComponent {user} avatar_size="custom" />
-
-					<p
-						class="text-white-600 group-hover:text-[#6CFF96]"
-						style="font-family: futura, sans-serif; font-weight: 600; font-style: normal; font-size: 1.25rem;"
-						class:active-text={$isProfilePage}
-					>
-						Profile
-					</p>
-				</a>
+				<AccountHeaderComponent {user} avatar_size="custom" />
 			</div>
 		</div>
 	</div>
 </header>
-
-<style>
-	p {
-		color: white;
-	}
-
-	.active-text {
-		color: #6cff96;
-	}
-</style>
diff --git a/src/lib/components/headers/landing-header.svelte b/src/lib/components/headers/landing-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { User } from "lucia";
-	import LogoGreen from "$lib/logos/Logo-GreenWithText.svg";
+	import LogoGreen from "$lib/logos/birdAndTextPink.svg";
 	import { AccountHeaderComponent } from "@/account";
 
 	interface Props {
@@ -11,7 +11,7 @@
 </script>
 
 <header
-	class="sticky top-0 z-50 h-28 w-full bg-gradient-to-b from-[#202020] to-[#020202] shadow-lg"
+	class="sticky top-0 z-50 h-28 w-full bg-gradient-to-b from-[#000013] to-[#000000] shadow-lg"
 >
 	<div class="flex h-full items-center justify-end px-20 py-4">
 		<AccountHeaderComponent {user} avatar_size="custom" />

diff --git a/src/lib/logos/BirdPink.svg b/src/lib/logos/BirdPink.svg
diff --git a/src/lib/logos/BirdWhite.svg b/src/lib/logos/BirdWhite.svg
diff --git a/src/lib/logos/JailBirdTextWhite.svg b/src/lib/logos/JailBirdTextWhite.svg
diff --git a/src/lib/logos/birdAndTextPink.svg b/src/lib/logos/birdAndTextPink.svg
diff --git a/src/lib/menuIcons/newHome.svg b/src/lib/menuIcons/newHome.svg
diff --git a/src/lib/menuIcons/newHomePink.svg b/src/lib/menuIcons/newHomePink.svg
diff --git a/src/routes/(app)/app/+layout.svelte b/src/routes/(app)/app/+layout.svelte
@@ -1,13 +1,19 @@
 <script lang="ts">
 	import { AppFooter } from "@/footers";
 	import { AppHeader } from "@/headers";
+	import Main from "@/main.svelte";
 
 	const { data, children } = $props();
 	const { user } = data;
 </script>
 
 <AppHeader {user} />
-
-{@render children()}
-
+<div
+	class="h-full bg-cover bg-center"
+	style="background-image: url('/backgroundsAndAssets/newBackground2.jpg');background-attachment: fixed; background-size: cover; background-position: center;"
+>
+	<Main>
+		{@render children()}
+	</Main>
+</div>
 <AppFooter />
diff --git a/src/routes/(landing)/+layout.svelte b/src/routes/(landing)/+layout.svelte
@@ -13,7 +13,7 @@
 
 <div
 	class="h-full bg-cover bg-center"
-	style="background-image: url('/backgroundsAndAssets/landerDecoBackgroundV2.svg'), linear-gradient(to right, #0A0A0A 30%, #6CFF96 100%); background-position: right center; background-repeat: no-repeat; background-size: 40%;"
+	style="background-image: url('/backgroundsAndAssets/newLandingBackground.jpg');background-attachment: fixed; background-size: cover; background-position: center;"
 >
 	<Main class="h-landing-main">
 		{@render children()}

diff --git a/src/routes/(landing)/+page.svelte b/src/routes/(landing)/+page.svelte
@@ -15,16 +15,16 @@
 	<div class="flex w-full items-center justify-between gap-x-24 pt-32">
 		<h1
 			class="flex-1 text-left"
-			style="font-family: futura, sans-serif; font-weight: 400; font-style: normal; font-size: 4.75rem; text-align: left; color: white; text-shadow: -4px 5px 7px rgba(0, 0, 0, 0.4);"
+			style="font-family: futura, sans-serif; font-weight: 400; font-style: normal; font-size: 4.75rem; text-align: left; color: white; text-shadow: -4px 5px 7px rgba(0, 0, 0, 0.2);"
 		>
-			<span style="font-weight: 600; color: #6CFF96;">Newest</span>
+			<span style="font-weight: 600; color: #993467;">Newest</span>
 			and Most
 			<br />
-			<span style="font-weight: 600; color: #6CFF96;">Secure</span>
+			<span style="font-weight: 600; color: #993467;">Secure</span>
 			File
 			<br />
-			<span style="font-weight: 600; color: #6CFF96;">Storage</span>
-			 Application.
+			<span style="font-weight: 600; color: #993467;">Storage</span>
+			Application.
 		</h1>
 
 		<div class="flex flex-1 items-center justify-end">

diff --git a/static/backgroundsAndAssets/defaultBackground2.svg b/static/backgroundsAndAssets/defaultBackground2.svg
diff --git a/static/backgroundsAndAssets/newBackground.jpg b/static/backgroundsAndAssets/newBackground.jpg
diff --git a/static/backgroundsAndAssets/newBackground2.jpg b/static/backgroundsAndAssets/newBackground2.jpg
diff --git a/static/backgroundsAndAssets/newLandingBackground.jpg b/static/backgroundsAndAssets/newLandingBackground.jpg