deleted-items: Fix styling of folders - titles should be bold

josh-berry · Sep 3, 2023 · 4f735e6 · 4f735e6
1 parent c53043f
commit 4f735e6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/src/deleted-items/item.vue b/src/deleted-items/item.vue
@@ -4,7 +4,16 @@
     <span class="forest-title status-text">{{ loading }}...</span>
   </div>
 
-  <div v-else class="forest-item selectable deleted action-container">
+  <div
+    v-else
+    :class="{
+      'forest-item': true,
+      folder: 'children' in item,
+      selectable: true,
+      deleted: true,
+      'action-container': true,
+    }"
+  >
     <item-icon
       :class="{
         'forest-icon': true,

diff --git a/styles/forest.less b/styles/forest.less
@@ -93,6 +93,13 @@
   &.collapsed {
     display: none;
   }
+
+  // Lower-level children which are folders should have bold titles. This is
+  // different from top-level folders, which use a bigger font size and
+  // therefore can use a lighter weight.
+  .forest-item.folder > .forest-title {
+    font-weight: bold;
+  }
 }
 
 .forest-item {

diff --git a/styles/index.less b/styles/index.less
@@ -157,17 +157,7 @@
 
 // Tabs (stashed or unstashed) within the stash list
 .stash-list {
-  .forest .forest-children .forest-item.folder > .forest-title {
-    // Make folders a little heavier than top-level groups, because they use a
-    // smaller font size and need to stand out more.
-    font-weight: bold;
-  }
-
   .forest-item {
-    &.folder > .forest-title {
-      font-weight: var(--group-header-font-weight);
-    }
-
     & > a.forest-title,
     & > a.forest-title:visited {
       color: var(--page-fg);