MediaItem 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 MediaItem to tailwindcss #8232
• 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 3374f99

This pull request refactors several components in the libs/ui/src/components/MediaItem folder to use TailwindCSS instead of custom SCSS styles, to improve the UI design and performance of the NFT gallery. It also fixes some type errors, removes unused code, and updates the global styles and other components accordingly.

🤖[deprecated] Generated by Copilot at 3374f99

The MediaItem component got a makeover
With TailwindCSS to make it look bolder
No more custom SCSS
Or unused props to stress
The code is now cleaner and easier to go over

[kodabot]

WARNING @shashkovdanil PR for issue #8232 which isn't assigned to you. Please be warned that this PR may get rejected if there's another assignee for issue #8232

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	6af1ea8
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/656997776b48ab0008878c3a
😎 Deploy Preview	https://deploy-preview-8244--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.

[reviewpad]

AI-Generated Summary: This pull request primarily converts styling in the MediaItem components from native SCSS to tailwindcss, and cleans up related styles. It significantly reduces lines of code by leveraging utility classes provided by tailwindcss for various properties such as dimensions, alignments, spacing, font style, and colors. The PR also changes certain class-based styles to use inline styles directly in the components. Improvements in code readability and maintenance can be expected with this change. Changes in the way particular elements such as iframe and object are styled can also improve the interface's responsiveness to varying viewport sizes.

[preschian]

code lgtm

[shashkovdanil]

hmm tests failed after merge main branch. It looks like we have broken tests in the main branch

[roiLeo]

hmm tests failed after merge main branch. It looks like we have broken tests in the main branch

ref #8265

[daiagi]

colides with #8274 doesn't it?

[roiLeo]

should we merge #8274 first since I'm moving MediaItem inside koda repo?

[shashkovdanil]

@roiLeo I guess it doesn't matter, I'll fix conflicts

[shashkovdanil]

Let's merge your branch first then I'll fix conflicts

[shashkovdanil]

@roiLeo fixed conficts

[roiLeo]

otherwise lgtm

[codeclimate]

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

View more on Code Climate.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.2% Duplication