fix share to commnuity

frontend/src/lib/App.svelte

@@ -7,7 +7,7 @@
 	import PromptModal from '$lib/PromptModal.svelte';
 	import { COLORS } from '$lib/constants';
 	import { PUBLIC_WS_INPAINTING } from '$env/static/public';
-	import type { PromptImgKey, PromptImgObject } from '$lib/types';
+	import type { PromptImgKey } from '$lib/types';
 	import { Status } from '$lib/types';
 	import {
 		loadingState,
@@ -203,7 +203,7 @@
 		{/if}
 	</main>
 </div>
-<div class="fixed bottom-2 md:bottom-16 left-0 right-0 z-10 my-2">
+<div class="fixed bottom-0 md:bottom-16 left-0 right-0 z-10 my-2">
 	<Menu on:prompt={onPrompt} {isLoading} />
 </div>
 

frontend/src/lib/Buttons/AboutButton.svelte

@@ -1,17 +1,24 @@
-<div class="md:w-[210px] text-sm md:flex flex-col order-last md:order-none py-4">
-	<p class="inline pb-3">
+<script lang="ts">
+	import ShareWithCommunity from './ShareWithCommunity.svelte';
+</script>
+
+<div class="md:w-[210px] text-sm md:flex flex-col order-last md:order-none">
+	<p class="inline">
 		Instructions: move the <span class="text-blue-700 bg-blue-300/60 px-0.5">blue square</span>,
 		click "🖍 Paint".
 	</p>
-	<button on:click class="items-center inline-flex">
-		<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>
+	<div class="flex justify-between py-2 gap-3">
+		<button on:click class="items-center inline-flex">
+			<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>
+		<ShareWithCommunity classList={''} />
+	</div>
 </div>

frontend/src/lib/Buttons/ShareWithCommunity.svelte

@@ -5,8 +5,9 @@
 	import { canvasEl, selectedRoomID } from '$lib/store';
 	import { nanoid } from 'nanoid';
 
-	let isUploading: boolean = false;
+	export let classList = '';
 
+	let isUploading: boolean = false;
 	async function handleClick() {
 		if (isUploading) {
 			return;
@@ -49,7 +50,7 @@ ${canvasImage}
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-	class="text-xs font-mono flex items-center justify-center bg-black gap-x-1 rounded-xl cursor-pointer px-2 py-1"
+	class="{classList} text-xs font-mono flex items-center justify-center bg-black gap-x-1 rounded-xl cursor-pointer px-2 py-1 whitespace-nowrap"
 	on:click={handleClick}
 	title="Share with community"
 >

frontend/src/lib/Menu.svelte

@@ -3,7 +3,6 @@
 	import RoomsSelector from '$lib/Buttons/RoomsSelector.svelte';
 	import AboutButton from '$lib/Buttons/AboutButton.svelte';
 	import { toggleAbout } from '$lib/store';
-	import ShareWithCommunity from '$lib/Buttons/ShareWithCommunity.svelte';
 	// const broadcast = useBroadcastEvent();
 
 	const dispatch = createEventDispatcher();
@@ -15,16 +14,11 @@
 	on:keyup|preventDefault|stopPropagation={(e) => e.key === 'Enter' && dispatch('prompt')}
 />
 <div class="flex flex-col md:flex-row items-center justify-between px-4 md:px-12 gap-3 md:gap-0">
-	<div class="flex flex-col justify-center items-center">
-		<AboutButton
-			on:click={() => {
-				$toggleAbout = !$toggleAbout;
-			}}
-		/>
-		<div class="order-last max-w-[20ch]">
-			<ShareWithCommunity />
-		</div>
-	</div>
+	<AboutButton
+		on:click={() => {
+			$toggleAbout = !$toggleAbout;
+		}}
+	/>
 
 	<button
 		on:click={() => dispatch('prompt')}
@@ -32,7 +26,7 @@
 		disabled={isLoading}
 		class="{isLoading
 			? 'cursor-wait'
-			: 'cursor-pointer'} order-first md:order-none text-xl md:text-3xl bg-blue-600 text-white px-6 py-2 rounded-2xl ring ring-blue-500 font-semibold shadow-2xl shadow-blue-500 self-center flex items-center hover:saturate-150"
+			: 'cursor-pointer'} order-first md:order-none text-xl md:text-3xl bg-blue-600 text-white px-4 py-1 md:px-6 md:py-2 rounded-2xl ring ring-blue-500 font-semibold shadow-2xl shadow-blue-500 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]"

frontend/src/routes/+page.svelte

@@ -4,7 +4,6 @@
 	import type { Client } from '@liveblocks/client';
 	import LiveblocksProvider from '$lib/liveblocks/LiveblocksProvider.svelte';
 	import RoomProvider from '$lib/liveblocks/RoomProvider.svelte';
-	import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
 	import App from '$lib/App.svelte';
 	import About from '$lib/About.svelte';
 	import { PUBLIC_API_BASE } from '$env/static/public';