Match new header buttons UI to ToggleStyleButtons.

Test on web also and it's working.

lib/widgets/toolbar.dart

@@ -370,10 +370,8 @@ Widget defaultToggleStyleButtonBuilder(
 
 class SelectHeaderStyleButton extends StatefulWidget {
   final QuillController controller;
-  final double headerFontSize;
 
-  const SelectHeaderStyleButton(
+  const SelectHeaderStyleButton({required this.controller, Key? key})
-      {required this.controller, this.headerFontSize = 18.0, Key? key})
       : super(key: key);
 
   @override
@@ -426,13 +424,12 @@ class _SelectHeaderStyleButtonState extends State<SelectHeaderStyleButton> {
 
   @override
   Widget build(BuildContext context) {
-    return _selectHeadingStyleButtonBuilder(
+    return _selectHeadingStyleButtonBuilder(context, _value, _selectAttribute);
-        context, _value, _selectAttribute, widget.headerFontSize);
   }
 }
 
 Widget _selectHeadingStyleButtonBuilder(BuildContext context, Attribute? value,
-    ValueChanged<Attribute?> onSelected, double headerFontSize) {
+    ValueChanged<Attribute?> onSelected) {
   final Map<Attribute, String> _valueToText = {
     Attribute.header: 'N',
     Attribute.h1: 'H1',
@@ -449,33 +446,43 @@ Widget _selectHeadingStyleButtonBuilder(BuildContext context, Attribute? value,
   List<String> _valueString = ['N', 'H1', 'H2', 'H3'];
 
   final theme = Theme.of(context);
-  final style = theme.textTheme.caption?.copyWith(
+  final style = TextStyle(
-    fontWeight: FontWeight.bold,
+    fontWeight: FontWeight.w600,
-    fontSize: (15.0 / iconSize) * headerFontSize,
+    fontSize: iconSize * 0.7,
   );
-  final width = theme.buttonTheme.constraints.minHeight + 4.0;
-  final constraints = theme.buttonTheme.constraints.copyWith(
-    minWidth: width,
-    maxHeight: theme.buttonTheme.constraints.minHeight,
-  );
-  final radius = const BorderRadius.all(Radius.circular(3.0));
 
   return Row(
     mainAxisSize: MainAxisSize.min,
     children: List.generate(4, (index) {
       return Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 1.0, vertical: 6.0),
+        padding: const EdgeInsets.symmetric(horizontal: !kIsWeb ? 1.0 : 5.0),
-        child: RawMaterialButton(
+        child: ConstrainedBox(
-          shape: RoundedRectangleBorder(borderRadius: radius),
+          constraints: BoxConstraints.tightFor(
-          elevation: 0.0,
+            width: iconSize * 1.77,
-          fillColor: _valueToText[value] == _valueString[index]
+            height: iconSize * 1.77,
-              ? Theme.of(context).accentColor.withOpacity(0.4)
+          ),
-              : Colors.white,
+          child: RawMaterialButton(
-          constraints: constraints,
+            hoverElevation: 0,
-          onPressed: () {
+            highlightElevation: 0,
-            onSelected(_valueAttribute[index]);
+            elevation: 0.0,
-          },
+            visualDensity: VisualDensity.compact,
-          child: Text(_valueString[index], style: style),
+            shape:
+                RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
+            fillColor: _valueToText[value] == _valueString[index]
+                ? theme.toggleableActiveColor
+                : theme.canvasColor,
+            onPressed: () {
+              onSelected(_valueAttribute[index]);
+            },
+            child: Text(
+              _valueString[index],
+              style: style.copyWith(
+                color: _valueToText[value] == _valueString[index]
+                    ? theme.primaryIconTheme.color
+                    : theme.iconTheme.color,
+              ),
+            ),
+          ),
         ),
       );
     }),
@@ -1029,8 +1036,7 @@ class QuillToolbar extends StatefulWidget implements PreferredSizeWidget {
               indent: 12, endIndent: 12, color: Colors.grey.shade400)),
       Visibility(
           visible: showHeaderStyle,
-          child: SelectHeaderStyleButton(
+          child: SelectHeaderStyleButton(controller: controller)),
-              controller: controller, headerFontSize: toolbarIconSize)),
       VerticalDivider(indent: 12, endIndent: 12, color: Colors.grey.shade400),
       Visibility(
         visible: showListNumbers,