Lf 4629 [nice to have] implement map footer redesign

[Duncan-Brain]

Description

Updates the footer styles + icons for map.

Notes:

• Added a new button theme styles type but it feels like Button belongs in core components not Form. And maybe there is a better name than 'location-menu' taken from figma.
• Considered adding "selected" option to match "active" state on button instead of custom styles.

Jira link: LF-4629

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• Passes test case
• UI components visually reviewed on desktop view
• UI components visually reviewed on mobile view
• Other (please explain)

Checklist:

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• The precommit and linting ran successfully
• I have added or updated language tags for text that's part of the UI
• I have added "MISSING" for all new language tags to languages I don't speak
• I have added the GNU General Public License to all new files

[SayakaOno]

I haven't reviewed all files yet, but we need to display the filter and download buttons for non-admins 😄

[Duncan-Brain]

Thanks @SayakaOno I misread that conditional render! That makes a lot of sense 😂

[Duncan-Brain]

Duncans attention to detail strikes again -- should be fixed! ... but it looks like pnpm or actions is acting up again.

[SayakaOno]

I left comments, but it looks great!
I think the button height should be 64px, and we may need custom styling for the mobile view...?

[Duncan-Brain]

@SayakaOno thanks for review!

I am hesitant to set the height to 64px and since the width is normally fixed and would want to show all words if possible.

I chose to flex on height for label text because other languages might be much longer and I wanted to avoid truncating unless absolutely necessary. I added those lines for the long single word case.

Flex button item width with fixed menu width was also considered but if one of the text is much longer than the others it hogs the menu and squishes the others.

If you have any advice for me about this case, or how I would use the 64px height I would definitely appreciate it!

[antsgar]

I don't think the button needs to have a fixed 64px height per se but it's the vertical margins that are off -- they are 4px currently and should be 10px per the Figma designs. When those margins are updated, the button height ends up being pretty close to 64px in English where there's no text wrapping.

[antsgar]

Added a couple of comments but it looks great ❤️

[Duncan-Brain]

So we discussed with Loic today to remove the label from the mobile view and to truncate with an ellipsis if the text is too long -- no wrapping.

So that is updated. I bumped up the vertical padding to 8px (Loics magic padding margin number) curious though how you got 10px, clicking on the icon and text showed no margin/padding and this is what I was seeing for both:

[antsgar]

@Duncan-Brain re how I got the 10 px, I don't know if I ever shared this, but on Figma if you click on an element and press the Option key and then hover over other elements, you get the distance from that element to anything else. I can't take a screenshot because I don't know how to take on while keeping the effect 😂 but here's the tutorial from FIgma https://help.figma.com/hc/en-us/articles/360039956974-Measure-distances-between-layers

[Duncan-Brain]

@antsgar thanks for the link will remember to look for missing spacing next time.

@SayakaOno I see the 64px on the individual button you were talking about too now! I deleted it originally... and it would have maybe avoided the spacing issue Anto also noticed. Wondering if you were saying there are missing css properties that are on figma?

I typically try to remove as much Figma css as possible because it can be from parent or globals or it is not following html spec (notice the gap: -4px which is not possible) . So I try to just use it as a guideline.

[SayakaOno]

Looks great!

Wondering if you were saying there are missing css properties that are on figma?

No, I wasn't. I agree with your approach, we should have as little CSS as possible! (Edit: I’m not sure if that’s always true, but it’s my preference 😂)

[SayakaOno]

You can use @mixin truncateText() next time!

[Duncan-Brain]

Oh thanks! I didn't know about that one! thanks 🙏