From 94ad52252eeca9a33ad8446eeb6a90db35fa28d1 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 24 Sep 2025 01:53:59 -0700
Subject: [PATCH] Update to use Button component

Also removes redundant styles
---
 src/lib/components/Navigation.svelte  | 36 ++++--------
 src/lib/components/party/Party.svelte | 81 ++++++++++++++-------------
 2 files changed, 55 insertions(+), 62 deletions(-)

diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index 178f8d41..f1be2fa6 100644
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@@ -145,14 +145,15 @@
 			</li>
 		</ul>
 	{/if}
-	<Button
-		icon="plus"
-		iconOnly
-		variant="primary"
-		class="new-team-button"
-		aria-label="New team"
-		href={newTeamHref}
-	/>
+    <Button
+        icon="plus"
+        iconOnly
+        shape="circle"
+        variant="primary"
+        class="new-team-button"
+        aria-label="New team"
+        href={newTeamHref}
+    />
 </nav>
 
 <style lang="scss">
@@ -350,23 +351,10 @@
 	}
 
 	// Style the new team button as a prominent circular button
+	// Remove redundant styles that the Button component already handles
 	:global(.new-team-button) {
-		width: 40px;
-		height: 40px;
-		border-radius: 50%;
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: var(--button-contained-bg);
-		color: var(--button-text);
-		border: none;
-		cursor: pointer;
-		transition: background-color 0.2s ease;
-
-		&:hover {
-			background-color: var(--button-contained-bg-hover);
-		}
+		// Only add styles that are specific overrides, not duplicates
+		// The Button component already handles size, shape, colors, etc.
 	}
 
 	// Dropdown menu styles
diff --git a/src/lib/components/party/Party.svelte b/src/lib/components/party/Party.svelte
index 6c2c7aba..9216b10f 100644
--- a/src/lib/components/party/Party.svelte
+++ b/src/lib/components/party/Party.svelte
@@ -16,6 +16,8 @@
 	import Button from '$lib/components/ui/Button.svelte'
 	import DescriptionRenderer from '$lib/components/DescriptionRenderer.svelte'
 	import { openDescriptionSidebar } from '$lib/features/description/openDescriptionSidebar.svelte.ts'
+	import { DropdownMenu } from 'bits-ui'
+	import DropdownItem from '$lib/components/ui/dropdown/DropdownItem.svelte'
 
 	interface Props {
 		party?: Party
@@ -761,47 +763,50 @@
 				</div>
 
 				<div class="party-actions">
-					{#if canEdit()}
-						<Button
-							variant="secondary"
-							onclick={openEditDialog}
-							disabled={loading}
-							aria-label="Edit party details"
-						>
-							Edit
-						</Button>
-					{/if}
+					<DropdownMenu.Root>
+						<DropdownMenu.Trigger>
+							<Button
+								variant="subtle"
+								iconOnly
+								shape="circular"
+								size="medium"
+								icon="ellipsis"
+								as="span"
+								aria-label="Open actions menu"
+							/>
+						</DropdownMenu.Trigger>
 
-					{#if authUserId}
-						<Button
-							variant="secondary"
-							onclick={toggleFavorite}
-							disabled={loading}
-							aria-label={party.favorited ? 'Remove from favorites' : 'Add to favorites'}
-						>
-							{party.favorited ? '★' : '☆'}
-						</Button>
-					{/if}
+						<DropdownMenu.Portal>
+							<DropdownMenu.Content class="dropdown-content" sideOffset={6} align="end">
+								{#if canEdit()}
+									<DropdownItem asChild>
+										<button onclick={openEditDialog} disabled={loading}>Edit</button>
+									</DropdownItem>
+								{/if}
 
-					<Button
-						variant="secondary"
-						onclick={remixParty}
-						disabled={loading}
-						aria-label="Remix this party"
-					>
-						Remix
-					</Button>
+								{#if authUserId}
+									<DropdownItem asChild>
+										<button onclick={toggleFavorite} disabled={loading}>
+											{party.favorited ? 'Remove from favorites' : 'Add to favorites'}
+										</button>
+									</DropdownItem>
+								{/if}
 
-					{#if party.user?.id === authUserId}
-						<Button
-							variant="destructive"
-							onclick={() => (deleteDialogOpen = true)}
-							disabled={loading}
-							aria-label="Delete this party"
-						>
-							Delete
-						</Button>
-					{/if}
+								<DropdownItem asChild>
+									<button onclick={remixParty} disabled={loading}>Remix</button>
+								</DropdownItem>
+
+								{#if party.user?.id === authUserId}
+									<DropdownMenu.Separator class="dropdown-separator" />
+									<DropdownItem asChild>
+										<button onclick={() => (deleteDialogOpen = true)} disabled={loading}>
+											Delete
+										</button>
+									</DropdownItem>
+								{/if}
+							</DropdownMenu.Content>
+						</DropdownMenu.Portal>
+					</DropdownMenu.Root>
 				</div>
 			</header>