From 537e1c4ceae40ae82ac78fa1af0560b8914ced2d Mon Sep 17 00:00:00 2001
From: Xylight <james@xylight.dev>
Date: Sun, 26 Oct 2025 15:34:30 -0700
Subject: [PATCH] design: make entityheaders not look like genuine garbage

---
 .../app/markdown/renderers/MdHeading.svelte   |  67 ++++++-
 .../feature/community/CommunityHeader.svelte  |  17 +-
 src/lib/feature/post/PostBody.svelte          |  22 +--
 src/lib/ui/generic/Avatar.svelte              |   6 +-
 src/lib/ui/generic/EntityHeader.svelte        | 167 ++++++++----------
 src/lib/ui/info/LabelStat.svelte              |   4 +-
 src/lib/ui/layout/pages/Tabs.svelte           |   2 +-
 src/lib/ui/navbar/NavButton.svelte            |  16 +-
 src/lib/ui/shared/button/Button.svelte        |  13 +-
 src/lib/ui/shared/materials/Material.svelte   |   3 +-
 src/lib/ui/shared/modal/Modal.svelte          |   2 +-
 src/routes/accounts/+page.svelte              |  36 ++--
 src/routes/explore/communities/+page.svelte   |   2 +-
 src/routes/inbox/+page.svelte                 |   8 +-
 src/routes/inbox/messages/+page.svelte        |   2 +-
 src/routes/moderation/+page.svelte            |   4 +-
 src/routes/settings/+layout.svelte            |   6 +-
 src/routes/theme/+page.svelte                 |   6 +-
 src/routes/u/[name]/UserActions.svelte        |  18 +-
 19 files changed, 209 insertions(+), 192 deletions(-)

diff --git a/src/lib/app/markdown/renderers/MdHeading.svelte b/src/lib/app/markdown/renderers/MdHeading.svelte
index 086e19f7..070416fc 100644
--- a/src/lib/app/markdown/renderers/MdHeading.svelte
+++ b/src/lib/app/markdown/renderers/MdHeading.svelte
@@ -1,25 +1,80 @@
 <script lang="ts">
+  import { getContext } from 'svelte'
+
   interface Props {
     depth?: number
     raw?: string | undefined
     children?: import('svelte').Snippet
   }
 
+  const options = getContext<{ inline: boolean }>('options')
+
   let { depth = 0, raw = undefined, children }: Props = $props()
 </script>
 
 {#if depth === 1}
-  <h1 class="font-bold text-4xl">{@render children?.()}</h1>
+  <h1 class={[options.inline && 'inline']}>
+    {@render children?.()}
+  </h1>
 {:else if depth === 2}
-  <h2 class="font-bold text-3xl">{@render children?.()}</h2>
+  <h2 class={[options.inline && 'inline']}>
+    {@render children?.()}
+  </h2>
 {:else if depth === 3}
-  <h3 class="font-bold text-2xl">{@render children?.()}</h3>
+  <h3 class={[options.inline && 'inline']}>
+    {@render children?.()}
+  </h3>
 {:else if depth === 4}
-  <h4 class="font-semibold text-xl">{@render children?.()}</h4>
+  <h4 class={[options.inline && 'inline']}>{@render children?.()}</h4>
 {:else if depth === 5}
-  <h5 class="font-semibold text-lg">{@render children?.()}</h5>
+  <h5 class={[options.inline && 'inline']}>{@render children?.()}</h5>
 {:else if depth === 6}
-  <h6 class="font-semibold text-base">{@render children?.()}</h6>
+  <h6 class={[options.inline && 'inline']}>{@render children?.()}</h6>
 {:else}
   {raw}
 {/if}
+
+<style>
+  h1,
+  h2,
+  h3 {
+    letter-spacing: var(--tracking-tight);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  h4,
+  h5,
+  h6 {
+    letter-spacing: var(--tracking-tight);
+    font-weight: var(--font-weight-medium);
+  }
+
+  h1 {
+    font-size: var(--text-4xl);
+  }
+  h2 {
+    font-size: var(--text-3xl);
+  }
+  h3 {
+    font-size: var(--text-2xl);
+  }
+  h4 {
+    font-size: var(--text-xl);
+  }
+  h5 {
+    font-size: var(--text-lg);
+  }
+  h6 {
+    font-size: var(--text-base);
+  }
+
+  h1.inline {
+    font-size: var(--text-2xl);
+  }
+  h2.inline {
+    font-size: var(--text-xl);
+  }
+  h3.inline {
+    font-size: var(--text-lg);
+  }
+</style>
diff --git a/src/lib/feature/community/CommunityHeader.svelte b/src/lib/feature/community/CommunityHeader.svelte
index ea741b61..75985010 100644
--- a/src/lib/feature/community/CommunityHeader.svelte
+++ b/src/lib/feature/community/CommunityHeader.svelte
@@ -165,7 +165,7 @@
                 'NotSubscribed'
             }}
             class="relative z-[inherit]"
