Formatting update

packages/builder/src/components/common/AppNotification.svelte

@@ -71,7 +71,7 @@
     margin-left: 20px;
   }
 
-  :global(.refresh-page-button):hover{
+  :global(.refresh-page-button):hover {
     background: var(--grey-light);
   }
 </style>

packages/builder/src/components/common/Switcher.svelte

@@ -9,9 +9,6 @@
   let selectedIndex = 0
 
   const isSelected = tab => selected === tab
-
-  
-
 </script>
 
 <div class="root">
@@ -19,9 +16,7 @@
   <div class="switcher">
 
     {#each tabs as tab}
-      <button
+      <button class:selected={selected === tab} on:click={() => selectTab(tab)}>
-        class:selected={selected === tab}
-        on:click={() => selectTab(tab)}>
         {tab}
       </button>
     {/each}
@@ -30,13 +25,13 @@
 
   <div class="panel">
     {#if selectedIndex === 0}
-      <slot name="0"></slot>
+      <slot name="0" />
     {:else if selectedIndex === 1}
-      <slot name="1"></slot>
+      <slot name="1" />
     {:else if selectedIndex === 2}
-      <slot name="2"></slot>
+      <slot name="2" />
     {:else if selectedIndex === 3}
-      <slot name="3"></slot>
+      <slot name="3" />
     {/if}
   </div>
 

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

@@ -41,7 +41,6 @@
 
     // Go to correct URL
     $goto(`./:page/:screen/${path}`)
-    
   }
 </script>
 

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

@@ -61,7 +61,7 @@
         {/if}
       </span>
 
-      <i class="ri-artboard-2-fill icon"></i>
+      <i class="ri-artboard-2-fill icon" />
 
       <span class="title">{screen.title}</span>
     </div>

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

@@ -14,15 +14,10 @@
 
 <PagesList />
 
-<button 
+<button class="newscreen" on:click={newScreen}>Create New Screen</button>
-  class="newscreen"
-  on:click={newScreen}>
-  Create New Screen
-</button>
 
 <PageLayout layout={$store.pages[$store.currentPageName]} />
 
-
 <div class="nav-items-container">
   <ComponentsHierarchy screens={$store.screens} />
 </div>
@@ -30,59 +25,25 @@
 <NewScreen bind:this={newScreenPicker} />
 
 <style>
+  .newscreen {
+    cursor: pointer;
+    border: 1px solid var(--grey-dark);
+    border-radius: 3px;
+    width: 100%;
+    padding: 8px 16px;
+    margin: 12px 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: white;
+    color: var(--ink);
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 2ms;
+  }
 
-.newscreen {
+  .newscreen:hover {
-  cursor: pointer;
+    background: var(--grey-light);
-  border: 1px solid var(--grey-dark);
+  }
-  border-radius: 3px;
-  width: 100%;
-  padding: 8px 16px;
-  margin: 12px 0px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: white;
-  color: var(--ink);
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 2ms;
-}
-
-.newscreen:hover {
-  background: var(--grey-light);
-}
-
-.components-nav-header {
-  font-size: 13px;
-  color: var(--ink);
-  margin-top: 20px;
-  font-weight: 600;
-  opacity: 0.4;
-  letter-spacing: 1px;
-}
-
-
-.nav-group-header {
-  display: flex;
-  font-size: 0.9rem;
-  font-weight: bold;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.nav-group-header > span:nth-child(3) {
-  margin-left: 5px;
-  vertical-align: bottom;
-  grid-column-start: title;
-  margin-top: auto;
-}
-
-.border-line {
-  border-bottom: 1px solid #d8d8d8;
-}
-
-.components-list-container {
-  padding: 20px 0px 0 0;
-}
 
 </style>

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

@@ -55,8 +55,8 @@
       class:rotate={$store.currentPreviewItem.name !== _layout.title}>
       <ArrowDownIcon />
     </span>
-  <i class="ri-layout-3-fill icon-big"></i>
+    <i class="ri-layout-3-fill icon-big" />
-  <span class="title">Master Screen</span>
+    <span class="title">Master Screen</span>
   </div>
 
   {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
@@ -79,7 +79,6 @@
   onOk={() => store.deleteComponent(componentToDelete)} />
 
 <style>
-
   .pagelayoutSection {
     margin: 20px 0px 0px 0px;
   }

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

@@ -28,13 +28,11 @@
 </script>
 
 <div class="root">
-    {#each pages as { title, id }}
+  {#each pages as { title, id }}
-        <button
+    <button class:active={id === $params.page} on:click={() => changePage(id)}>
-          class:active={id === $params.page}
+      {title}
-          on:click={() => changePage(id)}>
+    </button>
-          {title}
+  {/each}
-        </button>
-    {/each}
 </div>
 
 <style>
@@ -63,5 +61,4 @@
     background: var(--ink-light);
     color: var(--white);
   }
-
 </style>

packages/builder/src/pages/[application]/frontend/_layout.svelte

@@ -26,11 +26,9 @@
     }
   })
 
-  
   let confirmDeleteDialog
   let componentToDelete = ""
 
-
   let settingsView
   const settings = () => {
     settingsView.show()
@@ -50,7 +48,7 @@
 
   <div class="ui-nav">
 
-    <Switcher bind:this={leftNavSwitcher} tabs={["Navigate", "Add"]}>
+    <Switcher bind:this={leftNavSwitcher} tabs={['Navigate', 'Add']}>
       <div slot="0">
         <FrontendNavigatePane />
       </div>
@@ -59,12 +57,11 @@
       </div>
     </Switcher>
 
-
   </div>
 
   <div class="preview-pane">
     {#if $store.currentPageName && $store.currentPageName.length > 0}
-    <CurrentItemPreview />
+      <CurrentItemPreview />
     {/if}
   </div>
 
@@ -76,8 +73,6 @@
 
 </div>
 
-
-
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   title="Confirm Delete"
@@ -133,5 +128,4 @@
   .nav-group-header > div:nth-child(3):hover {
     color: var(--primary75);
   }
-
 </style>