make it look nicer

mast-react-vite/src/App.tsx

@@ -99,11 +99,13 @@ function App({ ctx }) {
 
   return (
     <>
-      <section className="pt-16 container">
+      <section className="pt-8 container">
       <Input type="text"
+        className="bg-background p-4"
         onKeyUp={addTodo}
         onChange={(e) => setNewText(e.target.value)}
       />
+      <div className="p-2"/>
       <DataTable columns={columns} data={todos} />
       </section>
     </>

mast-react-vite/src/components/ui/checkbox.tsx

@@ -10,7 +10,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "flex h-4 w-4 shrink-0 items-center justify-center text-current rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className
     )}
     {...props}
@@ -18,7 +18,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <CheckIcon className="h-4 w-4" />
+      <CheckIcon className="h-3 w-3" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))

mast-react-vite/src/components/ui/data-table.tsx

@@ -44,13 +44,13 @@ export function DataTable<TData, TValue>({
   return (
     <div >
       <Table >
-        <TableHeader>
+        <TableHeader className="bg-accent">
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 return (
                   <TableHead key={header.id}
-                    className="relative"
+                    className="relative text-foreground"
                     style={{
                       width: header.getSize(),
                     }}