Cards change

[daiagi]

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 Cards change  #5687
• 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

Had issue bounty label?

• Fill up your KSM address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot 📸

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

Copilot Summary

🤖 Generated by Copilot at 5f95f5d

Refactored the styles and components of various cards in the UI and the gallery to use a new card-border-color variable and to remove unnecessary animations. This improves the performance, design consistency, and code maintainability of the project.

🤖 Generated by Copilot at 5f95f5d

CardArticle style
shared across components now
less code, more spring

[kodabot]

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

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	5f95f5d
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/643e339fa5b44b0008685023
😎 Deploy Preview	https://deploy-preview-5711--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 settings.

[codeclimate]

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

View more on Code Climate.

[reviewpad]

AI-Generated Summary: This pull request includes changes to various SCSS files focusing mainly on card elements. The changes include introducing new theme variables for 'card-border-color' and 'card-hover-opacity', updating the border and hover styles of carousel cards, top collection cards, gallery item cards, gallery collection cards, and article cards to use the new theme variables. These updates enhance the visual appearance and consistency of the cards across different components.

[daiagi]

Effected cards:

Landing Page

• All Carousel cards (Spotlight, Newest List, Latest Sales)
• Top Collections
• Featured Articles

Explore / Item Grid

• items tab cards
• collections tab cards

[exezbcz]

looks good to me!

[roiLeo]

I don't really like adding opacity on hover, normally I would have seen the opposite.
Duplicate theme variable code :/
This libs/ui is starting to be less sustainable.

otherwise lgtm ✅

[daiagi]

Duplicate theme variable code :/
This libs/ui is starting to be less sustainable.

True

[exezbcz]

I don't really like adding opacity on hover, normally I would have seen the opposite.
Duplicate theme variable code :/
This libs/ui is starting to be less sustainable.

otherwise lgtm ✅

What do you mean by seeing the opposite? Would you remove the hover opacity completely? Thanks for feedback!

[roiLeo]

What do you mean by seeing the opposite?

Opacity by default, remove opacity on hover. I find it strange to add opacity on something that should stand out.

Would you remove the hover opacity completely? Thanks for feedback!

I would reintroduce a slight zoom on hover effect

[exezbcz]

Opacity by default, remove opacity on hover. I find it strange to add opacity on something that should stand out.

• the opacity is mainly for future cart button over the img and other functionalities
• that means it will stands out

I would reintroduce a slight zoom on hover effect

• yup, that sounds good, I would leave it to another version tho

[yangwao]

I don't really like adding opacity on hover, normally I would have seen the opposite.

Inspiration was coming from https://www.tensor.trade/trade/oogy_pods this is way how we implemented it in now in visual way, as current animation when you are hovering with cursor over are quite slow nad missing, also removing that sharp borders was intrusive

I would reintroduce a slight zoom on hover effect

yeah we had this zoom, which I was thinking, it's possible option. I would like to keep it as basic as possible those animation tbh to not disturb user. Other experiments we can try in fandoms shops for example, let's see, there is room accommodate lot of approaches I guess per collection.

[yangwao]

pay 60 usd

quick delivery on first try! like it!

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $60 @ 37.46 USD/KSM ~ 1.602 $KSM
🧗 EfmnRhHaQqfT3phm4cUCHCU3gFVDoSPR1U9WXzMRQBMqZ4L
🔗 0x6e7450ef76cd641d5490c0bebf65d058409409124e2baa0912f369a56fc5c5a0

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