Implement new features for svg components + improve form properties (#25)

- Make Dimension an actual svg line
- Implement XPositionReference
- Select the container above after delete
- Remove DimensionLayer
- Improve form properties

Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/25

src/Components/Properties/Properties.tsx

@@ -22,15 +22,17 @@ export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps)
     .forEach((pair) => handleProperties(pair, groupInput, isDynamicInput, props.onChange));
 
   const form = isDynamicInput
-    ? <div>
+    ? <div className='grid grid-cols-2 gap-4'>
       { groupInput }
     </div>
     : <form
       key={props.properties.id}
       onSubmit={(event) => props.onSubmit(event, props.properties as ContainerProperties)}
     >
-      <input type='submit' className='normal-btn block mx-auto' value='Submit'/>
-      { groupInput }
+      <input type='submit' className='normal-btn block mx-auto mb-4 border-2 border-blue-400 cursor-pointer' value='Submit'/>
+      <div className='grid grid-cols-2 gap-y-4'>
+        { groupInput }
+      </div>
     </form>
     ;
 
@@ -67,16 +69,19 @@ const handleProperties = (
     type = INPUT_TYPES[key];
   }
 
+  const className = `
+        w-full
+        text-xs font-medium transition-all text-gray-800 mt-1 px-3 py-2
+        bg-white border-2 border-white rounded-lg placeholder-gray-800
+        focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
+        disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none`;
   const isDisabled = ['id', 'parentId'].includes(key);
   const input = isDynamicInput
     ? <input
-      className='text-base font-medium transition-all text-gray-800 mt-1 block w-full px-3 py-2
-          bg-white border-2 border-white rounded-lg placeholder-gray-800
-          focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
-         disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none
-         '
-      type={type}
+      key={key}
       id={key}
+      className={className}
+      type={type}
       value={value}
       checked={checked}
       onChange={(event) => {
@@ -89,22 +94,23 @@ const handleProperties = (
       disabled={isDisabled}
     />
     : <input
-      className='text-base font-medium transition-all text-gray-800 mt-1 block w-full px-3 py-2
-          bg-white border-2 border-white rounded-lg placeholder-gray-800
-          focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
-         disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none
-         '
-      type={type}
+      key={key}
       id={key}
+      className={className}
+      type={type}
       defaultValue={value}
       defaultChecked={checked}
       disabled={isDisabled}
     />;
 
   groupInput.push(
-    <div key={id} className='mt-4'>
-      <label className='text-sm font-medium text-gray-800' htmlFor={key}>{key}</label>
-      {input}
-    </div>
+    <label
+      key={id}
+      className='mt-4 text-xs font-medium text-gray-800'
+      htmlFor={key}
+    >
+      {key}
+    </label>
   );
+  groupInput.push(input);
 };