Merge pull request #4865 from weseek/imprv/83046-apply-empty-page-style

apply secondary color to empty page path

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

@@ -190,7 +190,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
           </div>
         </button>
         <a href={page._id} className="grw-pagetree-title-anchor flex-grow-1">
-          <p className="grw-pagetree-title m-auto">{nodePath.basename(page.path as string) || '/'}</p>
+          <p className={`grw-pagetree-title m-auto ${page.isEmpty && 'text-muted'}`}>{nodePath.basename(page.path as string) || '/'}</p>
         </a>
         <div className="grw-pagetree-count-wrapper">
           <ItemCount />

packages/app/src/styles/_override-bootstrap-variables.scss

@@ -18,6 +18,7 @@ $gray-200: $light !default;
 $gray-300: darken($light, 5%) !default;
 $gray-400: darken($light, 20%) !default;
 $gray-500: darken($light, 30%) !default;
+$gray-550: lighten($dark, 15%) !default;
 $gray-600: lighten($dark, 10%) !default;
 $gray-700: lighten($dark, 5%) !default;
 $gray-800: $dark !default;
@@ -64,7 +65,6 @@ $font-family-base:        $font-family-sans-serif;
 $font-size-root: 14px;
 $line-height-base: 1.42857;
 
-$text-muted: $gray-500;
 $blockquote-small-color: $gray-500;
 
 

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

@@ -18,6 +18,7 @@ $border-color-global: $gray-500 !default;
 $border-color-toc: $border-color-global !default;
 
 // override bootstrap variables
+$text-muted: $gray-550;
 $table-dark-color: $color-table;
 $table-dark-bg: $bgcolor-table;
 $table-dark-border-color: $border-color-table;
@@ -25,6 +26,7 @@ $table-dark-hover-color: $color-table-hover;
 $table-dark-hover-bg: $bgcolor-table-hover;
 $border-color: $border-color-global;
 
+@import 'reboot-bootstrap-text';
 @import 'reboot-bootstrap-border-colors';
 @import 'reboot-bootstrap-tables';
 

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

@@ -18,6 +18,7 @@ $border-color-global: $gray-300 !default;
 $border-color-toc: $border-color-global !default;
 
 // override bootstrap variables
+$text-muted: $gray-500;
 $table-color: $color-table;
 $table-bg: $bgcolor-table;
 $table-border-color: $border-color-table;
@@ -25,6 +26,7 @@ $table-hover-color: $color-table-hover;
 $table-hover-bg: $bgcolor-table-hover;
 $border-color: $border-color-global;
 
+@import 'reboot-bootstrap-text';
 @import 'reboot-bootstrap-border-colors';
 @import 'reboot-bootstrap-tables';
 

packages/app/src/styles/theme/_reboot-bootstrap-text.scss

@@ -0,0 +1,3 @@
+.text-muted {
+  color: $text-muted !important;
+}