#176 - Optimize styling of fields

assets/media/styles.css

@@ -448,17 +448,17 @@ input:checked + .field__toggle__slider:before {
 
 .vscode-dark .metadata_field__box {
   background: rgba(255, 255, 255, 0.1);
-  border: 2px dashed rgba(255, 255, 255, 0.2);
+  border: 1px dashed rgba(255, 255, 255, 0.2);
 }
 
 .vscode-light .metadata_field__box {
   background: rgba(0, 0, 0, 0.1);
-  border: 2px dashed rgba(0, 0, 0, 0.2);
+  border: 1px dashed rgba(0, 0, 0, 0.2);
 }
 
 .metadata_field__box {
   background: rgba(255, 255, 255, 0.1);
-  border: 2px dashed rgba(255, 255, 255, 0.2);
+  border: 1px dashed rgba(255, 255, 255, 0.2);
   margin-bottom: .5rem;
   padding: .5rem 1rem;
 }
@@ -634,7 +634,7 @@ input:checked + .field__toggle__slider:before {
 
 .metadata_field__preview_image__button {
   background-color: transparent;
-  border: 2px dashed var(--vscode-button-background);
+  border: 1px dashed var(--vscode-button-background);
   padding: 1.5rem;
   filter: brightness(85%);
 }

src/components/uniforms-frontmatter/BoolField.css

@@ -18,7 +18,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--vscode-button-secondaryBackground);
+  background-color: var(--frontmatter-toggle-secondaryBackground, var(--vscode-button-secondaryBackground));
   -webkit-transition: .4s;
   transition: .4s;
   border-radius: 34px;
@@ -38,11 +38,11 @@
 }
 
 input:checked + .field__toggle__slider {
-  background-color: var(--vscode-button-background);
+  background-color: var(--frontmatter-toggle-background, var(--vscode-button-background));
 }
 
 input:focus + .field__toggle__slider {
-  box-shadow: 0 0 1px var(--vscode-button-background);
+  box-shadow: 0 0 1px var(--frontmatter-toggle-background, var(--vscode-button-background));
 }
 
 input:checked + .field__toggle__slider:before {

src/components/uniforms-frontmatter/ErrorsField.css

@@ -1,14 +1,18 @@
 
 
 .autoform-error {
-  background-color: var(--vscode-inputValidation-errorBackground);
-  border: 1px solid var(--vscode-inputValidation-errorBorder);
+  background-color: var(--frontmatter-error-background, var(--vscode-inputValidation-errorBackground));
+  border: 1px solid var(--frontmatter-error-border, var(--vscode-inputValidation-errorBorder));
   border-radius: 2px;
   margin: 20px 0px;
   padding: 10px;
-  color: var(--vscode-editor-foreground);
+  color: var(--frontmatter-error-foreground, var(--vscode-editor-foreground));
 
   ul {
     margin-bottom: 0;
   }
+
+  li {
+    text-transform: capitalize;
+  }
 }

src/components/uniforms-frontmatter/ListAddField.css

@@ -3,14 +3,14 @@
 .autoform__list_add_field {
   display: flex;
   padding: 5px;
-  border: 1px dashed var(--vscode-editor-foreground);
+  border: 1px dashed var(--frontmatter-field-border, var(--vscode-editor-foreground));
   width: 100%;
   justify-content: center;
   margin-top: .5rem;
 
   &:hover {
-    border-color: var(--vscode-button-background);
-    color: var(--vscode-button-background);
+    border-color: var(--frontmatter-field-borderActive, var(--vscode-button-background));
+    color: var(--frontmatter-field-borderActive, var(--vscode-button-background));
     cursor: pointer;
   }
 

src/components/uniforms-frontmatter/ListField.css

@@ -1,7 +1,8 @@
 
 
 .autoform__list_field {
-  margin-bottom: 5px;
-  margin-top: 5px;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
   padding: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }

src/dashboardWebView/styles.css

@@ -2,6 +2,32 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+:root {
+  /* Bool field */
+  --frontmatter-toggle-background: #fafafa;
+  --frontmatter-toggle-secondaryBackground: #f5f5f5;
+
+  /* Errors field */
+  --frontmatter-error-background: rgba(255, 85, 0, 0.2);
+  --frontmatter-error-border: #f50;
+  --frontmatter-error-foreground: #0e131f;
+  
+  .vscode-dark {
+    --frontmatter-error-foreground: #fff;
+  }
+
+  /* List add field */
+  --frontmatter-field-border: #222733;
+  --frontmatter-field-borderActive: #15c2cb;
+
+  .vscode-dark {
+    --frontmatter-field-border: rgba(255, 255, 255, 0.5);
+    --frontmatter-field-borderActive: #009aa3;
+  }
+
+  /* List delete field */
+}
+
 
 .loader {
   border-top-color: #15c2cb;
@@ -80,15 +106,11 @@
 
     .errors {
       > div {
-        @apply border border-red-400 !important;
+        @apply border;
       }
       
       ul {
-        @apply list-disc pl-6 pr-4 py-4 bg-opacity-50 text-vulcan-500;
-      }
-
-      li {
-        @apply capitalize text-gray-900;
+        @apply list-disc pl-6 pr-4 py-4 bg-opacity-50;
       }
     }
 
@@ -276,12 +298,6 @@
     input[type="submit"] {
       @apply text-vulcan-500
     }
-
-    .errors {
-      li {
-        @apply text-white;
-      }
-    }
   }
 
   .ant-list.ant-list-bordered {

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%);
   }