@betterstart/cli 0.1.81 → 0.1.83

package/templates/init/pages/reset-password-form.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+import { authClient } from '@cms/auth/client'
+import { Button } from '@cms/components/ui/button'
+import { Card, CardContent } from '@cms/components/ui/card'
+import { Field, FieldGroup, FieldLabel } from '@cms/components/ui/field'
+import { Input } from '@cms/components/ui/input'
+import { cn } from '@cms/utils/cn'
+import { LoaderCircle } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter, useSearchParams } from 'next/navigation'
+import * as React from 'react'
+
+export function ResetPasswordForm({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const token = searchParams.get('token')
+
+  const [newPassword, setNewPassword] = React.useState('')
+  const [confirmPassword, setConfirmPassword] = React.useState('')
+  const [error, setError] = React.useState<string | null>(null)
+  const [isPending, startTransition] = React.useTransition()
+
+  if (!token) {
+    return (
+      <div className={cn('flex flex-col gap-6', className)} {...props}>
+        <Card className="overflow-hidden p-0">
+          <CardContent className="grid p-0 md:grid-cols-[5fr_7fr]">
+            <div className="relative hidden bg-muted md:block">
+              <img
+                src="https://assets.betterstart.dev/assets/placeholder.png"
+                alt="Image"
+                className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+              />
+            </div>
+            <div className="p-6 md:p-20">
+              <FieldGroup className="pb-12 gap-10">
+                <div className="flex flex-col items-start">
+                  <h1 className="text-xl font-medium">Invalid reset link</h1>
+                  <p className="text-balance text-muted-foreground">
+                    This password reset link is invalid or has expired. Please
+                    request a new one.
+                  </p>
+                </div>
+                <Link
+                  href="/cms/forgot-password"
+                  className="text-sm underline-offset-4 hover:underline"
+                >
+                  Request a new reset link
+                </Link>
+              </FieldGroup>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+
+    if (newPassword !== confirmPassword) {
+      setError('Passwords do not match')
+      return
+    }
+
+    if (newPassword.length < 8) {
+      setError('Password must be at least 8 characters')
+      return
+    }
+
+    startTransition(async () => {
+      try {
+        const { error } = await authClient.resetPassword({
+          newPassword,
+          token,
+        })
+        if (error) {
+          setError(error.message || 'Failed to reset password')
+          return
+        }
+        router.push('/cms/login?reset=success')
+      } catch {
+        setError('An error occurred. Please try again.')
+      }
+    })
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-6', className)} {...props}>
+      <Card className="overflow-hidden p-0">
+        <CardContent className="grid p-0 md:grid-cols-[5fr_7fr]">
+          <div className="relative hidden bg-muted md:block">
+            <img
+              src="https://assets.betterstart.dev/assets/placeholder.png"
+              alt="Image"
+              className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+            />
+          </div>
+          <form onSubmit={handleSubmit} className="p-6 md:p-20">
+            <FieldGroup className="pb-12 gap-10">
+              <div className="flex flex-col items-start">
+                <h1 className="text-xl font-medium">Reset password</h1>
+                <p className="text-balance text-muted-foreground">
+                  Enter your new password below
+                </p>
+              </div>
+              {error ? (
+                <div className="bg-destructive/10 text-destructive text-sm p-3 rounded-md">
+                  {error}
+                </div>
+              ) : null}
+              <div className="flex flex-col gap-4">
+                <Field>
+                  <FieldLabel htmlFor="newPassword">New Password</FieldLabel>
+                  <Input
+                    id="newPassword"
+                    type="password"
+                    autoComplete="new-password"
+                    placeholder="Enter new password"
+                    value={newPassword}
+                    onChange={(e) => setNewPassword(e.target.value)}
+                    required
+                    disabled={isPending}
+                  />
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="confirmPassword">
+                    Confirm Password
+                  </FieldLabel>
+                  <Input
+                    id="confirmPassword"
+                    type="password"
+                    autoComplete="new-password"
+                    placeholder="Confirm new password"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    required
+                    disabled={isPending}
+                  />
+                </Field>
+                <Field className="pt-4">
+                  <Button type="submit" disabled={isPending}>
+                    {isPending && <LoaderCircle className="animate-spin" />}
+                    {isPending ? 'Resetting...' : 'Reset Password'}
+                  </Button>
+                </Field>
+              </div>
+            </FieldGroup>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/templates/init/pages/reset-password-page.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from 'next'
+import { Suspense } from 'react'
+import { ResetPasswordForm } from './reset-password-form'
+
+export const metadata: Metadata = {
+  title: 'Reset Password',
+  robots: { index: false, follow: false },
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center bg-background p-6 md:p-10">
+      <div className="w-full max-w-sm md:max-w-4xl">
+        <Suspense>
+          <ResetPasswordForm />
+        </Suspense>
+      </div>
+    </div>
+  )
+}

package/templates/init/pages/users/columns.tsx

@@ -12,7 +12,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@cms/components/ui/alert-dialog'
-import { Avatar, AvatarFallback } from '@cms/components/ui/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from '@cms/components/ui/avatar'
 import { Badge } from '@cms/components/ui/badge'
 import { Button } from '@cms/components/ui/button'
 import {
@@ -26,7 +26,7 @@ import {
 import type { UserData } from '@cms/types/auth'
 import { useQueryClient } from '@tanstack/react-query'
 import type { ColumnDef } from '@tanstack/react-table'
-import { ArrowUpDown, Edit, MoreHorizontal, Trash } from 'lucide-react'
+import { ArrowUpDown, Edit, MoreHorizontal, ShieldCheck, Trash } from 'lucide-react'
 import React from 'react'
 import { toast } from 'sonner'
 import { EditRoleDialog } from './edit-role-dialog'
@@ -117,10 +117,10 @@ export const columns: ColumnDef<UserData>[] = [
       <Button
         variant="ghost"
         onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-        className="hover:bg-muted/50 px-0!"
+        className="px-0 text-muted-foreground hover:text-foreground w-full hover:bg-transparent justify-start"
       >
         User
-        <ArrowUpDown className="size-4" />
+        <ArrowUpDown className="size-3" />
       </Button>
     ),
     cell: ({ row }) => {
@@ -145,8 +145,9 @@ export const columns: ColumnDef<UserData>[] = [
     cell: ({ row }) => {
       const verified = row.getValue('emailVerified') as boolean
       return (
-        <Badge variant={verified ? 'outline' : 'secondary'}>
-          {verified ? 'Verified' : 'Unverified'}
+        <Badge variant="outline">
+
+          {verified ? <span className="flex items-center gap-1"><ShieldCheck className="size-3.5" />Verified</span> : <span className="flex items-center gap-1"><ShieldCheck className="size-3.5" />Unverified</span>}
         </Badge>
       )
     },
@@ -174,8 +175,10 @@ export const columns: ColumnDef<UserData>[] = [
           userName={row.original.name}
         >
           <Badge variant="outline" className="capitalize cursor-pointer">
-            {role}
-            <Edit className="size-3 ml-1" strokeWidth={2} />
+            <span className="flex items-center gap-1">
+              {role}
+              <Edit className="size-3" />
+            </span>
           </Badge>
         </EditRoleDialog>
       )
@@ -187,10 +190,10 @@ export const columns: ColumnDef<UserData>[] = [
       <Button
         variant="ghost"
         onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-        className="hover:bg-muted/50"
+        className="px-0 text-muted-foreground hover:text-foreground w-full hover:bg-transparent justify-start"
       >
         Joined
-        <ArrowUpDown className="size-4" />
+        <ArrowUpDown className="size-3" />
       </Button>
     ),
     cell: ({ row }) => {

package/templates/init/pages/users/users-page-content.tsx

@@ -1,8 +1,12 @@
 'use client'
 
+import React from 'react'
 import type { ColumnDef } from '@tanstack/react-table'
+import { ChevronLeft } from 'lucide-react'
+import { useRouter } from 'next/navigation'
 import { PageHeader } from '@cms/components/shared/page-header'
 import type { UserData } from '@cms/types/auth'
+import { Button } from '@cms/components/ui/button'
 import { CreateUserDialog } from './create-user-dialog'
 import { UsersTable } from './users-table'
 
@@ -11,10 +15,13 @@ interface UsersPageContentProps<TValue> {
 }
 
 export function UsersPageContent<TValue>({ columns }: UsersPageContentProps<TValue>) {
+  const router = useRouter()
+
   return (
-    <>
+    <React.Fragment>
       <PageHeader
         title="Users"
+        back={<Button variant="ghost" size="icon" onClick={() => router.back()}><ChevronLeft /></Button>}
         actions={
           <div className="flex items-center gap-2">
             <CreateUserDialog />
@@ -24,6 +31,6 @@ export function UsersPageContent<TValue>({ columns }: UsersPageContentProps<TVal
       <main className="space-y-6 p-6">
         <UsersTable columns={columns} />
       </main>
-    </>
+    </React.Fragment>
   )
 }

package/templates/init/pages/users/users-page.tsx

@@ -11,7 +11,7 @@ export default function UsersPage() {
         </div>
       }
     >
-      <div className="flex flex-col">
+      <div className="flex flex-col pt-14">
         <UsersPageContent columns={columns} />
       </div>
     </React.Suspense>

package/templates/init/pages/users/users-table.tsx

@@ -126,7 +126,7 @@ export function UsersTable<TValue>({ columns }: UsersTableProps<TValue>) {
     <div className="space-y-6">
       <div className="bg-card border overflow-hidden rounded-lg">
         <Table>
-          <TableHeader className="bg-secondary">
+          <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
@@ -180,7 +180,7 @@ export function UsersTable<TValue>({ columns }: UsersTableProps<TValue>) {
             value={pageSize === -1 ? 'all' : String(pageSize)}
             onValueChange={handlePageSizeChange}
           >
-            <SelectTrigger className="w-[100px] h-8">
+            <SelectTrigger className="w-25 h-8">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>

package/templates/ui/badge.tsx

@@ -4,12 +4,12 @@ import { Slot } from 'radix-ui'
 import type * as React from 'react'
 
 const badgeVariants = cva(
-  'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge',
+  'h-6 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge',
   {
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        secondary: 'bg-secondary border-border text-secondary-foreground [a]:hover:bg-secondary/80',
         destructive:
           'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
         outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',

package/templates/ui/button.tsx

@@ -11,7 +11,7 @@ const buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
         outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+          "border-border bg-white hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:
@@ -22,7 +22,7 @@ const buttonVariants = cva(
       },
       size: {
         default:
-          "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+          "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
         xs: "h-7 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-9 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
         lg: "h-12 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",

package/templates/ui/card.tsx

@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl material-md",
+        "group/card flex flex-col gap-6 overflow-hidden rounded bg-card py-6 text-sm text-card-foreground has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t *:[img:last-child]:rounded-b material-sm",
         className
       )}
       {...props}
@@ -84,7 +84,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center border-t bg-muted/50 px-6 pt-4 pb-4.5 group-data-[size=sm]/card:p-3",
+        "flex items-center border-t bg-background px-6 pt-4 pb-4.5 group-data-[size=sm]/card:p-3",
         className
       )}
       {...props}

package/templates/ui/curriculum-editor.tsx

@@ -296,7 +296,7 @@ const SequentialEditor = ({
       >
         {items.map((item, index) => (
           <AccordionItem key={index} value={`item-${index + 1}`} className="p-0 border-none">
-            <div className="space-y-5 rounded-lg border p-4 bg-secondary/50 corner-squircle [&_h3]:m-0 w-full">
+            <div className="space-y-5 rounded-lg border p-4 bg-background corner-squircle [&_h3]:m-0 w-full">
               <AccordionTrigger className="flex items-center p-0 justify-between w-full">
                 <div className="flex w-full items-center justify-between">
                   <h4 className="text-sm font-medium w-full">
@@ -438,7 +438,7 @@ const WeeklyEditor = ({
             value={`week-${weekIndex + 1}`}
             className="p-0 border-none"
           >
-            <div className="space-y-5 rounded-lg border p-4 bg-secondary/50 corner-squircle [&_h3]:m-0 w-full">
+            <div className="space-y-5 rounded-lg border p-4 bg-background corner-squircle [&_h3]:m-0 w-full">
               <AccordionTrigger className="flex items-center p-0 justify-between w-full">
                 <div className="flex w-full items-center justify-between">
                   <div className="flex flex-col items-start">

package/templates/ui/image-upload-field.tsx

@@ -277,7 +277,7 @@ export function ImageUploadField({
 
         {/* Preview or Upload Area */}
         {displayPreview ? (
-          <div className="relative w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary h-50 flex items-center justify-center p-10 group">
+          <div className="relative w-full rounded-lg corner-squircle border border-dashed border-border bg-background h-50 flex items-center justify-center p-10 group">
             <img
               src={displayPreview}
               alt="Preview"
@@ -320,7 +320,7 @@ export function ImageUploadField({
             onClick={handleClick}
             disabled={disabled || isUploading}
             className={cn(
-              'w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary h-50 flex items-center justify-center p-10 group',
+              'w-full rounded-lg corner-squircle border border-dashed border-border bg-background h-50 flex items-center justify-center p-10 group',
               'hover:border-primary/50 transition-colors',
               'flex flex-col items-center justify-center gap-2 p-8',
               'disabled:opacity-50 disabled:cursor-not-allowed'

package/templates/ui/input.tsx

@@ -1,13 +1,14 @@
-import { cn } from '@cms/utils/cn'
-import type * as React from 'react'
+import * as React from "react"
 
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+import { cn } from "@cms/utils/cn"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
     <input
       type={type}
       data-slot="input"
       className={cn(
-        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-10 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+        "h-9 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}

package/templates/ui/media-upload-field.tsx

@@ -209,7 +209,7 @@ export function MediaUploadField({
 
         {/* Preview or Upload Area */}
         {previewUrl ? (
-          <div className="relative w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary/50 group">
+          <div className="relative w-full rounded-lg corner-squircle border border-dashed border-border bg-background group">
             {mediaType === 'video' ? (
               <video
                 src={previewUrl}
@@ -265,7 +265,7 @@ export function MediaUploadField({
             onClick={handleClick}
             disabled={disabled || isUploading}
             className={cn(
-              'w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary/50',
+              'w-full rounded-lg corner-squircle border border-dashed border-border bg-background',
               'hover:border-primary/50 transition-colors',
               'flex flex-col items-center justify-center gap-2 p-8',
               'disabled:opacity-50 disabled:cursor-not-allowed'

package/templates/ui/placeholder.tsx

@@ -12,7 +12,7 @@ export function Placeholder({ label, description, action, className, ...props }:
   return (
     <div
       className={cn(
-        'border flex items-center flex-col gap-2 border-dashed border-border rounded-lg corner-squircle p-8 bg-secondary/50',
+        'border flex items-center flex-col gap-2 border-dashed border-border rounded-lg corner-squircle p-8 bg-background',
         className
       )}
       {...props}

package/templates/ui/sidebar.tsx

@@ -160,7 +160,7 @@ function Sidebar({
       <div
         data-slot="sidebar"
         className={cn(
-          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col relative z-11',
           className
         )}
         {...props}
@@ -198,7 +198,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer text-sidebar-foreground hidden md:block"
+      className="group peer text-sidebar-foreground hidden md:block z-11 relative"
       data-state={state}
       data-collapsible={state === 'collapsed' ? collapsible : ''}
       data-variant={variant}
@@ -454,7 +454,7 @@ const sidebarMenuButtonVariants = cva(
           'bg-background hover:bg-sidebar-accent hover:text-sidebar-primary shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]'
       },
       size: {
-        default: 'h-9 text-sm',
+        default: 'h-8 text-sm',
         sm: 'h-7 text-xs',
         lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!'
       }

package/templates/ui/table.tsx

@@ -16,7 +16,13 @@ function Table({ className, ...props }: React.ComponentProps<'table'>) {
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
-  return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b [&_tr:hover]:bg-transparent! bg-background [&_th]:text-muted-foreground', className)}
+      {...props}
+    />
+  )
 }
 
 function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
@@ -33,7 +39,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
   return (
     <tfoot
       data-slot="table-footer"
-      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+      className={cn('bg-background border-t font-medium [&>tr]:last:border-b-0', className)}
       {...props}
     />
   )
@@ -44,7 +50,7 @@ function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
     <tr
       data-slot="table-row"
       className={cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        'hover:bg-background data-[state=selected]:bg-background border-b transition-colors',
         className
       )}
       {...props}
@@ -69,7 +75,7 @@ function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
   return (
     <td
       data-slot="table-cell"
-      className={cn('px-4 py-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}
+      className={cn('px-4 py-3.5 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}
       {...props}
     />
   )

package/templates/ui/video-upload-field.tsx

@@ -283,7 +283,7 @@ export function VideoUploadField({
 
         {/* Preview or Upload Area */}
         {displayPreview ? (
-          <div className="relative w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary h-50 flex items-center justify-center p-10 group overflow-hidden">
+          <div className="relative w-full rounded-lg corner-squircle border border-dashed border-border bg-background h-50 flex items-center justify-center p-10 group overflow-hidden">
             <video
               src={displayPreview}
               controls
@@ -328,7 +328,7 @@ export function VideoUploadField({
             onClick={handleClick}
             disabled={disabled || isUploading}
             className={cn(
-              'w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary/50',
+              'w-full rounded-lg corner-squircle border border-dashed border-border bg-background',
               'hover:border-primary/50 transition-colors',
               'flex flex-col items-center justify-center gap-2 p-8',
               'disabled:opacity-50 disabled:cursor-not-allowed'