NeoSteps 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 UI kit to tailwindcss #8222
• 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 032c5ed

Refactored the steps component to use Tailwind CSS utilities and custom properties, and updated the Tailwind configuration and scss files accordingly. This improves the UI code quality and design consistency.

🤖[deprecated] Generated by Copilot at 032c5ed

Oh we're the crew of the NeoSteps, and we sail the web with ease
We use Tailwind CSS to style our ship, and custom properties
We heave away on the tailwind.config.js, and we make it nice and clear
We set the colors and the opacities, for the UI we hold dear

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	f1c85ea
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/657da642182bb30008284b75
😎 Deploy Preview	https://deploy-preview-8524--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]

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

[reviewpad]

AI-Generated Summary: This pull request introduces changes from NeoSteps to tailwindcss. It involves the modification of three files: NeoSteps.scss, tailwind.scss, and tailwind.config.js.

The changes are majorly refactoring the NeoSteps.scss to use tailwind CSS utility classes instead of the previous SCSS variables and functions. New variables are added to the tailwind configuration and some existing ones have changed their values. In the tailwind.scss file, an extra variable "--steps-active-color" is added and the values of "--k-shade" are changed from hex value to RGB format. In the tailwind.config.js, a similar update in 'k-shade' and the addition of 'steps-active-color' were performed.

The aim of these changes is to transition the stylesheet architecture from traditional SCSS to a more modular, scalable and easier to maintain tailwind CSS architecture.

[daiagi]

the color of the line between steps is not same as in canary:
https://canary.kodadot.xyz/ahk/waifu

[shashkovdanil]

the color of the line between steps is not same as in canary: https://canary.kodadot.xyz/ahk/waifu

ye, in the old version gradient didn't work. @exezbcz can you check please

[shashkovdanil]

@prury fixed

[prury]

Dark mode:
Deployed:

Canary:

[codeclimate]

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

View more on Code Climate.

[sonarqubecloud]

Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
No data about Coverage
1.1% Duplication on New Code

See analysis details on SonarCloud

[yangwao]

thanks!
pay 20 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $20 @ 6.5 USD/DOT ~ 3.077 $DOT
🧗 16SpvdDgKNiQ3c53DxX7refnQcKUD3uRNim3Z1HBJLNGrtSP
🔗 0xcde718915600e849a3af52353defe3a7da277d7df6f5808e085f1e76b9733b9f

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