src/components/MarkFormField/index.tsx

@@ -1,9 +1,8 @@
 import { CurrentUserMark } from '../../types/mark.ts'
 import styles from './style.module.scss'
-
-import { MARK_TYPE_TRANSLATION } from '../../utils/const.ts'
 import {
   findNextIncompleteCurrentUserMark,
+  getToolboxLabelByMarkType,
   isCurrentUserMarksComplete,
   isCurrentValueLast
 } from '../../utils'
@@ -53,6 +52,7 @@ const MarkFormField = ({
       : handleCurrentUserMarkChange(findNext()!)
   }
   const toggleActions = () => setDisplayActions(!displayActions)
+  const markLabel = getToolboxLabelByMarkType(selectedMark.mark.type)
   return (
     <div className={styles.container}>
       <div className={styles.trigger}>
@@ -78,16 +78,14 @@ const MarkFormField = ({
         <div className={styles.actionsWrapper}>
           <div className={styles.actionsTop}>
             <div className={styles.actionsTopInfo}>
-              <p className={styles.actionsTopInfoText}>Add your signature</p>
+              <p className={styles.actionsTopInfoText}>Add {markLabel}</p>
             </div>
           </div>
           <div className={styles.inputWrapper}>
             <form onSubmit={(e) => handleFormSubmit(e)}>
               <input
                 className={styles.input}
-                placeholder={
-                  MARK_TYPE_TRANSLATION[selectedMark.mark.type.valueOf()]
-                }
+                placeholder={markLabel}
                 onChange={handleSelectedMarkValueChange}
                 value={selectedMarkValue}
               />

src/utils/const.ts

@@ -1,9 +1,4 @@
-import { MarkType } from '../types/drawing.ts'
-
 export const EMPTY: string = ''
-export const MARK_TYPE_TRANSLATION: { [key: string]: string } = {
-  [MarkType.FULLNAME.valueOf()]: 'Full Name'
-}
 export const ARRAY_BUFFER = 'arraybuffer'
 export const DEFLATE = 'DEFLATE'