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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
{/if}
|
{/if}
|
||||||
<Button
|
<Button
|
||||||
icon="plus"
|
icon="plus"
|
||||||
iconOnly
|
iconOnly
|
||||||
variant="primary"
|
shape="circle"
|
||||||
class="new-team-button"
|
variant="primary"
|
||||||
aria-label="New team"
|
class="new-team-button"
|
||||||
href={newTeamHref}
|
aria-label="New team"
|
||||||
/>
|
href={newTeamHref}
|
||||||
|
/>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
@ -350,23 +351,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Style the new team button as a prominent circular button
|
// Style the new team button as a prominent circular button
|
||||||
|
// Remove redundant styles that the Button component already handles
|
||||||
:global(.new-team-button) {
|
: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
|
// Dropdown menu styles
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,8 @@
|
||||||
import Button from '$lib/components/ui/Button.svelte'
|
import Button from '$lib/components/ui/Button.svelte'
|
||||||
import DescriptionRenderer from '$lib/components/DescriptionRenderer.svelte'
|
import DescriptionRenderer from '$lib/components/DescriptionRenderer.svelte'
|
||||||
import { openDescriptionSidebar } from '$lib/features/description/openDescriptionSidebar.svelte.ts'
|
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 {
|
interface Props {
|
||||||
party?: Party
|
party?: Party
|
||||||
|
|
@ -761,47 +763,50 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="party-actions">
|
<div class="party-actions">
|
||||||
{#if canEdit()}
|
<DropdownMenu.Root>
|
||||||
<Button
|
<DropdownMenu.Trigger>
|
||||||
variant="secondary"
|
<Button
|
||||||
onclick={openEditDialog}
|
variant="subtle"
|
||||||
disabled={loading}
|
iconOnly
|
||||||
aria-label="Edit party details"
|
shape="circular"
|
||||||
>
|
size="medium"
|
||||||
Edit
|
icon="ellipsis"
|
||||||
</Button>
|
as="span"
|
||||||
{/if}
|
aria-label="Open actions menu"
|
||||||
|
/>
|
||||||
|
</DropdownMenu.Trigger>
|
||||||
|
|
||||||
{#if authUserId}
|
<DropdownMenu.Portal>
|
||||||
<Button
|
<DropdownMenu.Content class="dropdown-content" sideOffset={6} align="end">
|
||||||
variant="secondary"
|
{#if canEdit()}
|
||||||
onclick={toggleFavorite}
|
<DropdownItem asChild>
|
||||||
disabled={loading}
|
<button onclick={openEditDialog} disabled={loading}>Edit</button>
|
||||||
aria-label={party.favorited ? 'Remove from favorites' : 'Add to favorites'}
|
</DropdownItem>
|
||||||
>
|
{/if}
|
||||||
{party.favorited ? '★' : '☆'}
|
|
||||||
</Button>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<Button
|
{#if authUserId}
|
||||||
variant="secondary"
|
<DropdownItem asChild>
|
||||||
onclick={remixParty}
|
<button onclick={toggleFavorite} disabled={loading}>
|
||||||
disabled={loading}
|
{party.favorited ? 'Remove from favorites' : 'Add to favorites'}
|
||||||
aria-label="Remix this party"
|
</button>
|
||||||
>
|
</DropdownItem>
|
||||||
Remix
|
{/if}
|
||||||
</Button>
|
|
||||||
|
|
||||||
{#if party.user?.id === authUserId}
|
<DropdownItem asChild>
|
||||||
<Button
|
<button onclick={remixParty} disabled={loading}>Remix</button>
|
||||||
variant="destructive"
|
</DropdownItem>
|
||||||
onclick={() => (deleteDialogOpen = true)}
|
|
||||||
disabled={loading}
|
{#if party.user?.id === authUserId}
|
||||||
aria-label="Delete this party"
|
<DropdownMenu.Separator class="dropdown-separator" />
|
||||||
>
|
<DropdownItem asChild>
|
||||||
Delete
|
<button onclick={() => (deleteDialogOpen = true)} disabled={loading}>
|
||||||
</Button>
|
Delete
|
||||||
{/if}
|
</button>
|
||||||
|
</DropdownItem>
|
||||||
|
{/if}
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Portal>
|
||||||
|
</DropdownMenu.Root>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue