style: chat and post hovers and spacing (#274)

packages/ui/src/lib/components/chat-screen.svelte

@@ -74,8 +74,9 @@
 					<Button icon={ViewOff} on:click={toggleShowPost} />
 				</div>
 			</SingleColumn>
-			<Post class="detail" post={chat.post} />
+			<Post class="detail" post={chat.post} noHover />
 			<Persona
+				noHover
 				name={chat.persona.name}
 				pitch={chat.persona.pitch}
 				postsCount={chat.persona.postsCount}
@@ -88,31 +89,47 @@
 			</div>
 		{/if}
 	</div>
-	<Divider />
 
 	<!-- Extra content -->
 	<div class="messages">
-		<SingleColumn>
-			<slot />
+		{#if chat.messages.length > 0}
+			<Divider />
+			<SingleColumn>
+				<slot />
 
-			<!-- Chat bubbles -->
-			{#each chat.messages as message}
-				<div
-					class={`message ${message.myMessage ? 'my-message' : ''} ${
-						message.system ? 'system' : ''
-					}`}
-				>
-					<div>{message.text}</div>
-					<div>
-						{formatDateAndTime(message.timestamp)}
-						{#if message.system}
-							<br />
-							This is an automated message
-						{/if}
-					</div>
+				<div class="messages-inner">
+					<!-- Chat bubbles -->
+					{#each chat.messages as message}
+						<div
+							class={`message ${message.myMessage ? 'my-message' : ''} ${
+								message.system ? 'system' : ''
+							}`}
+						>
+							<div>{message.text}</div>
+							<div>
+								{formatDateAndTime(message.timestamp)}
+								{#if message.system}
+									<br />
+									This is an automated message
+								{/if}
+							</div>
+						</div>
+					{/each}
 				</div>
-			{/each}
-		</SingleColumn>
+			</SingleColumn>
+		{:else}
+			<Divider />
+			<SingleColumn>
+				<InfoBox>
+					<div class="icon">
+						<Info size={32} />
+					</div>
+					<p class="h2">Start a new chat</p>
+					<p>This will send an anonymous and private message to the writer of this post.</p>
+					<LearnMore href="/" />
+				</InfoBox>
+			</SingleColumn>
+		{/if}
 		{#if chat.blocked === true}
 			<Divider />
 			<SingleColumn>
@@ -143,6 +160,7 @@
 	<!-- Chat input -->
 	{#if chat.blocked !== true && chat.closed !== true}
 		<div class="chat-input-wrapper">
+			<Divider />
 			<SingleColumn>
 				<div class="chat-input">
 					<div class="textarea">
@@ -165,7 +183,7 @@
 
 <style lang="scss">
 	.original-post {
-		margin-bottom: var(--spacing-24);
+		padding-bottom: var(--spacing-24);
 		.original-header {
 			display: flex;
 			justify-content: space-between;
@@ -179,7 +197,11 @@
 	}
 
 	.messages {
-		margin-block: var(--spacing-48);
+		margin-bottom: 71px;
+
+		.messages-inner {
+			padding-top: var(--spacing-48);
+		}
 
 		.message {
 			display: flex;
@@ -225,6 +247,8 @@
 	.chat-input-wrapper {
 		position: fixed;
 		inset: auto 0 0 0;
+		background-color: var(--color-body-bg);
+
 		.chat-input {
 			display: flex;
 			flex-direction: row;

packages/ui/src/lib/components/grid-card.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import Divider from '$lib/components/divider.svelte'
 	let cls: string | undefined = undefined
+	export let noHover: boolean | undefined = undefined
 	export { cls as class }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class={`root card-wrapper ${cls}`} on:click>
+<div class={`root card-wrapper ${noHover ? '' : 'hover'} ${cls}`} on:click>
 	<div class="card">
 		<slot />
 	</div>
@@ -21,7 +22,7 @@
 		align-items: flex-end;
 		justify-content: flex-end;
 
-		&:hover {
+		&.hover:hover {
 			background-color: var(--grey-150);
 		}
 	}

packages/ui/src/lib/components/icons/favorite.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { IconProps } from '$lib/types'
+
+	type $$Props = IconProps
+
+	let cls: string | undefined = undefined
+	export { cls as class }
+	export let size = 20
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size} class={cls}>
+	<path
+		d="M22.45,6a5.47,5.47,0,0,1,3.91,1.64,5.7,5.7,0,0,1,0,8L16,26.13,5.64,15.64a5.7,5.7,0,0,1,0-8,5.48,5.48,0,0,1,7.82,0L16,10.24l2.53-2.58A5.44,5.44,0,0,1,22.45,6m0-2a7.47,7.47,0,0,0-5.34,2.24L16,7.36,14.89,6.24a7.49,7.49,0,0,0-10.68,0,7.72,7.72,0,0,0,0,10.82L16,29,27.79,17.06a7.72,7.72,0,0,0,0-10.82A7.49,7.49,0,0,0,22.45,4Z"
+	/>
+</svg>

packages/ui/src/lib/components/icons/thumbs-down.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { IconProps } from '$lib/types'
+
+	type $$Props = IconProps
+
+	let cls: string | undefined = undefined
+	export { cls as class }
+	export let size = 20
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size} class={cls}>
+	<path
+		d="M30,16V9a7.0078,7.0078,0,0,0-7-7H2V16H8.4648l3.5774,5.3662.8453,5.9165A2.0094,2.0094,0,0,0,14.8672,29H17a3.0033,3.0033,0,0,0,3-3V20h6A4.0045,4.0045,0,0,0,30,16ZM8,14H4V4H8Zm20,2a2.0025,2.0025,0,0,1-2,2H18v8a1.0008,1.0008,0,0,1-1,1H14.8672l-.9094-6.3662L10,14.6973V4H23a5.0057,5.0057,0,0,1,5,5Z"
+	/>
+</svg>

packages/ui/src/lib/components/persona.svelte

@@ -9,9 +9,10 @@
 	export let postsCount: number
 	export let participantsCount: number
 	export let picture: string | undefined
+	export let noHover: boolean | undefined = undefined
 </script>
 
-<Card on:click>
+<Card on:click {noHover}>
 	<div class="picture">
 		<img src={picture ? adapter.getPicture(picture) : undefined} alt="persona" />
 	</div>

packages/ui/src/lib/components/post.svelte

@@ -5,12 +5,13 @@
 	import adapter from '$lib/adapters'
 
 	let cls: string | undefined = undefined
+	export let noHover: boolean | undefined = undefined
 	export { cls as class }
 
 	export let post: Post
 </script>
 
-<Card on:click class={` ${cls}`}>
+<Card on:click class={` ${cls}`} {noHover}>
 	<div class={`content-wrapper`}>
 		<div class="imgs">
 			{#each post.images as image, index}
@@ -29,14 +30,20 @@
 		<div class="user-info">
 			<div class="faded">{formatDateAndTime(post.timestamp)}</div>
 		</div>
-		<!-- FIXME: not sure this is correct -->
-		<div style="display: flex; flex-direction: row;">
+		<div class="btns">
 			<slot />
 		</div>
 	</div>
 </Card>
 
 <style lang="scss">
+	.btns {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		gap: var(--spacing-12);
+	}
 	.imgs {
 		display: flex;
 		flex-direction: row;

packages/ui/src/routes/persona/[id]/+page.svelte

@@ -4,6 +4,8 @@
 	import Edit from '$lib/components/icons/edit.svelte'
 	import Star from '$lib/components/icons/star.svelte'
 	import Wallet from '$lib/components/icons/wallet.svelte'
+	import ThumbsDown from '$lib/components/icons/thumbs-down.svelte'
+	import Favorite from '$lib/components/icons/favorite.svelte'
 	import StarFilled from '$lib/components/icons/star_filled.svelte'
 	import Hourglass from '$lib/components/icons/hourglass.svelte'
 	import SettingsView from '$lib/components/icons/settings-view.svelte'
@@ -181,6 +183,7 @@
 								<Button
 									variant="secondary"
 									label="Promote"
+									icon={Favorite}
 									disabled={$profile.signer === undefined}
 									on:click={() =>
 										$profile.signer !== undefined &&
@@ -189,6 +192,7 @@
 								<Button
 									variant="secondary"
 									label="Demote"
+									icon={ThumbsDown}
 									disabled={$profile.signer === undefined}
 									on:click={() =>
 										$profile.signer !== undefined &&

packages/ui/src/routes/persona/[id]/post/[postId]/+page.svelte

@@ -55,8 +55,8 @@
 	</Container>
 {:else}
 	<Header title="Post" {onBack} />
-	<Post {post} on:click />
-
+	<!-- TODO: This is the post page so I'm thinking there shouldn't be an action on the post -->
+	<Post {post} on:click noHover />
 	<div class="center">
 		{#if $profile.signer !== undefined}
 			<Button variant="primary" label="Chat with poster" icon={ChatBot} on:click={startChat} />