From 9a5dbb4d18a2242e638025239902f38768381994 Mon Sep 17 00:00:00 2001
From: "Z. Charles Dziura" <zachary@dziura.email>
Date: Tue, 10 Jun 2025 15:44:25 -0400
Subject: [PATCH] Cards are now looking pretty good

---
 webapp/src/app/components/card/card.scss |  2 +-
 webapp/src/app/routes/plan/plan.scss     | 24 +++++++++++++++---------
 webapp/src/app/routes/plan/plan.ts       |  8 +++++++-
 webapp/src/styles/components/button.scss | 23 +++++++++++++++++++++++
 4 files changed, 46 insertions(+), 11 deletions(-)
 create mode 100644 webapp/src/styles/components/button.scss

diff --git a/webapp/src/app/components/card/card.scss b/webapp/src/app/components/card/card.scss
index 57835dd..d9fce72 100644
--- a/webapp/src/app/components/card/card.scss
+++ b/webapp/src/app/components/card/card.scss
@@ -4,7 +4,7 @@
 	border-radius: 0.2em;
 	color: var(--color-on-surface);
 	display: inline-grid;
-	font-size: 2em;
+	font-size: 1.8em;
 	grid-template-areas:
 		'head'
 		'body'
diff --git a/webapp/src/app/routes/plan/plan.scss b/webapp/src/app/routes/plan/plan.scss
index 85b4380..7d8abf6 100644
--- a/webapp/src/app/routes/plan/plan.scss
+++ b/webapp/src/app/routes/plan/plan.scss
@@ -1,17 +1,23 @@
 :host {
-    display: grid;
-    grid-template-areas:
-        "head"
-        "body";
-    grid-template-rows: min-content auto;
-    height: 100%;
+	display: grid;
+	grid-template-areas:
+		'head'
+		'body';
+	grid-template-rows: min-content auto;
+	height: 100%;
 }
 
 header {
-    grid-area: 'head';
+	grid-area: head;
 }
 
 .meal-plan {
-    grid-area: "body";
-    padding-left: 1.8em;
+	display: flex;
+	flex-direction: column;
+	grid-area: body;
+	padding-left: 1.8em;
+
+	& > *:not(:last-child) {
+		margin-bottom: 1.6em;
+	}
 }
diff --git a/webapp/src/app/routes/plan/plan.ts b/webapp/src/app/routes/plan/plan.ts
index 161471f..8902433 100644
--- a/webapp/src/app/routes/plan/plan.ts
+++ b/webapp/src/app/routes/plan/plan.ts
@@ -11,5 +11,11 @@ import { Meal } from './components/meal/meal';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Plan {
-	protected meals = signal<Array<TMeal>>([new TMeal(uuidv7(), 'breakfast', [])]);
+	protected meals = signal<Array<TMeal>>([
+		new TMeal(uuidv7(), 'breakfast', []),
+		new TMeal(uuidv7(), 'snack', [], 'Morning Snack'),
+		new TMeal(uuidv7(), 'lunch', []),
+		new TMeal(uuidv7(), 'snack', [], 'Afternoon Snack'),
+		new TMeal(uuidv7(), 'dinner', []),
+	]);
 }
diff --git a/webapp/src/styles/components/button.scss b/webapp/src/styles/components/button.scss
new file mode 100644
index 0000000..ef1a0e4
--- /dev/null
+++ b/webapp/src/styles/components/button.scss
@@ -0,0 +1,23 @@
+button {
+	background-color: var(--color-surface-container);
+	border: 1px solid var(--color-outline);
+	border-radius: 0.4em;
+	color: var(--color-on-surface-container);
+	cursor: pointer;
+	font-size: 0.8em;
+	padding: 0.2em 0.6em;
+
+	&:hover {
+		box-shadow: var(--color-shadow) 0px 3px 8px;
+		box-shadow: var(--color-shadow) 0px 2px 5px -1px, var(--color-shadow-variant) 0px 1px 3px -1px;
+
+		&:active {
+			background-color: var(--color-primary-container-alt);
+		}
+	}
+
+	&.primary {
+		background-color: var(--color-primary-container);
+		color: var(--color-on-primary-container);
+	}
+}