Merged PR 225: Implement translations

Implement translations with useContext in React
+Add events to allow changing the language in the app
+Refactor AppEvents
+Redesign vertical bars in elements

src/Components/SymbolProperties/SymbolForm.tsx

@@ -4,6 +4,7 @@ import { RestoreX, TransformX } from '../../utils/svg';
 import { InputGroup } from '../InputGroup/InputGroup';
 import { TextInputGroup } from '../InputGroup/TextInputGroup';
 import { PositionReferenceSelector } from '../RadioGroupButtons/PositionReferenceSelector';
+import { Text } from '../Text/Text';
 
 interface ISymbolFormProps {
   symbol: ISymbolModel
@@ -15,7 +16,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
   return (
     <div className='grid grid-cols-2 gap-y-4'>
       <InputGroup
-        labelText='Name'
+        labelText={Text({ textId: '@SymbolName' })}
         inputKey='id'
         labelClassName=''
         inputClassName=''
@@ -24,7 +25,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
         isDisabled={true} />
       <TextInputGroup
         id='x'
-        labelText='x'
+        labelText={Text({ textId: '@SymbolX' })}
         inputKey='x'
         labelClassName=''
         inputClassName=''
@@ -33,7 +34,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
         onChange={(value) => props.onChange('x', RestoreX(Number(value), props.symbol.width, props.symbol.config.PositionReference))} />
       <TextInputGroup
         id='height'
-        labelText='Height'
+        labelText={Text({ textId: '@SymbolHeight' })}
         inputKey='height'
         labelClassName=''
         inputClassName=''
@@ -43,7 +44,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
         onChange={(value) => props.onChange('height', Number(value))} />
       <TextInputGroup
         id='width'
-        labelText='Width'
+        labelText={Text({ textId: '@SymbolWidth' })}
         inputKey='width'
         labelClassName=''
         inputClassName=''