Start implementing new styles

src/lib/components/Button.svelte

@@ -1,50 +0,0 @@
-<script lang="ts">
-	type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'danger';
-
-	export let variant: ButtonType = 'primary';
-</script>
-
-<button class={variant} {...$$restProps} on:click>
-	<slot />
-</button>
-
-<style lang="scss">
-	@mixin button(
-		$bg-color: $primary-color,
-		$color: $secondary-color,
-		$active-color: $primary-accent-color
-	) {
-		border-style: none;
-		border-radius: 6px;
-		padding: 2px 10px 2px 10px;
-		font-family: $font-family;
-		height: 40px;
-		max-height: 40px;
-		font-weight: bold;
-		color: $color;
-		border: 1px solid;
-		background-color: $bg-color;
-
-		&:hover {
-			cursor: pointer;
-		}
-		&:active {
-			background-color: $active-color;
-		}
-	}
-
-	.primary {
-		@include button();
-	}
-	.secondary {
-		@include button($secondary-color, $primary-color, $secondary-accent-color);
-	}
-
-	.tertiary {
-		@include button(transparent, $secondary-color, $primary-accent-color);
-	}
-
-	.danger {
-		@include button($danger-accent-color, $danger-color, $danger-active-color);
-	}
-</style>

src/lib/components/NavBar.svelte

@@ -1,14 +1,39 @@
 <script lang="ts">
-	import { Navbar, NavBrand, Modal, Button } from 'flowbite-svelte';
-	import { UserSettingsSolid, UploadSolid } from 'flowbite-svelte-icons';
+	import {
+		Navbar,
+		NavBrand,
+		Modal,
+		Drawer,
+		Button,
+		CloseButton,
+		Checkbox,
+		Toggle,
+		Select,
+		Input,
+		Label
+	} from 'flowbite-svelte';
+	import {
+		UserSettingsSolid,
+		UploadSolid,
+		InfoCircleSolid,
+		ArrowRightOutline
+	} from 'flowbite-svelte-icons';
 	import FileUpload from './FileUpload.svelte';
 	import { processFiles } from '$lib/upload';
 	import { afterNavigate } from '$app/navigation';
 	import { page } from '$app/stores';
+	import { sineIn } from 'svelte/easing';
+
+	let transitionParams = {
+		x: 320,
+		duration: 200,
+		easing: sineIn
+	};
 
 	let promise: Promise<void>;
 	let modal = false;
