Merge branch 'ui-update-2'

frontend/src/lib/App.svelte

@@ -190,7 +190,7 @@
 <!-- <div class="fixed top-0 right-0 z-10 p-2">
 	<ShareWithCommunity />
 </div> -->
-<div class="fixed bottom-32 left-0 right-0 z-10 my-2">
+<div class="fixed bottom-4 md:bottom-32 left-0 right-0 z-10 my-2">
 	<Menu on:prompt={onPrompt} {isLoading} />
 </div>
 

frontend/src/lib/Buttons/AboutButton.svelte

@@ -1,5 +1,13 @@
-<button on:click title="Prompt and Paint" class="underline w-[210px] text-sm">
-	<span>About</span>
+<button on:click class="md:w-[210px] text-sm flex items-center order-last md:order-none">
+	<svg width=".9em" height=".9em" viewBox="0 0 24 24" class="mr-1"
+		><path
+			fill="currentColor"
+			fill-rule="evenodd"
+			d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2zm0 7a1 1 0 0 0-1 1a1 1 0 1 1-2 0a3 3 0 1 1 4.44 2.633a1.404 1.404 0 0 0-.383.288a.303.303 0 0 0-.057.085v.494a1 1 0 1 1-2 0V13c0-.58.253-1.047.539-1.38c.281-.33.63-.572.94-.742A1 1 0 0 0 12 9zm.999 4.011v-.004v.005zM12 15a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H12z"
+			clip-rule="evenodd"
+		/></svg
+	>
+	About
 </button>
 
 <style lang="postcss" scoped>

frontend/src/lib/Buttons/RoomsSelector.svelte

@@ -3,6 +3,7 @@
 	import Room from '$lib/Icons/Room.svelte';
 	import Pin from '$lib/Icons/Pin.svelte';
 	import People from '$lib/Icons/People.svelte';
+	import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
 	import { onMount } from 'svelte';
 	import { selectedRoomID } from '$lib/store';
 	import { MAX_CAPACITY } from '$lib/constants';
