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

chore: make silhouttte svgs opaque #704

Merged
merged 2 commits into from
Oct 8, 2024
Merged

chore: make silhouttte svgs opaque #704

merged 2 commits into from
Oct 8, 2024

Conversation

im-adithya
Copy link
Member

@im-adithya im-adithya commented Sep 25, 2024

Should be easier to adjust opacity now using css

Light Mode

Dark Mode

Screenshot 2024-09-26 at 1 45 14 PM Screenshot 2024-09-26 at 1 45 30 PM

<svg xmlns="http://www.w3.org/2000/svg" width="667" height="800" fill="none">
<path fill="gray"
Copy link
Contributor

Choose a reason for hiding this comment

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

I think we should also use fill=currentColor" so we can specify it. Gray seems to not be so clear in light vs dark mode.

Copy link
Member Author

@im-adithya im-adithya Sep 25, 2024

Choose a reason for hiding this comment

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

We should make it into an icon if we want thi currentColor to work, because we are currently passing this svg as an src to img tag , should I make this white instead of gray? It would look like this then:

fill = "white"

fill = "gray"

Screenshot 2024-09-25 at 11 54 16 AM Screenshot 2024-09-25 at 12 59 07 PM

Current

Screenshot 2024-09-25 at 11 56 59 AM

Copy link
Contributor

Choose a reason for hiding this comment

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

@im-adithya this won't work on dark mode, right?

Actually I was wrong, if gray is completely half way between black and white it should be ok. We might just need to make the opacity stronger in light mode vs dark mode, since it seems less visible there.

HTML / CSS defined gray at the midpoint of the 8-bit gray scale (128,128,128).

Copy link
Member Author

Choose a reason for hiding this comment

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

Ah yes it wouldn't, but actually the current one as is looks good both on Light Mode and Dark Mode

Light Mode

Dark Mode

Screenshot 2024-09-25 at 12 58 06 PM Screenshot 2024-09-25 at 12 58 43 PM

Copy link
Contributor

Choose a reason for hiding this comment

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

@im-adithya the light and dark mode are back to front, but the one with the black background is very hard to see the silhoutte. Can we use a different opacity on that one? e.g. opacity-40 dark:opacity-20

Copy link
Member Author

Choose a reason for hiding this comment

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

Done! Looks better now!

Light Mode

Dark Mode

Screenshot 2024-09-26 at 1 45 14 PM Screenshot 2024-09-26 at 1 45 30 PM

Copy link
Contributor

@rolznz rolznz left a comment

Choose a reason for hiding this comment

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

utACK

@im-adithya im-adithya merged commit 038e6b2 into master Oct 8, 2024
9 checks passed
@im-adithya im-adithya deleted the task-silhouttes branch October 8, 2024 13:34
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