fixed a better table structure

src/index.css

@@ -47,7 +47,14 @@
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;
-  }
+    --table-background: 0 30% 58%;
+    --table-foreground: 240 5.3% 26.1%;
+    --table-primary: 240 5.9% 10%;
+    --table-primary-foreground: 0 0% 98%;
+    --table-accent: 240 4.8% 95.9%;
+    --table-accent-foreground: 240 5.9% 10%;
+    --table-border: 220 13% 91%;
+    --table-ring: 217.2 91.2% 59.8%;  }
   .dark {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
@@ -81,6 +88,14 @@
     --sidebar-accent-foreground: 240 4.8% 95.9%;
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+    --table-background: 240 5.9% 10%;
+    --table-foreground: 240 4.8% 95.9%;
+    --table-primary: 224.3 76.3% 48%;
+    --table-primary-foreground: 0 0% 100%;
+    --table-accent: 240 3.7% 15.9%;
+    --table-accent-foreground: 240 4.8% 95.9%;
+    --table-border: 240 3.7% 15.9%;
+    --table-ring: 217.2 91.2% 59.8%;
   }
 }
 

src/routes/admin/news/News.tsx

@@ -70,7 +70,6 @@ export default function News() {
 				Här kan du skapa nyheter & redigera existerande nyheter på hemsidan.
 			</p>
 			<NewsForm />
-			<Button>Redigera nyheter</Button>
 			<AdminTable table={table} />
 		</div>
 	);

src/routes/admin/news/NewsForm.tsx

@@ -66,7 +66,7 @@ export default function NewsForm() {
 	}
 
 	return (
-		<>
+		<div className="p-3">
 			<Button
 				onClick={() => {
 					newsForm.reset();
@@ -173,6 +173,6 @@ export default function NewsForm() {
 					</Form>
 				</DialogContent>
 			</Dialog>
-		</>
+		</div>
 	);
 }

src/widgets/AdminTable.tsx

@@ -2,12 +2,15 @@ import { flexRender, type Table } from "@tanstack/react-table";
 
 export default function AdminTable<T>({ table }: { table: Table<T> }) {
 	return (
-		<table className="border-black border">
+		<table className="border border-table-border w-full border-collapse">
 			<thead>
 				{table.getHeaderGroups().map((headerGroup) => (
 					<tr key={headerGroup.id}>
 						{headerGroup.headers.map((header) => (
-							<th key={header.id}>
+							<th
+								key={header.id}
+								className="px-4 py-2 text-left border-r border-table-border last:border-r-0"
+							>
 								{header.isPlaceholder
 									? null
 									: flexRender(
@@ -21,9 +24,12 @@ export default function AdminTable<T>({ table }: { table: Table<T> }) {
 			</thead>
 			<tbody>
 				{table.getRowModel().rows.map((row) => (
-					<tr key={row.id}>
+					<tr key={row.id} className="border-t">
 						{row.getVisibleCells().map((cell) => (
-							<td key={cell.id}>
+							<td
+								key={cell.id}
+								className="px-4 py-2 border-r border-table-border last:border-r-0"
+							>
 								{flexRender(cell.column.columnDef.cell, cell.getContext())}
 							</td>
 						))}
@@ -34,7 +40,10 @@ export default function AdminTable<T>({ table }: { table: Table<T> }) {
 				{table.getFooterGroups().map((footerGroup) => (
 					<tr key={footerGroup.id}>
 						{footerGroup.headers.map((header) => (
-							<th key={header.id}>
+							<th
+								key={header.id}
+								className="px-4 py-2 text-left border-r border-table-border last:border-r-0"
+							>
 								{header.isPlaceholder
 									? null
 									: flexRender(

tailwind.config.js

@@ -61,6 +61,17 @@ export default {
 					border: "hsl(var(--sidebar-border))",
 					ring: "hsl(var(--sidebar-ring))",
 				},
+				table: {
+					DEFAULT: "rgb(var(--forange))",
+					//DEFAULT: 'hsl(var(--sidebar-background))',
+					foreground: "hsl(var(--table-foreground))",
+					primary: "hsl(var(--table-primary))",
+					"primary-foreground": "hsl(var(--table-primary-foreground))",
+					accent: "hsl(var(--table-accent))",
+					"accent-foreground": "hsl(var(--table-accent-foreground))",
+					border: "hsl(var(--table-border))",
+					ring: "hsl(var(--table-ring))",
+				},
 			},
 			borderRadius: {
 				lg: "var(--radius)",