fix: address PR review feedback for brand page

- Fix Safari clipboard by using ClipboardItem with promise blob
- Add loading spinner to PNG download button in customize section
- Fix logo height mismatch between dark/light variants
- Force canonical sky accent color on light logo previews

Author: Adebesin-Cell

app/components/Brand/Customize.vue

@@ -210,11 +210,15 @@ async function downloadCustomPng() {
           </ButtonBase>
           <ButtonBase
             size="sm"
-            classicon="i-lucide:download"
             :aria-label="$t('brand.customize.download_png_aria')"
             :disabled="pngLoading"
             @click="downloadCustomPng"
           >
+            <span
+              class="size-[1em]"
+              aria-hidden="true"
+              :class="pngLoading ? 'i-lucide:loader-circle animate-spin' : 'i-lucide:download'"
+            />
             {{ $t('brand.logos.download_png') }}
           </ButtonBase>
         </div>

app/components/LogoContextMenu.vue

@@ -31,12 +31,34 @@ function close() {
   show.value = false
 }
 
-const { copy, copied } = useClipboard({ copiedDuring: 2000 })
+const copied = shallowRef(false)
 
 async function copySvg() {
-  const res = await fetch('/logo.svg')
-  const svg = await res.text()
-  await copy(svg)
+  try {
+    // Build the ClipboardItem synchronously so Safari keeps the user-gesture context.
+    // The blob *value* can be a promise — Safari resolves it while the gesture is still valid.
+    const textPromise = fetch('/logo.svg').then(r => r.text())
+    const item = new ClipboardItem({
+      'text/plain': textPromise.then(t => new Blob([t], { type: 'text/plain' })),
+    })
+    await navigator.clipboard.write([item])
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 2000)
+  } catch {
+    // Fallback for older browsers that don't support ClipboardItem with promises
+    const res = await fetch('/logo.svg')
+    const svg = await res.text()
+    const textarea = document.createElement('textarea')
+    textarea.value = svg
+    textarea.style.position = 'fixed'
+    textarea.style.opacity = '0'
+    document.body.appendChild(textarea)
+    textarea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textarea)
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 2000)
+  }
   setTimeout(close, 1000)
 }
 

app/pages/brand.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ACCENT_COLORS } from '#shared/utils/constants'
+
 useSeoMeta({
   title: () => `${$t('brand.title')} - npmx`,
   ogTitle: () => `${$t('brand.title')} - npmx`,
@@ -146,13 +148,15 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
                     <AppLogo
                       v-if="logo.src === '/logo.svg'"
                       class="max-h-20 w-auto max-w-full text-[#0a0a0a]"
+                      :style="{ '--accent': ACCENT_COLORS.light.sky }"
                       :aria-label="logo.altLight()"
                     />
                     <img
                       v-else
                       :src="logo.src"
                       :alt="logo.altLight()"
                       class="max-h-16 w-auto max-w-full"
+                      :class="{ 'max-h-20': logo.span }"
                       :style="logo.src === '/logo-mark.svg' ? 'filter: invert(1)' : ''"
                     />
                   </div>