style: various little tweaks to home screen stylin'

[rusackas]

SUMMARY

Shadows were getting cut off... this PR adds a little more room for them, as we did with other cards. This also adds a little gutter room between sections, which is nice... and is now more consistent!

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

TEST PLAN

👀 visual sanity check.

ADDITIONAL INFORMATION

• Has associated issue:
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[ktmud]

It seems the body and the welcome page have different background color.

Done... hopefully one day we won't have all these LESS variables anymore :P Would love to have just ONE place to add/edit colors.

[ktmud]

While we are at it, could we also adjust the margins of the empty state placeholders so that they are more or less vertically aligned in the middle?

[junlincc]

all good points.. how did we miss all these issues... @mihir174 let us pay better attention to details at design/product sign off 🙏 thank you for pointing out! @ktmud

[rusackas]

While we are at it, could we also adjust the margins of the empty state placeholders so that they are more or less vertically aligned in the middle?

Done (flexbox to the rescue, as always!):

[nytai]

just checked out this branch, also noticed a couple of things:

looks like a border-radius is needed on some of these new borders

long dashboard names seem to to cause variations in card size

[ktmud]

Thanks for the quick fixes!

[rusackas]

just checked out this branch, also noticed a couple of things:

looks like a border-radius is needed on some of these new borders

long dashboard names seem to to cause variations in card size

Card radii updated.

[codecov-io]

Codecov Report

Merging #11650 (f6af2e5) into master (4eff80c) will increase coverage by 4.30%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master   #11650      +/-   ##
==========================================
+ Coverage   62.27%   66.57%   +4.30%     
==========================================
  Files         873      873              
  Lines       42302    42312      +10     
  Branches     3970     3970              
==========================================
+ Hits        26342    28171    +1829     
+ Misses      15780    14043    -1737     
+ Partials      180       98      -82     

Flag	Coverage Δ
cypress	55.43% <0.00%> (?)
javascript	62.84% <100.00%> (ø)
python	61.88% <ø> (-0.04%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...set-frontend/src/views/CRUD/welcome/EmptyState.tsx	87.80% <ø> (ø)
...-frontend/src/views/CRUD/welcome/ActivityTable.tsx	70.68% <100.00%> (+5.17%)	⬆️
superset/db_engine_specs/sqlite.py	65.62% <0.00%> (-9.38%)	⬇️
superset/utils/celery.py	82.14% <0.00%> (-3.58%)	⬇️
...et-frontend/src/SqlLab/components/LimitControl.tsx	89.36% <0.00%> (-1.95%)	⬇️
superset/result_set.py	96.69% <0.00%> (-1.66%)	⬇️
...ntend/src/views/CRUD/annotation/AnnotationList.tsx	77.17% <0.00%> (-0.85%)	⬇️
...ews/CRUD/annotationlayers/AnnotationLayerModal.tsx	73.03% <0.00%> (-0.83%)	⬇️
superset/connectors/sqla/models.py	90.36% <0.00%> (-0.27%)	⬇️
superset/viz.py	57.73% <0.00%> (-0.01%)	⬇️
... and 184 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 4eff80c...46d8d64. Read the comment docs.

[rusackas]

just checked out this branch, also noticed a couple of things:
looks like a border-radius is needed on some of these new borders

long dashboard names seem to to cause variations in card size

Card radii updated.

Thumbnail was covering the border radius... overflow property fixes that too now:

[rusackas]

@nytai @ktmud Regarding Tai's layout issue, I think we need to take another look at the card layout... it's got a few other issues around responsiveness that I'm not stoked on. But that's a tougher game than these other easy wins.

Any other small tweaky things, or shall we merge this batch o' fixes?

Thanks for the fresh eyes on this!

[nytai]

👍 thanks for fixing the border radii, your css-fu is strong. Totally ok with punting on the card layout stuff, it's not exactly an easy fix. I think we're also waiting for a design for smaller cards as the consensus is that there should be more information density in these views.