Tree view visual adjustments

[Hypnosphi]

See discussion in #1523

This PR consists of several changes, which can be applied quite independently. I'll describe each of them in a separate comment, so that you can vote with emoji reactions.

[Hypnosphi]

Some minor indentation was added to stories to highlight the hierarchy

Before

After

[Hypnosphi]

Link color from Welcome story was used to indicate that story menu items are proper links

Before

After

[Hypnosphi]

As an alternative to the previous one, I can suggest slight underlines

[Hypnosphi]

Line heights for items were made lower than the items mininal height, so that it's easy to distinguish an item with wrapped lines from two consecutive items. Story's minimal height was lowered proportionally to the font size.

Before

After

[Hypnosphi]

The items' text is vertically aligned by lowercase letters, so that ascenders and descenders have both enough space

Before

After

[Hypnosphi]

Finally, the chevron's alignment and rotation centre were adjusted

Before

After

[trevoreyre]

The blue/underlined links both seem a little too intense to me. I think sidebar navigation is a common enough UI pattern that making the links stand out that much is unnecessary. If anything, maybe a slightly lighter font color for story links? Or perhaps kinds could be bold, and story links normal weight?

Something more along the lines of this, perhaps?

[Hypnosphi]

[shilman]

@igor-dv did you mean to close this?

[codecov]

Codecov Report

Merging #1599 into master will increase coverage by 0.01%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #1599      +/-   ##
==========================================
+ Coverage   21.32%   21.34%   +0.01%     
==========================================
  Files         244      244              
  Lines        5378     5378              
  Branches      662      652      -10     
==========================================
+ Hits         1147     1148       +1     
- Misses       3725     3745      +20     
+ Partials      506      485      -21

Impacted Files	Coverage Δ
...i/components/left_panel/stories_tree/tree_style.js	25% <ø> (ø)	⬆️
app/react-native/src/bin/storybook-start.js	0% <0%> (ø)	⬆️
...react-native/src/manager/components/PreviewHelp.js	0% <0%> (ø)	⬆️
app/react/src/client/preview/element_check.js	41.17% <0%> (ø)	⬆️
addons/knobs/src/components/types/Object.js	5.81% <0%> (ø)	⬆️
lib/ui/src/modules/shortcuts/actions/shortcuts.js	6.25% <0%> (ø)	⬆️
.../ui/src/modules/ui/components/left_panel/header.js	28.57% <0%> (ø)	⬆️
...b/ui/src/modules/ui/components/left_panel/index.js	100% <0%> (ø)	⬆️
addons/knobs/src/react/WrapStory.js	12% <0%> (ø)	⬆️
lib/ui/src/modules/ui/components/layout/usplit.js	38.7% <0%> (ø)	⬆️
... and 19 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f21210a...c859985. Read the comment docs.

[trevoreyre]

Yeah, the dark grey story links looks much better IMO.

[Hypnosphi]

Just for the record, the current branch state contains all the upvoted changes, without the downvoted ones =)

[danielduan]

Changing the look and feel of something existing is always gonna be controversial. I'm pretty comfortable with the changes here, think this would add clarity.

[ndelangen]

Looks good: ✅
Locally tested: ❌

[ndelangen]

Anyone opposed to merging this? ( @shilman )

[igor-dv]

LGTM

[shilman]

🎉