-            rounding="pill"
+            size="lg"
             icon={subscribed != 'NotSubscribed' ? Check : Plus}
           >
             {subscribed == 'Subscribed' || subscribed == 'Pending'
@@ -177,9 +177,7 @@
 
       {#if client().setFlair}
         <Button
-          size="custom"
-          class="h-9 aspect-square"
-          rounding="pill"
+          size="square-lg"
           onclick={() => (setFlair = !setFlair)}
           aria-label={$t('cards.community.flair')}
         >
@@ -193,9 +191,7 @@
         .includes(community.id)}
       <Button
         color="secondary"
-        size="custom"
-        rounding="pill"
-        class="h-9 aspect-square"
+        size="square-lg"
         href="/c/{fullCommunityName(
           community.name,
           community.actor_id,
@@ -206,12 +202,7 @@
     {/if}
     <Menu placement="top-end">
       {#snippet target(attachment)}
-        <Button
-          {@attach attachment}
-          size="custom"
-          rounding="pill"
-          class="h-8.5 aspect-square"
-          icon={EllipsisHorizontal}
+        <Button {@attach attachment} size="square-lg" icon={EllipsisHorizontal}
         ></Button>
       {/snippet}
       <MenuButton href="/modlog?community={community.id}">
diff --git a/src/lib/feature/post/PostBody.svelte b/src/lib/feature/post/PostBody.svelte
index 892c4f08..fb7f6785 100644
--- a/src/lib/feature/post/PostBody.svelte
+++ b/src/lib/feature/post/PostBody.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import Markdown from '$lib/app/markdown/Markdown.svelte'
   import { Button } from 'mono-svelte'
-  import { ChevronDown, Icon } from 'svelte-hero-icons/dist'
+  import { ChevronDoubleDown, Icon } from 'svelte-hero-icons/dist'
+  import type { ClassValue } from 'svelte/elements'
 
   const MAX_HEIGHT = 192
 
@@ -18,7 +19,7 @@
     clickThrough?: boolean
     element?: string
     style?: string
-    class?: string
+    class?: ClassValue
   }
 
   let {
@@ -47,30 +48,25 @@
           'overflow-hidden bg-linear-to-b text-transparent from-slate-600 via-slate-600',
           'dark:from-zinc-400 dark:via-zinc-400 bg-clip-text z-0 max-h-36',
         ],
+    clickThrough && 'pointer-events-none',
     clazz,
   ]}
-  class:pointer-events-none={!clickThrough}
   bind:this={element}
 >
   <Markdown source={expanded ? body : body.slice(0, 1000)} />
   {#if overflows}
     <Button
       onclick={() => (expanded = !expanded)}
-      size="square-sm"
-      color="tertiary"
+      size="square-md"
+      color="ghost"
       class={[
         'text-black dark:text-white absolute z-10 isolate pointer-events-auto bottom-0',
-        'left-1/2 -translate-x-1/2 mb-4',
-        expanded && 'bg-slate-200/50 dark:bg-zinc-900 shadow-md',
+        'left-1/2 -translate-x-1/2 mb-4 hover:backdrop-blur-lg bg-slate-100 dark:bg-zinc-900/50',
+        expanded && 'shadow-md rotate-180',
       ]}
       title="Expand"
     >
-      <Icon
-        src={ChevronDown}
-        size="20"
-        mini
-        class="{expanded ? 'rotate-180' : ''} transition-transform"
-      />
+      <Icon src={ChevronDoubleDown} size="20" mini />
     </Button>
   {/if}
 </svelte:element>
diff --git a/src/lib/ui/generic/Avatar.svelte b/src/lib/ui/generic/Avatar.svelte
index 7d5596ef..8a2e92c0 100644
--- a/src/lib/ui/generic/Avatar.svelte
+++ b/src/lib/ui/generic/Avatar.svelte
@@ -52,15 +52,15 @@
   }: Props = $props()
 
   let optimizedURLs = $derived(
-    [2, 3, 6, -1].map((n) => optimizeUrl(url, (res || width) * n)),
+    [1.5, 3].map((n) => optimizeUrl(url, (res || width) * n)),
   )
 </script>
 
