Updated logo, hamburger icon, margins header and main.

[Martine04384]

What does this PR do?

Updated logo and hamburger icon on sm and md screens
Updated margins in main between header and breadcrumbs and main/button and footer om sm and md screens.

Description of Task to be completed?

Compare and test.

How should this be manually tested?

Check in the browser and compare to Figma.

Any background context you want to provide?

A detected discrepancy between Figma and the file was detected after testing; an update was needed.

[inastefansdottir]

This looks fantastic, Martine! It's getting really close to matching the Figma file, great job!

I noticed that some links, like the logo, aren’t showing up due to the file structure changes. You can fix this by adding ../ to the logo path.

Also, I really like the hamburger menu you're using, but we need to follow the Figma design with pixel perfection. It would be great if you could update it to match the design.

That's all, everything else looks great! Keep up the awesome work!

Picture for reference, current changes on the branch is on the left and the figma design is on the right:

[Martine04384]

Hi, thanks for the feedback!

I tried to fix the footer img on sm screens. Now its the same size as in figma nut a bit zoomed in. I kind of have to choose between the right look of the circles (as above) or the same size (as in this new code). The margins is updated so it looks better but not perfect.

I will have a look at the nav!

[Martine04384]

Hi, seems like one of the hamburger icon "lines" got lost the last time. I've added the line and adjusted the first line to make it look more like in Figma.

The first img is how it looks like now and the second is the Figma design.

[inastefansdottir]

Hi Martine its looking really great, I appreciate you making the changes that I requested! The two circles at the bottom look a lot better and more like the figma file. The hamburger menu looks pretty similar to the figma file with the extra line added, looking at it side by side. There are only tiny things that I noticed that could be improved for it to be perfect! The logo on the mobile version has too much space around it compared to the figma file, if you could lessen the space, that would be perfect. Left pic is live server and right is the figma file:

Also the logo on the mobile version is a bit too small compared to the figma file, could you make it a bit bigger to fit the figma file better? Left pic is live server and right is the figma file:

Its looking so close to perfection!

[Martine04384]

Hi, thanks for feedback! I have some problems with the logo header file. It can only be shown in 64px x 64px or 176px x 176px INCLUDED padding. I have tried everything (containers, scaling, transforming, positioning within a container), and I can't remove the padding with Tailwind. Therefore, I have exported the image file from Figma and added it to the image in our code. But I'm not sure about the quality of the image.

I also noticed a few lines off in the hamburger menu and fixed that.
And noticed the breadcrumbs where mt and mb 12 on lg screens and not 20 as in figma. But my tailwind stopped working again, so let me know if it worked! :)

[inastefansdottir]

Hi Martine, The mobile version looks fantastic! It’s really close to the Figma file, and I don’t think any more changes are needed there. Great work!

Sorry for being so picky, but on the desktop version, the logo still feels a bit small compared to the Figma file, the padding looks fine on the logo, the size just needs to be increased a bit. Also the spacing around the breadcrumbs seems a bit too much. I know you worked on that, but since Tailwind stopped working, that might have caused some issues. If it happens again, you can try running npm run build to fix it. It is really odd that the mobile version has different inputs and text like the "positions" input and the "DOB" text than the desktop version, but I think it was a good idea to follow the mobile version.

I also noticed that the margins inside the box needs to be increased according to the figma file, but I don't want to put too much work on you so I asked Adrian to make a bug issue for me to fix it.

Thanks again for your hard work!

[inastefansdottir]

Hi again, I noticed that there is already a png img of the hamburger menu in the repo, could you use that one instead to keep consistency?

[Martine04384]

Hi, okey now I am finally back with working Tailwind! Makes things a lot easier :D

I have fixed:

• Logo desktop should be as big as in Figma.
• Did a little mixup with my other branch so I have fixed the breadcrumbs again.
• Switch the hamburger icon to img.
• Fixed the size of the box in main and the padding inside this box.
• I also added a bit more space over the H1 and under the button.

Hope this looks better!

[inastefansdottir]

This looks perfect, I appreciate you making all the changes I suggested. I am satisfied with the changes and happy to approve and merge the branch. Great work!