fix styling around features and layouts

vuu-ui/packages/vuu-layout/src/palette/Palette.css

@@ -1,5 +1,4 @@
 .vuuPalette {
-  --vuu-svg-draggable: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17"><path d="M12.6666 6.5H3.33329C2.96663 6.5 2.66663 6.8 2.66663 7.16667C2.66663 7.53333 2.96663 7.83333 3.33329 7.83333H12.6666C13.0333 7.83333 13.3333 7.53333 13.3333 7.16667C13.3333 6.8 13.0333 6.5 12.6666 6.5ZM3.33329 10.5H12.6666C13.0333 10.5 13.3333 10.2 13.3333 9.83333C13.3333 9.46667 13.0333 9.16667 12.6666 9.16667H3.33329C2.96663 9.16667 2.66663 9.46667 2.66663 9.83333C2.66663 10.2 2.96663 10.5 3.33329 10.5Z" /></svg>');
   --vuuList-borderStyle: none;
 }
 
@@ -11,10 +10,10 @@
 .vuuPaletteItem {
   --vuu-icon-color: var(--salt-content-secondary-foreground);
   --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);
-  padding-left: 12px;
   font-size: 12px;
   font-weight: 600;
   gap: var(--salt-spacing-200);
+  padding-left: 12px;
 }
 
 .vuuSimpleDraggableWrapper > .vuuPaletteItem {

vuu-ui/packages/vuu-shell/src/feature-list/FeatureList.css

@@ -14,7 +14,6 @@
   align-items: center;
   display: flex;
   flex: 0 0 48px;
-  font-size: 16px;
   font-weight: 700;
   line-height: 2;
 }
@@ -28,6 +27,10 @@
   overflow: auto;
 }
 
+.vuuFeatureList-standalone {
+  margin-top: 24px;
+}
+
 .vuuFeatureList-group {
   --vuuMeasuredContainer-flex: 0 0 auto;
 

vuu-ui/packages/vuu-shell/src/feature-list/FeatureList.tsx

@@ -45,24 +45,30 @@ export const FeatureList = ({
   const content = useMemo<JSX.Element[]>(() => {
     if (Array.isArray(features)) {
       return [
-        <Palette key="0" orientation="vertical" ListProps={listPropsFullHeight}>
-          {features.map((featureProps, i) => (
-            <PaletteItem
-              closeable
-              component={<Feature {...featureProps} />}
-              key={i}
-              label={featureProps.title}
-              resizeable
-              resize="defer"
-              header
-            >
-              <Icon name="draggable" size={18} />
-              <span className={`${classBase}-itemName`}>
-                {featureProps.title}
-              </span>
-            </PaletteItem>
-          ))}
-        </Palette>,
+        <div className={`${classBase}-standalone`} key={0}>
+          <Palette
+            key="0"
+            orientation="vertical"
+            ListProps={listPropsFullHeight}
+          >
+            {features.map((featureProps, i) => (
+              <PaletteItem
+                closeable
+                component={<Feature {...featureProps} />}
+                key={i}
+                label={featureProps.title}
+                resizeable
+                resize="defer"
+                header
+              >
+                <Icon name="draggable" size={18} />
+                <span className={`${classBase}-itemName`}>
+                  {featureProps.title}
+                </span>
+              </PaletteItem>
+            ))}
+          </Palette>
+        </div>,
       ];
     } else {
       return Object.entries(features).map(([heading, featureList], index) => (

vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css

@@ -1,5 +1,6 @@
 .vuuLayoutList {
   --vuuMeasuredContainer-flex: 1 1 1px;
+  --vuuList-borderStyle: none;
   --vuuListItem-separator-color: transparent;
 
   background: var(
@@ -21,7 +22,6 @@
   align-items: center;
   display: flex;
   flex: 0 0 48px;
-  font-size: 16px;
   font-weight: 700;
   line-height: 2;
 }

vuu-ui/packages/vuu-shell/src/layout-management/LayoutTile.css

@@ -8,20 +8,18 @@
 }
 
 .vuuLayoutTile-layoutName {
-  color: var(--light-text-primary, #15171B);
   font-weight: 600;
-  line-height: 133.333%;
-  text-transform: capitalize;
+  text-transform: uppercase;
 }
 
 .vuuLayoutTile-screenshot {
   width: 60px;
   height: 45.6px;
-  border: 1px solid #D6D7DA;
+  border: 1px solid #d6d7da;
 }
 
 .vuuLayoutTile-layoutDetails {
-  color: var(--light-text-secondary, #606477);
+  color: var(--salt-content-secondary-foreground);
   font-size: 10px;
   font-weight: 600;
   line-height: 150%;

vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.css

@@ -79,8 +79,7 @@
   .vuuTabs-tabPanel {
     background: var(--salt-container-primary-background);
     height: 100%;
-    padding: var(--salt-spacing-200) var(--salt-spacing-100)
-      var(--salt-spacing-200) var(--salt-spacing-400);
+    padding: 34px 32px 8px 24px;
   }
 }
 

vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.tsx

@@ -258,9 +258,7 @@ export const LeftNav = (props: LeftNavProps) => {
       >
         <FeatureList features={features} title="VUU FEATURES" />
         <FeatureList features={tableFeaturesByGroup} title="VUU TABLES" />
-        <div className="vuuLeftNav-drawer">
-          <LayoutList title="My Layouts" />
-        </div>
+        <LayoutList title="MY LAYOUTS" />
       </Stack>
     </div>
   );

vuu-ui/packages/vuu-theme/css/components/components.css

@@ -7,6 +7,7 @@
 @import url(input.css);
 @import url(left-nav.css);
 @import url(options-list.css);
+@import url(palette.css);
 @import url(scrollable.css);
 @import url(split-button.css);
 @import url(splitter.css);

vuu-ui/packages/vuu-theme/css/components/palette.css

@@ -0,0 +1,15 @@
+.salt-theme.vuu-theme {
+  .vuuPaletteItem {
+    --vuuListItem-padding: 0;
+    border-bottom: solid 1px var(--salt-separable-secondary-borderColor);
+
+    &:first-child {
+      border-top: solid 1px var(--salt-separable-secondary-borderColor);
+    }
+
+    .vuuFeatureList-itemName {
+      position: relative;
+      top: 1px;
+    }
+  }
+}