Formatting update

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,7 +25,6 @@
 <NewScreen bind:this={newScreenPicker} />
 
 <style>
-
   .newscreen {
     cursor: pointer;
     border: 1px solid var(--grey-dark);
@@ -52,37 +46,4 @@
     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,7 +55,7 @@
       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>
   </div>
 
@@ -79,7 +79,6 @@
   onOk={() => store.deleteComponent(componentToDelete)} />
 
 <style>
-
   .pagelayoutSection {
     margin: 20px 0px 0px 0px;
   }

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

@@ -29,9 +29,7 @@
 
 <div class="root">
   {#each pages as { title, id }}
-        <button
+    <button class:active={id === $params.page} on:click={() => changePage(id)}>
-          class:active={id === $params.page}
-          on:click={() => changePage(id)}>
       {title}
     </button>
   {/each}
@@ -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,7 +57,6 @@
       </div>
     </Switcher>
 
-
   </div>
 
   <div class="preview-pane">
@@ -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>