fix: unlockable touchups

[Jarsen136]

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

Needs Design check

• @exezbcz please review

Context

• Closes unlockable touchups  #6186
• Requires deployment <snek/rubick/worker>

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

• My DOT address: Payout

Screenshot 📸

• My fix has changed UI

Copilot Summary

🤖 Generated by Copilot at b451db7

The pull request refactors and improves the unlockable collection feature of the NFT gallery. It introduces a custom hook useCountDown to handle the countdown timer logic and interval. It also enhances the layout and style of the unlockable collection components, such as UnlockableCollectionInfo, UnlockableContainer and ImageSlider. It adjusts the height and color of the NeoButton component to match the design.

🤖 Generated by Copilot at b451db7

Sing, O Muse, of the skillful coder who changed the slider's border
To match the k-blue of the theme, and make the active image gleam
Like the bright-eyed Athena, when she favors the heroes of men
With her wisdom and cunning, and guides them to victory stunning.

[kodabot]

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

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	78d34b1
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64870d411bf7ab0008571238
😎 Deploy Preview	https://deploy-preview-6199--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.

[reviewpad]

AI-Generated Summary: This pull request includes changes related to unlockable touchups and improvements. The modifications affect 6 files: CountdownTimer.vue, ImageSlider.vue, UnlockableCollectionInfo.vue, UnlockableContainer.vue, useCountDown.ts, and NeoButton.scss. The changes mainly involve refactoring the countdown function, improving the appearance of ImageSlider, updating the UnlockableCollectionInfo component, enhancing the UnlockableContainer, creating the useCountDown utility, and adjusting the NeoButton styling. Overall, this patch aims to improve the user experience and functionality of the unlockable features in the application.

[exezbcz]

schedule

• so, if I understand correctly, we won't have 10 minutes window each hour and it will be basically continuous 1-hour windows
• rephrase please the explainer of the schedule that there are only 10 items in every phase - every phase has 60 minutes

[Jarsen136]

schedule

• so, if I understand correctly, we won't have 10 minutes window each hour and it will be basically continuous 1-hour windows
• rephrase please the explainer of the schedule that there are only 10 items in every phase - every phase has 60 minutes

I'm not sure about the minting rule tbh. I have changed the explanation text to We will have a 60-minute window every phase, each featuring only 10 exclusive items.

[exezbcz]

@Jarsen136 yup that is good, we will change the schedule and game mechanics in the future

[vikiival]

very nice!

[codeclimate]

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

View more on Code Climate.

[vikiival]

pay 30 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $30 @ 4.5 USD/DOT ~ 6.667 $DOT
🧗 16SjUbGKSdjCdWTy3NNT3JxbRVGGqD4mwkHpc6BD9U2Rp29Z
🔗 0x2752850e4b3558305bd0a87d6b2a7517ccfe7bcce5940f44b8b397f34d1f041d

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