feat: tweak ui

Author: antfu

packages/hub-ui-onboard/src/client/index.ts

@@ -2,6 +2,8 @@ import type { OnboardingBranding, OnboardingStatus } from '../types'
 import css from './.generated/css'
 import { DEVFRAME_LOGO } from './logo'
 
+// @unocss-include
+
 /**
  * The stand-in floating button, served at `<base>embedded.js`. It asks
  * `__onboard/status` what to show, offers Install / Disable, and once the
@@ -74,7 +76,10 @@ function mount(initial: OnboardingStatus): void {
   const style = document.createElement('style')
   style.textContent = css
   const scheme = document.createElement('div')
-  scheme.className = isDark() ? 'dark' : 'light'
+  scheme.className = [
+    isDark() ? 'dark' : 'light',
+    'devframes-onboard-root',
+  ].join(' ')
   scheme.style.display = 'contents'
   root.append(style, scheme)
   if (initial.branding.primaryColor)
@@ -90,7 +95,7 @@ function mount(initial: OnboardingStatus): void {
   pill.setAttribute('aria-expanded', 'false')
   const glow = document.createElement('span')
   glow.className = 'devframes-onboard-glow'
-  pill.append(glow, mark(branding, 'w-4 h-4'))
+  pill.append(mark(branding, 'w-3 h-3'))
 
   const panel = document.createElement('div')
   panel.className = 'devframes-onboard-panel'
@@ -116,20 +121,20 @@ function mount(initial: OnboardingStatus): void {
   note.hidden = true
 
   const install = button('btn-primary text-sm justify-center', messages.install, () => void startInstall())
-  const hide = button('btn-text text-sm color-muted', messages.hide, () => {
+  const hide = button('btn-action justify-center text-sm color-muted', messages.hide, () => {
     sessionStorage.setItem(HIDDEN_KEY, '1')
     host.remove()
   })
-  const disable = button('btn-text text-sm color-muted', messages.disable, () => void disableDevtools())
+  const disable = button('btn-action justify-center text-sm color-muted', messages.disable, () => void disableDevtools())
   const secondary = document.createElement('div')
-  secondary.className = 'flex items-center gap-1 -ml-2'
+  secondary.className = 'grid grid-cols-2 gap-1'
   secondary.append(hide, disable)
   const actions = document.createElement('div')
-  actions.className = 'flex flex-col gap-1'
-  actions.append(install, secondary)
+  actions.className = 'flex flex-col gap-2'
+  actions.append(secondary, install)
 
   panel.append(heading, description, command, note, actions)
-  scheme.append(pill, panel)
+  scheme.append(glow, pill, panel)
 
   let open = false
   const setOpen = (value: boolean) => {

packages/hub-ui-onboard/src/client/style.css

@@ -3,8 +3,12 @@
  * page. Class names are prefixed anyway so the generated stylesheet reads
  * clearly next to the utilities.
  */
+.devframes-onboard-root:hover .devframes-onboard-glow {
+  --uno: opacity-60;
+}
+
 .devframes-onboard-pill {
-  --uno: fixed bottom-4 left-4 z-floating-anchor w-8 h-8 rounded-full border border-base bg-dock-glass shadow;
+  --uno: fixed bottom-4 left-4 z-floating-anchor w-6 h-6 rounded-full border border-base bg-dock-glass shadow;
   --uno: flex items-center justify-center cursor-pointer select-none p-0 outline-none;
   --uno: op25 hover:op100 focus-visible:op100 focus-visible:ring-2 ring-primary-400;
   --uno: transition-all duration-200 hover:scale-105;
@@ -16,7 +20,7 @@
 }
 
 .devframes-onboard-glow {
-  --uno: absolute left-1/2 top-1/2 w-40 h-40 rounded-full opacity-0 pointer-events-none -z-1;
+  --uno: absolute left--4 bottom--26 w-40 h-40 rounded-full opacity-0 pointer-events-none -z-1;
   --uno: transition-opacity duration-1000 ease-out;
   transform: translate(-50%, -50%);
   filter: blur(60px);
@@ -29,12 +33,8 @@
   );
 }
 
-.devframes-onboard-pill:hover .devframes-onboard-glow {
-  --uno: opacity-60;
-}
-
 .devframes-onboard-panel {
-  --uno: fixed bottom-16 left-4 z-floating-anchor w-80 max-w-[calc(100vw-2rem)] rounded-lg border border-base bg-base color-base shadow-lg;
+  --uno: fixed bottom-12 left-4 z-floating-anchor w-80 max-w-[calc(100vw-2rem)] rounded-lg border border-base bg-base color-base shadow-lg;
   --uno: p-4 flex flex-col gap-3 font-sans text-sm leading-normal;
   --uno: transition-all duration-200 origin-bottom-left;
 }

packages/hub-ui-onboard/src/index.ts

@@ -36,7 +36,7 @@ function clientFile(): string {
 function defaultMessages(productName: string): OnboardingMessages {
   return {
     title: productName,
-    description: `${productName} is not installed in this project yet. Install it to open the panel.`,
+    description: `${productName} enables development features in your project. Install it with:`,
     install: `Install ${productName}`,
     hide: 'Hide for now',
     disable: 'Disable entirely',