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

fix GitHub logo for dark mode #3791

Closed
wants to merge 2 commits into from

Conversation

nerdynikhil
Copy link
Contributor

@nerdynikhil nerdynikhil commented Feb 20, 2023

Description

This PR fixes #3785

Notes for Reviewers

Before
Screen Shot 2023-02-20 at 6 13 40 PM

After
Screen Shot 2023-02-20 at 6 11 50 PM

I used only the existing assets. However, the light logo seems to be a bit larger. Need advice on this.

Signed commits

  • [x ] Yes, I signed my commits.

Signed-off-by: Nikhil Barik <36399086+nerdynikhil@users.noreply.github.com>
Signed-off-by: Nikhil Barik <36399086+nerdynikhil@users.noreply.github.com>
@l5io
Copy link
Contributor

l5io commented Feb 20, 2023

🚀 Preview for commit 5940c06 at: https://63f3746aeeaea55a548d23b4--layer5.netlify.app

Copy link
Member

@UtkarshMishra12 UtkarshMishra12 left a comment

Choose a reason for hiding this comment

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

@nerdynikhil You are right, the logo should be the same in both modes. Please change it as per the needs.

@nerdynikhil
Copy link
Contributor Author

@nerdynikhil You are right, the logo should be the same in both modes. Please change it as per the needs.

Should I resize it myself and upload it to assets so that it can be used? @UtkarshMishra12

@UtkarshMishra12
Copy link
Member

@nerdynikhil You are right, the logo should be the same in both modes. Please change it as per the needs.

Should I resize it myself and upload it to assets so that it can be used? @UtkarshMishra12

@nerdynikhil Yes, you can. Or you can look into the assets for the image, maybe you'll be able to find one.

@nerdynikhil
Copy link
Contributor Author

Yes, I tried src/assets/images/socialIcons/github_white_trim.svg but this has a white outline that looks absurd. I will upload a new resized asset.

@Chadha93
Copy link
Member

@nerdynikhil Let's discuss this on the Websites call. Please add this as an agenda item in the meeting minutes if you would. :)

Copy link
Contributor

@GaganpreetKaurKalsi GaganpreetKaurKalsi left a comment

Choose a reason for hiding this comment

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

Hey @nerdynikhil, resizing the assets would work. Also the MeshMap icon is a bit larger than the others because of it's different aspect ratio. Let's have it consistent as well, height: 48px, width: 48px.

Also let's try to keep the PR free from indentation changes. It just makes reviewers life a little easy 😀

@AbhiiVops
Copy link

Hello @GaganpreetKaurKalsi ,

I hope this message finds you well. I am writing to express my interest in contributing to the project and fixing issue #3791, which is related to fixing the GitHub logo for dark mode.

I have experience working with CSS and web design, and I believe I can help address this issue. I have also read through the project's contribution guidelines and code of conduct, and I'm committed to following the established best practices and protocols.

Would it be possible to assign this issue to me? I would be happy to collaborate with other team members and ensure that the logo is properly updated for dark mode users.

Thank you for your consideration, and I look forward to contributing to the project.

Best regards,
Abhishek Bhattacharjee

@nerdynikhil
Copy link
Contributor Author

Hey reviewers, I started a thread a Slack on this. Kindly take a look at it and advice. https://layer5io.slack.com/archives/C015QJKUMPU/p1677522842958589

@nerdynikhil
Copy link
Contributor Author

nerdynikhil commented Mar 19, 2023

I’m guessing the page http://localhost:8000/cloud-native-management/meshery/operating-service-meshes itself has some CSS issue which is causing SVGs to appear larger in dark mode. For instance look the meshery-operator-dark.aabaafd9.svg image closely while switching to dark mode. The same happens with the Github logo.

Likewise, the existing Github logo (svg) in assets would suffice without any resizing if we fix this, but we probably need some minor CSS change.

ezgif-1-3e992acad2 (1)

@Chadha93
Copy link
Member

@nerdynikhil Let's discuss this on the Websites call. Please add this as an agenda item in the meeting minutes if you would. :)

@nerdynikhil
Copy link
Contributor Author

nerdynikhil commented Apr 14, 2023

@hirentimbadiya is working on this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

[UI] The GitHub logo should be replaced with light-version when site in dark-mode
7 participants