YaruTitleBar: small styling changes

[Feichtmeier]

• default size is now 47px (border adds on top, which ends up with 48 which is the height of gtk headerbars)
• default light bg to #ebebeb, which is the gtk4 dark headerbar bg and dark bg to #303030

Pull request checklist

• This PR does not introduce visual changes, or
  • I ran flutter test --update-goldens and committed the changes if there were any, or
  • I added before/after/light/dark screenshots if the visual changes I made were not covered by golden tests.

    	Before	After
    Light
    Dark

[Jupi007]

You did it before me :D
I already have the same kind of change almost ready for handy_window native headerbar in css, so if you're okay I will send a PR there.

[Feichtmeier]

You did it before me :D I already have the same kind of change almost ready for handy_window native headerbar in css, so if you're okay I will send a PR there.

haha :D
so your change superseeds this or is your change only for "normal" flutter windows that do not use YaruTitlebar?

[Jupi007]

so your change superseeds this or is your change only for "normal" flutter windows that do not use YaruTitlebar?

My changes are only for the native headerbar provided by handy_window (css change so).
This was also require some sync to the flutter titlebar and you did it here :D

[Feichtmeier]

oh ok 👍 😄

[Feichtmeier]

@jpnurmi any idea why the change to the height, border and bg here causes this fail in the goldens?:

00:14 +9 -4: /home/runner/work/yaru_widgets.dart/yaru_widgets.dart/test/pages/yaru_master_detail_page_test.dart: golden images (variant: portrait-dark: themeMode: ThemeMode.dark, value: Orientation.portrait) [E]
Test failed. See exception logs above.
The test description was: golden images (variant: portrait-dark: themeMode: ThemeMode.dark, value: Orientation.portrait)

[Feichtmeier]

Weird, when I ran the test locally there was nothing produced to commit

frederik@carbon:~/Projects/yaru_widgets.dart$ flutter test --update-goldens
00:29 +417: All tests passed!

[jpnurmi]

We need to figure out why you get different results than others. :(

[Feichtmeier]

Because I hate tests and tests hate me ;D no just kidding. Hmhm... maybe golden tests differ in the flutter version? I have

frederik@carbon:~/Projects/yaru_widgets.dart$ flutter --version
Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 135454af32 (vor 4 Wochen) • 2022-12-15 07:36:55 -0800
Engine • revision 3316dd8728
Tools • Dart 2.18.6 • DevTools 2.15.0

[jpnurmi]

jpnurmi@xps-15:~/Projects/ubuntu/yaru_widgets.dart (small_title_bar_styling_changes)$ flutter test --update-goldens
...
00:09 +417: All tests passed!                                                                                                                                                               s
jpnurmi@xps-15:~/Projects/ubuntu/yaru_widgets.dart (small_title_bar_styling_changes)$ git status
On branch small_title_bar_styling_changes
Your branch is up to date with 'upstream/small_title_bar_styling_changes'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   test/pages/goldens/yaru_master_detail-page-landscape-dark.png
	modified:   test/pages/goldens/yaru_master_detail-page-portrait-dark.png
	modified:   test/pages/goldens/yaru_navigation_page-compact-dark.png
	modified:   test/pages/goldens/yaru_navigation_page-labelled-dark.png
	modified:   test/pages/goldens/yaru_navigation_page-labelled-extended-dark.png
	modified:   test/utilities/goldens/yaru_border_container-clip-dark.png
	modified:   test/utilities/goldens/yaru_border_container-default-dark.png
	modified:   test/utilities/goldens/yaru_border_container-margin-clip-dark.png
	modified:   test/utilities/goldens/yaru_border_container-margin-dark.png
	modified:   test/utilities/goldens/yaru_border_container-padding-clip-dark.png
	modified:   test/utilities/goldens/yaru_border_container-padding-dark.png
	modified:   test/utilities/goldens/yaru_border_container-padding-margin-clip-dark.png
	modified:   test/utilities/goldens/yaru_border_container-padding-margin-dark.png

[jpnurmi]

I have the latest stable too, likewise in the CI.

$ flutter --version
Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 135454af32 (4 weeks ago) • 2022-12-15 07:36:55 -0800
Engine • revision 3316dd8728
Tools • Dart 2.18.6 • DevTools 2.15.0

[jpnurmi]

Your border lines were stronger. Perhaps you had outdated yaru.dart? What if you run flutter pub upgrade and then flutter test again?

[Feichtmeier]

aha yes that must be the reason! my dart cache had the old yaru widgets :)