diff --git a/app/frontend/Features/Control/Button/index.tsx b/app/frontend/Features/Control/Button/index.tsx index 51d96c3..76b3e49 100644 --- a/app/frontend/Features/Control/Button/index.tsx +++ b/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(( - { children, edit, control, ...props }, + { children, edit, control, className, ...props }, ref, ) => { + const [lastButtonClicked, setLastButtonClicked] = useLocalStorage({ + key: 'last-button-clicked', + defaultValue: undefined, + }) const handleButtonClick = (e: React.MouseEvent) => { e.preventDefault() @@ -21,6 +29,8 @@ const ButtonControl = forwardRef(( if(!route) return axios.put(route) + + setLastButtonClicked(control.id) } return ( @@ -28,6 +38,7 @@ const ButtonControl = forwardRef(( ref={ ref } onClick={ handleButtonClick } color={ control?.color ?? undefined } + className={ cx([className, { [classes.lastButtonClicked]: lastButtonClicked === control.id }]) } { ...props } > { children || controlTitle(control) } diff --git a/app/frontend/Features/Control/Control.css.ts b/app/frontend/Features/Control/Control.css.ts index 27d899f..9bf8931 100644 --- a/app/frontend/Features/Control/Control.css.ts +++ b/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); +`