Partner svg's not visible in dark/light mode

[ayushthe1]

Description

On https://layer5.io/partners page ,some svg's aren't visible in light/dark mode.
Below are the ss of svg's having issues :

On Dark-mode :

On Light mode :

Expected Behavior

Screenshots

Environment:

• Host OS:
• Browser:

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma.
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[niranjan-kurhade]

I would like to work on this issue. Please assign it to me.

[randychilau]

Hi @niranjan-kurhade,

Thanks for working on this issue.

I worked on the SVGs on this partner page, and I made the mistake that is causing the problem.

if you are still actively troubleshooting this issue and do not mind me providing a hint:

I would say the cause of the issue is in this file and it is a syntax error regarding the SVGs.

Feel free to let me know if you have any questions, would like another hint, or if I can be of any assistance on this issue.

Cheers,
Randy

[niranjan-kurhade]

Hi @niranjan-kurhade,

Thanks for working on this issue.

I worked on the SVGs on this partner page, and I made the mistake that is causing the problem.

if you are still actively troubleshooting this issue and do not mind me providing a hint:

I would say the cause of the issue is in this file and it is a syntax error regarding the SVGs.

Feel free to let me know if you have any questions, would like another hint, or if I can be of any assistance on this issue.

Cheers, Randy

Thanks, Randy.
I have got the file and the hint to fix the issue already.
Actually, I am having issues setting up Layer5 locally, that's why I couldn't fix the issue for a long time.
I'll try setting up Layer5 on my local system within 1-2 days, If it doesn't happen, I'll unassign myself.

[randychilau]

Hi @niranjan-kurhade,

Thanks for your reply.

Sounds good. Let me know if I can help with issues setting up locally. I have issues with setups and it can be challenging/frustrating when things do not go according to the instructions.

One thing mentioned in the CONTRIBUTING.md to note is:

Cloning the repo with all its history results in a ~6 GB download. If you don't need the whole history you can use the depth parameter to significantly reduce download size.

---

There are also various ways to ask questions to the community about getting setup as noted in the Newcomer's guide:

If you need some additional help, please join Layer5 discussion forum or find your way to the #newcomers channel in our Slack workspace. Introduce yourself and ask questions.

As you can see this topic is discussed on both:

Good luck on the setup.

Cheers,
Randy

[niranjan-kurhade]

Thanks, Randy for your help,
I had already set up the project locally a few weeks back using --depth=1, that time it worked but now it isn't working.
Also tried using my fork,
Using WSL,
and even Github Codespaces.
Now all the methods give me the same error - running gatsby-plugin-sharp.image_processing 99%.
Is there any other way remaining? 😅.
I'll again go through the discussion forum if I can find anything or I'll put a message on Slack.

[goldfishdolphin]

It stops at sharp.image_processing for a long time when you run make setup; make site; first time.

[randychilau]

Hi @niranjan-kurhade,

Sorry about the delay in responding.

Sounds like you have done a good job trying various methods.

I just tried the Codespaces route and with the npm run build, it gets killed during the image processing:

If there are still issues and you are interested in troubleshooting this with me, let's start from the beginning and try to get some additional information.

If possible I would delete your local layer5 repo and start from the beginning again with the basic instructions:

1. Go to your terminal
2. run command: git clone --depth=1 https://github.com/layer5io/layer5.git
3. after it is finished downloading, navigate to the project directory: cd layer5
4. run command: npm install
5. after it is finished installing, run command: DEBUG=gatsby:gatsby-plugin-sharp npm run build

this will give some info on what image things get stalled on, example:

It seems from some of the threads reporting this issue [1, 2], the operation requires a lot of processing, there may be some fixes in the posts you can try.

note: my machine specs are basic and I have been able to successfully run Layer5 builds)

Let me know how it goes, and we can go from there.

Cheers,
Randy

[niranjan-kurhade]

Hey Randy, Thanks for your response! I'll try and inform you about it.

[vishalvivekm]

What's the update on this @niranjan-kurhade ?
let's not put off addressing this issue any longer.

[niranjan-kurhade]

What's the update on this @niranjan-kurhade ? let's not put off addressing this issue any longer.

