titles

frontend/src/lib/Buttons/DragButton.svelte

@@ -11,7 +11,7 @@
 	class="{className} shadow-lg bg-white rounded-full disabled:opacity-50 {isActive
 		? 'text-blue-700'
 		: 'text-gray-800'}"
-	title="Enable Dragging"
+	title="Drag to Move"
 >
 	<Move />
 </button>

frontend/src/lib/Buttons/MaskButton.svelte

@@ -11,7 +11,7 @@
 	class="{className} rounded-full disabled:opacity-50  {isActive
 		? 'text-blue-700'
 		: 'text-gray-800'}"
-	title="Enable Masking"
+	title="Draw to Mask"
 >
 	<Mask />
 </button>

frontend/src/lib/Buttons/PPButton.svelte

@@ -6,7 +6,7 @@
 	on:click
 	disabled={isLoading}
 	class="button-paint {isLoading ? 'cursor-wait' : 'cursor-pointer'}"
-	title="New Paint Frame"
+	title="Prompt and Paint"
 >
 	{#if isLoading}
 		<span>paiting... </span>{:else}

frontend/src/lib/Buttons/RoomsSelector.svelte

@@ -12,7 +12,7 @@
 		.map((_, i) => ({ label: `room ${i}`, total: ~~Math.random() * 20, capacity: 20 }));
 
 	let selectedRoomID = 0;
-	let collapsed = false;
+	let collapsed = true;
 	$: selectedRoom = rooms[selectedRoomID];
 
 	function clickHandler(event: Event) {
@@ -33,6 +33,7 @@
 	class="text-xs md:text-sm bg-violet-100 text-violet-900 px-3 py-1 font-mono font-medium tracking-tight relative z-0 min-w-[25ch] 
 	{isLoading ? 'opacity-50' : ''}
 	{collapsed ? 'rounded-xl' : 'rounded-b-xl'}"
+	title="Choose a different room"
 	bind:this={boxEl}
 >
 	{#if !collapsed}

frontend/src/lib/Icons/Mask.svelte

@@ -6,20 +6,12 @@
 	class={classList}
 	width="40"
 	height="40"
-	viewBox="0 0 11 11"
+	viewBox="-2 -2 14 14"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
 >
 	<path
-		d="M5.5 10C7.98528 10 10 7.98528 10 5.5C10 3.01472 7.98528 1 5.5 1C3.01472 1 1 3.01472 1 5.5C1 7.98528 3.01472 10 5.5 10Z"
-		stroke="currentColor"
-		stroke-width="0.899979"
-	/>
-	<path
-		d="M7.07441 1.28369C5.36599 1.92179 4.14941 3.56879 4.14941 5.50019C4.14941 7.43137 5.36599 9.07837 7.07441 9.71669M8.42441 2.12519L4.14941 5.05019M9.32441 3.25019L4.37441 6.62519M9.77441 4.60019L5.04941 7.97519M9.77441 6.40019L5.94941 9.10019"
-		stroke="currentColor"
-		stroke-width="0.899979"
-		stroke-linecap="round"
-		stroke-linejoin="round"
+		d="M3.07066 9.3043L8.07078 4.30418L5.69582 1.92922L0.695701 6.92934C0.626865 6.99826 0.577967 7.08453 0.554193 7.17899L0 10L2.82047 9.44581C2.91516 9.42213 3.00179 9.37317 3.07066 9.3043V9.3043ZM9.68493 2.69003C9.88667 2.48823 10 2.21457 10 1.92922C10 1.64388 9.88667 1.37022 9.68493 1.16842L8.83158 0.315069C8.62978 0.11333 8.35612 0 8.07078 0C7.78543 0 7.51177 0.11333 7.30997 0.315069L6.45662 1.16842L8.83158 3.54338L9.68493 2.69003Z"
+		fill="currentColor"
 	/>
 </svg>

frontend/src/lib/Menu.svelte

@@ -21,7 +21,12 @@
 <div class="grid grid-cols-1 gap-1 w-max mx-auto place-items-center">
 	<PPButton {isLoading} on:click={() => dispatch('prompt')} />
 	<RoomsSelector {isLoading} />
-	<a href="https://liveblocks.io" target="_blank" rel="noopener noreferrer">
-		<LiveBlocks />
+	<a
+		href="https://liveblocks.io"
+		target="_blank"
+		rel="noopener noreferrer"
+		title="Multiplayer backend by LiveBlocks.io"
+	>
+		<LiveBlocks classList="max-h-8 md:max-h-fit" />
 	</a>
 </div>