feat(web): use tailwinds font size

[silkeholmebonnen]

Issue

AVO-298

Description

The goal of this PR is to use tailwinds font size instead of defining our own. This PR also adds styling for h1, h2, h3 and p, and changes the app sizes in the app to reflect the design.

Preview

Double check

• I have tested my parser changes locally with poetry run test_parser "zone_key"
• I have run pnpx prettier@2 --write . and poetry run format in the top level directory to format my changes.

[silkeholmebonnen]

This PR is a work in progress for me and @Alportan to collaborate.

[madsnedergaard]

Ah wait, now I get why it wasn't a draft - sorry!

[Alportan]

Looks good SIlke! I think it definitely solves quite some accessibility issues with the very small font sizes we have today 🎉

I added a few points in Figma on some screenshots I took from this deployment. Let me know in case you have any follow-up questions. Just leave a comment directly in Figma or here 🙌

Can't wait to release this update 🤩 🚀

[silkeholmebonnen]

I have made some changes based on your comments in figma:) Will you have a look again @Alportan ?

[Alportan]

I have made some changes based on your comments in figma:) Will you have a look again @Alportan ?

Looking good! 🙌 Just last thing I noticed was the segmented control, it works as intended on mobile and smaller resolutions under 1279px width, but for 1280px and above, the control shrinks. I've attached a screenshot for reference:

[VIKTORVAV99]

I have made some changes based on your comments in figma:) Will you have a look again @Alportan ?

Looking good! 🙌 Just last thing I noticed was the segmented control, it works as intended on mobile and smaller resolutions under 1279px width, but for 1280px and above, the control shrinks. I've attached a screenshot for reference:

This arrow seem to have grown bigger as well, which is kind of nice but there is a lot of padding around it as well.

[Alportan]

I have made some changes based on your comments in figma:) Will you have a look again @Alportan ?

Looking good! 🙌 Just last thing I noticed was the segmented control, it works as intended on mobile and smaller resolutions under 1279px width, but for 1280px and above, the control shrinks. I've attached a screenshot for reference:

This arrow seem to have grown bigger as well, which is kind of nice but there is a lot of padding around it as well.

Good catch, maybe it's a tad too big 😅 Let's keep it as it was before for now 🙌

[silkeholmebonnen]

I have made some changes based on your comments in figma:) Will you have a look again @Alportan ?

Looking good! 🙌 Just last thing I noticed was the segmented control, it works as intended on mobile and smaller resolutions under 1279px width, but for 1280px and above, the control shrinks. I've attached a screenshot for reference:

I have adjusted it to always have full width. Was that what you wantedf?

There is still one issue though, on ipad mini it is too wide so it doesn't look very good. I don't know what the best way to solve this is? Should we change it to only say Electricity? That would fix it i guess

[Alportan]

I have made some changes based on your comments in figma:) Will you have a look again @Alportan ?

Looking good! 🙌 Just last thing I noticed was the segmented control, it works as intended on mobile and smaller resolutions under 1279px width, but for 1280px and above, the control shrinks. I've attached a screenshot for reference:

I have adjusted it to always have full width. Was that what you wantedf?

Yes, exactly! 🥳

There is still one issue though, on ipad mini it is too wide so it doesn't look very good. I don't know what the best way to solve this is? Should we change it to only say Electricity? That would fix it i guess

Hmm, indeed! I think we can do that in a PR coming after this one, but even though it looks odd, only 1.9% of users use the tablet version according to Plausible, so not sure it will have a big impact. Of course, we should correct it, but it should be fine!

[silkeholmebonnen]

Okay I think it is ready to be reviewed now then!

[madsnedergaard]

Maybe I'm just old and scared of changes (😅), but I feel that the text-size increases in various places are quite dramatic?

graph title

toggle labels

[madsnedergaard]

What are the thoughts on making this a h2? In Figma it's using text-sm (at least in the file I looked at, sorry if you have another reference)

[Alportan]

Sorry, Figma is all over the place. The reference is in the design system file for now. It is an H2 there 🥳

[Alportan]

Maybe I'm just old and scared of changes (😅), but I feel that the text-size increases in various places are quite dramatic?

Haha, that makes sense. This is just the first step, but generally it is good to have a bigger text size. I do see why you mention this as the text-size does increase dramatically in quite a few places 😅 After this PR is merged, we'll be fine-tuning a few more components, and Viktor has already started the work with the historical picker and ranking section 🙌

We do aim to increase the accessibility of our app, and there will be more things we'll tune, but we do need this global change to enable other changes 🙌

[madsnedergaard]

Maybe I'm just old and scared of changes (😅), but I feel that the text-size increases in various places are quite dramatic?

Haha, that makes sense. This is just the first step, but generally it is good to have a bigger text size. I do see why you mention this as the text-size does increase dramatically in quite a few places 😅 After this PR is merged, we'll be fine-tuning a few more components, and Viktor has already started the work with the historical picker and ranking section 🙌

We do aim to increase the accessibility of our app, and there will be more things we'll tune, but we do need this global change to enable other changes 🙌

Fair point, I'll fold to the argument of accessibility 🙇

[VIKTORVAV99]

Really nice to see this merged! Good work Silke!