Update to use Button component

Also removes redundant styles

src/lib/components/Navigation.svelte

@@ -148,6 +148,7 @@
     <Button
         icon="plus"
         iconOnly
+        shape="circle"
         variant="primary"
         class="new-team-button"
         aria-label="New team"
@@ -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;
+		// Only add styles that are specific overrides, not duplicates
-		height: 40px;
+		// The Button component already handles size, shape, colors, etc.
-		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);
-		}
 	}
 
 	// Dropdown menu styles

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()}
+					<DropdownMenu.Root>
+						<DropdownMenu.Trigger>
 							<Button
-							variant="secondary"
+								variant="subtle"
-							onclick={openEditDialog}
+								iconOnly
-							disabled={loading}
+								shape="circular"
-							aria-label="Edit party details"
+								size="medium"
-						>
+								icon="ellipsis"
-							Edit
+								as="span"
-						</Button>
+								aria-label="Open actions menu"
+							/>
+						</DropdownMenu.Trigger>
+
+						<DropdownMenu.Portal>
+							<DropdownMenu.Content class="dropdown-content" sideOffset={6} align="end">
+								{#if canEdit()}
+									<DropdownItem asChild>
+										<button onclick={openEditDialog} disabled={loading}>Edit</button>
+									</DropdownItem>
 								{/if}
 
 								{#if authUserId}
-						<Button
+									<DropdownItem asChild>
-							variant="secondary"
+										<button onclick={toggleFavorite} disabled={loading}>
-							onclick={toggleFavorite}
+											{party.favorited ? 'Remove from favorites' : 'Add to favorites'}
-							disabled={loading}
+										</button>
-							aria-label={party.favorited ? 'Remove from favorites' : 'Add to favorites'}
+									</DropdownItem>
-						>
-							{party.favorited ? '★' : '☆'}
-						</Button>
 								{/if}
 
-					<Button
+								<DropdownItem asChild>
-						variant="secondary"
+									<button onclick={remixParty} disabled={loading}>Remix</button>
-						onclick={remixParty}
+								</DropdownItem>
-						disabled={loading}
-						aria-label="Remix this party"
-					>
-						Remix
-					</Button>
 
 								{#if party.user?.id === authUserId}
-						<Button
+									<DropdownMenu.Separator class="dropdown-separator" />
-							variant="destructive"
+									<DropdownItem asChild>
-							onclick={() => (deleteDialogOpen = true)}
+										<button onclick={() => (deleteDialogOpen = true)} disabled={loading}>
-							disabled={loading}
-							aria-label="Delete this party"
-						>
 											Delete
-						</Button>
+										</button>
+									</DropdownItem>
 								{/if}
+							</DropdownMenu.Content>
+						</DropdownMenu.Portal>
+					</DropdownMenu.Root>
 				</div>
 			</header>