[Feature Request]: Migrate UI to Material Design 3

[machiav3lli]

Guidelines

• I have searched the issue tracker for open and closed issues that are similar to the feature request I want to file, without success.
• I have searched the documentation for information that matches the description of the feature request I want to file, without success.
• This issue contains only one feature request.

Problem Description

It seems that FT's design is aligned mostly Material Design 2 (MD2), so I'm wondering why it wasn't updated to MD3.

Proposed Solution

Migrate UI design to MD3

Alternatives Considered

I'm not much of a web developer, but if you may point me to the design files and respective frameworks, I may be able to PR a first draft.

Issue Labels

visual improvement

Additional Information

No response

[absidue]

FreeTube doesn't use any material design frameworks or any UI component frameworks for that matter, it's all custom HTML, CSS and JavaScript.

[machiav3lli]

Custom as vanilla css or as somehow vue-based?

Either way, is src/renderer/components the main (as only) folder for relevant files, or are src/renderer/views and respectively others relevant?

[efb4f5ff-1298-471a-8973-3d47447115dc]

Hi @machiav3lli we are open to see a draft PR but there are no guarantees that it will make it into the project. We have to evaluate if this really will benefit our users

[ChunkyProgrammer]

Custom as vanilla css or as somehow vue-based?

Either way, is src/renderer/components the main (as only) folder for relevant files, or are src/renderer/views and respectively others relevant?

It's vanilla css + sass. The components and views folder should contain everything (there's also App.css and themes.css but I'm not sure if those would need to be updated.).

Imo, any UI improvements will be welcome as long as it doesnt break anything else and I think following MD3 could help improve accessibility of FreeTube which is always a good thing.

Also, we do have an item in one of our projects to evaluate if we should migrate to a vue ui framework. If we were to migrate to vuetify then the components should follow MD3 but this would need to happen after we migrate to vue3 and is not a priority.

If you do plan on working on this, I'd recommend multiple smaller pull requests instead of one large one if possible so it's be easier to review.

[machiav3lli]

Started work at https://github.com/machiav3lli/FreeTube

Current state

[absidue]

Just had a quick look and I'm concerned by how much CSS you are deleting in the subscribe button commit, you seem to have got rid of all the still used CSS related to the profile dropdown without any replacement. Please revert any breaking changes like that and make sure you properly test each component that you modify so that you don't break things.

[machiav3lli]

Surely, the changes related to the dropdown or others, are kinda related to locally uncommited changes. And I wanted to ask if it's ok to drop secondary color (as is for now), and use only primary theme with fully defined schemes (based on MD3 directly - so I'll update the schemes at the end)?

[machiav3lli]

Video previews, player info & nav bars are mostly finished (the themes should be fixed a bit). An ETA for initial PR would be in a week or so, should nothing come in-between.

[efb4f5ff-1298-471a-8973-3d47447115dc]

@kommunarr any additional thoughts on implementing MD3?

[kommunarr]

I think it's a good thing to make improvements when they are needed, like Chunky mentioned with accessibility improvements that can come from using Quasar or Vuetify. I do think it needs to be done conscientiously rather than just doing it "because that's what you do," so the design choices have to have clear stated rationales for what kind of changes they're making. One reason I emphasize this is because while component libraries offer convenience, they also can lead to lower personality and variation.

[machiav3lli]

So, for the most part, the migration of the components is over. Color schemes (themes.css) are the only thing that have to be finished, although am not sure of how to handle this:

• Should the separation between "base theme" and "main color theme" stand as it is?
• Or should the "base theme" only differentiate between light, dark and black while the "main color theme" decides on whether it's normal/catapuccin/darcula/solrized etc.?

Here are some new screenshots of some other pages:

[kommunarr]

Should the separation between "base theme" and "main color theme" stand as it is?

Yes, base theme refers to the main colors seen throughout the app, and the main & secondary color themes are two individual colors (with slight sub-variations) for allowing more granular customization of how things look. A rework of it in your latter suggestion seems to be about organizing the base themes differently (as we already have light/dark variations for almost all of them), which does not seem necessary to achieve the original goal of this issue. Like @ChunkyProgrammer said earlier, please split this up into multiple smaller pull requests rather than one large one to make this easier to review.

[machiav3lli]

Hmm… am not sure it'll be possible to break the changes into different patches/cherry-picks/PRs, as there's much inter-dependence on certain changes, but we can try this when theme revamps are done.

[efb4f5ff-1298-471a-8973-3d47447115dc]

@machiav3lli just checking in, whats the status on this?

[machiav3lli]

I was sorta held back by the need of breaking the changes into different PRs, as this wasn't how I designed the changes, rather used a more comprehensive approach (first the themes at once, and then components one after the other) . So, if it's still wished for and a vue framework migration is not planned for the foreseeable future, I could try to rework things

[efb4f5ff-1298-471a-8973-3d47447115dc]

Well the migration has allot more priority because vue2 is EOL but I really would like to see how we could improve FT with MD3. I guess this is on hold until we switched to vue3. Hopefully you will still be excited to work on this :)

I will convert this to a discussion because its UI related, which is more subjective then our other issues

[machiav3lli]

Yeah, gladly. Eventually after the migration, I can imagine that such design choices would be easier to take than currently.

but I really would like to see how we could improve FT with MD3

Is there any specific aspect you'd like to see that the screenshots don't make clear?