testing out mantine components

app/client/web/src/App.css

@@ -40,3 +40,4 @@
 button {
   font-size: calc(10px + 2vmin);
 }
+

app/client/web/src/App.module.css

@@ -0,0 +1,20 @@
+.focus {
+  &:focus {
+    border-color: red;
+    outline: 2px solid var(--mantine-color-red-filled);
+    outline-offset: 3px;
+  }
+}
+
+  &:focus-within {
+    border-color: red;
+  }
+
+/* Use `&:focus-visible` when you want focus ring to be visible
+   only when user navigates with keyboard, for example by pressing Tab key */
+.focus-auto {
+  &:focus-visible {
+    outline: 2px solid var(--mantine-color-red-filled);
+    outline-offset: 2px;
+  }
+}

app/client/web/src/App.tsx

@@ -1,15 +1,26 @@
 import React from 'react'
 import { Root } from './root/Root'
-import { createTheme, MantineProvider } from '@mantine/core'
+import { createTheme, MantineProvider, virtualColor } from '@mantine/core'
 import './App.css'
+import '@mantine/core/styles.css';
+import classes from './App.module.css';
 
 const theme = createTheme({
-  /** Your theme override here */
+  focusClassName: classes.focus,
+  primaryColor: 'databag-green',
+  primaryShade: { light: 6, dark: 7 },
+  colors: {
+    'databag-green': ['#eef6f2', '#cce5d9', '#aad4bf', '#88c3a6', '#66b28c', '#4d9973', '#3c7759', '#2b5540', '#1a3326', '#09110d'],
+  },
 });
 
 export function App () {
+
+console.log("FOCUS", classes.focus);
+
+
   return (
-    <MantineProvider theme={theme}>
+    <MantineProvider forceColorScheme="dark" theme={theme}>
       <div className='App'>
         <Root />
       </div>

app/client/web/src/root/Root.module.css

@@ -0,0 +1,18 @@
+.focus {
+  &:focus {
+    border-color: red;
+  }
+}
+
+  &:focus-within {
+    border-color: red;
+  }
+
+/* Use `&:focus-visible` when you want focus ring to be visible
+   only when user navigates with keyboard, for example by pressing Tab key */
+.focus-auto {
+  &:focus-visible {
+    outline: 2px solid var(--mantine-color-red-filled);
+    outline-offset: 2px;
+  }
+}

app/client/web/src/root/Root.tsx

@@ -1,9 +1,29 @@
 import React, { useContext } from 'react'
 import { SettingsContext } from '../context/SettingsContext'
 import { ContextType } from '../context/ContextType'
+import { TextInput, Button } from '@mantine/core'
+import '@mantine/core/styles.css';
+import classes from './Root.module.css'
 
 export function Root () {
   const settings = useContext(SettingsContext) as ContextType;
 
-  return <div>{ settings.state.display }</div>
+  const press = () => {
+    console.log("PRESSED");
+  }
+
+  return <div><span>ROOT</span>
+    <Button
+      variant="danger"
+      onClick={press}>Download</Button>
+    <TextInput
+      color="lime.4"
+      label="Input label"
+      description="Input description"
+      placeholder="Input placeholder"
+      classNames={{
+        input: classes.focus
+      }}
+    />
+    </div>
 }