tweak styles

Author: ZachJW34

packages/app/src/specs/InlineSpecListTree.vue

@@ -31,7 +31,7 @@
         :file-name="row.data?.fileName || row.value"
         :extension="row.data?.specFileExtension || ''"
         :selected="isCurrentSpec(row.data)"
-        class="ml-22px"
+        class="pl-22px"
       />
       <DirectoryItem
         v-else

packages/app/src/specs/RowDirectory.vue

@@ -1,18 +1,18 @@
 <template>
   <div
-    class="h-full grid grid-cols-[16px,16px,auto] items-center gap-10px"
+    class="h-full grid grid-cols-[14px,16px,auto] items-center gap-8px"
     :data-cy="`row-directory-depth-${depth}`"
   >
     <i-cy-chevron-down-small_x16
       class="
-        icon-dark-gray-300 mr-8px
+        icon-dark-gray-300 mr-8px text-sm
         group-hocus:(icon-dark-gray-700)
       "
       :class="{'transform rotate-270': !expanded}"
     />
     <component
       :is="IconFolder"
-      class="icon-light-gray-50 icon-dark-gray-200 document-icon"
+      class="icon-dark-gray-50 icon-light-gray-200 document-icon"
     />
 
     <div>
@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-import IconFolder from '~icons/cy/folder-outline_x24.svg'
+import IconFolder from '~icons/cy/folder_x16.svg'
 
 defineProps<{
   directories: string[]

packages/app/src/specs/SpecItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="h-full grid grid-cols-[16px,auto,auto] items-center gap-10px"
+    class="h-full grid grid-cols-[16px,auto,auto] items-center gap-8px"
     data-cy="spec-item"
   >
     <component

packages/app/src/specs/SpecsList.vue

@@ -63,7 +63,7 @@
               >
                 <SpecItem
                   :spec="row.data"
-                  :style="{ paddingLeft: `${((row.depth - 2) * 20) + 16}px` }"
+                  :style="{ paddingLeft: `${((row.depth - 2) * 10) + 16 + 22}px` }"
                 />
               </RouterLink>
 
@@ -72,7 +72,7 @@
                 :directories="row.value.split('/')"
                 :expanded="row.expanded.value"
                 :depth="row.depth - 2"
-                :style="{ paddingLeft: `${((row.depth - 2) * 20) + 16}px` }"
+                :style="{ paddingLeft: `${((row.depth - 2) * 10) + 16}px` }"
                 @click="row.toggle"
               />
             </template>