Markdown and text documents do not have drop shadow

[JasonWeill]

Jupyter notebooks have a drop shadow in JupyterLab and in the Jupyter Notebook UI:

However, markdown files and text files have edges with no drop shadow.

The same drop shadow effect should apply to all file types in Jupyter Notebook.

[JasonWeill]

Found by @ellisonbg during a bug bash.

[jtpio]

Makes sense.

For reference the classic notebook has one:

[jesuscastillx]

Newcomer here - could I take this on?

[JasonWeill]

@j-publius Please feel free to pick this one up! Let us know if you have any questions; otherwise, you can open a pull request and mention this issue in the description.

[jesuscastillx]

This PR removed the shadow from the tree view, but it also removed the shadow from all files beyond notebooks.

Below is how all other files looked like before the change.

I'm looking for guidance - would it be better to add just a box-shadow around it? The corresponding line numbers would have a shadow behind them.

Or should the shadow begin before the numbers (like in the image below).

Or maybe even reverting back to the original version - I'm unsure if this was the original design/ intent.

[JasonWeill]

Looks like that PR is by @jtpio, who is based in central Europe (where it's about 00:37 local time), and who has previously commented on this issue — I'll defer to him for a response to the question above

[jtpio]

Thanks @j-publius for looking into it.

This PR removed the shadow from the tree view, but it also removed the shadow from all files beyond notebooks.

The intent if this PR was mostly to improve the styling of the file browser. It's possible that the drop shadow was making it look odd, but maybe we could into bringing it back.

For reference the classic notebook does not have a drop shadow on the file browser:

But one on the file editor:

[jesuscastillx]

@jtpio That makes sense. I understand the change to the file browser, but the also PR seemed to unintentionally remove the drop shadow from text files.

In working on this current issue (adding drop shadow to edit view), I was looking for guidance on how the drop shadow should look like :). (i.e. Should it look like before the PR, or something entirely different?).

[ellisonbg]

I agree that the file browser looks a bit odd with a drop shadow, but I do think it adds to the look of the other pages (notebook, terminal, text files, etc.). @j-publius the JupyterLab theme system has a number of CSS variables for Material Design style elevations (drop shadows) that we use for cases like this. I would try out some of those to see which elevation makes the most sense (also look at how it looks in dark mode). Let us know if you need help.

[ellisonbg]

Looks like we were previously using the --jp-elevation-z4 variable.

[rielAsh24]

Hey! I wish to work on this issue. However, I'm facing some difficulty setting up the project while using the pip install -e ".[dev,test]" command. Would be glad to be guided with regards to the same 😄

[jtpio]

Thanks @rielAsh24! What issue are you facing?

[rielAsh24]

Thanks @rielAsh24! What issue are you facing?

Hey @jtpio!

So I've set up the mamba notebook environment and I was trying to install the package in development mode using pip install -e ".[dev,test]" and it gave me the following error:

Obtaining file:///Users/ashriel/Open_Source/notebook
  Installing build dependencies ... done
  Checking if build backend supports build_editable ... done
  Getting requirements to build editable ... done
  Installing backend dependencies ... done
  Preparing editable metadata (pyproject.toml) ... error
  error: subprocess-exited-with-error
  
  × Preparing editable metadata (pyproject.toml) did not run successfully.
  │ exit code: 1
  ╰─> [55 lines of output]
      INFO:hatch_jupyter_builder.utils:Running jupyter-builder
      WARNING:hatch_jupyter_builder.utils:Refusing to overwrite pre-commit hook
      INFO:hatch_jupyter_builder.utils:Building with hatch_jupyter_builder.npm_builder
      INFO:hatch_jupyter_builder.utils:With kwargs: {'build_cmd': 'build:prod', 'editable_build_cmd': 'build', 'source_dir': 'packages', 'build_dir': 'notebook/static', 'npm': 'jlpm'}
      INFO:hatch_jupyter_builder.utils:Installing build dependencies with npm.  This may take a while...
      INFO:hatch_jupyter_builder.utils:> /private/var/folders/vj/2s5kf9qd6j35jyh7rwx0yd480000gn/T/pip-build-env-cktm_9y8/overlay/bin/jlpm install
      Traceback (most recent call last):
        File "/private/var/folders/vj/2s5kf9qd6j35jyh7rwx0yd480000gn/T/pip-build-env-cktm_9y8/overlay/bin/jlpm", line 5, in <module>
          from jupyterlab.jlpmapp import main
        File "/private/var/folders/vj/2s5kf9qd6j35jyh7rwx0yd480000gn/T/pip-build-env-cktm_9y8/overlay/lib/python3.9/site-packages/jupyterlab/__init__.py", line 8, in <module>
          from .handlers.announcements import (
        File "/private/var/folders/vj/2s5kf9qd6j35jyh7rwx0yd480000gn/T/pip-build-env-cktm_9y8/overlay/lib/python3.9/site-packages/jupyterlab/handlers/announcements.py", line 15, in <module>
          from jupyterlab_server.translation_utils import translator
        File "/private/var/folders/vj/2s5kf9qd6j35jyh7rwx0yd480000gn/T/pip-build-env-cktm_9y8/overlay/lib/python3.9/site-packages/jupyterlab_server/__init__.py", line 5, in <module>
          from .app import LabServerApp
        File "/private/var/folders/vj/2s5kf9qd6j35jyh7rwx0yd480000gn/T/pip-build-env-cktm_9y8/overlay/lib/python3.9/site-packages/jupyterlab_server/app.py", line 10, in <module>
          from .handlers import LabConfig, add_handlers
        File "/private/var/folders/vj/2s5kf9qd6j35jyh7rwx0yd480000gn/T/pip-build-env-cktm_9y8/overlay/lib/python3.9/site-packages/jupyterlab_server/handlers.py", line 18, in <module>
          from .listings_handler import ListingsHandler, fetch_listings
        File "/private/var/folders/vj/2s5kf9qd6j35jyh7rwx0yd480000gn/T/pip-build-env-cktm_9y8/overlay/lib/python3.9/site-packages/jupyterlab_server/listings_handler.py", line 8, in <module>
          import requests
        File "/private/var/folders/vj/2s5kf9qd6j35jyh7rwx0yd480000gn/T/pip-build-env-cktm_9y8/overlay/lib/python3.9/site-packages/requests/__init__.py", line 43, in <module>
          import urllib3
        File "/private/var/folders/vj/2s5kf9qd6j35jyh7rwx0yd480000gn/T/pip-build-env-cktm_9y8/overlay/lib/python3.9/site-packages/urllib3/__init__.py", line 38, in <module>
          raise ImportError(
      ImportError: urllib3 v2.0 only supports OpenSSL 1.1.1+, currently the 'ssl' module is compiled with LibreSSL 2.8.3. See: https://github.com/urllib3/urllib3/issues/2168
      Traceback (most recent call last):
        File "/Users/ashriel/Library/Python/3.9/lib/python/site-packages/pip/_vendor/pyproject_hooks/_in_process/_in_process.py", line 167, in prepare_metadata_for_build_editable
          hook = backend.prepare_metadata_for_build_editable
      AttributeError: module 'hatchling.build' has no attribute 'prepare_metadata_for_build_editable'

Is there a step I have missed out on before I run this command?

[jtpio]

@rielAsh24 maybe try installing openssl=1 for now with mamba when in the environment? mamba install openssl=1 -c conda-forge

[rielAsh24]

@rielAsh24 maybe try installing openssl=1 for now with mamba when in the environment? mamba install openssl=1 -c conda-forge

Okay, I gave it a try and it seems to be working now....Thanks @jtpio!
I'll start looking into this issue and post updates accordingly 😄

[rielAsh24]

@jtpio @JasonWeill Hey! I wanted to confirm regarding the drop shadows on each of the view. Following are samples of the drop shadows after the change for the markdown and the text files:

I also looked over adding a drop shadow for the tree view which looks as follows:

Note: I'm currently using the --jp-elevation-z4 variable, could change that to match with the notebook shadows if suggested.

[jtpio]

@rielAsh24 this looks good, thanks for looking into it!

Would you like to open a PR?

[rielAsh24]

@rielAsh24 this looks good, thanks for looking into it!

Would you like to open a PR?

@jtpio For sure! I'll open one and mention this issue