formatting and linting

packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte

@@ -1,12 +1,21 @@
 <script>
-  import FlatButton from "./FlatButton.svelte";
+  import FlatButton from "./FlatButton.svelte"
 
-  export let format = "hex";
-  export let onclick = format => {};
+  export let format = "hex"
+  export let onclick = format => {}
 
-  let colorFormats = ["hex", "rgb", "hsl"];
+  let colorFormats = ["hex", "rgb", "hsl"]
 </script>
 
+<div class="flatbutton-group">
+  {#each colorFormats as text}
+    <FlatButton
+      selected={format === text}
+      {text}
+      on:click={() => onclick(text)} />
+  {/each}
+</div>
+
 <style>
   .flatbutton-group {
     font-weight: 500;
@@ -18,12 +27,3 @@
     align-self: center;
   }
 </style>
-
-<div class="flatbutton-group">
-  {#each colorFormats as text}
-    <FlatButton
-      selected={format === text}
-      {text}
-      on:click={() => onclick(text)} />
-  {/each}
-</div>

packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte

@@ -1,15 +1,18 @@
 <script>
-    import {buildStyle} from "./helpers.js"
+  import { buildStyle } from "./helpers.js"
 
-    export let backgroundSize = "10px"
-    export let borderRadius = ""
-    export let height = ""
-    export let width = ""
-
-    $: style = buildStyle({backgroundSize, borderRadius, height, width})
+  export let backgroundSize = "10px"
+  export let borderRadius = ""
+  export let height = ""
+  export let width = ""
 
+  $: style = buildStyle({ backgroundSize, borderRadius, height, width })
 </script>
 
+<div {style}>
+  <slot />
+</div>
+
 <style>
   div {
     background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
@@ -17,7 +20,3 @@
     width: fit-content;
   }
 </style>
-
-<div {style}>
-    <slot />
-</div>

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

@@ -1,82 +1,116 @@
 <script>
-  import { onMount, createEventDispatcher } from "svelte";
+  import { onMount, createEventDispatcher } from "svelte"
   import CheckedBackground from "./CheckedBackground.svelte"
-  import {buildStyle} from "./helpers.js"
+  import { buildStyle } from "./helpers.js"
   import {
     getColorFormat,
     convertToHSVA,
-    convertHsvaToFormat
-  } from "./utils.js";
-  import Slider from "./Slider.svelte";
-  import Palette from "./Palette.svelte";
-  import ButtonGroup from "./ButtonGroup.svelte";
-  import Input from "./Input.svelte";
+    convertHsvaToFormat,
+  } from "./utils.js"
+  import Slider from "./Slider.svelte"
+  import Palette from "./Palette.svelte"
+  import ButtonGroup from "./ButtonGroup.svelte"
+  import Input from "./Input.svelte"
 
-  export let value = "#3ec1d3ff";
-  export let format = "hexa";
+  export let value = "#3ec1d3ff"
+  export let format = "hexa"
 
-  let h = null;
-  let s = null;
-  let v = null;
-  let a = null;
+  let h = null
+  let s = null
+  let v = null
+  let a = null
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher()
 
   onMount(() => {
     if (format) {
       convertAndSetHSVA()
     }
-  });
+  })
 
   function convertAndSetHSVA() {
-    let hsva = convertToHSVA(value, format);
-    setHSVA(hsva);
+    let hsva = convertToHSVA(value, format)
+    setHSVA(hsva)
   }
 
   function setHSVA([hue, sat, val, alpha]) {
-    h = hue;
-    s = sat;
-    v = val;
-    a = alpha;
+    h = hue
+    s = sat
+    v = val
+    a = alpha
   }
 
   //fired by choosing a color from the palette
   function setSaturationAndValue({ detail }) {
-    s = detail.s;
-    v = detail.v;
-    value = convertHsvaToFormat([h, s, v, a], format);
+    s = detail.s
+    v = detail.v
+    value = convertHsvaToFormat([h, s, v, a], format)
     dispatch("change", value)
   }
 
   function setHue(hue) {
-    h = hue;
-    value = convertHsvaToFormat([h, s, v, a], format);    
+    h = hue
+    value = convertHsvaToFormat([h, s, v, a], format)
   }
 
   function setAlpha(alpha) {
-    a = alpha === "1.00" ? "1" :alpha;
-    value = convertHsvaToFormat([h, s, v, a], format);    
+    a = alpha === "1.00" ? "1" : alpha
+    value = convertHsvaToFormat([h, s, v, a], format)
   }
 
   function changeFormatAndConvert(f) {
-    format = f;
-    value = convertHsvaToFormat([h, s, v, a], format);
+    format = f
+    value = convertHsvaToFormat([h, s, v, a], format)
   }
 
   function handleColorInput(text) {
     let f = getColorFormat(text)
-    if(f) {
-      format = f;
+    if (f) {
+      format = f
       value = text
       convertAndSetHSVA()
       dispatch("change", value)
     }
   }
 
-    $: border = s < 10 ? "1px dashed #dedada" : ""
-    $: style = buildStyle({background: value, border})
+  $: border = s < 10 ? "1px dashed #dedada" : ""
+  $: style = buildStyle({ background: value, border })
 </script>
 
+<div class="colorpicker-container">
+
+  <div class="palette-panel">
+    <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
+  </div>
+
+  <div class="control-panel">
+    <div class="alpha-hue-panel">
+      <div>
+        <CheckedBackground borderRadius="50%" backgroundSize="8px">
+          <div class="selected-color" {style} />
+        </CheckedBackground>
+      </div>
+      <div>
+        <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
+
+        <CheckedBackground borderRadius="10px" backgroundSize="7px">
+          <Slider
+            type="alpha"
+            value={a}
+            on:change={alpha => setAlpha(alpha.detail)} />
+        </CheckedBackground>
+
+      </div>
+    </div>
+
+    <div class="format-input-panel">
+      <ButtonGroup {format} onclick={changeFormatAndConvert} />
+      <Input {value} on:input={event => handleColorInput(event.target.value)} />
+    </div>
+  </div>
+
+</div>
+
 <style>
   .colorpicker-container {
     display: flex;
@@ -87,7 +121,8 @@
     width: 220px;
     background: #ffffff;
     border-radius: 2px;
-    box-shadow: 0 0.15em 1.5em 0 rgba(0,0,0,.1), 0 0 1em 0 rgba(0,0,0,.03);
+    box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1),
+      0 0 1em 0 rgba(0, 0, 0, 0.03);
   }
 
   .palette-panel {
@@ -124,37 +159,3 @@
     justify-content: center;
   }
 </style>
