Rename entrypoint to main.ts. Tweak text contrast

svelte/src/filesystem/Filesystem.svelte

@@ -42,10 +42,10 @@ onMount(() => {
 			return
 		}
 
-		// Custom CSS rules for the whole viewer. The MainMenu applies its
-		// styles to the <html> element. So we apply to the <body> element, our
-		// styles take precedence since they're lower level, and we can clean it
-		// up afterwards without overwriting global style
+		// Custom CSS rules for the whole viewer. App.svelte applies its styles
+		// to the <html> element. So we apply to the <body> element, our styles
+		// take precedence since they're lower level, and we can clean it up
+		// afterwards without overwriting global style
 		document.body.style = css_from_path(nav.path)
 		update_favicon()
 	})

svelte/src/filesystem/edit_window/Branding.ts

@@ -239,9 +239,9 @@ const generate_link_color = (link_color: string, body_color: string) => {
 	// If the body and link colours are both dark we lighten the link, and the
 	// other way around too
 	if (body[2] < 50 && link[2] < 50) {
-		link[2] = link[2] + 40 // Dark color, add lightness
+		link[2] = link[2] + 30 // Dark color, add lightness
 	} else if (body[2] > 50 && link[2] > 50) {
-		link[2] = link[2] - 40 // Light color, remove lightness
+		link[2] = link[2] - 30 // Light color, remove lightness
 	}
 	return rgb2hex(hsl2rgb(link)) // Convert back to hex
 }

svelte/src/filesystem/viewers/Audio.svelte

@@ -144,7 +144,7 @@ onMount(() => {
 		<h2>Tracklist</h2>
 		{#each siblings as sibling (sibling.id)}
 			{#if !sibling.is_hidden()}
-				<a href={"/d"+fs_encode_path(sibling.path)} class="node" class:playing={sibling.path === $nav.base.path}>
+				<a href={"/d"+fs_encode_path(sibling.path)} class="node" class:button_highlight={sibling.path === $nav.base.path}>
 					{#if sibling.path === $nav.base.path}
 						<i class="play_arrow icon">play_arrow</i>
 					{:else}
@@ -185,7 +185,4 @@ onMount(() => {
 .play_arrow {
 	margin: 4px;
 }
-.playing {
-	color: var(--accent_color);
-}
 </style>

svelte/src/layout/ToggleButton.svelte

@@ -54,7 +54,7 @@ const click = (e: MouseEvent) => {
 	flex: 0 0 content;
 }
 .on {
-	color: var(--accent_color);
+	color: var(--link_color);
 }
 .off {
 	color: var(--red_color);

svelte/src/layout/checkout/PickAmount.svelte

@@ -280,7 +280,7 @@ const submit = async (e: SubmitEvent) => {
 
 <style>
 .date {
-	color: var(--accent_color);
+	color: var(--link_color);
 }
 /* layout.css collapses the table borders, which makes the browser ignore any
    padding on the table itself. The cells line the table up with the rest of

svelte/src/main.ts

@@ -0,0 +1,4 @@
+import App from "wrap/App.svelte";
+import { mount } from "svelte";
+
+mount(App, { target: document.body });

svelte/src/util/Euro.svelte

@@ -18,6 +18,6 @@ let { symbol = "€", amount = 0, precision = 2 }: {
 	color: var(--red_color);
 }
 .positive {
-	color: var(--accent_color);
+	color: var(--link_color);
 }
 </style>

svelte/src/wrap.js

@@ -1,9 +0,0 @@
-import App from './wrap/MainMenu.svelte';
-import { mount } from "svelte";
-
-const app = mount(App, {
-	target: document.body,
-	props: {}
-});
-
-export default app;