refactor(cxl-ui): cxl-course-card, dashboard

conversionxl / aybolit

Lightweight web components library built with LitElement.

https://conversionxl.github.io/aybolit/

MIT License

7 stars 8 forks source link

refactor(cxl-ui): cxl-course-card, dashboard #391

Closed pawelkmpt closed 5 months ago

pawelkmpt commented 5 months ago

remove new (star) icon
make tag more prominent, styled as one from cxl-light-card

https://app.clickup.com/t/86az50h3y?comment=90140017966111

BEFORE

AFTER

pawelkmpt commented 5 months ago

Task linked: CU-86az50h3y Dashboard - MD 2.0 - Institute optimization

github-actions[bot] commented 5 months ago

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/cxl-ui.js	71.93 KB (+0.08% 🔺)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js	11.89 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js	28.93 KB (0%)
packages/cxl-ui/pkg/dist-web/vendor.js	140.5 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js, packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js, packages/cxl-ui/pkg/dist-web/manifest.js, packages/cxl-ui/pkg/dist-web/unresolved.js, packages/cxl-ui/pkg/dist-web/vendor.js	254.41 KB (+0.03% 🔺)

anoblet commented 5 months ago

We might be able to use badge from Vaadin in the future: https://vaadin.com/docs/latest/components/badge

anoblet commented 5 months ago

Since the height of the pill is larger than the tags, I would suggest vertically aligning everything.

https://github.com/conversionxl/aybolit/blob/84b86e3227a42b34859a1cd2c439350cad16b45b/packages/cxl-ui/scss/cxl-base-card.scss#L118

.tags {
  align-items: center;
}

pawelkmpt commented 5 months ago

Since the height of the pill is larger than the tags, I would suggest vertically aligning everything.

https://github.com/conversionxl/aybolit/blob/84b86e3227a42b34859a1cd2c439350cad16b45b/packages/cxl-ui/scss/cxl-base-card.scss#L118
.tags {
  align-items: center;
}

Done @anoblet :)