front: update btn map in scenario page and convert rem to px in css map file

[theocrsb]

closes https://github.com/osrd-project/osrd-confidential/issues/670

buttons list mockup: https://www.sketch.com/s/2fb064cd-c483-46ac-bd30-72705fd63e75/p/9559F6FC-69EE-4DB8-BE1A-77F60F10C97F/canvas#Inspect

button mockup: https://www.sketch.com/s/7b92c9be-3fa6-4af7-b8c6-66b63fec08fa/p/AB9D17BF-0EBF-4C30-A75D-0D6BB5C0BA68/canvas#Inspect

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

Attention: Patch coverage is 0% with 71 lines in your changes missing coverage. Please review.

Project coverage is 38.20%. Comparing base (a89f540) to head (5235fd8).
Report is 1 commits behind head on dev.

Files with missing lines	Patch %	Lines
front/src/common/Map/Buttons/MapButtons.tsx	0.00%	45 Missing ⚠️
front/src/common/Map/Buttons/MapButton.tsx	0.00%	23 Missing and 1 partial ⚠️
...ents/SimulationResultsMap/SimulationResultsMap.tsx	0.00%	1 Missing ⚠️
...ainschedule/components/ManageTrainSchedule/Map.tsx	0.00%	1 Missing ⚠️

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@           Coverage Diff           @@
##              dev    #9798   +/-   ##
=======================================
  Coverage   38.20%   38.20%           
=======================================
  Files         997      992    -5     
  Lines       92198    92158   -40     
  Branches     1191     1186    -5     
=======================================
- Hits        35221    35210   -11     
+ Misses      56521    56497   -24     
+ Partials      456      451    -5     

Flag	Coverage Δ
editoast	73.36% <ø> (-0.04%)	⬇️
front	20.18% <0.00%> (+0.01%)	⬆️
gateway	2.18% <ø> (ø)
osrdyne	3.28% <ø> (ø)
railjson_generator	87.49% <ø> (ø)
tests	87.00% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[clarani]

As you are re-writting these buttons, I think it would be better to do a bit of refacto :)
All these buttons are almost the same, the only things that change are the function onClick, the text in the span + its translation, the icon and the data-test-id.

You can create a generic component MapButton which will take only these 4-5 props, and in MapButtons, render this new component with the correct props if we are using the newButtons.

If you do this, you won't need to modify all the existing Buttons

[theocrsb]

As you are re-writting these buttons, I think it would be better to do a bit of refacto :) All these buttons are almost the same, the only things that change are the function onClick, the text in the span + its translation, the icon and the data-test-id.

You can create a generic component MapButton which will take only these 4-5 props, and in MapButtons, render this new component with the correct props if we are using the newButtons.

If you do this, you won't need to modify all the existing Buttons

You're right, I just proposed a refacto in my fixups :)

[anisometropie]

I think all the icons aren’t centered

[theocrsb]

I think all the icons aren’t centered

Thanks, it's done

[clarani]

There is a bug in the old buttons :/ Look at the compass button

[theocrsb]

There is a bug in the old buttons :/ Look at the compass button

Thanks, I just fixed

[theocrsb]

It doesn't yet have “hover” and “active” behavior.
I've just checked with @thibautsailly , the mockup are in progress.

[clarani]

LGTM ✅ Only left 2 small comments, you can close them once you have fixed them and merge without a new approval 👍 :)