chore(css): improvement of the readability

YoranSys commented 2 years ago

Label and attributes use fill instead of stoke
Visual differentiation of leaf and node

Before:

After :

bkrem commented 2 years ago

Hi @YoranSys,

Thanks for this improvement on the SVG styling and sorry for the delayed review, I took some time off the past week.

The weird thing for me here is that when I run your changes against the demo I get a different result:

But when I then additionally set stroke: none; explicitly for the title and attributes it looks correct/closer to your screenshots:

Could you share a link to the implementation you grabbed the screenshots from so I can understand why it's different?

Otherwise I think if we add the explicit stroke: none; as mentioned above this should look as expected across the board hopefully, i.e.:

.rd3t-label__title {
  fill: #000;
  stroke: none;
  font-weight: bolder;
}

.rd3t-label__attributes {
  fill: #777;
  stroke: none;
  font-weight: bolder;
  font-size: smaller;
}

YoranSys commented 2 years ago

Hi @bkrem , You are right I overloaded ‘stroke: none;‘.

bkrem commented 2 years ago

Published as part of https://github.com/bkrem/react-d3-tree/releases/tag/v3.3.0

Thanks again 🙏

bkrem / react-d3-tree

chore(css): improvement of the readability #377