@@ -42,8 +43,7 @@
 <div class="min-w-[25ch]">
 	{#if loadingRooms}
 		<div
-			class="text-xs rounded md:text-smtext-gray-700 py-1 font-medium tracking-tight relative z-0 
-	{isLoading ? 'opacity-50' : ''}"
+			class="text-sm rounded md:text-smtext-gray-700 py-1 font-medium tracking-tight relative"
 			title="Choose a different room"
 			bind:this={boxEl}
 		>
@@ -108,6 +108,12 @@
 				{/if}
 			</div>
 		</div>
+	{:else}
+		<div
+			class="bg-gradient-to-r from-transparent via-blue-900/20 to-transparent py-1.5 text-blue-700 rounded-full flex justify-center items-center"
+		>
+			<LoadingIcon classList="animate-spin mr-2 text-sm" /> loading rooms
+		</div>
 	{/if}
 </div>
 

frontend/src/lib/Icons/Cursor.svelte

@@ -18,7 +18,7 @@
 		fill-rule="evenodd"
 		clip-rule="evenodd"
 		d="M3.66305 9.86091L0.856101 3.49392C0.119663 1.82347 1.82248 0.120639 3.49294 0.857077L9.85994 3.66402C11.5607 4.41383 11.4082 6.87562 9.62784 7.40973L7.92085 7.92182L7.40875 9.62881C6.87465 11.4092 4.41286 11.5617 3.66305 9.86091ZM1.77113 3.09053C1.40291 2.2553 2.25432 1.40388 3.08955 1.7721L9.45654 4.57905C10.3069 4.95395 10.2307 6.18485 9.34049 6.4519L7.6335 6.964C7.31152 7.06059 7.05961 7.3125 6.96302 7.63448L6.45093 9.34146C6.18387 10.2316 4.95298 10.3079 4.57807 9.45751L1.77113 3.09053Z"
-		{fill}
-		fill-opacity="0.2"
+		fill="white"
+		fill-opacity="0.8"
 	/>
 </svg>

frontend/src/lib/Icons/Pin.svelte

@@ -2,9 +2,15 @@
 	export let classList = '';
 </script>
 
-<svg class={classList} height="1em" viewBox="0 0 7 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
+	class={classList}
+	height="1em"
+	viewBox="0 0 7 9"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
 	<path
 		d="M3.5 4.58599C3.74063 4.58599 3.94669 4.4961 4.11819 4.31633C4.2894 4.13687 4.375 3.92102 4.375 3.66879C4.375 3.41656 4.2894 3.20056 4.11819 3.02079C3.94669 2.84132 3.74063 2.75159 3.5 2.75159C3.25937 2.75159 3.05346 2.84132 2.88225 3.02079C2.71075 3.20056 2.625 3.41656 2.625 3.66879C2.625 3.92102 2.71075 4.13687 2.88225 4.31633C3.05346 4.4961 3.25937 4.58599 3.5 4.58599ZM3.5 7.95669C4.38958 7.10064 5.04948 6.32285 5.47969 5.62334C5.9099 4.92413 6.125 4.30318 6.125 3.76051C6.125 2.92739 5.87154 2.24515 5.36462 1.71378C4.858 1.18273 4.23646 0.917197 3.5 0.917197C2.76354 0.917197 2.14185 1.18273 1.63494 1.71378C1.12831 2.24515 0.875 2.92739 0.875 3.76051C0.875 4.30318 1.0901 4.92413 1.52031 5.62334C1.95052 6.32285 2.61042 7.10064 3.5 7.95669ZM3.5 9C3.44167 9 3.38333 8.98853 3.325 8.9656C3.26667 8.94267 3.21562 8.9121 3.17188 8.87389C2.10729 7.8879 1.3125 6.97269 0.7875 6.12825C0.2625 5.28352 0 4.49427 0 3.76051C0 2.61401 0.351896 1.70064 1.05569 1.02038C1.75919 0.340127 2.57396 0 3.5 0C4.42604 0 5.24081 0.340127 5.94431 1.02038C6.6481 1.70064 7 2.61401 7 3.76051C7 4.49427 6.7375 5.28352 6.2125 6.12825C5.6875 6.97269 4.89271 7.8879 3.82812 8.87389C3.78438 8.9121 3.73333 8.94267 3.675 8.9656C3.61667 8.98853 3.55833 9 3.5 9Z"
-		fill="#338D4C"
+		fill="white"
 	/>
 </svg>

frontend/src/lib/Menu.svelte

@@ -1,42 +1,51 @@
 <script lang="ts">
-	import { onMount, createEventDispatcher } from 'svelte';
-	import PPButton from '$lib/Buttons/PPButton.svelte';
+	import { createEventDispatcher } from 'svelte';
 	import RoomsSelector from '$lib/Buttons/RoomsSelector.svelte';
 	import AboutButton from '$lib/Buttons/AboutButton.svelte';
 	import { toggleAbout } from '$lib/store';
-	// import { useBroadcastEvent } from '$lib/liveblocks';
 
 	// const broadcast = useBroadcastEvent();
 
 	const dispatch = createEventDispatcher();
 
 	export let isLoading = false;
-
-	const onKeyup = (e: KeyboardEvent) => {
-		if (e.key === 'Enter') {
-			dispatch('prompt');
-		}
-	};
-	onMount(() => {
-		window.addEventListener('keyup', onKeyup);
-		return () => {
-			window.removeEventListener('keyup', onKeyup);
-		};
-	});
 </script>
 
-<div class="flex items-center justify-between px-12">
+<svelte:window
+	on:keyup|preventDefault|stopPropagation={(e) => e.key === 'Enter' && dispatch('prompt')}
+/>
+<div class="flex flex-col md:flex-row items-center justify-between px-12 gap-4 md:gap-0">
 	<AboutButton
 		on:click={() => {
 			$toggleAbout = !$toggleAbout;
-			// broadcast({ type: 'EMOJI', emoji: '🔥' });
 		}}
 	/>
 
 	<button
 		on:click={() => dispatch('prompt')}
-		class="text-3xl bg-blue-600 text-white px-6 py-2 rounded-2xl ring ring-blue-500 font-semibold shadow-2xl self-center"
-		>🖍 Paint</button
-	><RoomsSelector {isLoading} />
+		class="order-first md:order-none text-3xl bg-blue-600 text-white px-6 py-2 rounded-2xl ring ring-blue-500 font-semibold shadow-2xl self-center flex items-center hover:saturate-150"
+		><span class="mr-3">🖍</span>Paint
+		<span
+			class="bg-blue-800 text-gray-300 rounded-lg px-2 py-0.5 text-base ml-4 hidden sm:flex items-center translate-y-[2px]"
+			><svg
+				class="text-sm mr-1.5"
+				width="1em"
+				height="1em"
+				viewBox="0 0 10 13"
+				fill="currentColor"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M8.5 8.5V0H9.5V9.5H1.70711L4.03553 11.8284C4.2308 12.0237 4.2308 12.3403 4.03553 12.5355C3.84027 12.7308 3.52369 12.7308 3.32843 12.5355L0.146447 9.35355C-0.0488155 9.15829 -0.0488155 8.84171 0.146447 8.64645L3.32843 5.46447C3.52369 5.2692 3.84027 5.2692 4.03553 5.46447C4.2308 5.65973 4.2308 5.97631 4.03553 6.17157L1.70711 8.5H8.5Z"
+					fill="currentColor"
+				/>
+			</svg>
+			Enter</span
+		></button
+	>
+
+	<RoomsSelector {isLoading} />
 	<!-- <PPButton {isLoading} on:click={() => dispatch('prompt')} /> -->
 </div>

frontend/src/lib/PaintCanvas.svelte

@@ -153,13 +153,13 @@
 
 <div
 	bind:this={containerEl}
-	class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden z-0 bg-gray-200"
+	class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden z-0 bg-blue-200/20"
 >
 	<canvas
 		bind:this={$canvasEl}
 		{width}
 		{height}
-		class="absolute top-0 left-0 bg-white shadow-2xl"
+		class="absolute top-0 left-0 bg-white shadow-2xl shadow-blue-500/20"
 	/>
 	<slot />
 </div>

frontend/src/lib/PaintFrame.svelte

@@ -1,8 +1,4 @@
 <script lang="ts">
-	import PPButton from '$lib/Buttons/PPButton.svelte';
-	import DragButton from '$lib/Buttons/DragButton.svelte';
-	import MaskButton from '$lib/Buttons/MaskButton.svelte';
-	import UndoButton from '$lib/Buttons/UndoButton.svelte';
 	import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
 	import { CANVAS_SIZE, FRAME_SIZE } from '$lib/constants';
 
@@ -285,22 +281,6 @@
 								/></svg
 							>
 						</button>
-						<!-- <PPButton {isLoading} on:click={() => dispatch('prompt')} /> -->
-
-						<!-- <DragButton className={'p-1'} {isLoading} isActive={dragEnabled} on:click={toggleDrag} /> -->
-						<!-- <div class="bg-blue-700 rounded-lg shadow-lg">
-						azeeza
-						<MaskButton
-							{isLoading}
-							className={'p-1'}
-							isActive={!dragEnabled}
-							on:click={toggleDrawMask}
-						/>
-						{#if !dragEnabled}
-							<span class="border-gray-800 border-opacity-50 border-r-2 my-2" />
-							<UndoButton className={'p-1'} {isLoading} on:click={cleanMask} />
-						{/if}
-					</div> -->
 					</div>
 				{/if}
 			</div>

frontend/src/lib/PromptModal.svelte

@@ -64,10 +64,10 @@
 
 <form
 	class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 flex items-center justify-center bg-black bg-opacity-80"
-	on:submit|preventDefault={onPrompt}
+	on:submit|preventDefault|stopPropagation={onPrompt}
 >
 	<div
-		class="flex bg-white itemx-center overflow-hidden rounded-lg w-full max-w-lg 2xl:max-w-xl"
+		class="flex bg-white overflow-hidden rounded-2xl w-full max-w-lg 2xl:max-w-xl"
 		bind:this={boxEl}
 	>
 		<input
@@ -75,16 +75,16 @@
 			bind:this={inputEl}
 			on:click|stopPropagation
 			on:input={onInput}
-			class="flex-1 outline-none ring-0 border-none text-xl 2xl:text-2xl"
+			class="flex-1 outline-none ring-0 border-none text-xl 2xl:text-2xl py-3 px-3"
 			placeholder="Describe your prompt"
 			title="Input prompt to generate image and obtain palette"
 			type="text"
 			name="prompt"
 		/>
 		<button
-			on:click|preventDefault={onPrompt}
-			class="font-bold bg-blue-700 text-white border-l-2 px-5 text-xl 2xl:text-2xl spacing tracking-wide"
-			type="submit"><span class="mr-2">🖌</span> Paint</button
-		>
+			class="font-semibold bg-blue-700 text-white border-l-2 px-5 text-xl 2xl:text-2xl spacing tracking-wide hover:saturate-150"
+			type="submit"
+			><span class="mr-2">🖍</span> Paint
+		</button>
 	</div>
 </form>

frontend/src/routes/+/+page.svelte

@@ -56,7 +56,7 @@
 </script>
 
 <About
-	classList={$toggleAbout || loading ? 'flex' : 'hidden'}
+	classList={$toggleAbout ? 'flex' : 'hidden'}
 	on:click={() => ($toggleAbout = false)}
 	{loading}
 />

frontend/src/routes/+page.svelte

@@ -56,7 +56,7 @@
 </script>
 
 <About
-	classList={$toggleAbout || loading ? 'flex' : 'hidden'}
+	classList={$toggleAbout ? 'flex' : 'hidden'}
 	on:click={() => ($toggleAbout = false)}
 	{loading}
 />