NAT-310: GEANT colors

I cannot manage to run the dockerized GUI properly myself because for some reason the environment variables are not being applied despite being correctly passed.

jorge@jorge03:~$ sudo docker exec -it 8 /bin/sh
/app # echo $REACT_APP_BACKEND_URL
"http://192.168.200.202:3000"
/app # echo $BACKEND_URL
"http://127.0.0.1:8080"

So what I did is, I checked the changes in a local copy of the orchestrator-core-gui repository, and then applied them in the Dockerfile by copying the required CSS files that had to be changed from the original. I built the image to make sure there were no errors. I had to change a bit the suggested color for the text for the case of the dark theme, as otherwise it could be barely read. You can see the looks here: https://jira.software.geant.org/browse/NAT-310

requested review from @karel.vanklink

changed the description

Looking good in the screenshots! Is this from the GÉANT branding guidelines by any chance? The colors look familiar (GÉANT blue, and GÉANT red)

I'll try and run it locally and let you know how it goes on my side

Simone did the work of finding out the RGB colors actually, I borrowed them from his comment. Just had to adjust a bit some blue text in the dark theme.

When I checkout your branch and run the following two commands, I am able to use the GUI at localhost:8000

docker build . -t gso-gui:test
docker run -it --rm --env-file .env.local -p 8000:8080 gso-gui:test

For the design itself, I have two suggestions

As you can see in the attached screenshot, all of the text is GÉANT red / pink, this is quite hard to read, and a used might think these are all clickable links. Would it be possible to have all "regular" text appear in dark blue, and hyperlinks in pink? So, the inverse of what it is right now.

Perhaps the generated documentation of <goat/gap/lso> could be something to compare to.

Second, in the upper right corner, the checkbox is a teal color that doesn't really mix with the rest, would it be possible to change this?

It's strange, but I have only tested it from outside localhsot as I don't have a browser in the VM where I run the container. I've run it the same way as you. -p works well as expected, but the env variables for some reason don't seem to be applied (apart from the screenshot above, the service is always available in port 8080 even if I put 3000 in REACT_APP_BACKEND_URL)

But anyway, if you can check that it's ok that should be good. Thanks!

Ok, I'll look at flipping the text colors, and try to locate the teal icons.

resolved all threads

added 2 commits

• 58e0ca74 - Add favicon
• 9137cf63 - Customise colors

Compare with previous version

merged