Standardize placeholder/blank content according to the Table of Contents

[joaopalmeiro]

Hi! 👋

Problem

Currently, the placeholder/blank content for the extension is not styled in the same way as the Table of Contents, something relevant now because of other related efforts going on:

• Placeholder for contextual help should be consistent with TOC jupyterlab/jupyterlab#14234
• Placeholder for property inspector should be consistent with TOC jupyterlab/jupyterlab#14235

Also, the placeholder title is Sentence cased, not Title Cased.

Proposed Solution

Adapt the markup of the placeholder/blank content, as well as the respective styles, so that this content is similar to the Table of Contents placeholder one:

jupyter-resource-usage/packages/labextension/src/widget.tsx

Lines 250 to 263 in 6f15ef9

	if (
	blankStateReason &&
	blankStateReason?.reason !== 'timeout' &&
	blankStateReason?.reason !== 'loading'
	) {
	return (
	<>
	<h3 className="jp-KernelUsage-section-separator">
	{props.trans.__('Kernel usage not available')}
	</h3>
	<BlankReason trans={props.trans} reason={blankStateReason} />
	</>
	);
	}

jupyter-resource-usage/packages/labextension/style/base.css

Lines 10 to 27 in 6f15ef9

	.jp-KernelUsage-section-separator {
	margin-top: var(--jp-content-heading-margin-top);
	margin-bottom: var(--jp-content-heading-margin-bottom);
	}
	.jp-KernelUsage-separator {
	margin-top: 10px;
	margin-bottom: 10px;
	}
	.jp-KernelUsage-timedOut {
	color: var(--jp-ui-font-color3);
	}
	.jp-KernelUsage-content {
	padding: 10px;
	overflow-y: auto;
	}

These changes involve, from my perspective, updating padding, margins, text alignment, and text color. Additionally, slightly adapt the markup (by changing the placeholder text from <div> to <p> and adding placeholder-related CSS classes), as well as convert the title to Title Case.

Current Workaround

.jp-KernelUsage-content {
  padding: 8px;

  &:has(div:only-of-type) {
    text-align: center;
    color: var(--jp-content-font-color2);

    > h3 {
      margin-top: revert;
      margin-bottom: var(--jp-content-heading-margin-bottom);
    }

    > div {
      margin-top: 1em;
      margin-bottom: 1em;
    }
  }
}

Additional context

• Operating System and version: macOS Sonoma 14.5
• Browser and version: Chrome 126.0.6478.127
• JupyterLab version: 4.3.0a1
• Python version: 3.10.13
• jupyter-resource-usage version: 1.0.2

Let me know what you think and if I can open a PR. Thanks!