Form and button update

packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte

@@ -1,6 +1,6 @@
 <script>
   import { setContext, onMount } from "svelte"
-  import {screen, page} from "./propertyCategories.js"
+  import { screen, page } from "./propertyCategories.js"
   import PropsView from "./PropsView.svelte"
   import { store } from "builderStore"
   import IconButton from "components/common/IconButton.svelte"
@@ -38,20 +38,22 @@
       c => c._component === componentInstance._component
     ) || {}
 
-  
   let panelDefinition = {}
 
   $: {
-    if(componentPropDefinition.properties) {
-      if(selectedCategory.value === "design") {
+    if (componentPropDefinition.properties) {
+      if (selectedCategory.value === "design") {
         panelDefinition = componentPropDefinition.properties["design"]
-      }else{
+      } else {
         let panelDef = componentPropDefinition.properties["settings"]
-        if($store.currentFrontEndType === "page") {
-          panelDefinition = [...page,...panelDef]
-        }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
+        if ($store.currentFrontEndType === "page") {
+          panelDefinition = [...page, ...panelDef]
+        } else if (
+          $store.currentFrontEndType === "screen" &&
+          $store.currentView !== "component"
+        ) {
           panelDefinition = [...screen, ...panelDef]
-        }else {
+        } else {
           panelDefinition = panelDef
         }
       }
@@ -60,21 +62,32 @@
 
   let componentInstance = {}
   $: {
-     if(($store.currentFrontEndType === "screen" || $store.currentFrontEndType === "page") && $store.currentView !== "component") {
-       componentInstance = {...$store.currentPreviewItem, ...$store.currentComponentInfo}
-     }else {
-       componentInstance = $store.currentComponentInfo
-     }
+    if (
+      ($store.currentFrontEndType === "screen" ||
+        $store.currentFrontEndType === "page") &&
+      $store.currentView !== "component"
+    ) {
+      componentInstance = {
+        ...$store.currentPreviewItem,
+        ...$store.currentComponentInfo,
+      }
+    } else {
+      componentInstance = $store.currentComponentInfo
+    }
   }
 
   const onStyleChanged = store.setComponentStyle
 
   function onPropChanged(key, value) {
-   if($store.currentFrontEndType === "page" || ($store.currentFrontEndType === "screen" && $store.currentView !== "component")) {
+    if (
+      $store.currentFrontEndType === "page" ||
+      ($store.currentFrontEndType === "screen" &&
+        $store.currentView !== "component")
+    ) {
       store.editPageOrScreen(key, value)
-      return;
-   }
-      
+      return
+    }
+
     store.setComponentProp(key, value)
   }
 

packages/builder/src/components/userInterface/SettingsView.svelte

@@ -10,8 +10,9 @@
   export let onChange = () => {}
 
   let pageScreenProps = ["title", "favicon", "description", "route"]
-  
-  const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props
+
+  const propExistsOnComponentDef = prop =>
+    pageScreenProps.includes(prop) || prop in componentDefinition.props
 
   function handleChange(key, data) {
     const value = data.target ? data.target.value : data

packages/standard-components/src/Button.svelte

@@ -17,7 +17,7 @@
 
 <button
   bind:this={theButton}
-  class={className}
+  class="default"
   disabled={disabled || false}
   on:click={clickHandler}>
   {#if !_bb.props._children || _bb.props._children.length === 0}{text}{/if}
@@ -25,23 +25,21 @@
 
 <style>
   .default {
-    font-family: inherit;
-    font-size: inherit;
-    padding: 0.4em;
-    margin: 0 0 0.5em 0;
+    align-items: center;
+    font-family: Inter;
+    font-size: 16px;
+    padding: 0px 16px;
     box-sizing: border-box;
-    border: 1px solid #ccc;
-    border-radius: 2px;
-    color: #000333;
+    border-radius: 4px;
     outline: none;
-  }
-
-  .default:active {
-    background-color: #f9f9f9;
-  }
-
-  .default:focus {
-    border-color: #666;
+    height: 40px;
+    cursor: pointer;
+    transition: all 0.2s ease 0s;
+    overflow: hidden;
+    outline: none;
+    user-select: none;
+    white-space: nowrap;
+    text-align: center;
   }
 
   .border {

packages/standard-components/src/DataForm.svelte

@@ -58,24 +58,95 @@
   }
 </script>
 
-<form class="uk-form" on:submit|preventDefault>
-  <h4>{modelDef.name}</h4>
-  <div>
+<form class="form" on:submit|preventDefault>
+  <div class="form-content">
     {#each fields as field}
-      <div class="uk-margin">
+      <div class="form-item">
         <label class="form-label" for="form-stacked-text">{field}</label>
         <input
-          class="uk-input"
+          class="input"
+          placeholder={field}
           type={schema[field].type === 'string' ? 'text' : schema[field].type}
           on:change={handleInput(field)} />
       </div>
+      <hr />
     {/each}
+    <div class="button-block">
+      <button on:click={save}>Submit Form</button>
+    </div>
   </div>
-  <button on:click={save}>SAVE</button>
 </form>
 
 <style>
+  .form {
+    align-items: center;
+    width: 100%;
+  }
+
+  .form-content {
+    margin-bottom: 20px;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  .input {
+    width: 600px;
+    height: 40px;
+    border-radius: 5px;
+    border: 1px solid #e6e6e6;
+    padding: 6px 12px 6px 12px;
+    font-size: 16px;
+  }
+
+  .form-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
   .form-label {
     font-weight: bold;
+    margin-bottom: 8px;
+  }
+
+  hr {
+    border: 1px solid #fafafa;
+    margin: 20px 0px;
+  }
+
+  hr:nth-last-child(2) {
+    border: 1px solid #fff;
+    margin: 20px 0px;
+  }
+
+  .button-block {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  button {
+    font-family: Inter;
+    font-size: 16px;
+    padding: 0.4em;
+    box-sizing: border-box;
+    border-radius: 4px;
+    color: white;
+    background-color: #393c44;
+    outline: none;
+    width: 300px;
+    height: 40px;
+    cursor: pointer;
+    transition: all 0.2s ease 0s;
+    overflow: hidden;
+    outline: none;
+    user-select: none;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  button:hover {
+    background-color: white;
+    border-color: #393c44;
+    color: #393c44;
   }
 </style>