made things red

barkmanui/src/common/components/BarkHeader.module.css

@@ -27,7 +27,7 @@
     }
 
     [data-mantine-color-scheme] &.active {
-        background-color: #D40404;
+        background-color: var(--mantine-color-red-filled);
         color: var(--mantine-color-white);
     }
 }

barkmanui/src/features/inventory/InventoryList.tsx

@@ -1,7 +1,7 @@
 import {useQuery} from "@tanstack/react-query";
 import {InventoryItem} from "./types";
 import {BarkHeader} from "../../common/components/BarkHeader.tsx";
-import { Table } from '@mantine/core';
+import {Flex, Table} from '@mantine/core';
 import BarkButton from "../../common/components/BarkButton.tsx";
 
 
@@ -28,20 +28,31 @@ function InventoryList() {
     return (
         <>
             <BarkHeader></BarkHeader>
+
+            <Flex
+                mih={50}
+                gap="xl"
+                justify="center"
+                align="center"
+                direction="row"
+                wrap="wrap"
+            >
                 <p>
                     ARFF ARFF BARK BARK
                 </p>
                 <BarkButton>Add Item</BarkButton>
+            </Flex>
+
 
             <div>{isFetching ? 'Updating...' : ''}</div>
 
             <Table striped>
             <Table.Thead>
-                <Table.Tr className="text-left">
-                    <Table.Th color="red">ID</Table.Th>
-                    <Table.Th className="text-brand">Brand</Table.Th>
-                    <Table.Th className="text-brand">Item</Table.Th>
-                    <Table.Th className="text-brand">Status</Table.Th>
+                <Table.Tr>
+                    <Table.Th c="red">ID</Table.Th>
+                    <Table.Th c="red">Brand</Table.Th>
+                    <Table.Th c="red">Item</Table.Th>
+                    <Table.Th c="red">Status</Table.Th>
                 </Table.Tr>
                 </Table.Thead>
                 <Table.Tbody>

barkmanui/src/pages/home.tsx

@@ -1,4 +1,5 @@
 import {BarkHeader} from "../common/components/BarkHeader.tsx";
+import {Text} from "@mantine/core";
 
 
 function Home() {
@@ -7,9 +8,9 @@ function Home() {
     return (
         <>
             <BarkHeader></BarkHeader>
-            <p>
-                ARFF ARFF BARK BARK
-            </p>
+
+            <Text c="red">ARFF ARFF BARK BARK</Text>
+
 
         </>
     )