Upload: Improve asset cards and upload progress visual design

[gu-stav]

What does it do?

• Fixes the badge alignment once @strapi/design-system@1.3.0 is released

Before	After

• Removes the border-radius bottom-left and bottom-right from UploadProgress
• Updates UploadProgress colors for @strapi/design-system@1.3.0

Note
The attached PR updates the colors of the ProgressBar component, so that it will be visible again.

Before	After

Why is it needed?

Stay up-to-date with the UI Kit.

Related issue(s)/PR(s)

• https://strapi-inc.atlassian.net/browse/CONTENT-220
• Depends on Badge: Update colors and height according to the UI kit design-system#770
• Depends on ProgressBar: Refactor component to use Box as base design-system#769

[gu-stav]

@maevalienard The "cancel" button during upload doesn't have any hover/ focus effect: do you have an idea what we could use there?

[codecov]

Codecov Report

Base: 59.62% // Head: 59.58% // Decreases project coverage by -0.04% ⚠️

Coverage data is based on head (2dbeca2) compared to base (21bdcdd).
Patch coverage: 80.00% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #14849      +/-   ##
==========================================
- Coverage   59.62%   59.58%   -0.05%     
==========================================
  Files        1339     1339              
  Lines       32566    32608      +42     
  Branches     6207     6214       +7     
==========================================
+ Hits        19418    19428      +10     
- Misses      11289    11316      +27     
- Partials     1859     1864       +5     

Flag	Coverage Δ
back	49.70% <ø> (?)
front	64.08% <80.00%> (-0.02%)	⬇️
unit	?
unit_back	49.70% <ø> (?)
unit_front	64.08% <80.00%> (?)

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

Impacted Files	Coverage Δ
...min/src/components/AssetCard/UploadingAssetCard.js	35.29% <33.33%> (+1.96%)	⬆️
...ad/admin/src/components/AssetCard/AssetCardBase.js	100.00% <100.00%> (ø)
...pload/admin/src/components/UploadProgress/index.js	100.00% <100.00%> (ø)
packages/core/database/lib/utils/knex.js	62.50% <0.00%> (-17.50%)	⬇️
.../core/admin/admin/src/components/LeftMenu/index.js	26.47% <0.00%> (-3.04%)	⬇️
...ager/pages/ListSettingsView/components/Settings.js	73.52% <0.00%> (-1.48%)	⬇️
...core/strapi/lib/services/entity-validator/index.js	92.48% <0.00%> (-1.46%)	⬇️
packages/core/upload/server/services/metrics.js	62.26% <0.00%> (-0.70%)	⬇️
...e/database/lib/entity-manager/regular-relations.js	9.09% <0.00%> (-0.11%)	⬇️
...n/server/migrations/field/migrate-for-bookshelf.js	22.50% <0.00%> (ø)
... and 1 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[ronronscelestes]

nice 💃
only comment, I feel like there is a misalignment between the cancel and the cross icon now 👀

[maevalienard]

The "cancel" button during upload doesn't have any hover/ focus effect: do you have an idea what we could use there?

Good catch. From what I saw, we could use neutral700 as hover color :)

[joshuaellis]

I've addressed the feedback from @maevalienard & addressed your comment @ronronscelestes – its now exactly as specified in the figma file 🙇🏼‍♀️

[ronronscelestes]

thanks for the fixes @joshuaellis 💃
one last UI tweak:

I think by doing that

<Card borderColor={error ? 'danger600' : undefined}>

in UploadingAssetCard we break the border color when no error

from my tests it should be fixed by doing:

<Card borderColor={error ? 'danger600' : 'neutral150'}>

[ronronscelestes]

looks goood 💅