-
-<div class="colorpicker-container">
-
-  <div class="palette-panel">
-    <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
-  </div>
-
-  <div class="control-panel">
-    <div class="alpha-hue-panel">
-      <div>
-        <CheckedBackground borderRadius="50%" backgroundSize="8px">
-          <div class="selected-color" {style} />
-        </CheckedBackground>
-      </div>
-      <div>
-        <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
-
-        <CheckedBackground borderRadius="10px" backgroundSize="7px">
-          <Slider
-            type="alpha"
-            value={a}
-            on:change={alpha => setAlpha(alpha.detail)} />
-        </CheckedBackground>
-        
-      </div>
-    </div>
-
-    <div class="format-input-panel">
-      <ButtonGroup {format} onclick={changeFormatAndConvert} />
-      <Input {value} on:input={event => handleColorInput(event.target.value)} />
-    </div>
-  </div>
-
-</div>

packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte

@@ -1,146 +1,173 @@
 <script>
-    import Colorpicker from "./Colorpicker.svelte"
-    import CheckedBackground from "./CheckedBackground.svelte"
-    import {createEventDispatcher, afterUpdate, beforeUpdate} from "svelte"
-    import {buildStyle} from "./helpers.js"
-    import { fade } from 'svelte/transition';
-    import {getColorFormat} from "./utils.js"
-
-    export let value = "#3ec1d3ff"
-    export let open = false;
-    export let width = "25px"
-    export let height = "25px"
-
-    let format = "hexa";
-    let dimensions = {top: 0, left: 0}
-    let colorPreview = null
-
-    let previewHeight = null    
-    let previewWidth = null
-    let pickerWidth = 250
-    let pickerHeight = 300
-
-    let anchorEl = null
-    let parentNodes = [];
-    let errorMsg = null
-
-    $: previewStyle = buildStyle({width, height, background: value})
-    $: errorPreviewStyle = buildStyle({width, height})
-    $: pickerStyle = buildStyle({top: `${dimensions.top}px`, left: `${dimensions.left}px`})    
-
-    const dispatch = createEventDispatcher()
-
-    beforeUpdate(() => {
-       format = getColorFormat(value)
-       if(!format) {
-           errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
-           console.error(errorMsg)
-       }else{
-           errorMsg = null
-       }
-    })
-
-    afterUpdate(() => {
-        if(colorPreview && colorPreview.offsetParent && !anchorEl) {
-            //Anchor relative to closest positioned ancestor element. If none, then anchor to body
-            anchorEl = colorPreview.offsetParent 
-                let curEl = colorPreview
-                let els = []
-                //Travel up dom tree from preview element to find parent elements that scroll
-                while(!anchorEl.isSameNode(curEl)) {
-                    curEl = curEl.parentNode
-                    let elOverflow = window.getComputedStyle(curEl).getPropertyValue("overflow")                    
-                    if(/scroll|auto/.test(elOverflow)) {
-                        els.push(curEl)
-                    }
-                } 
-                parentNodes = els
-        }
-    })
-
-
-    function openColorpicker(event) {
-        if(colorPreview) {
-            const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect()   
-            const {innerHeight, innerWidth} = window
-
-            const {offsetLeft, offsetTop} = colorPreview
-            //get the scrollTop value for all scrollable parent elements 
-            let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0);
-
-            const spaceBelow = (innerHeight - spaceAbove) - previewHeight
-            const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop      
-            
-            //TOO: Testing and Scroll Awareness for x Scroll
-            const spaceRight = (innerWidth - spaceLeft) + previewWidth
-            const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
-
-            dimensions = {top, left}
-
-            open = true;        
+  import Colorpicker from "./Colorpicker.svelte"
+  import CheckedBackground from "./CheckedBackground.svelte"
+  import { createEventDispatcher, afterUpdate, beforeUpdate } from "svelte"
+  import { buildStyle } from "./helpers.js"
+  import { fade } from "svelte/transition"
+  import { getColorFormat } from "./utils.js"
+
+  export let value = "#3ec1d3ff"
+  export let open = false
+  export let width = "25px"
+  export let height = "25px"
+
+  let format = "hexa"
+  let dimensions = { top: 0, left: 0 }
+  let colorPreview = null
+
+  let previewHeight = null
+  let previewWidth = null
+  let pickerWidth = 250
+  let pickerHeight = 300
+
+  let anchorEl = null
+  let parentNodes = []
+  let errorMsg = null
+
+  $: previewStyle = buildStyle({ width, height, background: value })
+  $: errorPreviewStyle = buildStyle({ width, height })
+  $: pickerStyle = buildStyle({
+    top: `${dimensions.top}px`,
+    left: `${dimensions.left}px`,
+  })
+
+  const dispatch = createEventDispatcher()
+
+  beforeUpdate(() => {
+    format = getColorFormat(value)
+    if (!format) {
+      errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
+      console.error(errorMsg)
+    } else {
+      errorMsg = null
+    }
+  })
+
+  afterUpdate(() => {
+    if (colorPreview && colorPreview.offsetParent && !anchorEl) {
+      //Anchor relative to closest positioned ancestor element. If none, then anchor to body
+      anchorEl = colorPreview.offsetParent
+      let curEl = colorPreview
+      let els = []
+      //Travel up dom tree from preview element to find parent elements that scroll
+      while (!anchorEl.isSameNode(curEl)) {
+        curEl = curEl.parentNode
+        let elOverflow = window
+          .getComputedStyle(curEl)
+          .getPropertyValue("overflow")
+        if (/scroll|auto/.test(elOverflow)) {
+          els.push(curEl)
         }
+      }
+      parentNodes = els
     }
-
-    function onColorChange(color) {
-        value = color.detail;
-        dispatch("change", color.detail)
+  })
+
+  function openColorpicker(event) {
+    if (colorPreview) {
+      const {
+        top: spaceAbove,
+        width,
+        bottom,
+        right,
+        left: spaceLeft,
+      } = colorPreview.getBoundingClientRect()
+      const { innerHeight, innerWidth } = window
+
+      const { offsetLeft, offsetTop } = colorPreview
+      //get the scrollTop value for all scrollable parent elements
+      let scrollTop = parentNodes.reduce(
+        (scrollAcc, el) => (scrollAcc += el.scrollTop),
+        0
+      )
+
+      const spaceBelow = innerHeight - spaceAbove - previewHeight
+      const top =
+        spaceAbove > spaceBelow
+          ? offsetTop - pickerHeight - scrollTop
+          : offsetTop + previewHeight - scrollTop
+
+      //TOO: Testing and Scroll Awareness for x Scroll
+      const spaceRight = innerWidth - spaceLeft + previewWidth
+      const left =
+        spaceRight > spaceLeft
+          ? offsetLeft + previewWidth
+          : offsetLeft - pickerWidth
+
+      dimensions = { top, left }
+
+      open = true
     }
+  }
+
+  function onColorChange(color) {
+    value = color.detail
+    dispatch("change", color.detail)
+  }
 </script>
 
 <div class="color-preview-container">
-    {#if !errorMsg}
-        <CheckedBackground borderRadius="3px" backgroundSize="8px">
-            <div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker} />        
-        </CheckedBackground>
-
-        {#if open}
-        <div class="picker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth} style={pickerStyle}>
-            <Colorpicker on:change={onColorChange} {format} {value} />
-        </div>
-        <div on:click|self={() => open = false} class="overlay"></div>
-        {/if}
-    {:else}
-        <div class="color-preview preview-error" style={errorPreviewStyle}>
-            <span>&times;</span>
-        </div>
+  {#if !errorMsg}
+    <CheckedBackground borderRadius="3px" backgroundSize="8px">
+      <div
+        bind:this={colorPreview}
+        bind:clientHeight={previewHeight}
+        bind:clientWidth={previewWidth}
+        class="color-preview"
+        style={previewStyle}
+        on:click={openColorpicker} />
+    </CheckedBackground>
+
+    {#if open}
+      <div
+        class="picker-container"
+        bind:clientHeight={pickerHeight}
+        bind:clientWidth={pickerWidth}
+        style={pickerStyle}>
+        <Colorpicker on:change={onColorChange} {format} {value} />
+      </div>
+      <div on:click|self={() => (open = false)} class="overlay" />
     {/if}
+  {:else}
+    <div class="color-preview preview-error" style={errorPreviewStyle}>
+      <span>&times;</span>
+    </div>
+  {/if}
 </div>
 
-
 <style>
-    .color-preview-container{
-        display: flex;
-        flex-flow: row nowrap;
-        height: fit-content;
-    }
-
-    .color-preview {
-        border-radius: 3px;
-        border: 1px solid #dedada;        
-    }
-
-    .preview-error {
-        background: #cccccc;
-        color: #808080;
-        text-align: center;
-        font-size: 18px;
-        cursor: not-allowed;
-    }
-
-    .picker-container {
-        position: absolute;
-        z-index: 3;
-        width: fit-content;
-        height: fit-content;
-    }
-
-    .overlay{
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 2;        
-    }
+  .color-preview-container {
+    display: flex;
+    flex-flow: row nowrap;
+    height: fit-content;
+  }
+
+  .color-preview {
+    border-radius: 3px;
+    border: 1px solid #dedada;
+  }
+
+  .preview-error {
+    background: #cccccc;
+    color: #808080;
+    text-align: center;
+    font-size: 18px;
+    cursor: not-allowed;
+  }
+
+  .picker-container {
+    position: absolute;
+    z-index: 3;
+    width: fit-content;
+    height: fit-content;
+  }
+
+  .overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+  }
 </style>
-

packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte

@@ -1,8 +1,10 @@
 <script>
-  export let text = "";
-  export let selected = false;
+  export let text = ""
+  export let selected = false
 </script>
 
+<div class="flatbutton" class:selected on:click>{text}</div>
+
 <style>
   .flatbutton {
     cursor: pointer;
@@ -25,5 +27,3 @@
     border: none;
   }
 </style>
-
-<div class="flatbutton" class:selected on:click>{text}</div>

packages/builder/src/components/userInterface/Colorpicker/Input.svelte

@@ -1,7 +1,11 @@
 <script>
-  export let value = "";
+  export let value = ""
 </script>
 
+<div>
+  <input on:input type="text" {value} maxlength="25" />
+</div>
+
 <style>
   div {
     display: flex;
@@ -22,7 +26,3 @@
     font-weight: 550;
   }
 </style>
-
-<div>
-  <input on:input type="text" {value} maxlength="25" />
-</div>

packages/builder/src/components/userInterface/Colorpicker/Palette.svelte

@@ -1,42 +1,57 @@
 <script>
-  import { onMount, createEventDispatcher } from "svelte";
+  import { onMount, createEventDispatcher } from "svelte"
   import CheckedBackground from "./CheckedBackground.svelte"
 
   const dispatch = createEventDispatcher()
 
-  export let h = 0;
-  export let s = 0;
-  export let v = 0;
-  export let a = 1;
+  export let h = 0
+  export let s = 0
+  export let v = 0
+  export let a = 1
 
-  let palette;
-
-  let paletteHeight, paletteWidth = 0;
+  let palette
 
+  let paletteHeight,
+    paletteWidth = 0
 
   function handleClick(event) {
-    const { left, top } = palette.getBoundingClientRect();
-    let clickX = (event.clientX - left)
-    let clickY = (event.clientY - top)
-    if((clickX > 0 && clickY > 0) && (clickX < paletteWidth && clickY < paletteHeight)) {
+    const { left, top } = palette.getBoundingClientRect()
+    let clickX = event.clientX - left
+    let clickY = event.clientY - top
+    if (
+      clickX > 0 &&
+      clickY > 0 &&
+      clickX < paletteWidth && clickY < paletteHeight
+    ) {
       let s = (clickX / paletteWidth) * 100
-      let v = 100 - ((clickY / paletteHeight) * 100)
-      dispatch("change", {s, v})
+      let v = 100 - (clickY / paletteHeight) * 100
+      dispatch("change", { s, v })
     }
-
   }
 
-  $: pickerX = (s * paletteWidth) / 100;
-  $: pickerY =  paletteHeight * ((100 - v) / 100)
+  $: pickerX = (s * paletteWidth) / 100
+  $: pickerY = paletteHeight * ((100 - v) / 100)
 
   $: paletteGradient = `linear-gradient(to top, rgba(0, 0, 0, 1), transparent),
     linear-gradient(to left, hsla(${h}, 100%, 50%, ${a}), rgba(255, 255, 255, ${a}))
-  `;
-  $: style = `background: ${paletteGradient};`;
+  `
+  $: style = `background: ${paletteGradient};`
 
   $: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
 </script>
 
+<CheckedBackground width="100%">
+  <div
+    bind:this={palette}
+    bind:clientHeight={paletteHeight}
+    bind:clientWidth={paletteWidth}
+    on:click={handleClick}
+    class="palette"
+    {style}>
+    <div class="picker" style={pickerStyle} />
+  </div>
+</CheckedBackground>
+
 <style>
   .palette {
     position: relative;
@@ -55,9 +70,3 @@
     border-radius: 50%;
   }
 </style>
-
-  <CheckedBackground width="100%">
-    <div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
-      <div class="picker" style={pickerStyle} />
-    </div>
-  </CheckedBackground>

packages/builder/src/components/userInterface/Colorpicker/Slider.svelte

@@ -1,36 +1,47 @@
 <script>
-  import { onMount, createEventDispatcher } from "svelte";
-  import dragable from "./drag.js";
+  import { onMount, createEventDispatcher } from "svelte"
+  import dragable from "./drag.js"
 
-  export let value = 1;
-  export let type = "hue";
+  export let value = 1
+  export let type = "hue"
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher()
 
-  let slider;
-  let sliderWidth = 0;
+  let slider
+  let sliderWidth = 0
 
   function handleClick(mouseX) {
-    const { left, width } = slider.getBoundingClientRect();
-    let clickPosition = mouseX - left;
+    const { left, width } = slider.getBoundingClientRect()
+    let clickPosition = mouseX - left
 
     let percentageClick = (clickPosition / sliderWidth).toFixed(2)
-    
+
     if (percentageClick >= 0 && percentageClick <= 1) {
-      let value =
-        type === "hue"
-          ? 360 * percentageClick
-          : percentageClick;
-      dispatch("change", value);
+      let value = type === "hue" ? 360 * percentageClick : percentageClick
+      dispatch("change", value)
     }
   }
 
   $: thumbPosition =
-    type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value;
+    type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value
 
-  $: style = `transform: translateX(${thumbPosition - 6}px);`;
+  $: style = `transform: translateX(${thumbPosition - 6}px);`
 </script>
 
+<div
+  bind:this={slider}
+  bind:clientWidth={sliderWidth}
+  on:click={event => handleClick(event.clientX)}
+  class="color-format-slider"
+  class:hue={type === 'hue'}
+  class:alpha={type === 'alpha'}>
+  <div
+    use:dragable
+    on:drag={e => handleClick(e.detail)}
+    class="slider-thumb"
+    {style} />
+</div>
+
 <style>
   .color-format-slider {
     position: relative;
@@ -68,20 +79,6 @@
     border: 1px solid #777676;
     border-radius: 50%;
     background-color: #ffffff;
-    cursor:grab;
+    cursor: grab;
   }
 </style>
-
-<div
-  bind:this={slider}
-  bind:clientWidth={sliderWidth}
-  on:click={event => handleClick(event.clientX)}
-  class="color-format-slider"
-  class:hue={type === 'hue'}
-  class:alpha={type === 'alpha'}>
-  <div
-    use:dragable
-    on:drag={e => handleClick(e.detail)}
-    class="slider-thumb"
-    {style} />
-</div>

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

@@ -30,26 +30,26 @@
     <FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
   </div>
 
-<div class="positioned-wrapper">
-  <div class="design-view-property-groups">
-    {#if propertyGroupNames.length > 0}
-      {#each propertyGroupNames as groupName}
-        <PropertyGroup
-          name={groupName}
-          properties={getProperties(groupName)}
-          styleCategory={selectedCategory}
-          {onStyleChanged}
-          {componentDefinition}
-          {componentInstance} />
-      {/each}
-    {:else}
-      <div class="no-design">
-        <span>This component does not have any design properties</span>
-      </div>
-    {/if}
+  <div class="positioned-wrapper">
+    <div class="design-view-property-groups">
+      {#if propertyGroupNames.length > 0}
+        {#each propertyGroupNames as groupName}
+          <PropertyGroup
+            name={groupName}
+            properties={getProperties(groupName)}
+            styleCategory={selectedCategory}
+            {onStyleChanged}
+            {componentDefinition}
+            {componentInstance} />
+        {/each}
+      {:else}
+        <div class="no-design">
+          <span>This component does not have any design properties</span>
+        </div>
+      {/if}
+    </div>
   </div>
 </div>
-</div>
 
 <style>
   .design-view-container {
@@ -63,7 +63,7 @@
     flex: 0 0 50px;
   }
 
-  .positioned-wrapper{
+  .positioned-wrapper {
     position: relative;
     display: flex;
     min-height: 0;

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

@@ -9,10 +9,7 @@
   $: useIcon = !!icon
 </script>
 
-<div
-  class="flatbutton"
-  class:selected
-  on:click={() => onClick(value || text)}>
+<div class="flatbutton" class:selected on:click={() => onClick(value || text)}>
   {#if useIcon}
     <i class={icon} />
   {:else}

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

@@ -46,7 +46,7 @@
 <style>
   .flatbutton-group {
     display: flex;
-    width: 100%
+    width: 100%;
   }
 
   .button-container {

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

@@ -14,9 +14,7 @@
 
 <PagesList />
 
-<button class="newscreen" on:click={newScreen}>
-  Create New Screen
-</button>
+<button class="newscreen" on:click={newScreen}>Create New Screen</button>
 
 <PageLayout layout={$store.pages[$store.currentPageName]} />
 

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

@@ -12,7 +12,7 @@
     if (v.target) {
       let val = props.valueKey ? v.target[props.valueKey] : v.target.value
       onChange(key, val)
-    }else if(v.detail) {
+    } else if (v.detail) {
       onChange(key, v.detail)
     } else {
       onChange(key, v)

packages/builder/src/components/userInterface/propertyCategories.js

@@ -1,6 +1,5 @@
 import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
-import InputGroup from "../common/Inputs/InputGroup.svelte"
 import FlatButtonGroup from "./FlatButtonGroup.svelte"
 import Colorpicker from "./Colorpicker"
 /*
@@ -73,13 +72,6 @@ export const layout = [
   },
 ]
 
-const spacingMeta = [
-  { placeholder: "T" },
-  { placeholder: "R" },
-  { placeholder: "B" },
-  { placeholder: "L" },
-]
-
 export const margin = [
   {
     label: "All sides",
@@ -378,7 +370,20 @@ export const typography = [
     label: "size",
     key: "font-size",
     control: OptionSelect,
-    options: ["8px", "10px", "12px", "14px", "16px", "18px", "20px", "24px", "32px", "48px", "60px", "72px"],
+    options: [
+      "8px",
+      "10px",
+      "12px",
+      "14px",
+      "16px",
+      "18px",
+      "20px",
+      "24px",
+      "32px",
+      "48px",
+      "60px",
+      "72px",
+    ],
     textAlign: "center",
   },
   {
@@ -444,17 +449,50 @@ export const background = [
     defaultValue: "None",
     options: [
       { label: "None", value: "None" },
-      { label: "Warm Flame", value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);" },
-      { label: "Night Fade", value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);" },
-      { label: "Spring Warmth", value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);" },
-      { label: "Sunny Morning", value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);" },
-      { label: "Winter Neva", value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);" },
-      { label: "Tempting Azure", value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);" },
-      { label: "Heavy Rain", value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);" },
-      { label: "Deep Blue", value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);" },
-      { label: "Near Moon", value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);" },
-      { label: "Wild Apple", value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);" },
-      { label: "Plum Plate", value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);" },
+      {
+        label: "Warm Flame",
+        value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
+      },
+      {
+        label: "Night Fade",
+        value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);",
+      },
+      {
+        label: "Spring Warmth",
+        value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);",
+      },
+      {
+        label: "Sunny Morning",
+        value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);",
+      },
+      {
+        label: "Winter Neva",
+        value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);",
+      },
+      {
+        label: "Tempting Azure",
+        value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);",
+      },
+      {
+        label: "Heavy Rain",
+        value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);",
+      },
+      {
+        label: "Deep Blue",
+        value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);",
+      },
+      {
+        label: "Near Moon",
+        value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);",
+      },
+      {
+        label: "Wild Apple",
+        value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);",
+      },
+      {
+        label: "Plum Plate",
+        value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);",
+      },
     ],
   },
   {
@@ -528,14 +566,7 @@ export const effects = [
     key: "opacity",
     control: OptionSelect,
     textAlign: "center",
-    options: [
-      "0",
-      "0.2",
-      "0.4",
-      "0.6",
-      "0.8",
-      "1",
-    ],
+    options: ["0", "0.2", "0.4", "0.6", "0.8", "1"],
   },
   {
     label: "Rotate",
@@ -544,16 +575,16 @@ export const effects = [
     defaultValue: "0",
     options: [
       { label: "None", value: "0" },
-      { label: "45 deg", value:"rotate(45deg)" },
-      { label: "90 deg", value:"rotate(90deg)" },
-      { label: "135 deg", value:"rotate(135deg)" },
-      { label: "180 deg", value:"rotate(180deg)" },
-      { label: "225 deg", value:"rotate(225deg)" },
-      { label: "270 deg", value:"rotate(270deg)" },
-      { label: "315 deg", value:"rotate(315deg)" },
-      { label: "360 deg", value:"rotate(360deg)" },
+      { label: "45 deg", value: "rotate(45deg)" },
+      { label: "90 deg", value: "rotate(90deg)" },
+      { label: "135 deg", value: "rotate(135deg)" },
+      { label: "180 deg", value: "rotate(180deg)" },
+      { label: "225 deg", value: "rotate(225deg)" },
+      { label: "270 deg", value: "rotate(270deg)" },
+      { label: "315 deg", value: "rotate(315deg)" },
+      { label: "360 deg", value: "rotate(360deg)" },
     ],
-  }, 
+  },
   {
     label: "Shadow",
     key: "box-shadow",
@@ -613,7 +644,7 @@ export const transitions = [
     control: OptionSelect,
     textAlign: "center",
     placeholder: "sec",
-    options: ["0.2ms", "0.4ms", "0.8ms", "1s", "2s", "4s",],
+    options: ["0.2ms", "0.4ms", "0.8ms", "1s", "2s", "4s"],
   },
   {
     label: "Ease",

packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte

@@ -43,9 +43,7 @@
 {#if $backendUiStore.selectedDatabase._id && $backendUiStore.selectedModel.name}
   <ModelDataTable {selectRecord} />
 {:else}
-  <i style="color: var(--grey-4)">
-    create your first model to start building
-  </i>
+  <i style="color: var(--grey-4)">create your first model to start building</i>
 {/if}
 
 <style>

packages/standard-components/src/Login.svelte

@@ -48,6 +48,7 @@
     }
   }
 </script>
+
 <div class="container">
   <div class="root">
     <div class="content">
@@ -84,22 +85,23 @@
       </div>
 
       {#if error}
-        <div class="incorrect-details-panel">Incorrect username or password</div>
+        <div class="incorrect-details-panel">
+          Incorrect username or password
+        </div>
       {/if}
     </div>
   </div>
 </div>
 
 <style>
-
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  position: absolute;
-}
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+  }
   .root {
     height: 100%;
     display: flex;