Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Cart icon scalling in quick actions #8145

Merged
merged 7 commits into from
Nov 23, 2023
Merged

fix: Cart icon scalling in quick actions #8145

merged 7 commits into from
Nov 23, 2023

Conversation

Jarsen136
Copy link
Contributor

@Jarsen136 Jarsen136 commented Nov 18, 2023 •
edited
Loading

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

Needs Design check

Context

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

Screenshot 📸

  • My fix has changed UI
image

Copilot Summary

🤖[deprecated] Generated by Copilot at c0c42aa

Improved the UI design and usability of the GalleryItemBuy component by adjusting its CSS properties. Modified the outline-offset and border-width properties in the ktheme mixin for the component and applied the same changes to its variant in the ItemsGridImageTokenEntity component.

🤖[deprecated] Generated by Copilot at c0c42aa

To make the buy button more clear
We tweaked the ktheme mixin here
We changed the offset
And the border we set
To match the outline and appear

@Jarsen136 Jarsen136 requested a review from a team as a code owner November 18, 2023 17:32
@Jarsen136 Jarsen136 requested review from preschian and roiLeo and removed request for a team November 18, 2023 17:32
@netlify Netlify
Copy link

netlify bot commented Nov 18, 2023 •
edited
Loading

✅ Deploy Preview for koda-canary ready!

Name Link
🔨 Latest commit 955a591
🔍 Latest deploy log https://app.netlify.com/sites/koda-canary/deploys/655cfb6e0390e6000895680d
😎 Deploy Preview https://deploy-preview-8145--koda-canary.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link
Collaborator

kodabot commented Nov 18, 2023

SUCCESS @Jarsen136 PR for issue #8142 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

@reviewpad Reviewpad
Copy link
Contributor

reviewpad bot commented Nov 18, 2023

AI-Generated Summary: This pull request contains fixes related to the UI of the cart icon in quick actions. The changes involve modifying some CSS properties in three Vue components: GalleryItemBuy.vue, ItemsGridImage.vue, and ItemsGridImageTokenEntity.vue. The button's width has been fixed in GalleryItemBuy.vue to prevent scaling issues. Additionally, the outline-offset and border-width properties have been updated in ItemsGridImage.vue and ItemsGridImageTokenEntity.vue to improve display. These are minor but impactful UI changes geared towards enhancing visual consistency and user experience.

@reviewpad reviewpad bot added small Pull request is small waiting-for-review labels Nov 18, 2023
@exezbcz
Copy link
Member

exezbcz commented Nov 19, 2023 •
edited
Loading

cart != card

the card is completely fine, it is about the cart icon that is jumping all over the place when active

@Jarsen136
Copy link
Contributor Author

cart != card

the card is completely fine, it is about the cart icon that is jumping all over the place when active

Oh I see.

I found that it's because these two icons have different sizes. One is 22px but the other is 21.4px. Could you pls unify them on the figma, so that we can upload these icons again? @exezbcz

image

roiLeo
roiLeo approved these changes Nov 20, 2023
View reviewed changes
Copy link
Contributor

@roiLeo roiLeo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need button-height class if you use prop size="large"

components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemBuy.vue Show resolved Hide resolved
@exezbcz
Copy link
Member

exezbcz commented Nov 20, 2023

One is 22px but the other is 21.4px. Could you pls unify them on the figma, so that we can upload these icons again? @exezbcz

I tried to export it in the frame with same size with its core icon same as well. Will try again I guess

@exezbcz
Copy link
Member

exezbcz commented Nov 20, 2023

not sure if the svg will get exported inside the frame that has padding
image

both icons there are with 20x20 px fixed frame
image
image

these two exports have different size or?
icon-fa62
custom-shopping2

cc @Jarsen136

@Jarsen136
Copy link
Contributor Author

these two exports have different size or? icon-fa62 custom-shopping2

cc @Jarsen136

Thank you! These two icons have the same size.

@Jarsen136
Copy link
Contributor Author

these two exports have different size or? icon-fa62 custom-shopping2

@preschian Could you please help to upload these two icons to fontawesome? I have no account for it by the way.

Their original id: fa-striked-out-cart-shopping fa-shopping-cart-outline-sharp

@roiLeo
Copy link
Contributor

roiLeo commented Nov 21, 2023

@preschian Could you please help to upload these two icons to fontawesome? I have no account for it by the way.

Their original id: fa-striked-out-cart-shopping fa-shopping-cart-outline-sharp

DM me, I can provide credentials

@Jarsen136
Copy link
Contributor Author

✅ Uploaded. It should work well now. @exezbcz

Kapture 2023-11-22 at 00 12 27

@roiLeo roiLeo added S-code-lgtm-✅ code review guild has reviewed this PR and it's code is approved S-works-for-me-✅ qa-guild has tested PR from end user perspective and functionality worked and removed waiting-for-review labels Nov 21, 2023
@exezbcz
Copy link
Member

exezbcz commented Nov 21, 2023 •
edited
Loading

@Jarsen136 smooth! thank you

image

  • could you please just center it out now, then it is perfect

image
plus this centered in the square

@Jarsen136
Copy link
Contributor Author

@Jarsen136 smooth! thank you

image

  • could you please just center it out now, then it is perfect

image plus this centered in the square

✅ DONE

@codeclimate CodeClimate
Copy link

codeclimate bot commented Nov 21, 2023

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

View more on Code Climate.

@sonarqubecloud SonarQubeCloud
Copy link

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.9% 0.9% Duplication

@yangwao
Copy link
Member

yangwao commented Nov 23, 2023

Thanks!
pay 30 usd

@yangwao yangwao merged commit 1ae87db into kodadot:main Nov 23, 2023
15 checks passed
@yangwao
Copy link
Member

yangwao commented Nov 23, 2023

😍 Perfect, I’ve sent the payout
💵 $30 @ 5.21 USD/DOT ~ 5.758 $DOT
🧗 16SjUbGKSdjCdWTy3NNT3JxbRVGGqD4mwkHpc6BD9U2Rp29Z
🔗 0x5e5a79f4db9a64ea095733a44ee2fc3b4389f9e2761284e8433613a0ed9e2eff

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

@yangwao yangwao added the paid pull-request has been paid label Nov 23, 2023
This was referenced Nov 23, 2023
Merged
Merged
Merged
Merged
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@roiLeo roiLeo roiLeo approved these changes

@preschian preschian preschian approved these changes

Assignees
No one assigned
Labels
paid pull-request has been paid S-code-lgtm-✅ code review guild has reviewed this PR and it's code is approved S-visual-ok-✅ S-works-for-me-✅ qa-guild has tested PR from end user perspective and functionality worked small Pull request is small
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Cart icon scalling in quick actions
6 participants
@Jarsen136 @kodabot @exezbcz @roiLeo @yangwao @preschian