-{#if optimizedURLs[0] != undefined}
+{#if url && optimizedURLs[0] != undefined}
   <img
     {...rest}
     loading="lazy"
-    srcset="{optimizedURLs[0]} 1x, {optimizedURLs[1]} 2x, {optimizedURLs[2]} 4x, {optimizedURLs[3]} 6x"
+    srcset="{optimizedURLs[0]} 1x, {optimizedURLs[1]} 2x"
     src={optimizedURLs[0]}
     alt=""
     {width}
diff --git a/src/lib/ui/generic/EntityHeader.svelte b/src/lib/ui/generic/EntityHeader.svelte
index 94a214f4..fa250087 100644
--- a/src/lib/ui/generic/EntityHeader.svelte
+++ b/src/lib/ui/generic/EntityHeader.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { t } from '$lib/app/i18n'
-  import Markdown from '$lib/app/markdown/Markdown.svelte'
-  import { Expandable } from 'mono-svelte'
+  import { PostBody } from '$lib/feature/post'
+  import { Material } from 'mono-svelte'
   import type { ClassValue } from 'svelte/elements'
-  import FormattedNumber from '../util/FormattedNumber.svelte'
+  import LabelStat from '../info/LabelStat.svelte'
   import Avatar from './Avatar.svelte'
+  import Blobs from './Blobs.svelte'
 
   interface Props {
     avatar?: string | undefined
@@ -17,7 +17,6 @@
       value: string
       format?: boolean
     }[]
-    center?: boolean
     class?: ClassValue
     nameDetail?: import('svelte').Snippet
     actions?: import('svelte').Snippet
@@ -33,7 +32,6 @@
     banner = undefined,
     url = undefined,
     stats = [],
-    center = false,
     class: clazz = '',
     nameDetail,
     actions,
@@ -44,47 +42,40 @@
   }: Props = $props()
 </script>
 
-<div {...rest} class={['z-10 text-sm contents w-full', clazz]}>
-  <div
-    class={[
-      compact == 'lg' && 'lg:hidden',
-      compact == 'always' && 'hidden',
-      'absolute inset-0 h-96 overflow-x-hidden -z-10',
-    ]}
-  >
-    <img
-      src={banner || avatar}
-      class="w-full h-64 object-cover blur-3xl opacity-30 dark:opacity-30"
-      height="192"
-      alt="User banner"
-    />
-  </div>
-  {#if banner}
-    <div class="relative overflow-hidden rounded-xl">
-      <img
-        src={banner}
-        class="w-full object-cover h-48 rounded-t-xl bg-white dark:bg-zinc-900 rounded-xl"
-        height="192"
-        alt="User banner"
-      />
+<div {...rest} class={['z-10 text-sm contents w-full space-y-4', clazz]}>
+  <Material padding="xl" rounding="3xl" class="flex flex-col gap-4">
+    <div
+      class="relative overflow-hidden rounded-t-[inherit] -m-6 mask-b-from-0"
+    >
+      {#if banner}
+        <img
+          src={banner}
+          class="w-full object-cover h-48 bg-white dark:bg-zinc-900"
+          height="192"
+          alt="User banner"
+        />
+      {:else}
+        <div class="scale-150">
+          <Blobs seed={name} />
+        </div>
+      {/if}
     </div>
-  {/if}
 
-  <Avatar
-    width={96}
-    url={avatar}
-    alt={name}
-    circle={avatarCircle}
-    class={[
-      'ring-slate-25 bg-slate-25 dark:bg-zinc-925 ring-6 relative dark:ring-zinc-950',
-      banner && '-mt-12 ml-4',
-      !avatarCircle && 'rounded-3xl!',
-    ]}
-  />
-  <div class="py-4 flex flex-col gap-4">
-    <div class="flex flex-col flex-1">
+    <Avatar
+      width={72}
+      url={avatar}
+      alt={name}
+      circle={avatarCircle}
+      class={[
+        'ring-slate-25 bg-slate-25 dark:bg-zinc-925 ring-6 relative dark:ring-zinc-950',
+        '-mt-8',
+        !avatarCircle && 'rounded-3xl!',
+      ]}
+    />
+
+    <div class="space-y-1">
       <svelte:element
-        this={url ? 'a' : 'span'}
+        this={url ? 'a' : 'h1'}
         href={url}
         class="text-2xl font-medium tracking-tight {url
           ? 'hover:underline hover:text-primary-900 dark:hover:text-primary-100'
@@ -92,72 +83,56 @@
       >
         {name}
       </svelte:element>
-      <span
+      <p
         class="flex items-center gap-0 text-sm text-slate-600 dark:text-zinc-400 max-w-full w-max"
       >
         {@render nameDetail?.()}
-      </span>
-
-      {#if actions}
-        <div class="flex flex-col mt-2">
+      </p>
+    </div>
+  </Material>
+  {#if actions || stats}
+    <div class="space-y-4">
+      <div class="flex flex-col flex-1">
+        {#if actions}
           {@render actions?.()}
+        {/if}
+      </div>
+      {#if stats.length > 0}
+        <div
+          class={[
+            compact == 'lg' && 'lg:hidden',
+            compact == 'always' ? 'hidden' : 'flex',
+            'text-sm flex-row flex-wrap overflow-hidden gap-4 h-full',
+          ]}
+        >
+          {#each stats as stat}
+            <LabelStat
+              label={stat.name}
+              content={stat.value}
+              labelClass="text-sm"
+              contentClass="text-lg"
+            />
+          {/each}
         </div>
       {/if}
     </div>
-    {#if stats.length > 0}
-      <div
-        class={[
-          compact == 'lg' && 'lg:hidden',
-          compact == 'always' ? 'hidden' : 'flex',
-          'text-sm flex-row flex-wrap overflow-hidden gap-4 h-full',
-        ]}
-      >
-        {#each stats as stat}
-          <div class="">
-            <div class="text-slate-600 dark:text-zinc-500 text-sm font-medium">
-              {stat.name}
-            </div>
-            <div
-              class="text-xl font-medium text-primary-900 dark:text-primary-100 text-right"
-            >
-              {#if stat.format ?? true}
-                <FormattedNumber
-                  number={Number(stat.value)}
-                  options={{ notation: 'standard' }}
-                />
-              {:else}
-                {stat.value}
-              {/if}
-            </div>
-          </div>
-        {/each}
-      </div>
-    {/if}
-  </div>
+  {/if}
   {#if bio}
-    <div
+    <PostBody
+      body={bio}
       class={[
         compact == 'lg' && 'lg:hidden',
         compact == 'always' && 'hidden',
-        'relative w-full mb-4 text-base',
-        center ? 'text-center' : 'text-left',
+        'relative',
       ]}
-    >
-      {#if bio.length > 300}
-        <Expandable>
-          {#snippet title()}
-            {$t('cards.site.about')}
-          {/snippet}
-          <Markdown source={bio} class="font-normal" />
-        </Expandable>
-      {:else}
-        <Markdown source={bio} class="font-normal" />
-      {/if}
+      clickThrough={false}
+    />
+  {/if}
+  {#if children}
+    <div class="space-y-3 py-4 pt-0 mt-4">
+      {@render children?.()}
     </div>
   {/if}
-  <div class="space-y-3 py-4 pt-0">
-    {@render children?.()}
-  </div>
 </div>
 
 <style>
diff --git a/src/lib/ui/info/LabelStat.svelte b/src/lib/ui/info/LabelStat.svelte
index 64d0a6bc..024f29a5 100644
--- a/src/lib/ui/info/LabelStat.svelte
+++ b/src/lib/ui/info/LabelStat.svelte
@@ -7,6 +7,7 @@
     formatted?: boolean
     labelClass?: string
     contentClass?: string
+    formatOptions?: Intl.NumberFormatOptions
     class?: string
   }
 
@@ -17,6 +18,7 @@
     labelClass = '',
     contentClass = '',
     class: clazz = '',
+    formatOptions,
   }: Props = $props()
 </script>
 
@@ -27,7 +29,7 @@
     </dt>
     <dd class={['text-base', contentClass]}>
       {#if formatted}
-        <FormattedNumber number={Number(content)} />
+        <FormattedNumber number={Number(content)} options={formatOptions} />
       {:else}
         {content}
       {/if}
diff --git a/src/lib/ui/layout/pages/Tabs.svelte b/src/lib/ui/layout/pages/Tabs.svelte
index 73b3b175..ddda32f5 100644
--- a/src/lib/ui/layout/pages/Tabs.svelte
+++ b/src/lib/ui/layout/pages/Tabs.svelte
@@ -151,7 +151,7 @@
 
     @variant hover {
       color: var(--color-slate-900);
-      background-color: var(--color-slate-200);
+      background-color: var(--color-slate-100);
       @variant dark {
         color: var(--color-zinc-100);
         background-color: var(--color-zinc-800);
diff --git a/src/lib/ui/navbar/NavButton.svelte b/src/lib/ui/navbar/NavButton.svelte
index e5b831bd..60de0b4f 100644
--- a/src/lib/ui/navbar/NavButton.svelte
+++ b/src/lib/ui/navbar/NavButton.svelte
@@ -98,13 +98,6 @@
         @variant dark {
           color: var(--color-zinc-50);
         }
-
-        @variant md {
-          background-color: var(--color-slate-200);
-          @variant dark {
-            background-color: var(--color-zinc-800);
-          }
-        }
       }
 
       transition-property: color;
@@ -115,6 +108,15 @@
         width: max-content;
         padding: calc(var(--spacing)) calc(var(--spacing) * 3);
       }
+
+      @variant hover {
+        @variant md {
+          background-color: var(--color-slate-100);
+          @variant dark {
+            background-color: var(--color-zinc-800);
+          }
+        }
+      }
     }
 
     .nav-btn-selected {
diff --git a/src/lib/ui/shared/button/Button.svelte b/src/lib/ui/shared/button/Button.svelte
index a6288fbe..785f746f 100644
--- a/src/lib/ui/shared/button/Button.svelte
+++ b/src/lib/ui/shared/button/Button.svelte
@@ -99,7 +99,7 @@
     type = 'button',
     color = 'secondary',
     size = 'md',
-    rounding = 'xl',
+    rounding = size == 'lg' || size == 'square-lg' ? '2xl' : 'xl',
     alignment = 'center',
     shadow = color == 'primary' || color == 'secondary' ? 'sm' : 'none',
     disabled,
@@ -267,12 +267,7 @@
     }
 
     .btn-ghost {
-      /* border border-slate-200 dark:border-zinc-800 bg-transparent
-		hover:bg-slate-100 dark:hover:bg-zinc-800 dark:hover:border-zinc-700 dark:text-zinc-400 hover:text-inherit
-		dark:hover:text-inherit */
-
       border: 1px solid var(--color-slate-200);
-      background-color: transparent;
 
       @variant hover {
         background-color: var(--color-slate-100);
@@ -306,7 +301,7 @@
 
     .btn-lg {
       padding-block: calc(var(--spacing) * 2);
-      padding-inline: calc(var(--spacing) * 3);
+      padding-inline: calc(var(--spacing) * 5);
       font-size: var(--text-sm);
     }
 
@@ -326,8 +321,8 @@
     }
 
     .btn-square-lg {
-      width: calc(var(--spacing) * 10);
-      height: calc(var(--spacing) * 10);
+      width: calc(var(--spacing) * 9.5);
+      height: calc(var(--spacing) * 9.5);
     }
 
     .btn-square-xl {
diff --git a/src/lib/ui/shared/materials/Material.svelte b/src/lib/ui/shared/materials/Material.svelte
index 8215cd3e..bca28833 100644
--- a/src/lib/ui/shared/materials/Material.svelte
+++ b/src/lib/ui/shared/materials/Material.svelte
@@ -30,6 +30,7 @@
     lg: 'rounded-lg',
     xl: 'rounded-xl',
     '2xl': 'rounded-2xl',
+    '3xl': 'rounded-3xl',
     full: 'rounded-full',
   }
 
@@ -53,7 +54,7 @@
   }
 
   let {
-    elevation = 'medium',
+    elevation = 'low',
     padding = 'md',
     rounding = 'xl',
     color = 'uniform',
diff --git a/src/lib/ui/shared/modal/Modal.svelte b/src/lib/ui/shared/modal/Modal.svelte
index 52352bbf..9767ecd1 100644
--- a/src/lib/ui/shared/modal/Modal.svelte
+++ b/src/lib/ui/shared/modal/Modal.svelte
@@ -36,7 +36,7 @@
     class: clazz = '',
   }: Props = $props()
 
-  const modalId = crypto.randomUUID()
+  const modalId = Math.random().toString()
 
   let el = $state<HTMLElement>()
   let hasHistoryEntry = false
diff --git a/src/routes/accounts/+page.svelte b/src/routes/accounts/+page.svelte
index 30deb619..0976ed64 100644
--- a/src/routes/accounts/+page.svelte
+++ b/src/routes/accounts/+page.svelte
@@ -98,25 +98,29 @@
 <Header pageHeader>
   {$t('routes.accounts')}
   {#snippet extended()}
-    <div class="flex">
-      <div class="flex gap-2 mr-auto items-center">
+    <div class="flex gap-2 items-center flex-wrap">
+      <Button
+        href="/accounts/login"
+        color="primary"
+        size="lg"
+        rounding="2xl"
+        icon={ArrowLeftOnRectangle}
+      >
+        {$t('account.login')}
+      </Button>
+      <Button href="/signup" size="lg" rounding="2xl" icon={Identification}>
+        {$t('account.signup')}
+      </Button>
+      {#if !LINKED_INSTANCE_URL}
         <Button
-          href="/accounts/login"
-          rounding="pill"
-          color="primary"
-          icon={ArrowLeftOnRectangle}
+          href="/accounts/login/guest"
+          size="lg"
+          rounding="2xl"
+          icon={Plus}
         >
-          {$t('account.login')}
-        </Button>
-        <Button href="/signup" rounding="pill" icon={Identification}>
-          {$t('account.signup')}
+          {$t('account.addGuest')}
         </Button>
-        {#if !LINKED_INSTANCE_URL}
-          <Button href="/accounts/login/guest" rounding="pill" icon={Plus}>
-            {$t('account.addGuest')}
-          </Button>
-        {/if}
-      </div>
+      {/if}
     </div>
   {/snippet}
 </Header>
diff --git a/src/routes/explore/communities/+page.svelte b/src/routes/explore/communities/+page.svelte
index 619ff324..30a660df 100644
--- a/src/routes/explore/communities/+page.svelte
+++ b/src/routes/explore/communities/+page.svelte
@@ -64,7 +64,7 @@
               y: 16,
             }}
           >
-            <Material padding="none" rounding="none" class="rounded-3xl h-full">
+            <Material padding="none" rounding="3xl" class="h-full">
               <CommunityItemBig {community} />
             </Material>
           </div>
diff --git a/src/routes/inbox/+page.svelte b/src/routes/inbox/+page.svelte
index 491db633..a300e515 100644
--- a/src/routes/inbox/+page.svelte
+++ b/src/routes/inbox/+page.svelte
@@ -45,12 +45,11 @@
 <Header pageHeader class="lg:flex-row justify-between flex-col">
   {$t('routes.inbox.title')}
 
-  <div class="flex gap-2 tracking-normal items-center">
+  <div class="flex gap-2 tracking-normal">
     <Button
       onclick={() => goto(page.url, { invalidateAll: true })}
-      size="custom"
-      class="rounded-2xl h-9 aspect-square"
-      rounding="none"
+      rounding="2xl"
+      size="square-lg"
       aria-label={$t('common.refresh')}
       icon={ArrowPath}
     ></Button>
@@ -58,7 +57,6 @@
       onclick={markAllAsRead}
       loading={markingAsRead}
       disabled={markingAsRead || data.inbox.value.length == 0}
-      rounding="pill"
       color="primary"
       icon={Check}
       size="lg"
diff --git a/src/routes/inbox/messages/+page.svelte b/src/routes/inbox/messages/+page.svelte
index 69db4833..0ff217e2 100644
--- a/src/routes/inbox/messages/+page.svelte
+++ b/src/routes/inbox/messages/+page.svelte
@@ -94,7 +94,7 @@
 {#snippet startChat()}
   <Button
     color="primary"
-    rounding="pill"
+    size="lg"
     class="w-max"
     onclick={() => (searchModal.open = !searchModal.open)}
   >
diff --git a/src/routes/moderation/+page.svelte b/src/routes/moderation/+page.svelte
index 376d0d6b..ef69b302 100644
--- a/src/routes/moderation/+page.svelte
+++ b/src/routes/moderation/+page.svelte
@@ -99,8 +99,8 @@
         loading={batch.progress >= 0}
         disabled={batch.progress >= 0 || data.items.value?.length == 0}
         onclick={markAllAsResolved}
-        class="h-max ml-auto"
-        rounding="pill"
+        size="lg"
+        class="ml-auto"
         color="primary"
       >
         <Icon src={Check} size="16" mini />
diff --git a/src/routes/settings/+layout.svelte b/src/routes/settings/+layout.svelte
index 77179c27..1dab8c15 100644
--- a/src/routes/settings/+layout.svelte
+++ b/src/routes/settings/+layout.svelte
@@ -74,8 +74,8 @@
           importText = ''
           importing = true
         }}
-        rounding="pill"
         icon={ArrowDownTray}
+        size="lg"
       >
         {$t('settings.import')}
       </Button>
@@ -85,8 +85,8 @@
           navigator?.clipboard?.writeText?.(json)
           toast({ content: $t('toast.copied') })
         }}
-        rounding="pill"
         icon={ArrowUpTray}
+        size="lg"
       >
         {$t('settings.export')}
       </Button>
@@ -108,8 +108,8 @@
             ],
           })
         }}
-        rounding="pill"
         icon={ArrowPath}
+        size="lg"
       >
         {$t('settings.reset')}
       </Button>
diff --git a/src/routes/theme/+page.svelte b/src/routes/theme/+page.svelte
index 88d41187..f8827675 100644
--- a/src/routes/theme/+page.svelte
+++ b/src/routes/theme/+page.svelte
@@ -64,7 +64,7 @@
         onclick={() => {
           importing = !importing
         }}
-        rounding="pill"
+        size="lg"
         disabled={themeData.current.id <= 0}
       >
         <Icon src={ArrowUpTray} size="16" mini />
@@ -77,7 +77,7 @@
           )
           toast({ content: 'Copied theme to clipboard.' })
         }}
-        rounding="pill"
+        size="lg"
       >
         <Icon src={ArrowDownTray} size="16" mini />
         {$t('settings.export')}
@@ -109,7 +109,7 @@
             body: $t('routes.theme.resetWarning.description'),
           })
         }}
