frontend panel nav items highlights

Changes include
Font updates
Font spacing added
Font weights changed

packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte

@@ -59,27 +59,28 @@
 
   .switcher {
     display: flex;
-    justify-content: space-between;
     margin-bottom: 20px;
     padding: 0 20px 20px;
     border-bottom: 1px solid #d8d8d8;
   }
 
   .switcher > button {
+    text-rendering: optimizeLegibility;
     display: inline-block;
     border: none;
     margin: 0;
     padding: 0;
     cursor: pointer;
     font-size: 14px;
-    font-weight: 400;
-    text-transform: uppercase;
-    color: var(--secondary60);
+    font-weight: 500;
+    color: var(--secondary40);
+    margin-right: 20px;
+    letter-spacing: 1px;
   }
 
   .switcher > .selected {
     color: var(--secondary100);
-    font-weight: 500;
+    font-weight: 600;
   }
 
   .panel {

packages/builder/src/userInterface/LayoutEditor.svelte

@@ -54,9 +54,7 @@
   const newValue = n => Array(n).fill("")
 </script>
 
-<h3>Styles</h3>
-
-<h4>Display</h4>
+<h3>Layout</h3>
 <div class="layout-pos">
   {#each Object.entries(display) as [key, [name, meta, size]] (component._id + key)}
     <div class="grid">
@@ -87,7 +85,7 @@
   {/each}
 </div> -->
 
-<h4>Spacing</h4>
+<h3>Spacing</h3>
 <div class="layout-spacing">
   {#each Object.entries(spacing) as [key, [name, meta, size]] (component._id + key)}
     <div class="grid">
@@ -102,7 +100,7 @@
   {/each}
 </div>
 
-<h4>Size</h4>
+<h3>Size</h3>
 <div class="layout-layer">
   {#each Object.entries(size) as [key, [name, meta, size]] (component._id + key)}
     <div class="grid">
@@ -117,7 +115,7 @@
   {/each}
 </div>
 
-<h4>Z-Index</h4>
+<h3>Order</h3>
 <div class="layout-layer">
   {#each Object.entries(zindex) as [key, [name, meta, size]] (component._id + key)}
     <div class="grid">
@@ -135,19 +133,11 @@
   h3 {
     text-transform: uppercase;
     font-size: 12px;
-    font-weight: 700;
-    color: #000333;
-    opacity: 0.6;
-    margin-bottom: 10px;
-  }
-
-  h4 {
-    text-transform: uppercase;
-    font-size: 10px;
-    font-weight: 700;
+    font-weight: 600;
     color: #000333;
     opacity: 0.4;
-    margin-bottom: 15px;
+    margin-bottom: 10px;
+    letter-spacing: 1px;
   }
 
   h5 {
@@ -168,6 +158,6 @@
   }
 
   .grid {
-    grid-template-columns: 70px 1fr;
+    grid-template-columns: 70px 2fr;
   }
 </style>

packages/builder/src/userInterface/UserInterfaceRoot.svelte

@@ -160,8 +160,9 @@
     text-transform: uppercase;
     padding-left: 20px;
     margin-top: 20px;
-    font-weight: 700;
-    opacity: 0.6;
+    font-weight: 600;
+    opacity: 0.4;
+    letter-spacing: 1px;
   }
 
   .components-nav-header {
@@ -169,8 +170,9 @@
     color: #000333;
     text-transform: uppercase;
     margin-top: 20px;
-    font-weight: 700;
-    opacity: 0.6;
+    font-weight: 600;
+    opacity: 0.4;
+    letter-spacing: 1px;
   }
 
   .nav-header {
@@ -220,10 +222,11 @@
   .navigator-title {
     font-size: 14px;
     color: var(--secondary100);
-    font-weight: 500;
-    text-transform: uppercase;
+    font-weight: 600;
     padding: 0 20px 20px 20px;
     line-height: 1rem !important;
+    letter-spacing: 1px;
+    
   }
 
   .border-line {