From 313533d74d51e05130bddbeb7941e8ca4d4b8928 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 26 Jan 2024 16:52:28 +0100
Subject: [PATCH] Style updates in data view

---
 .../uniforms-frontmatter/ListDelField.tsx     |  2 +-
 .../uniforms-frontmatter/LongTextField.tsx    |  1 +
 .../uniforms-frontmatter/TextField.tsx        |  1 +
 src/dashboardWebView/styles.css               | 19 ++-----------------
 4 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/src/components/uniforms-frontmatter/ListDelField.tsx b/src/components/uniforms-frontmatter/ListDelField.tsx
index e5972c4f..5afca01e 100644
--- a/src/components/uniforms-frontmatter/ListDelField.tsx
+++ b/src/components/uniforms-frontmatter/ListDelField.tsx
@@ -29,7 +29,7 @@ function ListDel({ disabled, name, readOnly, ...props }: ListDelFieldProps) {
 
   return (
     <span
-      className="autoform__list_del_field"
+      className="autoform__list_del_field mb-1"
       {...filterDOMProps(props)}
       onClick={onAction}
       onKeyDown={onAction}
diff --git a/src/components/uniforms-frontmatter/LongTextField.tsx b/src/components/uniforms-frontmatter/LongTextField.tsx
index 0b822d6f..e8ee54fc 100644
--- a/src/components/uniforms-frontmatter/LongTextField.tsx
+++ b/src/components/uniforms-frontmatter/LongTextField.tsx
@@ -26,6 +26,7 @@ function LongText({
       <LabelField label={label} id={id} required={props.required} />
 
       <textarea
+        className={`block w-full py-2 pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0`}
         disabled={disabled}
         id={id}
         name={name}
diff --git a/src/components/uniforms-frontmatter/TextField.tsx b/src/components/uniforms-frontmatter/TextField.tsx
index 3cd88f81..90e35396 100644
--- a/src/components/uniforms-frontmatter/TextField.tsx
+++ b/src/components/uniforms-frontmatter/TextField.tsx
@@ -28,6 +28,7 @@ function Text({
       <LabelField label={label} id={id} required={props.required} />
 
       <input
+        className='block w-full py-2 pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0'
         autoComplete={autoComplete}
         disabled={disabled}
         id={id}
diff --git a/src/dashboardWebView/styles.css b/src/dashboardWebView/styles.css
index b958fded..1334c41e 100644
--- a/src/dashboardWebView/styles.css
+++ b/src/dashboardWebView/styles.css
@@ -79,21 +79,6 @@
   }
 
   form {
-    label {
-      @apply block;
-      @apply text-gray-500;
-      @apply my-2;
-    }
-
-    input,
-    textarea {
-      @apply w-full px-2 py-1 text-vulcan-500;
-
-      &::placeholder {
-        @apply text-gray-500;
-      }
-    }
-
     .ant-form-item-has-error .ant-form-item-control-input {
       @apply relative;
     }
@@ -147,12 +132,12 @@
 
     > .fields {
       > div > label:first-of-type {
-        color: var(--primary-color);
+        color: var(--frontmatter-text);
       }
 
       > div:not(:first-child) > label:first-of-type {
         margin-block-start: 2rem;
-        border-block-start: 1px solid;
+        border-block-start: 1px solid var(--frontmatter-border);
         padding-block-start: 2rem;
       }
     }