-	let isReader = false;
+	let drawer = true;
+	let isReader = true;
 
 	async function onUpload(files: FileList) {
 		promise = processFiles(files).then(() => {
@@ -19,6 +44,14 @@
 	afterNavigate(() => {
 		isReader = $page.route.id === '/[manga]/[volume]';
 	});
+
+	let selected = 'us';
+
+	let countries = [
+		{ value: 'us', name: 'auto' },
+		{ value: 'ca', name: 'Canada' },
+		{ value: 'fr', name: 'France' }
+	];
 </script>
 
 <div class="relative z-10">
@@ -27,12 +60,51 @@
 			<span class="text-xl font-semibold dark:text-white">Mokuro</span>
 		</NavBrand>
 		<div class="flex md:order-2 gap-5">
-			<UserSettingsSolid class="hover:text-cyan-300" />
-			<UploadSolid class="hover:text-cyan-300" on:click={() => (modal = true)} />
+			<UserSettingsSolid class="hover:text-primary-700" on:click={() => (drawer = false)} />
+			<UploadSolid class="hover:text-primary-700" on:click={() => (modal = true)} />
 		</div>
 	</Navbar>
+	{#if isReader}
+		<UserSettingsSolid
+			class="hover:text-primary-700 absolute right-5 top-5 opacity-10 hover:opacity-100"
+			on:click={() => (drawer = false)}
+		/>
+	{/if}
 </div>
 
+<Drawer
+	placement="right"
+	transitionType="fly"
+	width="lg:w-1/4 md:w-1/2 w-full"
+	{transitionParams}
+	bind:hidden={drawer}
+	id="sidebar1"
+>
+	<div class="flex items-center">
+		<h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold">
+			<UserSettingsSolid class="w-4 h-4 mr-2.5" />Settings
+		</h5>
+		<CloseButton on:click={() => (drawer = true)} class="mb-4 dark:text-white" />
+	</div>
+	<div class="flex flex-col gap-5">
+		<Toggle size="small">Right to left</Toggle>
+		<Toggle size="small">Display two pages</Toggle>
+		<Toggle size="small">First page is cover</Toggle>
+		<Toggle size="small">OCR enabled</Toggle>
+		<Toggle size="small">Display box outlines</Toggle>
+		<Toggle size="small">Editable text</Toggle>
+		<Toggle size="small">Toggle boxes on click</Toggle>
+		<div>
+			<Label>Fontsize:</Label>
+			<Select items={countries} bind:value={selected} />
+		</div>
+		<div>
+			<Label>Background color:</Label>
+			<Input type="color" />
+		</div>
+	</div>
+</Drawer>
+
 <Modal title="Upload" bind:open={modal} outsideclose>
 	{#await promise}
 		<h2 class="justify-center flex">Loading...</h2>

src/lib/components/Reader/MangaPage.svelte

@@ -2,6 +2,8 @@
 	import type { Page } from '$lib/types';
 
 	export let page: Page;
+	export let left: () => void;
+	export let right: () => void;
 
 	let bold = false;
 
@@ -38,14 +40,10 @@
 		return textBox;
 	});
 
-	export let src;
+	export let src: Blob;
 </script>
 
-<div style:--bold={fontWeight}>
-	<div class="bold">
-		<label>Bold</label>
-		<input bind:checked={bold} type="checkbox" placeholder="????" />
-	</div>
+<div>
 	<img draggable="false" src={URL.createObjectURL(src)} alt="img" />
 	{#each textBoxes as { left, top, width, height, lines, fontSize, writingMode }}
 		<div
@@ -63,6 +61,16 @@
 		</div>
 		<div />
 	{/each}
+	<button
+		on:click={left}
+		class={`left-0 top-0 absolute h-full w-[200%]`}
+		style:margin-left={page.img_width * -2 + 'px'}
+	/>
+	<button
+		on:click={right}
+		class={`right-0 top-0 absolute h-full w-[200%]`}
+		style:margin-right={page.img_width * -2 + 'px'}
+	/>
 </div>
 
 <style>
@@ -71,14 +79,6 @@
 		margin: 0 auto;
 	}
 
-	.bold {
-		position: absolute;
-		color: #000;
-		right: 10px;
-		bottom: 10px;
-		z-index: 99;
-	}
-
 	.text-box {
 		color: black;
 		padding: 0;

src/lib/components/Reader/Reader.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { currentManga, currentVolume } from '$lib/catalog';
-	import Button from '$lib/components/Button.svelte';
-	import { Panzoom, zoomOriginal } from '$lib/panzoom';
+	import { currentVolume } from '$lib/catalog';
+	import { Panzoom } from '$lib/panzoom';
 	import MangaPage from './MangaPage.svelte';
 
 	const volume = $currentVolume;
@@ -19,22 +18,8 @@
 	}
 </script>
 
-{#if volume}
-	<div>
-		<Button on:click={zoomOriginal}>Reset Zoom</Button>
-		<Button on:click={left}>{'<'}</Button>
-		<Button on:click={right}>{'>'}</Button>
-	</div>
+{#if volume && pages}
 	<Panzoom>
-		<MangaPage page={pages[page - 1]} src={Object.values(volume?.files)[page - 1]} />
+		<MangaPage page={pages[page - 1]} src={Object.values(volume?.files)[page - 1]} {left} {right} />
 	</Panzoom>
 {/if}
-
-<style>
-	div {
-		position: absolute;
-		bottom: 10px;
-		left: 10px;
-		z-index: 1;
-	}
-</style>

src/lib/components/Snackbar.svelte

@@ -1,24 +1,8 @@
 <script lang="ts">
 	import { snackbarStore } from '$lib/util/snackbar';
 	import { Toast } from 'flowbite-svelte';
-	import { CheckCircleSolid, FireOutline } from 'flowbite-svelte-icons';
-	import { fade, fly } from 'svelte/transition';
 </script>
 
 {#if $snackbarStore?.message && $snackbarStore?.visible}
 	<Toast position="bottom-right">{$snackbarStore?.message}</Toast>
 {/if}
-
-<style lang="scss">
-	div {
-		position: fixed;
-		right: 10px;
-		bottom: 10px;
-		padding: 20px;
-		border-radius: 6px;
-		border: 1px solid $secondary-color;
-		min-width: 250px;
-		display: flex;
-		z-index: 2;
-	}
-</style>