Mozilla UI balrog

[godplayer56]

I have updated the dashboard file by introducing the mozilla logo and have also updated the typography to use the mozilla-protocol

This PR is for the issue #2976

I request a review and suggestions for this PR @gabrielBusta @gbrownmozilla .

[godplayer56]

Hey @bhearsum @gabrielBusta . I was trying to fix the ui-build error which got resolved after I removed the group parameter but I am not able to fix the error with ui-tests.

It shows the same error when I try to run docker exec balrog-balrogui-1 yarn lint --fix for fixing lint errors, but it just displays the errors without correcting them.

How should I resolve these errors? Plus should I do some other changes to update the ui?

[godplayer56]

Updating the color palette and removing balrog.svg from the background will go a long way in making balrog look more in line with Mozilla Protocol

Yes I agree! The color palette would look nicer and in line with the protocol. I'll update the theme to use the protocol palette.

[godplayer56]

@gabrielBusta I have removed the balrog.svg file from the background and updated the pallette, do we need anymore changes?

[godplayer56]

Hey @gabrielBusta just a follow up on this. 😅

[godplayer56]

I can't see the Logo or the pages' {title}. The Logo component should be modified for use here. balrog doesn't have a group concept like shipit. You may be able to display different protocol logos based on some value in the Dashboard component's props. Or you could simplify the Logo component to always show the Mozilla "m".

Ok I'll update the logo component :+1:

[godplayer56]

It looks good to me @godplayer56

Just one more question before I land it. I am not sure what deleting some of the pallete styles does. Should we update those to protocol colors or leave them as is?

deleting them reverts the theme to what it was before, I guess it would be better if we update those to protocol colors.

What colors should we use as protocol colors?

[godplayer56]

@gabrielBusta This is what I see when I start the docker containers. When I inspect the webpage I see that the logo is present but there is some issue with its rendering. Can you provide me with suggestions on what I should do to resolve this?(I have updated the logo component by removing the groups concept)

[godplayer56]

@gabrielBusta I have updated the code to include the mozilla family logo as the simple "m" logo wasn't rendering maybe because of the pallette colours we have chosen :sweat_smile: . Also should I update the pallette and to what colours?

[Leo-ainy]

Enhancing Balrog's visual alignment with the Mozilla Protocol involves a significant improvement by updating the color palette and eliminating the background's balrog.svg. This step will contribute to a more cohesive and harmonious appearance. https://github.com/mozilla-releng