diff --git a/web/src/lib/components/auth/AccountSelector.svelte b/web/src/lib/components/auth/AccountSelector.svelte index 7c820c1a8..3bea457f1 100644 --- a/web/src/lib/components/auth/AccountSelector.svelte +++ b/web/src/lib/components/auth/AccountSelector.svelte @@ -4,7 +4,7 @@ export const accountSelector = tv({ slots: { chevron: "size-3 shrink-0", - header: "font-medium px-2 py-1.5" + header: "px-2 py-1.5 font-medium" } }); diff --git a/web/src/lib/components/comment/Comment.svelte b/web/src/lib/components/comment/Comment.svelte index a95c741fb..1d78dee54 100644 --- a/web/src/lib/components/comment/Comment.svelte +++ b/web/src/lib/components/comment/Comment.svelte @@ -38,7 +38,7 @@ {#if deleted}
This comment was deleted.
@@ -53,7 +53,7 @@
{authorHandle} diff --git a/web/src/lib/components/comment/CommentCard.svelte b/web/src/lib/components/comment/CommentCard.svelte index 8e71d38e2..3510931f7 100644 --- a/web/src/lib/components/comment/CommentCard.svelte +++ b/web/src/lib/components/comment/CommentCard.svelte @@ -23,6 +23,7 @@ import CommentEditor from "$lib/components/comment/CommentEditor.svelte"; import type { CommentThread, CommentView, ThreadInput } from "$lib/components/comment/comments"; import { createAction } from "$lib/action.svelte"; + import Card from "$lib/components/ui/Card.svelte"; interface Props { thread: CommentThread; @@ -114,7 +115,7 @@ size="small" icon={Pencil} aria-label="Edit comment" - class="text-foreground-subtle hover:text-foreground-default" + class="text-foreground-muted hover:text-foreground-default" onclick={() => (editingUri = comment.uri)} /> {:else} - + Login to leave a reply {/if}
{/if} -
+ diff --git a/web/src/lib/components/profile/FollowerFollowing.svelte b/web/src/lib/components/profile/FollowerFollowing.svelte index fcac38d43..2e771c683 100644 --- a/web/src/lib/components/profile/FollowerFollowing.svelte +++ b/web/src/lib/components/profile/FollowerFollowing.svelte @@ -8,19 +8,22 @@ handle: string; followers: number; following: number; + class?: string; } - let { handle, followers, following }: Props = $props(); + let { handle, followers, following, class: className }: Props = $props(); -
+
{formatCount(followers)} followers - + {formatCount(following)} following +
@@ -101,12 +101,12 @@ {cardHandle} {#if card.pronouns} -

+

{card.pronouns}

{/if} @@ -114,7 +114,9 @@
{#if card.description} -

+

{card.description}

{/if} @@ -123,6 +125,7 @@ handle={cardHandle} followers={card.followers} following={card.following} + class="my-1! px-1" /> {#if !card.isSelf} @@ -155,9 +158,11 @@ {/if}
{:else if status === "error"} -

Couldn't load profile.

+

+ Couldn't load profile. +

{:else} -
+
{/if} diff --git a/web/src/lib/components/reaction/Reaction.svelte b/web/src/lib/components/reaction/Reaction.svelte index 560c77731..304fb6d6c 100644 --- a/web/src/lib/components/reaction/Reaction.svelte +++ b/web/src/lib/components/reaction/Reaction.svelte @@ -26,7 +26,8 @@ disabled={pending} aria-pressed={reaction.isReacted} onclick={ontoggle} - class={reaction.isReacted && "border-background-info-emphasis/10 bg-background-info-subtle hover:bg-background-info-subtle-hover"} + class={reaction.isReacted && + "border-background-info-emphasis/10 bg-background-info-subtle hover:bg-background-info-subtle-hover"} > {reaction.kind} {formatCount(reaction.count)} diff --git a/web/src/lib/components/reaction/ReactionPicker.svelte b/web/src/lib/components/reaction/ReactionPicker.svelte index c7c873624..793d2c2dc 100644 --- a/web/src/lib/components/reaction/ReactionPicker.svelte +++ b/web/src/lib/components/reaction/ReactionPicker.svelte @@ -54,7 +54,14 @@ }; - + {#snippet trigger()} {/snippet} diff --git a/web/src/lib/components/repo/tickets/Ticket.svelte b/web/src/lib/components/repo/tickets/Ticket.svelte index 036b129ff..6ac72d060 100644 --- a/web/src/lib/components/repo/tickets/Ticket.svelte +++ b/web/src/lib/components/repo/tickets/Ticket.svelte @@ -15,8 +15,8 @@ import type { MarkupContext } from "$lib/markup"; import type { Snippet } from "svelte"; import Reactions from "$lib/components/reaction/Reactions.svelte"; - import Separator from "$lib/components/ui/Separator.svelte"; import type { ReactionGroup } from "$lib/components/reaction/reactions"; + import Separator from "$lib/components/ui/Separator.svelte"; interface Props { // ticketView @@ -90,21 +90,29 @@ oncancel={() => (editing = false)} /> {:else} -
-
-
-

+
+
+
+

{ticket.title} - #{ticket.rkey} + #{ticket.rkey}

-
+
{#if isAuthor && onedit} - {/if} {#if isAuthor && ondelete} - {/if} {#if extraActions}
@@ -128,6 +135,7 @@ authorDid={ticket.author.did} createdAt={ticket.createdAt} targetBranch={ticket.targetBranch} + openedBy {extraInfo} />
diff --git a/web/src/lib/components/repo/tickets/TicketCardContent.svelte b/web/src/lib/components/repo/tickets/TicketCardContent.svelte index 1dbd95f49..5eb9a2b0a 100644 --- a/web/src/lib/components/repo/tickets/TicketCardContent.svelte +++ b/web/src/lib/components/repo/tickets/TicketCardContent.svelte @@ -1,12 +1,9 @@ @@ -31,8 +34,12 @@ - opened by - + {#if openedBy} + opened by + {/if} + + + diff --git a/web/src/lib/components/repo/tickets/TicketStatePill.svelte b/web/src/lib/components/repo/tickets/TicketStatePill.svelte index 454183e35..2ae8330c5 100644 --- a/web/src/lib/components/repo/tickets/TicketStatePill.svelte +++ b/web/src/lib/components/repo/tickets/TicketStatePill.svelte @@ -8,16 +8,27 @@ import GitPullRequestClosed from "$icon/git-pull-request-closed"; export const statePill = tv({ - base: "inline-flex items-center gap-1 rounded-sm px-2 py-1 text-foreground-on-emphasis select-none", + slots: { + base: "inline-flex items-center gap-1 rounded-sm py-0.5 text-foreground-on-emphasis select-none", + icon: "shrink-0" + }, variants: { state: { open: "bg-background-success-emphasis", closed: "bg-background-emphasis dark:bg-background-subtle", merged: "bg-background-info-emphasis" + }, + size: { + small: { + base: "px-1.5 typography-paragraph-small", + icon: "size-3" + }, + regular: { base: "px-2 typography-paragraph-regular", icon: "size-3.5" } } }, defaultVariants: { - state: "open" + state: "open", + size: "regular" } }); @@ -49,16 +60,18 @@ isPull?: boolean; state?: TicketState; class?: string; + size?: StatePillVariants["size"]; } - let { isPull = false, state = "open", class: className }: Props = $props(); + let { isPull = false, state = "open", class: className, size }: Props = $props(); const kind = $derived(isPull ? "pull" : "issue"); const Icon = $derived(ICONS[kind][state]); const label = $derived(LABELS[state]); + const style = $derived(statePill({ state, size })); - -
{#if !discussionOpen} diff --git a/web/src/routes/strings/new/+page.svelte b/web/src/routes/strings/new/+page.svelte index fb555fcb0..39d4207c3 100644 --- a/web/src/routes/strings/new/+page.svelte +++ b/web/src/routes/strings/new/+page.svelte @@ -15,7 +15,7 @@
-

+

Create a new string