From 7d6d60039e32e148a2235414a12b0cd89cc79ec6 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Wed, 19 Jan 2022 12:59:25 +0100
Subject: [PATCH] Optimized styling for data dashboard

---
 CHANGELOG.md                    |   2 +
 package.json                    |   5 +-
 src/dashboardWebView/styles.css | 174 +++++++++++++++++++++++++++++++-
 3 files changed, 177 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e287645c..f73c2a2a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - [#193](https://github.com/estruyf/vscode-front-matter/issues/193): Support added for editing data files.
 - [#197](https://github.com/estruyf/vscode-front-matter/issues/197): Support for multi-dimensional content type fields on content creation and editing.
 - [#225](https://github.com/estruyf/vscode-front-matter/issues/225): Placeholder support for front matter field values (template and content type).
+- [#226](https://github.com/estruyf/vscode-front-matter/issues/226): Ability to specify the local server start command and trigger it from the UI.
 - [#227](https://github.com/estruyf/vscode-front-matter/issues/227): Specify the file types to support with the new `frontMatter.content.supportedFileTypes` setting.
 - [#228](https://github.com/estruyf/vscode-front-matter/issues/228): Show bulk button actions in panel and dashboard view.
 - [#231](https://github.com/estruyf/vscode-front-matter/issues/231): Once you authenticate via GitHub as a supporter, the support links will be hidden from the UI.
@@ -15,6 +16,7 @@
 
 - Added default field value for content type fields
 - HMR support for panel webview development
+- [#187](https://github.com/estruyf/vscode-front-matter/issues/187): Svelte support with the [#227](https://github.com/estruyf/vscode-front-matter/issues/227) features has been added.
 - [#198](https://github.com/estruyf/vscode-front-matter/issues/198): Additional media sort options (alt, caption, and size).
 - [#230](https://github.com/estruyf/vscode-front-matter/issues/230): JSON front matter support added.
 
diff --git a/package.json b/package.json
index c2397bc8..a62cbc67 100644
--- a/package.json
+++ b/package.json
@@ -523,7 +523,10 @@
           "markdownDescription": "Specify the ID of your static site generator or framework you are using for your website. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.framework.id)"
         },
         "frontMatter.framework.startCommand": {
-          "type": ["string", "null"],
+          "type": [
+            "string",
+            "null"
+          ],
           "default": null,
           "markdownDescription": "Specify the command you want to use to start your static site generator or framework. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.framework.startcommand)"
         },
diff --git a/src/dashboardWebView/styles.css b/src/dashboardWebView/styles.css
index c521e8e7..e0f051aa 100644
--- a/src/dashboardWebView/styles.css
+++ b/src/dashboardWebView/styles.css
@@ -46,7 +46,7 @@
     }
 
     input {
-      @apply w-full text-vulcan-500;
+      @apply w-full text-vulcan-500 px-2 py-1;
 
       &::placeholder {
         @apply text-gray-500;
@@ -56,13 +56,22 @@
     .ant-form-item-has-error .ant-form-item-control-input {
       @apply relative;
     }
+
+    .ant-form-item-has-error {
+      label {
+        &::after {
+          content: ' *';
+          @apply text-red-400;
+        }
+      }
+    }
     
     .ant-form-item-has-error input {
       @apply border border-red-400;
     }
 
     .ant-form-item-has-error .ant-form-item-children-icon {
-      @apply text-red-400 absolute right-1 top-2;
+      @apply text-red-400 absolute right-1 top-1;
 
       svg {
         @apply w-4 h-4;
@@ -103,7 +112,158 @@
   .fields {}
 
   .ant-list.ant-list-bordered {
-    @apply border-t border-gray-300;
+    @apply border border-gray-300;
+  }
+
+  .ant-btn-dashed {
+    @apply border border-gray-300 border-dashed flex items-center justify-center py-1 mt-2;
+
+    &:hover {
+      @apply text-teal-900 border-teal-900;
+    }
+  }
+
+  .ant-input:hover, .ant-input-focused, .ant-input:focus {
+    @apply border-teal-600;
+  }
+
+  .ant-btn-ghost:focus, .ant-btn-ghost:hover {
+    @apply text-teal-600 border-teal-700;
+  }
+
+  .ant-switch-checked {
+    @apply bg-teal-500;
+  }
+
+  .ant-switch {
+    @apply bg-gray-400;
+
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5715;
+    list-style: none;
+    font-feature-settings: "tnum";
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    min-width: 44px;
+    height: 22px;
+    line-height: 22px;
+    vertical-align: middle;
+    border: 0;
+    border-radius: 100px;
+    cursor: pointer;
+    transition: all .2s;
+    user-select: none;
+
+    &.ant-switch-checked {
+      @apply bg-teal-500;
+
+      .ant-switch-handle {
+        left: calc(100% - 20px);
+      }
+    }
+
+    .ant-switch-handle {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 18px;
+      height: 18px;
+      transition: all .2s ease-in-out;
+
+      &::before {
+        position: absolute;
+        inset: 0;
+        background-color: #fff;
+        border-radius: 9px;
+        box-shadow: 0 2px 4px #00230b33;
+        transition: all .2s ease-in-out;
+        content: "";
+      }
+    }
+
+    .ant-switch-inner {
+      display: block;
+      margin: 0 7px 0 25px;
+      color: #fff;
+      font-size: 12px;
+      transition: margin .2s;
+
+      svg {
+        display: none;
+      }
+    }
+  }
+
+  .ant-input-number {
+    @apply border;
+    
+    box-sizing: border-box;
+    font-variant: tabular-nums;
+    list-style: none;
+    font-feature-settings: "tnum";
+    position: relative;
+    width: 100%;
+    min-width: 0;
+    color: #000000d9;
+    font-size: 14px;
+    line-height: 1.5715;
+    background-color: #fff;
+    background-image: none;
+    transition: all .3s;
+    display: inline-block;
+    width: 90px;
+    margin: 0;
+    padding: 0;
+
+    &.ant-input-number-focused {
+      @apply border-teal-600;
+    }
+  }
+
+  .ant-input-number-handler {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 50%;
+    overflow: hidden;
+    color: #00000073;
+    font-weight: 700;
+    line-height: 0;
+    text-align: center;
+    border-left: 1px solid #d9d9d9;
+    transition: all .1s linear;
+  }
+
+  .ant-input-number-handler-wrap {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 22px;
+    height: 100%;
+    background: #fff;
+    opacity: 0;
+    transition: opacity .24s linear .1s;
+  }
+
+  .ant-input-number-input {
+    @apply px-2 py-1;
+
+    width: 100%;
+    height: 30px;
+    text-align: left;
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    transition: all .3s linear;
+    appearance: textfield !important;
+  }
+
+  .ant-input-number:hover .ant-input-number-handler-wrap, .ant-input-number-focused .ant-input-number-handler-wrap {
+    opacity: 1;
   }
 }
 
@@ -127,4 +287,12 @@
   .ant-list.ant-list-bordered {
     @apply border-vulcan-100;
   }
+
+  .ant-btn-dashed {
+    @apply border-vulcan-50;
+
+    &:hover {
+      @apply text-teal-400 border-teal-900;
+    }
+  }
 }
\ No newline at end of file