You can work on this issue for now, I am unassigning myself, Trying to setup Layer5

[vishalvivekm]

#4222 (comment)
@sambhavgupta0705 assigning this to you.
Some great comments by @randychilau above

[goldfishdolphin]

If no one is working, can you please assign me this issue.

[vishalvivekm]

If no one is working, can you please assign me this issue.

Oh,
Yes, yes
Really sorry @goldfishdolphin, completely missed your message.
@sambhavgupta0705 would hafta assign this to @goldfishdolphin , as she's the second one asking for the assignment: FCFS.

[sambhavgupta0705]

Ok @vishalvivekm
If @goldfishdolphin finds any difficulty then I can help

[randychilau]

Hi All,

@vishalvivekm, thanks for coordinating everything!

@goldfishdolphin, as I mentioned earlier in this thread I am available as a resource if you have any questions regarding this issue.

@niranjan-kurhade, after Codespaces didn't work out, I tried another CDE, GitPod and was able to successfully install, develop, and build with my Layer5 fork online using the free basic settings. So you might consider giving that a try, let me know if you have any questions.

cheers,
Randy

[goldfishdolphin]

Thanks Randy. I usually run code on my local machine but I ll try Gitpod as well.

[goldfishdolphin]

Hi @randychilau I tried to make a separate ReactComponent for dark mode CNFC but it is not being displayed.
On this page dark and light mode images are the same. Is there any other way to approach it?

[sambhavgupta0705]

Hey @leecalcote I think only the cncf logo is fixed
There were other logos also so we need to reopen this issue

[randychilau]

HI Everyone,

Thanks for looking into this issue @goldfishdolphin.

You mentioned:

On this page dark and light mode images are the same. Is there any other way to approach it?

As you noticed, we are using one SVG file per partner on this page for light and dark mode, this is intentional because we want the SVG to respond to the theme changing between light and dark mode.

This is documented in the Changing SVG according to theme section of CONTRIBUTING.md.

However there is a syntax error that is preventing the SVG colors from changing on this page. The code responsible for the changing colors is located in this file, more specifically in this section:

Unfortunately I missed this error when modifying the code, but there is a css syntax error in the section above. Click on Reveal Error below to see the issue:

Reveal Error

CSS syntax states:

Multiple CSS declarations are separated with semicolons

There is a missing semi-colon after the fill properties:

If you correct the error in both instances and npm start, the SVGs on the page will change correctly.

svg.webm

@leecalcote has merged PR#4249 and closed this issue, and as @sambhavgupta0705 has commented there are other partner SVGs malfunctioning. I will leave it to the organizers to decide how best to proceed.

@sambhavgupta0705 If you are interested in other issues with this page, here are two more:

1. the Citrix SVG is not responsive (I missed converting this SVG when I worked on this page), so the SVG needs to be modified and added in the same way as the other partners.
2. If you notice in the video above, the partner headings are changing colors faster than the rest of the page, this needs to be fixed so that the color changes in sync with the rest of the page for smooth uniform transition.

Otherwise I am happy to handle the above issues if they are not taken up in the next few days.

Cheers,
Randy

[sambhavgupta0705]

Hey @randychilau
I see that there are many errors on this page and I would like to resolve it .
I need to see how the svg changes with the change in theme.

[goldfishdolphin]

Thank you @randychilau for explaining everything so well.

[sambhavgupta0705]

@randychilau should I make a new issue with all details or this issue should be reopened?

[randychilau]

Hi @sambhavgupta0705,

Thanks for your interest in working on this page.

Let's split up the tasks.

You handle the task regarding:

The partner headings are changing colors faster than the rest of the page, this needs to be fixed so that the color changes in sync with the rest of the page for smooth uniform transition.

Please create a new issue for this, and I believe I can assign you the task.

I'll handle the Citrix SVG and the CSS issue for the other partner SVGs.

Thanks,
Randy

[goldfishdolphin]

@randychilau have you fixed the CSS for the partners page?

[randychilau]

Hi @goldfishdolphin,

Thanks for your message.

The issues on the partner page regarding other svgs, CSS and light/dark mode have been resolved in PR #4296 and awaiting review.

Cheers,
Randy