Update to use Button component
Also removes redundant styles
This commit is contained in:
parent
ed4d54d586
commit
94ad52252e
2 changed files with 55 additions and 62 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue