Finish admin page

apps/storefront/src/features/account/account-panels.tsx

@@ -12,7 +12,7 @@ import type {
   OrderListItem,
   ProductListItem,
 } from '@sport/types';
-import { Badge, Button, Input, Skeleton } from '@sport/ui';
+import { Badge, Button, EmptyState, Input, Skeleton } from '@sport/ui';
 
 import { Link } from '@/i18n/navigation';
 import { browserApi } from '@/lib/api';
@@ -124,7 +124,7 @@ export function AccountOrders() {
       {!data ? (
         <Skeleton className="h-40 w-full" />
       ) : data.items.length === 0 ? (
-        <p className="text-ink-500 text-sm">{t('noOrders')}</p>
+        <EmptyState title={t('noOrders')} />
       ) : (
         <ul className="divide-ink-100 divide-y border-y">
           {data.items.map((order) => (
@@ -329,7 +329,7 @@ export function AccountAddresses() {
       {!data ? (
         <Skeleton className="h-32 w-full" />
       ) : data.length === 0 && !draft ? (
-        <p className="text-ink-500 text-sm">{t('noAddresses')}</p>
+        <EmptyState title={t('noAddresses')} />
       ) : (
         <ul className="grid gap-4 sm:grid-cols-2">
           {data.map((address) => (
@@ -454,7 +454,7 @@ export function AccountProfile() {
             flow. The API refuses it too — this input simply says so.
           */}
           <Input value={data.email} readOnly disabled />
-          <span className="text-ink-400 text-xs">{t('emailLocked')}</span>
+          <span className="text-ink-500 text-xs">{t('emailLocked')}</span>
         </label>
 
         <Field label={t('phone')} value={data.phone ?? ''} onChange={(v) => patch({ phone: v })} />
@@ -526,7 +526,7 @@ export function AccountWishlist() {
       {!data ? (
         <Skeleton className="h-32 w-full" />
       ) : data.length === 0 ? (
-        <p className="text-ink-500 text-sm">{t('noWishlist')}</p>
+        <EmptyState title={t('noWishlist')} />
       ) : (
         <ul className="divide-ink-100 divide-y border-y">
           {data.map((product) => (

apps/storefront/src/features/account/auth-form.tsx

@@ -133,14 +133,14 @@ export function AuthForm({ mode }: { mode: 'signIn' | 'register' }) {
             autoComplete={isRegister ? 'new-password' : 'current-password'}
             required
           />
-          {isRegister ? <span className="text-ink-400 text-xs">{t('passwordHint')}</span> : null}
+          {isRegister ? <span className="text-ink-500 text-xs">{t('passwordHint')}</span> : null}
         </label>
 
         {isRegister ? (
           <>
             <label className="block space-y-1.5">
               <span className="text-xs font-semibold uppercase tracking-widest">
-                {t('phone')} <span className="text-ink-400 normal-case">{t('optional')}</span>
+                {t('phone')} <span className="text-ink-500 normal-case">{t('optional')}</span>
               </span>
               <Input
                 type="tel"