new share button design

src/lib/components/WinScreen.svelte

@@ -53,6 +53,7 @@
 		typeof navigator !== "undefined" && "share" in navigator,
 	);
 	let copySuccess = $state(false);
+	let bubbleCopied = $state(false);
 
 	// List of congratulations messages with weights
 	const congratulationsMessages: WeightedMessage[] = [
@@ -109,19 +110,24 @@
 		</p>
 
 		{#if streak > 1}
-			<p class="big-text text-orange-500! text-lg! my-4">
+			<div class="flex flex-col gap-4 my-4">
-				🔥 {streak} days in a row!
+				<p class="big-text text-orange-500! text-lg!">
-			</p>
+					🔥 {streak} days in a row!
-			{#if streak >= 7}
-				<p class="font-black text-lg font-triodion">
-					Thank you for making Bibdle part of your daily routine!
 				</p>
-			{/if}
+				{#if streak >= 7}
-			{#if streakPercentile !== null}
+					<p class="font-black text-lg font-triodion">
-				<p class="text-sm mt-4 text-gray-700 font-triodion">
+						Thank you for making Bibdle part of your daily routine!
-					{streakPercentile <= 50 ? "Only " : ""}{streakPercentile}% of players have a streak of {streak} or greater.
+					</p>
-				</p>
+				{/if}
-			{/if}
+				{#if streakPercentile !== null}
+					<p class="text-sm text-gray-700 font-triodion">
+						{streakPercentile <= 50
+							? "Only "
+							: ""}{streakPercentile}% of players have a streak of {streak}
+						or greater.
+					</p>
+				{/if}
+			</div>
 		{/if}
 	</Container>
 
@@ -205,34 +211,63 @@
 
 	<div class="share-card" in:fly={{ y: 40, duration: 400, delay: 600 }}>
 		<div class="big-text font-black! text-center">Share your result</div>
-		<div class="share-buttons">
-			{#if hasWebShare}
-				<button
-					onclick={() => { (window as any).rybbit?.event("Share"); handleShare(); }}
-					data-umami-event="Share"
-					class="share-btn primary"
-				>
-					📤 Click to share
-				</button>
-			{:else}
-				<button
-					onclick={() => {
-						(window as any).rybbit?.event("Copy to Clipboard");
-						copyToClipboard();
-						copySuccess = true;
-						setTimeout(() => {
-							copySuccess = false;
-						}, 3000);
-					}}
-					data-umami-event="Copy to Clipboard"
-					class={`share-btn primary ${copySuccess ? "success" : ""}`}
-				>
-					{copySuccess ? "✅ Copied!" : "📋 Copy to clipboard"}
-				</button>
-			{/if}
-		</div>
 		<div class="chat-window">
-			<p class="bubble">{shareText}</p>
+			<!-- Received bubble: primary action (share / copy) -->
+			<div class="bubble-wrapper received-wrapper">
+				<button
+					class="bubble bubble-received"
+					class:success={copySuccess}
+					aria-label={hasWebShare ? "Share" : "Copy to clipboard"}
+					data-umami-event={hasWebShare
+						? "Share"
+						: "Copy to Clipboard"}
+					onclick={() => {
+						if (hasWebShare) {
+							(window as any).rybbit?.event("Share");
+							handleShare();
+						} else {
+							(window as any).rybbit?.event("Copy to Clipboard");
+							copyToClipboard();
+							copySuccess = true;
+							setTimeout(() => {
+								copySuccess = false;
+							}, 3000);
+						}
+					}}
+				>
+					{#if hasWebShare}
+						📤 Click to share
+					{:else if copySuccess}
+						✅ Copied!
+					{:else}
+						📋 Copy to clipboard
+					{/if}
+				</button>
+			</div>
+
+			<!-- Sent bubble: share text preview -->
+			<div class="bubble-wrapper">
+				<button
+					class="bubble bubble-sent"
+					aria-label="Copy to clipboard"
+					onclick={() => {
+						copyToClipboard();
+						bubbleCopied = true;
+						setTimeout(() => {
+							bubbleCopied = false;
+						}, 2000);
+					}}>{shareText}</button
+				>
+				{#if hasWebShare}
+					<span class="copy-hint"
+						>{bubbleCopied ? "copied!" : "(tap to copy)"}</span
+					>
+				{:else}
+					<span class="copy-hint"
+						>{bubbleCopied ? "copied!" : ""}</span
+					>
+				{/if}
+			</div>
 		</div>
 	</div>
 </div>
@@ -249,14 +284,13 @@
 		}
 	}
 
-	.fade-in {
+	:global(.fade-in) {
 		animation: fadeIn 0.5s ease-out;
 	}
 
 	/* ── Share card ── */
 	.share-card {
-		background: rgba(255, 255, 255, 0.5);
+		background: oklch(94% 0.028 298.626);
-		backdrop-filter: blur(8px);
 		border: 1px solid rgba(255, 255, 255, 0.3);
 		border-radius: 1.25rem;
 		padding: 1.25rem;
@@ -278,115 +312,156 @@
 		pointer-events: none;
 	}
 
-	.share-card-label {
-		font-size: 0.75rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		color: #8e8e93;
-		margin: 0;
-	}
-
 	/* ── Chat window ── */
 	.chat-window {
 		--sent-color: #0b93f6;
-		--bg: oklch(93.996% 0.03041 300.209);
+		--received-color: #3a3a3c;
+		--bg: oklch(94% 0.028 298.626);
 		display: flex;
-		justify-content: center;
+		flex-direction: column;
-		padding: 0 1.5rem 0;
+		padding: 0 0.5rem 0;
+		gap: 0.6rem;
 	}
 
-	/* ── Bubble (from article technique) ── */
+	/* ── Bubble wrappers ── */
+	.bubble-wrapper {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		gap: 2px;
+	}
+
+	.received-wrapper {
+		align-items: flex-start;
+	}
+
+	/* ── Shared bubble base ── */
 	.bubble {
 		position: relative;
 		max-width: 255px;
-		margin-bottom: 8px;
+		margin-bottom: 0;
 		padding: 10px 20px;
 		line-height: 1.3;
 		word-wrap: break-word;
 		border-radius: 25px;
 		text-align: left;
 		white-space: pre-wrap;
-		font-size: 0.9rem;
+		font-size: 1rem;
-		transform: rotate(-2deg);
+		cursor: pointer;
-
+		transition:
-		color: white;
+			filter 80ms ease,
-		background: var(--sent-color);
+			transform 80ms ease;
+		user-select: none;
 	}
 
-	.bubble::before,
+	/* ── Sent bubble (share text preview) ── */
-	.bubble::after {
+	.bubble-sent {
+		color: white;
+		background: var(--sent-color);
+		transform: rotate(-2deg);
+	}
+
+	.bubble-sent:hover {
+		filter: brightness(1.08);
+		transform: rotate(-2deg) translateY(-2px);
+	}
+
+	.bubble-sent:active {
+		transform: rotate(-2deg) scale(0.97);
+		filter: brightness(0.95);
+	}
+
+	/* Sent tail: bottom-right */
+	.bubble-sent::before,
+	.bubble-sent::after {
 		position: absolute;
 		bottom: 0;
 		height: 25px;
 		content: "";
 	}
 
-	.bubble::before {
+	.bubble-sent::before {
 		width: 20px;
 		right: -7px;
 		background-color: var(--sent-color);
 		border-bottom-left-radius: 16px 14px;
 	}
 
-	.bubble::after {
+	.bubble-sent::after {
 		width: 26px;
 		right: -26px;
 		border-bottom-left-radius: 10px;
 		background-color: var(--bg);
 	}
 
-	/* ── Share buttons ── */
+	/* ── Received bubble (action button) ── */
-	.share-buttons {
+	.bubble-received {
-		display: flex;
+		color: #f5f5f7;
-		flex-direction: column;
+		background: var(--received-color);
-		gap: 0.5rem;
+		transform: rotate(2deg);
-		width: 100%;
+		padding: 14px 24px;
-	}
-
-	.share-btn {
-		width: 100%;
-		padding: 1rem 1.5rem;
 		font-size: 1.1rem;
 		font-weight: 700;
-		border: 3px solid rgba(0, 0, 0, 0.25);
+		min-width: 14rem;
-		border-radius: 1rem;
+	}
-		cursor: pointer;
+
-		transition:
+	.bubble-received:hover {
-			transform 80ms ease,
+		filter: brightness(0.96);
-			box-shadow 80ms ease,
+		transform: rotate(2deg) translateY(-2px);
-			opacity 80ms ease;
+	}
+
+	.bubble-received:active {
+		transform: rotate(2deg) scale(0.97);
+		filter: brightness(0.92);
+	}
+
+	.bubble-received.success {
+		background: #c7f7d4;
+		color: #155724;
+	}
+
+	/* Received tail: bottom-left (mirror of sent) */
+	.bubble-received::before,
+	.bubble-received::after {
+		position: absolute;
+		bottom: 0;
+		height: 25px;
+		content: "";
+	}
+
+	.bubble-received::before {
+		width: 20px;
+		left: -7px;
+		background-color: var(--received-color);
+		border-bottom-right-radius: 16px 14px;
+	}
+
+	.bubble-received::after {
+		width: 26px;
+		left: -26px;
+		border-bottom-right-radius: 10px;
+		background-color: var(--bg);
+	}
+
+	.bubble-received.success::before {
+		background-color: #c7f7d4;
+	}
+
+	/* ── Copy hints ── */
+	.copy-hint {
+		font-size: 0.68rem;
+		color: #444;
+		font-weight: 400;
 		letter-spacing: 0.01em;
+		padding-right: 32px;
+		transform: rotate(-2deg);
+		transform-origin: right center;
 	}
 
-	.share-btn:active {
+	.received-hint {
-		transform: scale(0.97);
+		padding-right: 0;
-		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+		padding-left: 32px;
-	}
+		transform: rotate(2deg);
-
+		transform-origin: left center;
-	.share-btn.primary {
-		background: #7c3aed;
-		color: white;
-		box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4);
-	}
-
-	.share-btn.primary:hover {
-		opacity: 0.92;
-	}
-
-	.share-btn.primary.success {
-		background: #636363;
-		color: white;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-	}
-
-	.share-btn.secondary {
-		background: #f2f2f7;
-		color: #1c1c1e;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-	}
-
-	.share-btn.secondary:hover {
-		background: #e5e5ea;
 	}
 </style>