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.

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

feat(web): ✨ Rounded corners on selected assets #3524

Merged

Conversation

paulthvt
Copy link
Contributor

@paulthvt paulthvt commented Aug 2, 2023

I'm not a web developer but I love Immich (thanks a lot by the way) and would be glad to help.
Do not hesitate if I've done things wrong.

Changes

  • Add rounded corner on selected items
  • Fix circle icon transparent background on selection
Before After
image image
chrome_u4K7KDfBrX chrome_RwJUEmrYLF

Add rounded corner on selected items and fix circle icon transparent background on selection
@vercel
Copy link

vercel bot commented Aug 2, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
immich ⬜️ Ignored (Inspect) Visit Preview Aug 3, 2023 6:05am

@@ -96,7 +96,9 @@
{#if disabled}
<CheckCircle size="24" class="text-zinc-800" />
{:else if selected}
<CheckCircle size="24" class="text-immich-primary" />
<div class="bg-[#D9DCEF] dark:bg-[#232932] rounded-full">
Copy link
Contributor Author

@paulthvt paulthvt Aug 2, 2023

Choose a reason for hiding this comment

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

I'm not proud of this part. At firt, I thought to use bg-immich-primary/20 and dark:bg-immich-dark-primary/20 but since the opacity is not 100%, we can still see the thumbnail through the cicle icon. If there's a better solution, I would be glad to update this part.

@alextran1502
Copy link
Contributor

Thank you for the contribution, I like this a lot. The same implementation also just got merged on the mobile app a couple of days back. Can you help run npm run format:fix in the web directory?

@paulthvt
Copy link
Contributor Author

paulthvt commented Aug 3, 2023

Thank you for the contribution, I like this a lot. The same implementation also just got merged on the mobile app a couple of days back. Can you help run npm run format:fix in the web directory?

I'm glad you like it. I saw the PR for the mobile app a few days ago. I was also working to make the same change for the mobile but the other dev was quicker than me 😄. It will look more consistent between the mobile and web app.
I ran npm run format:fix but I might have a setup issue, the command changed all my files ending from CRLF to LF. I'll look into that later.

@alextran1502 alextran1502 merged commit 01210dc into immich-app:main Aug 3, 2023
20 checks passed
@paulthvt paulthvt deleted the feat/rounded-corner-selection branch August 3, 2023 15:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants