CardArticle to tailwindcss

[shashkovdanil]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Closes Migration CardArticle to tailwindcss #8223
• Requires deployment <snek/rubick/worker>

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality

Optional

• I've tested it at </ksm/collection>
• I've tested PR on mobile
• I've written unit tests 🧪
• I've found edge cases

Did your issue had any of the "$" label on it?

• Fill up your DOT address: Payout

Community participation

• Are you at KodaDot Ecosystem Telegram?

Screenshot 📸

• My fix has changed something on UI; a screenshot is best to understand changes for others.

Copilot Summary

🤖[deprecated] Generated by Copilot at 889ee0f

Refactored CardArticle component to use Tailwind CSS for better design and performance. Deleted unused style file.

🤖[deprecated] Generated by Copilot at 889ee0f

<style> tag gone
Card component refactored
Tailwind brings spring breeze

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	a67f960
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/656087225399500008901ee4
😎 Deploy Preview	https://deploy-preview-8229--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kodabot]

SUCCESS @shashkovdanil PR for issue #8223 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[reviewpad]

AI-Generated Summary: This pull request deletes the SCSS file for the CardArticle component and transitions the styling work to Tailwind CSS within the CardArticle.vue file. It significantly reduces the code lines in the patch from 54 to 8. The changes revolve around replacing class names with the corresponding Tailwind utility classes, adjusting properties and behavior such as hover effects, object fit and padding, as well as removing scoped SCSS import at the end. The update is part of an effort to improve code maintainability and embrace utility-first CSS methodology.

[roiLeo]

before

after

need some small changes on border & hover state

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication

[shashkovdanil]

https://github.com/tailwindlabs/tailwindcss/blob/723e8d4377eb25b66a6224f767937fa02762eb52/src/plugins/css/preflight.css#L71

https://tailwindcss.com/docs/border-width#using-without-preflight

[codeclimate]

Code Climate has analyzed commit a67f960 and detected 0 issues on this pull request.

View more on Code Climate.

[yangwao]

Thanks!
pay 30 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $30 @ 5.23 USD/DOT ~ 5.736 $DOT
🧗 16SpvdDgKNiQ3c53DxX7refnQcKUD3uRNim3Z1HBJLNGrtSP
🔗 0xd9ea1bf48d5b31083a12974ee527d964d1fa63766311969efdc95c0c6a5fea5f

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues