feat: fixes colors

.node-version

@@ -0,0 +1 @@
+20.13.1

.pre-commit-config.yaml

@@ -0,0 +1,8 @@
+repos:
+- hooks:
+  - id: commitizen
+  - id: commitizen-branch
+    stages:
+    - push
+  repo: https://github.com/commitizen-tools/commitizen
+  rev: v3.27.0

app/frontend/Components/Button/CheckinButton.tsx

@@ -3,6 +3,7 @@ import { Link } from '@/Components'
 import { type LinkProps } from '../Link'
 import { CheckinIcon } from '@/Components/Icons'
 import { Tooltip, useMantineTheme } from '@mantine/core'
+import { useContrastingTextColor } from '@/lib/hooks'
 
 interface CheckinButtonProps extends Omit<LinkProps, 'children'> {
 	href: string
@@ -38,7 +39,7 @@ const CheckinButton = ({ href, label, disabled, tooltipMessage, ...props }: Chec
 				aria-label={ usedLabel }
 				{ ...finalProps }
 			>
-				<CheckinIcon />
+				<CheckinIcon color={ useContrastingTextColor(checkinButtonColor) } />
 			</Link>
 		</Tooltip>
 	)

app/frontend/Components/Button/CheckoutButton.tsx

@@ -3,6 +3,7 @@ import { Link } from '@/Components'
 import { type LinkProps } from '../Link'
 import { CheckoutIcon } from '@/Components/Icons'
 import { Tooltip, useMantineTheme } from '@mantine/core'
+import { useContrastingTextColor } from '@/lib/hooks'
 
 interface CheckoutButtonProps extends Omit<LinkProps, 'children'> {
 	href: string
@@ -31,7 +32,7 @@ const CheckoutButton = ({ href, label, disabled, tooltipMessage, ...props }: Che
 				aria-label={ usedLabel }
 				{ ...props }
 			>
-				<CheckoutIcon />
+				<CheckoutIcon color={ useContrastingTextColor(checkoutButtonColor) } />
 			</Link>
 		</Tooltip>
 	)

app/frontend/Components/Button/DeleteButton.tsx

@@ -3,6 +3,7 @@ import { Link, Tooltip } from '@/Components'
 import { type LinkProps } from '../Link'
 import { TrashIcon } from '@/Components/Icons'
 import { useMantineTheme } from '@mantine/core'
+import { useContrastingTextColor } from '@/lib/hooks'
 
 interface DeleteButtonProps extends Omit<LinkProps, 'children'> {
 	label?: string
@@ -23,7 +24,7 @@ const DeleteButton = ({ href, label, tooltipMessage }: DeleteButtonProps) => {
 			color={ deleteButtonColor }
 		>
 			<Link as="button" href={ href } aria-label={ `Delete ${label}` }>
-				<TrashIcon />
+				<TrashIcon color={ useContrastingTextColor(deleteButtonColor) } />
 			</Link>
 		</Tooltip>
 	)

app/frontend/Components/Button/EditButton.tsx

@@ -3,6 +3,7 @@ import { Link, Tooltip } from '@/Components'
 import { EditIcon } from '@/Components/Icons'
 import { LinkProps } from '../Link'
 import { useMantineTheme } from '@mantine/core'
+import { useContrastingTextColor } from '@/lib/hooks'
 
 interface EditButtonProps extends Omit<LinkProps, 'children'> {
 	label?: string
@@ -22,7 +23,9 @@ const EditButton = ({ href, label }: EditButtonProps) => {
 			aria-label={ usedLabel }
 			color={ primaryColor }
 		>
-			<Link as="button" href={ href } aria-label={ `Edit ${label}` }><EditIcon /></Link>
+			<Link as="button" href={ href } aria-label={ `Edit ${label}` }>
+				<EditIcon color={ useContrastingTextColor(primaryColor) } />
+			</Link>
 		</Tooltip>
 	)
 }

app/frontend/Components/Form/Form.css.ts

@@ -127,6 +127,12 @@ export const fieldset = css`
 
 export const dynamicInputItem = css`
 	.mantine-Paper-root {
-		background-color: ${vars.colors.gray[8] }
+		${vars.lightSelector} {
+			background-color: ${vars.colors.gray[0] }
+		}
+
+		${vars.darkSelector} {
+			background-color: ${vars.colors.gray[8] }
+		}
 	}
 `

app/frontend/Components/Table/SearchInput/ColumnPicker.tsx

@@ -9,6 +9,9 @@ import { useTableContext } from '../TableContext'
 import { Button } from '@mantine/core'
 import { usePageProps } from '@/lib/hooks'
 
+import cx from 'clsx'
+import * as classes from '../Table.css'
+
 const ColumnPicker = () => {
 	const { auth: { user } } = usePageProps()
 	const { tableState: { hideable, columns, model } } = useTableContext()
@@ -34,7 +37,9 @@ const ColumnPicker = () => {
 	return (
 		<Menu closeOnItemClick={ false } position="bottom-end">
 			<Menu.Target>
-				<Button size="md" p="xs"><ColumnsIcon size={ 24 } /></Button>
+				<Button size="md" p="xs" className={ cx(classes.columnPickerButton) }>
+					<ColumnsIcon size={ 24 } />
+				</Button>
 			</Menu.Target>
 
 			<Menu.Dropdown>

app/frontend/Components/Table/Table.css.ts

@@ -137,9 +137,16 @@ export const searchInput = css`
 	input {
 		border-top-right-radius: 0;
 		border-bottom-right-radius: 0;
+		border-top-left-radius: ${vars.radius.sm};
+		border-bottom-left-radius: ${vars.radius.sm};
 	}
 `
 
+export const columnPickerButton = css`
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+`
+
 export const pagination = css`
 	display: inline-block;
 	max-width: 60px;

app/frontend/Features/Contactable/Form/index.tsx

@@ -6,11 +6,7 @@ import Phone from './Phone'
 import Email from './Email'
 import Website from './Website'
 
-interface ContactableFormProps {
-	contact: Schema.ContactsFormData
-}
-
-const ContactableForm = ({ contact }: ContactableFormProps) => {
+const ContactableForm = () => {
 	return (
 		<FieldsFor model="contact" legend="Contact Details">
 

app/frontend/Pages/Consumables/ReplenishButton.tsx

@@ -8,6 +8,7 @@ import { Routes } from '@/lib'
 import axios from 'axios'
 import { router } from '@inertiajs/react'
 import { type UseFormProps } from 'use-inertia-form'
+import { useContrastingTextColor } from '@/lib/hooks'
 
 const defaultData = { consumable: { qty: 1 } }
 
@@ -49,6 +50,8 @@ const ReplenishButton = ({ consumable, disabled, tooltipMessage, ...props }: Rep
 		return false
 	}
 
+	const textColor = useContrastingTextColor(replenishButtonColor)
+
 	return (
 		<>
 			<Modal
@@ -76,10 +79,11 @@ const ReplenishButton = ({ consumable, disabled, tooltipMessage, ...props }: Rep
 				position="left"
 				transitionProps={ { transition: 'fade' } }
 				color={ replenishButtonColor }
+				c={ textColor }
 				aria-label={ `Replenish ${consumable.name}` }
 			>
 				<Button color={ replenishButtonColor } { ...props } size="sm" onClick={ () => setOpened(true) }>
-					<ReplenishIcon />
+					<ReplenishIcon color={ textColor } />
 				</Button>
 			</Tooltip>
 		</>

app/frontend/Pages/People/Edit/Form.tsx

@@ -15,6 +15,7 @@ import { useBooleanToggle } from '@/lib/hooks'
 import { FormPeopleDropdown, FormDepartmentsDropdown } from '@/Features/Dropdowns'
 import { coerceArray } from '@/lib'
 import { type HTTPVerb, type UseFormProps } from 'use-inertia-form'
+import { ContactForm } from '@/Features'
 
 type PersonFormData = {
 	person: Schema.PeopleEdit
@@ -213,6 +214,8 @@ const PersonForm = ({
 					</FieldsFor>
 				</FormGroup> }
 
+				<ContactForm />
+
 				<Grid.Col>
 					<Submit>
 						{ person.id ? 'Update' : 'Create' } Person

app/frontend/lib/hooks/index.ts

@@ -4,5 +4,6 @@ export { default as useCheckboxState } from './useCheckboxState'
 export { default as useLocation } from './useLocation'
 export { default as usePageProps } from './usePageProps'
 export { default as useInit } from './useInit'
+export { default as useContrastingTextColor } from './useContrastingTextColor'
 export { default as useCurrency, type UseCurrencyOptions } from './useCurrency'
 export { useListState, useToggle, useViewportSize } from '@mantine/hooks'

app/frontend/lib/hooks/useContrastingTextColor.ts

@@ -0,0 +1,18 @@
+import { isLightColor, type MantinePrimaryShade, useMantineColorScheme, useMantineTheme } from '@mantine/core'
+
+const useContrastingTextColor = (color: string) => {
+	const { colors, primaryShade } = useMantineTheme()
+	const { colorScheme } = useMantineColorScheme()
+
+	if(color === undefined) return 'black'
+
+	let validatedColor = color
+	if(Object.keys(colors).includes(color)) {
+		const shade = (primaryShade as MantinePrimaryShade)[(colorScheme as 'light'|'dark')]
+		validatedColor = colors[color][shade]
+	}
+
+	return isLightColor(validatedColor, 0.379) ? 'black' : 'white'
+}
+
+export default useContrastingTextColor