feat: adds button highlights

app/frontend/Features/Control/Button/index.tsx

@@ -4,13 +4,21 @@ import axios from 'axios'
 import { type ButtonProps } from '@mantine/core'
 import { type ControlProps } from '..'
 import { controlRoute, controlTitle } from '../lib'
+import { useLocalStorage } from '@mantine/hooks'
+
+import cx from 'clsx'
+import * as classes from '../Control.css'
 
 interface ButtonControlProps extends ButtonProps, ControlProps {}
 
 const ButtonControl = forwardRef<HTMLButtonElement, ButtonControlProps>((
-	{ children, edit, control, ...props },
+	{ children, edit, control, className, ...props },
 	ref,
 ) => {
+	const [lastButtonClicked, setLastButtonClicked] = useLocalStorage<number>({
+		key: 'last-button-clicked',
+		defaultValue: undefined,
+	})
 	const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
 		e.preventDefault()
 
@@ -21,13 +29,16 @@ const ButtonControl = forwardRef<HTMLButtonElement, ButtonControlProps>((
 		if(!route) return
 
 		axios.put(route)
+
+		setLastButtonClicked(control.id)
 	}
 
 	return (
 		<Button
 			ref={ ref }
 			onClick={ handleButtonClick }
 			color={ control?.color ?? undefined }
+			className={ cx([className, { [classes.lastButtonClicked]: lastButtonClicked === control.id }]) }
 			{ ...props }
 		>
 			{ children || controlTitle(control) }

app/frontend/Features/Control/Control.css.ts

@@ -1,2 +1,9 @@
 import { vars } from '@/lib'
 import { css } from '@linaria/core'
+
+const highlightBorderPx = 4
+
+export const lastButtonClicked = css`
+	border: ${highlightBorderPx}px solid ${vars.colors.green[4]};
+	margin: calc(${vars.spacing.xs} - ${highlightBorderPx}px);
+`