Integrated tailwindcss, refactored colors and rewrote NeoButton component #8141
Conversation
shashkovdanil
requested review from
preschian and
roiLeo
and removed request for
a team
✅ Deploy Preview for koda-canary ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
SUCCESS @shashkovdanil PR for issue #8113 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime! |
|
@preschian @roiLeo Hi guys, if you like this improvement I may continue to rewrite other components in a similar style. Also you can see how I redid the colors, with this approach no more _theme.scss is needed |
|
New dependencies detected. Learn more about Socket for GitHub ↗︎
|
|
@exezbcz I would appreciate it if you could help me test the button, I have looked at the buttons on different pages and everything seems to look good |
Yes, what buttons should I test so far? I will also fill the components with button designs soon |
|
@exezbcz yes, in this PR I've changed only buttons |
- text inside button on hover changing as a link
- same with hover
same here in cart sidebar |
There was a problem hiding this comment.
Hey nice work but that's not what I was excepting, could you do your changes without affecting Kodadot app (only in libs/ui package). The package should be independent and should be used outside Kodadot.
please consider:
- use TS over JS
- use SCSS over CSS
- add story preview for each component you create
:rootcolors not visible (on IDE) when using values instead of hex
overall, I like it |
|
Hey @roiLeo I'll update PR
What do you mean? There is story
I can use hex instead rgb, but then we lose the ability to change the alpha channel of colors (text-k-accent/50 -> translucent k-accent color). If we don't need this feature, I'll rewrite it in hex |
Did you try to run it? How does it look?
you still can set transparency with hex value, that was a suggestion for better visualization when looking at code. |
|
NeoButton.story.vue 
|
Fixed, it was because of CSS reset from tailwind, I disabled it |
|
Small conflicts here. So what's next? are we going to gradually rewritte each components from |
If you like this approach, then yes I can rewrite other components |
There was a problem hiding this comment.
yeay, finally we can use tailwind. I hope didn't conflict with current styles
follow up issues:
- use nuxt modules instead? https://tailwindcss.nuxtjs.org/getting-started/setup
- integrate viewer and enable it on preview deployment and canary
|
@preschian I'll create new tasks soon for other components. About nuxt module, we can use this if we plan to use tailwind not only in the UI kit, but also in the kodadot itself. Could you merge this please, otherwise I'll have to fix conflicts in |
|
Code Climate has analyzed commit 4ee7bfe and detected 0 issues on this pull request. View more on Code Climate. |
|
Kudos, SonarCloud Quality Gate passed!
|
cc @yangwao for the payout |
|
cc @yangwao friendly ping |
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
Context
Before submitting pull request, please make sure:
Optional
Did your issue had any of the "$" label on it?
Community participation
Screenshot 📸
Copilot Summary
🤖[deprecated] Generated by Copilot at c239608
This pull request integrates Tailwind CSS into the NFT gallery project, enabling the use of Tailwind classes and utilities for creating and optimizing CSS styles. It configures PostCSS plugins for the Nuxt application and the UI library, and updates the dependencies and the
NeoButtoncomponent accordingly. It also deletes the unusedNeoButton.scssfile.🤖[deprecated] Generated by Copilot at c239608