emoral435 · emoral435 · May 11, 2024 · May 11, 2024 · May 22, 2024 · May 22, 2024
diff --git a/README.md b/README.md
@@ -31,7 +31,8 @@
 
 With Docker Desktop installed and opened, you can run these commands at the root directory of this GitHub repo...
 ```shell
-# if you are running this for the first time, or have made changes and want to see it take affect on its deployment, use this
+# if you are running this for the first time, or have made changes
+# and want to see it take affect on its deployment, use this
 docker compose up -d --build
 # starts the application in its detached state
 docker compose up -d

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -2,11 +2,9 @@ FROM node:19 as build
 
 ENV NODE_ENV=production 
 
-
 WORKDIR /app
 
-COPY package.json ./
-COPY package-lock.json ./
+COPY package*.json .
 RUN npm install
 COPY . ./
 RUN npm run build

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,15 +14,17 @@
 		"test:integration": "playwright test",
 		"test:unit": "vitest",
 		"smui-theme": "smui-theme compile static/smui.css -i src/theme",
-		"prepare": "npm run smui-theme-light && npm run smui-theme-dark",
+		"prepare-smui": "npm run smui-theme-light && npm run smui-theme-dark",
 		"smui-theme-light": "smui-theme compile static/smui.css -i src/theme",
 		"smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark"
 	},
 	"devDependencies": {
 		"@mdi/js": "^7.4.47",
 		"@playwright/test": "^1.28.1",
 		"@smui/button": "^7.0.0",
+		"@smui/form-field": "^7.0.0",
 		"@smui/icon-button": "^7.0.0",
+		"@smui/top-app-bar": "^7.0.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",

diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -1,15 +1,22 @@
 <!doctype html>
 <html lang="en">
 	<head>
+		<title>Swole Goal</title>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<!-- Roboto, and Roboto Mono fonts -->
 		<link
 		href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
 		rel="stylesheet"
 		/>
 		%sveltekit.head%
+		<style type=""text/css">
+			html, body {
+				padding: 0;
+				margin: 0;
+			}
+		</style>
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -1,3 +1,4 @@
+<!-- theming for the entire webapge -->
 <svelte:head>
 	<!-- SMUI Styles -->
 	{#if darkTheme === undefined}
@@ -13,29 +14,60 @@
 	{/if}
 </svelte:head>
 
-<nav>
-	<a href="/">Home</a>
-	<a href="/about">About</a>
-	<a href="/settings">Settings</a>
-	<IconButton title={darkTheme ? 'Light mode' : 'Dark mode'}
-		on:click={() => (darkTheme = !darkTheme)}>
-		<Icon tag="svg"
-			viewBox="0 0 24 24">
-			<path fill="currentColor" d={darkTheme ? mdiWeatherSunny : mdiWeatherNight} />
-		</Icon>
-	</IconButton>
-</nav>
+<!-- Navbar for the landing page -->
+<div class="landing-navbar">
+	<TopAppBar variant="static"
+		color={darkTheme ? 'secondary' : 'primary'}>
+		<Row>
+			<Section>
+
+			</Section>
+			<Section>
+				<Button on:click={() => goto('/')}
+					aria-label="Home">
+					SWOLE GOAL
+				</Button>
+			</Section>
+			<Section align="end" toolbar>
+				<Button on:click={() => goto('/about')}
+					aria-label="About">
+					ABOUT
+				</Button>
+				<Button on:click={() => goto('/login')}
+					aria-label="Login">
+					LOGIN
+				</Button>
+				<IconButton title={darkTheme ? 'Light mode' : 'Dark mode'}
+					on:click={() => (darkTheme = !darkTheme)}>
+					<Icon tag="svg"
+						viewBox="0 0 24 24">
+						<path fill="currentColor" d={darkTheme ? mdiWeatherSunny : mdiWeatherNight} />
+					</Icon>
+				</IconButton>
+			</Section>
+		</Row>
+	</TopAppBar>
+</div>
 
 <slot></slot>
 
 <script lang="ts">
 	import { onMount } from 'svelte'
 	import IconButton, { Icon } from '@smui/icon-button'
+	import Button from "@smui/button"
 	import { mdiWeatherSunny, mdiWeatherNight } from '@mdi/js';
+	import TopAppBar, { Row, Section, Title } from '@smui/top-app-bar';
+	import { goto } from '$app/navigation';
 
 	let darkTheme: boolean | undefined = undefined
 
 	onMount(() => {
 		darkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
 	})
-</script>
+</script>
+
+<style lang="scss" scoped>
+	.landing-navbar {
+		font-family: "Comic Sans MS", "Comic Sans", cursive;
+	}
+</style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -1,20 +1,21 @@
-<div>Hello.</div>
-<Welcome project="Not Swole Goal" />
-<Button 
-	on:click={() => alert('It worked!')}
-	color="secondary">
-	Click me!
-</Button>
-<Button 
-	on:click={() => alert('It worked!')}
-	color="primary">
-	Click me too!
-</Button>
-<IconButton on:click={() => clicked++}>
-	<Icon tag="svg" viewBox="0 0 24 24">
-		<path fill="currentColor" d={mdiFormatColorFill} />
-	</Icon>
-</IconButton>
+<main class="main">
+	<Welcome />
+	<Button
+		on:click={() => alert('It worked!')}
+		color="secondary">
+		Click me!
+	</Button>
+	<Button
+		on:click={() => alert('It worked!')}
+		color="primary">
+		Click me too!
+	</Button>
+	<IconButton on:click={() => clicked++}>
+		<Icon tag="svg" viewBox="0 0 24 24">
+			<path fill="currentColor" d={mdiFormatColorFill} />
+		</Icon>
+	</IconButton>
+</main>
 
 <script lang="ts">
 	import Welcome from "./Welcome.svelte"
@@ -24,3 +25,14 @@
 
 	let clicked = 0
 </script>
+
+<style lang="scss">
+.main {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+</style>
diff --git a/frontend/src/routes/Welcome.svelte b/frontend/src/routes/Welcome.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <h1>Welcome to project {project}</h1>
-<p>Visit <a href="https://github.com/emoral435/swole-goal">the repository</a> to find out more about this project!</p>
+<p >Visit <a href="https://github.com/emoral435/swole-goal">the repository</a> to find out more about this project!</p>
 <a href="/about">Click here to visit the about page.</a>
 
 <input type="number" bind:value={age} />

diff --git a/frontend/src/routes/about.svelte b/frontend/src/routes/about.svelte
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
@@ -0,0 +1,3 @@
+<h1>Login using name and other qualities...</h1>
+<p>TODO...</p>
+<a href="/">Home</a>
diff --git a/frontend/static/favicon.png b/frontend/static/favicon.png
diff --git a/frontend/static/favicon.svg b/frontend/static/favicon.svg
diff --git a/frontend/static/smui-dark.css b/frontend/static/smui-dark.css
diff --git a/frontend/static/smui.css b/frontend/static/smui.css