#176 - Optimize styling of fields

src/panelWebView/components/DataCollection/DataCollectionField.tsx

@@ -6,15 +6,17 @@ import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
 import { Field, PanelSettings } from '../../../models';
 import { DataCollectionControls } from './DataCollectionControls';
 import { PencilIcon, TrashIcon } from '@heroicons/react/outline';
+import { VsLabel } from '../VscodeComponents';
 
 export interface IDataCollectionFieldProps {
+  label: string;
   settings: PanelSettings;
   field: Field;
   value: any;
   onSubmit: (data: any) => void;
 }
 
-export const DataCollectionField: React.FunctionComponent<IDataCollectionFieldProps> = ({ settings, field, value, onSubmit }: React.PropsWithChildren<IDataCollectionFieldProps>) => {
+export const DataCollectionField: React.FunctionComponent<IDataCollectionFieldProps> = ({ label, settings, field, value, onSubmit }: React.PropsWithChildren<IDataCollectionFieldProps>) => {
   const [ schema, setSchema ] = useState<JSONSchemaBridge | null>(null);
   const [ bridge, setBridge ] = useState<JSONSchemaBridge | null>(null);
   const [ selectedIndex, setSelectedIndex ] = useState<number | null>(null);
@@ -77,6 +79,12 @@ export const DataCollectionField: React.FunctionComponent<IDataCollectionFieldPr
   return (
     <div className='data_collection__field'>
 
+      <VsLabel>
+        <div className={`metadata_field__label`}>
+          <PencilIcon style={{ width: "16px", height: "16px" }} /> <span style={{ lineHeight: "16px"}}>{label}</span>
+        </div>
+      </VsLabel>
+
       <div className='autoform'>
         <AutoForm 
           schema={bridge} 

src/panelWebView/components/Metadata.tsx

@@ -240,19 +240,12 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
 
         return (
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <div className={`metadata_field__box`}>
-              <VsLabel>
-                <div className={`metadata_field__label metadata_field__label_parent`}>
-                  <span style={{ lineHeight: "16px"}}>{field.title || field.name}</span>
-                </div>
-              </VsLabel>
-
-              <DataCollectionField
-                settings={settings}
-                field={field}
-                value={collectionData}
-                onSubmit={(value) => sendUpdate(field.name, value, parentFields)} />
-            </div>
+            <DataCollectionField
+              label={field.title || field.name}
+              settings={settings}
+              field={field}
+              value={collectionData}
+              onSubmit={(value) => sendUpdate(field.name, value, parentFields)} />
           </FieldBoundary>
         );
       } else {

src/panelWebView/styles.css

@@ -1,10 +1,13 @@
 
 .data_collection__field {
+  border: 1px dashed rgba(255, 255, 255, 0.2);
+  padding: .5rem 1rem;
+  margin-bottom: .5rem;
 
   .autoform {
     background-color: transparent;
-    border: 2px dashed var(--vscode-button-background);
-    padding: 1.5rem;
+    border: 1px dashed var(--vscode-button-background);
+    padding: 1rem;
     filter: brightness(85%);
   }