Merge pull request #66 from dejanvasic85/dev

Adding option to remove colour from the notes

src/components/ColourPicker.svelte

@@ -2,15 +2,16 @@
 	import { slide } from 'svelte/transition';
 	import { createEventDispatcher } from 'svelte';
 
+	import { colours, type Colour } from '$lib/colours';
+
 	import Button from './Button.svelte';
 	import Icon from './Icon.svelte';
-	import { colours, type Colour } from '$lib/colours';
 
 	let isOpen = false;
 
 	const dispatch = createEventDispatcher();
 
-	function handleColourClick(colour: Colour) {
+	function handleColourClick(colour: Colour | null) {
 		dispatch('colourClick', { colour });
 		isOpen = false;
 	}
@@ -25,11 +26,20 @@
 			class="absolute left-0 top-14 flex flex-col gap-1 bg-transparent"
 			in:slide={{ duration: 200 }}
 		>
+			<li class="block text-gray-800">
+				<button
+					aria-label="No colour"
+					class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-slate-400 bg-white text-gray-600 dark:border-slate-200"
+					on:click={() => handleColourClick(null)}
+				>
+					<Icon icon="cross" size={30} />
+				</button>
+			</li>
 			{#each colours as { cssClass, name }}
 				<li class="block text-gray-800">
 					<button
 						aria-label={name}
-						class="dark:border- h-12 w-12 rounded-full border-2 border-slate-400 dark:border-slate-200 {cssClass}"
+						class="h-12 w-12 rounded-full border-2 border-slate-400 dark:border dark:border-slate-200 {cssClass}"
 						on:click={() => handleColourClick(name)}
 					/>
 				</li>

src/components/Icon.svelte

@@ -12,6 +12,10 @@
 			path: 'M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z',
 			viewBox: '0 0 24 24'
 		},
+		cross: {
+			path: 'M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z',
+			viewBox: '0 0 20 20'
+		},
 		dotsVertical: {
 			path: 'M10 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4z',
 			viewBox: '0 0 20 20'

src/lib/colours.ts

@@ -1,5 +1,4 @@
 export const colours = [
-	{ name: 'slate', cssClass: 'bg-slate-100 dark:bg-slate-800' },
 	{ name: 'indigo', cssClass: 'bg-indigo-100 dark:bg-indigo-800' },
 	{ name: 'blue', cssClass: 'bg-blue-100 dark:bg-blue-800' },
 	{ name: 'rose', cssClass: 'bg-rose-100 dark:bg-rose-800' },

src/routes/board/+page.svelte

@@ -3,14 +3,13 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 
+	import Board from '$components/Board.svelte';
 	import { withAuth } from '$lib/auth';
 	import { getOrderedNotes, reorderNotes, updateNote } from '$lib/notes';
 	import { MaybeType, tryFetch } from '$lib/fetch';
 	import type { Note, NoteOrdered, User } from '$lib/types';
 	import { generateId } from '$lib/identityGenerator';
 
-	import Board from '../../components/Board.svelte';
-
 	const auth = withAuth();
 	const { getToken } = auth;
 	let localNotes: NoteOrdered[] = [];

src/routes/playground/+page.svelte

@@ -4,11 +4,11 @@
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
+	import Board from '$components/Board.svelte';
 	import { generateId } from '$lib/identityGenerator';
 	import { reorderNotes } from '$lib/notes';
 	import type { Note } from '$lib/types';
 
-	import Board from '../../components/Board.svelte';
 	import { localBoard, orderedNotes } from './noteStore';
 
 	onMount(() => {

svelte.config.js

@@ -11,7 +11,10 @@ const config = {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter(),
+		alias: {
+			'$components/*': 'src/components/*'
+		}
 	}
 };