-        rounding="pill"
+        size="lg"
       >
         <Icon src={ArrowPath} size="16" mini />
         {$t('settings.reset')}
diff --git a/src/routes/u/[name]/UserActions.svelte b/src/routes/u/[name]/UserActions.svelte
index 72f5864f..d2f5c68b 100644
--- a/src/routes/u/[name]/UserActions.svelte
+++ b/src/routes/u/[name]/UserActions.svelte
@@ -70,8 +70,7 @@
 {#if profile.current?.user && profile.current.jwt && person.person.id != profile.current.user.local_user_view.person.id}
   <div class="flex items-center gap-2 w-full flex-wrap">
     <Button
-      size="sm"
-      rounding="pill"
+      size="lg"
       color="primary"
       href="/inbox/messages/{person.person.id}"
       icon={Envelope}
@@ -80,8 +79,7 @@
     </Button>
     {#if person.person.matrix_user_id}
       <Button
-        size="sm"
-        rounding="pill"
+        size="lg"
         color="secondary"
         href="https://matrix.to/#/{person.person.matrix_user_id}"
       >
@@ -96,8 +94,8 @@
         {#snippet target(attachment)}
           <Button
             {@attach attachment}
-            size="sm"
-            rounding="pill"
+            size="square-lg"
+            rounding="2xl"
             icon={ShieldCheck}
           >
             {$t('moderation.label')}
@@ -130,11 +128,11 @@
       {#snippet target(attachment)}
         <Button
           {@attach attachment}
-          size="custom"
-          class="h-8 w-8"
-          rounding="pill"
+          size="square-lg"
+          rounding="2xl"
           icon={EllipsisHorizontal}
-        ></Button>
+          aria-label={$t('post.actions.more')}
+        />
       {/snippet}
       <MenuButton
         color="danger-subtle"
-- 
2.51.2