fix(sig): match hover state to form theme color

apps/frontend/src/templates/Field/Signature/SignatureField.tsx

@@ -8,7 +8,7 @@ import {
 import { Box, Flex, FormControl, Stack, Text } from '@chakra-ui/react'
 import getStroke from 'perfect-freehand'
 
-import { SignatureVectorArray } from 'formsg-shared/types'
+import { FormColorTheme, SignatureVectorArray } from 'formsg-shared/types'
 import {
   SIGNATURE_STROKE_SIZE,
   SIGNATURE_STROKE_SMOOTHING,
@@ -35,6 +35,7 @@ export interface SignatureFieldProps extends BaseFieldProps {
 
 export interface SignatureCanvasProps {
   schema: SignatureFieldSchema
+  colorTheme?: FormColorTheme
   isHighContrast?: boolean
   isSubmitting: boolean
   isValid: boolean
@@ -45,13 +46,19 @@ export interface SignatureCanvasProps {
 
 const SignatureCanvas = ({
   schema,
+  colorTheme = FormColorTheme.Blue,
   isHighContrast,
   isSubmitting,
   isValid,
   errors,
   value,
   onChange,
 }: SignatureCanvasProps) => {
+  const fieldColorScheme = useMemo(
+    () => `theme-${colorTheme}` as const,
+    [colorTheme],
+  )
+
   const signatureErrors = errors?.[schema._id]
   const [showSignaturePlaceholder, setShowSignaturePlaceholder] = useState(true)
 
@@ -246,14 +253,19 @@ const SignatureCanvas = ({
                   signatureErrors
                     ? 'red.600'
                     : isDrawing
-                      ? '#445fcd'
+                      ? `${fieldColorScheme}.500`
                       : 'neutral.400'
                 }
                 position="relative"
                 overflow="hidden"
                 _hover={{
-                  background: schema.disabled ? 'neutral.200' : 'primary.100',
-                  outline: isDrawing ? '2px solid #445fcd' : 'none',
+                  background: schema.disabled
+                    ? 'neutral.200'
+                    : `${fieldColorScheme}.100`,
+                  outline: isDrawing ? `2px solid` : 'none',
+                  outlineColor: isDrawing
+                    ? `${fieldColorScheme}.500`
+                    : undefined,
                 }}
               >
                 {showSignaturePlaceholder && (
@@ -325,6 +337,7 @@ export const SignatureField = ({
   schema,
   disableRequiredValidation,
   isHighContrast,
+  colorTheme,
 }: SignatureFieldProps): JSX.Element => {
   const { control } = useFormContext<SignatureFieldInput>()
   const { isSubmitting, isValid, errors } = useFormState<SignatureFieldInput>()
@@ -342,6 +355,7 @@ export const SignatureField = ({
       render={({ field }) => (
         <SignatureCanvas
           schema={schema}
+          colorTheme={colorTheme}
           isHighContrast={isHighContrast}
           isSubmitting={isSubmitting}
           isValid={isValid}