Styled Timeline

package.json

@@ -32,6 +32,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"svelte-kit": "^1.2.0"
 	}
 }

src/lib/components/Action.svelte

@@ -4,11 +4,21 @@
 	let { action = $bindable(), deleteself }: { action: ActionData; deleteself: () => void } =
 		$props();
 
+	let actionBorderColor = $derived(
+		action.result === 'success' ? 'border-cresc_green' : 'border-fail_red'
+	);
 	let actionBackgroundColor = $derived(
 		action.result === 'success' ? 'bg-cresc_green' : 'bg-fail_red'
 	);
 </script>
 
+<!-- <button -->
+<!-- 	class="{actionBorderColor} w-full p-1 rounded border-2 text-text_yellow" -->
+<!-- 	onclick={deleteself} -->
+<!-- > -->
+<!-- 	{action.type} -->
+<!-- </button> -->
+
 <button
 	class="{actionBackgroundColor} w-full p-1 rounded border-2 border-outline_gray text-text_white"
 	onclick={deleteself}

src/lib/components/Timeline.svelte

@@ -3,15 +3,18 @@
 	import Action from './Action.svelte';
 
 	let { actions = $bindable() }: { actions: ActionData[] } = $props();
-	let latestActions: ActionData[] = $derived(actions.toReversed().slice(0, 5));
+	// let latestActions: ActionData[] = $derived(actions.toReversed().slice(0, 5));
 </script>
 
-<div class="flex flex-col items-center h-[80vh] bg-btn_grey text-text_white p-1 rounded gap-2 w-80">
-	{#each latestActions as _, i}
+<h1 class="text-text_red">Timeline</h1>
+<div
+	class="flex flex-col items-center h-full bg-btn_grey border-solid border-2 border-text_red p-2 rounded gap-2 w-full overflow-auto"
+>
+	{#each actions as _, i}
 		<Action
-			bind:action={latestActions[i]}
+			bind:action={actions[i]}
 			deleteself={() => {
-				actions.splice(actions.indexOf(latestActions[i]), 1);
+				actions.splice(actions.indexOf(actions[i]), 1);
 			}}
 		/>
 	{/each}

src/routes/+layout.svelte

@@ -8,5 +8,7 @@
 <style lang="postcss">
 	:global(body) {
 		@apply bg-bg_gray;
+		@apply font-mono;
+		touch-action: manipulation;
 	}
 </style>

src/routes/scout/+page.svelte

@@ -16,7 +16,8 @@
 	<Timeline bind:actions />
 
 	<!--to be changed in the future-->
-	<button class="bg-btn_grey w-80 p-1 rounded border-2 border-outline_gray" onclick={addAction}
-		>Add Action</button
+	<button
+		class="bg-btn_grey w-80 p-1 rounded border-2 border-text_red text-text_yellow"
+		onclick={addAction}>Add Action</button
 	>
 </main>

tailwind.config.js

@@ -4,15 +4,16 @@ export default {
 	theme: {
 		colors: {
 			navbar_black: '#1c1c1c',
-			outline_gray: '#c2c2c2',
-			cresc_green: '#00d586',
-			bg_gray: '#2c2c2c',
+			outline_gray: '#ec4899',
+			cresc_green: '#49A078',
+			bg_gray: '#020617',
 			slack_purple: '#4A154B',
 			robot_blue: '#0083E6',
 			robot_red: '#ED1C24',
-			fail_red: '#EE3C42',
-			btn_grey: '#5C5C5C',
-			text_white: '#ffffff'
+			fail_red: '#FF6663',
+			btn_grey: '#0f172a',
+			text_red: '#FF4848',
+			text_yellow: '#F6B14B'
 		},
 		extend: {}
 	},