Merge pull request #16 from Pup-Ion-Dev/ui-overhaul

UI overhaul

barkmanui/package.json

@@ -10,6 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@mantine/core": "^7.16.0",
+    "@mantine/form": "^7.16.0",
+    "@mantine/hooks": "^7.16.0",
     "@tanstack/react-query": "^5.64.1",
     "@tanstack/react-query-devtools": "^5.64.1",
     "axios": "^1.7.9",
@@ -24,13 +27,13 @@
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.20",
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.17",
+    "postcss": "^8.5.1",
+    "postcss-preset-mantine": "^1.17.0",
+    "postcss-simple-vars": "^7.0.1",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5"

barkmanui/postcss.config.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+};

barkmanui/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

barkmanui/src/App.tsx

@@ -2,12 +2,33 @@ import { Routes, Route} from 'react-router';
 import Home from './pages/home.tsx';
 import InventoryList from "./features/inventory/InventoryList.tsx";
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import {createTheme, MantineProvider} from '@mantine/core';
+import '@mantine/core/styles.css';
 
 // Create a client
 const queryClient = new QueryClient()
 
+const barkTheme = createTheme({
+  primaryColor: 'red',
+  colors: {
+    'red': [
+      "#ffe8e8",
+      "#ffcfd0",
+      "#fd9d9d",
+      "#fb6868",
+      "#fa3c3b",
+      "#f9211e",
+      "#fa120f",
+      "#df0404",
+      "#c70002",
+      "#ae0000"
+    ],
+  },
+
+});
+
 function App() {
-  return (
+  return <MantineProvider defaultColorScheme="auto" theme={barkTheme}>{ (
       <QueryClientProvider client={queryClient}>
     <>
         <Routes>
@@ -18,7 +39,7 @@ function App() {
 
     </>
       </QueryClientProvider>
-  )
+  ) }</MantineProvider>;
 }
 
 export default App

barkmanui/src/common/components/BarkButton.tsx

@@ -0,0 +1,10 @@
+import {PropsWithChildren} from "react";
+import { Button } from '@mantine/core';
+
+function BarkButton({children}: PropsWithChildren) {
+   return (
+       <Button variant="filled" color="red" size="md" radius="md">{children}</Button>
+   )
+}
+
+export default BarkButton;

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

@@ -0,0 +1,33 @@
+.header {
+    height: 56px;
+    margin-bottom: 6px;
+    background-color: var(--mantine-color-body);
+    border-bottom: 1px solid var(--mantine-color-default-border);
+}
+
+.inner {
+    height: 56px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.link {
+    display: block;
+    line-height: 1;
+    padding: 8px 12px;
+    border-radius: var(--mantine-radius-sm);
+    text-decoration: none;
+    color: var(--mantine-color-text);
+    font-size: var(--mantine-font-size-sm);
+    font-weight: 500;
+
+    &:hover {
+        background-color: var(--mantine-color-default-hover);
+    }
+
+    [data-mantine-color-scheme] &.active {
+        background-color: var(--mantine-color-red-filled);
+        color: var(--mantine-color-white);
+    }
+}

barkmanui/src/common/components/BarkHeader.tsx

@@ -0,0 +1,33 @@
+import { Burger, Container, Group } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import classes from './BarkHeader.module.css';
+import {NavLink} from "react-router";
+
+const links = [
+    { link: '/', label: 'Home' },
+    { link: '/inventory', label: 'Inventory' },
+];
+
+export function BarkHeader() {
+    const [opened, { toggle }] = useDisclosure(false);
+
+    const items = links.map((link) => (
+        <NavLink className = {({ isActive }) =>
+                classes.link + ' ' + (isActive ? classes.active : '')} to={link.link} >
+            {link.label}
+        </NavLink>
+    ));
+
+    return (
+        <header className={classes.header}>
+            <Container size="md" className={classes.inner}>
+
+                <Group gap={5} visibleFrom="xs">
+                    {items}
+                </Group>
+
+                <Burger opened={opened} onClick={toggle} hiddenFrom="xs" size="sm" />
+            </Container>
+        </header>
+    );
+}

barkmanui/src/common/components/Button.tsx

@@ -1,9 +0,0 @@
-import {PropsWithChildren} from "react";
-
-function Button({children}: PropsWithChildren) {
-   return (
-    <button className="bg-brand rounded text-white font-bold px-4 py-2">{children}</button>
-   )
-}
-
-export default Button

barkmanui/src/features/inventory/InventoryList.tsx

@@ -1,7 +1,8 @@
 import {useQuery} from "@tanstack/react-query";
-import {Link} from "react-router";
 import {InventoryItem} from "./types";
-import Button from "../../common/components/Button.tsx";
+import {BarkHeader} from "../../common/components/BarkHeader.tsx";
+import {Flex, Table} from '@mantine/core';
+import BarkButton from "../../common/components/BarkButton.tsx";
 
 
 function InventoryList() {
@@ -26,37 +27,45 @@ function InventoryList() {
 
     return (
         <>
-            <div>
-                <h1 className={"text-brand"}>Inventory</h1>
-            </div>
-            <p>
-                ARFF ARFF BARK BARK
-            </p>
-            <Link to="/">
-                <Button>Home</Button>
-            </Link>
+            <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 className="w-1/2">
-                <thead>
-                <tr className="text-left">
-                    <th className="text-brand">ID</th>
-                    <th className="text-brand">Brand</th>
-                    <th className="text-brand">Item</th>
-                    <th className="text-brand">Status</th>
-                </tr>
-                </thead>
-                <tbody>
+            <Table striped>
+            <Table.Thead>
+                <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>
                 {data.map((data) => (
-                    <tr key={data.id}>
-                        <td>{data.id}</td>
-                        <td>{data.brand}</td>
-                        <td>{data.name}</td>
-                        <td>{data.status}</td>
-                    </tr>
+                    <Table.Tr key={data.id}>
+                        <Table.Td>{data.id}</Table.Td>
+                        <Table.Td>{data.brand}</Table.Td>
+                        <Table.Td>{data.name}</Table.Td>
+                        <Table.Td>{data.status}</Table.Td>
+                    </Table.Tr>
                 ))}
-                </tbody>
-            </table>
+                </Table.Tbody>
+            </Table>
         </>
     )
 }

barkmanui/src/index.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

barkmanui/src/pages/home.tsx

@@ -1,5 +1,5 @@
-import {Link} from "react-router";
-import Button from "../common/components/Button.tsx";
+import {BarkHeader} from "../common/components/BarkHeader.tsx";
+import {Text} from "@mantine/core";
 
 
 function Home() {
@@ -7,15 +7,10 @@ function Home() {
 
     return (
         <>
-            <div>
-                <h1 className={"text-brand"}>Home</h1>
-            </div>
-            <p>
-                ARFF ARFF BARK BARK
-            </p>
-            <Link to="/inventory">
-                <Button>Inventory</Button>
-            </Link>
+            <BarkHeader></BarkHeader>
+
+            <Text c="red">ARFF ARFF BARK BARK</Text>
+
 
         </>
     )

barkmanui/tailwind.config.js

@@ -1,13 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      colors: {
-        brand: "#D40404",
-      },
-    },
-  },
-  plugins: [],
-}
-