Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

👀 Rework Material 3 theme #561

Merged
merged 4 commits into from
Dec 19, 2023
Merged

👀 Rework Material 3 theme #561

merged 4 commits into from
Dec 19, 2023

Conversation

Maxr1998
Copy link
Collaborator

@Maxr1998 Maxr1998 commented Dec 18, 2023

After some dependency bump the new Material 3 style is enabled by default, which looks kind of odd with the current color schemes.

Old design

Screenshot_20231218-215323.png

Screenshot_20231218-215316.png

Screenshot_20231218-215509.png

Thus, I generated a nice one with the M3 Theme Builder and imported it into the project.

New design

Screenshot_20231218-224751.png

Screenshot_20231218-224723.png

@Maxr1998 Maxr1998 force-pushed the theme-fix branch 2 times, most recently from bb96e83 to 02f1116 Compare December 18, 2023 22:30
@Maxr1998
Copy link
Collaborator Author

Please give it a test, had to resolve some other issues as well and hope I caught everything.

@@ -283,9 +283,6 @@ class Finamp extends StatelessWidget {

@override
Widget build(BuildContext context) {
const Color accentColor = Color(0xFF00A4DC);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to keep the original accent color here for reference :)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added it back in lib/color_schemes.g.dart with a comment.

@Chaphasilor
Copy link
Collaborator

Can we do something about that start padding on the tab bar?
image
I added a hacky fix in the redesign branch, but maybe you know a nicer solution?

Contrast on the Logs screen is a bit low...
image

Maybe we can have less difference in color between the play/pause button and the progress slider?
image

@Chaphasilor
Copy link
Collaborator

Aside from that everything looks nice, definitely much better than the "default" / whatever crap that was there before 😅
Thanks for putting in the effort! <3

@Chaphasilor Chaphasilor self-assigned this Dec 18, 2023
@Chaphasilor Chaphasilor added the enhancement Improves an existing feature label Dec 18, 2023
@Maxr1998
Copy link
Collaborator Author

Maxr1998 commented Dec 19, 2023

Fixed the tab bar issue as well, it's actually pretty easy:

/// If [TabBarTheme.tabAlignment] is null and [ThemeData.useMaterial3] is true,
/// then [TabAlignment.startOffset] is used if [isScrollable] is true,
/// otherwise [TabAlignment.fill] is used.

So, just set tabAlignment: TabAlignment.start.

For the logs screen, I think a general re-design is in order, maybe a separate PR for that though?

Nvm, fixed that too.

Merge active and buffered tracks into a single slider, properly handle slider height.
@Maxr1998
Copy link
Collaborator Author

Maxr1998 commented Dec 19, 2023

Fixed your remaining points that I completely missed last night, as well as some other things.

@jmshrv
Copy link
Owner

jmshrv commented Dec 19, 2023

Thanks for this! Merged :)

@jmshrv jmshrv merged commit d1f9988 into jmshrv:main Dec 19, 2023
@Maxr1998 Maxr1998 deleted the theme-fix branch December 19, 2023 16:19
@Maxr1998
Copy link
Collaborator Author

Maxr1998 commented Dec 19, 2023

Sure, happy to contribute! I might actually further tweak some colors later, but for now, this should be good.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Improves an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants