Merge pull request #5835 from weseek/feat/94577-grw-count-badge

feat: 94577-grw-count-badge

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -439,7 +439,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
                 <i className="fa fa-spinner fa-pulse mr-2 text-muted"></i>
               )}
               <a href={`/${page._id}`} className="grw-pagetree-title-anchor flex-grow-1">
-                <p className={`text-truncate m-auto ${page.isEmpty && 'text-muted'}`}>{nodePath.basename(page.path ?? '') || '/'}</p>
+                <p className={`text-truncate m-auto ${page.isEmpty && 'grw-sidebar-text-muted'}`}>{nodePath.basename(page.path ?? '') || '/'}</p>
               </a>
             </>
           )}

packages/app/src/styles/_mixins.scss

@@ -223,3 +223,13 @@
     }
   }
 }
+
+@mixin count-badge($color, $bg-color, $min-width: initial) {
+  min-width: $min-width;
+  padding: 0.1rem 0.5rem;
+  font-family: $font-family-monospace;
+  font-size: 12px;
+  font-weight: 500;
+  color: $color;
+  background-color: $bg-color;
+}

packages/app/src/styles/_page-tree.scss

@@ -48,13 +48,6 @@ $grw-pagetree-item-padding-left: 10px;
       &:hover {
         display: none;
       }
-
-      .grw-count-badge {
-        min-width: 28px;
-        padding: 0.1rem 0.5rem;
-        font-size: 12px;
-        font-weight: 500;
-      }
     }
   }
 

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -479,8 +479,7 @@ ul.pagination {
 */
 .grw-side-contents-sticky-container {
   .grw-count-badge {
-    color: $gray-400;
-    background: $gray-700;
+    @include count-badge($gray-400, $gray-700);
   }
 
   .grw-border-vr {

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -182,11 +182,11 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
   // Pagetree
   .grw-pagetree {
     @include override-list-group-item-for-pagetree(
-      $color-list,
+      $color-sidebar-context,
       darken($bgcolor-sidebar-context, 5%),
       darken($bgcolor-sidebar-context, 12%),
-      $gray-500,
-      $gray-600,
+      lighten($color-sidebar-context, 10%),
+      lighten($color-sidebar-context, 8%),
       darken($bgcolor-sidebar-context, 15%),
       darken($bgcolor-sidebar-context, 24%)
     );
@@ -355,8 +355,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 */
 .grw-side-contents-sticky-container {
   .grw-count-badge {
-    color: $primary;
-    background: $gray-200;
+    @include count-badge($gray-600, $gray-200);
   }
 
   .grw-border-vr {

packages/app/src/styles/theme/mixins/_list-group.scss

@@ -28,8 +28,7 @@
     border-color: $border-color-global;
 
     .grw-count-badge {
-      color: $btn-color;
-      background: $bgcolor-hover;
+      @include count-badge($btn-color, $bgcolor-hover, 28px);
     }
 
     .btn.btn-page-item-control {
@@ -53,15 +52,14 @@
     &.list-group-item-action {
       &:hover {
         background-color: $bgcolor-hover;
-        .grw-count-badge {
-          background: $bgcolor-active;
-        }
       }
       &:active {
         background-color: $bgcolor-active;
-        .grw-count-badge {
-          background: $bgcolor-active;
-        }
+      }
+    }
+    .grw-pagetree-title-anchor {
+      .grw-sidebar-text-muted {
+        color: rgba(desaturate($color, 50%), 0.6);
       }
     }
   }

packages/app/src/styles/theme/nature.scss

@@ -72,7 +72,7 @@ html[dark] {
   $bgcolor-sidebar: #188f64;
   // Sidebar contents
   $color-sidebar-context: #7e0044;
-  $bgcolor-sidebar-context: #fdffeb;
+  $bgcolor-sidebar-context: #f7f9e9;
   // Sidebar resize button
   $color-resize-button: white;
   $bgcolor-resize-button: $themecolor;