feat: #960 - 2 lines (instead of 1) for "importance", and radio butto…

…n on top (#1760)

Impacted files:
* `attribute_button.dart`: 2 lines (instead of 1) for "importance", radio button on top, smaller title style, info on the right, minimum target size
* `user_preferences_page-blue-dark.png`: golden refresh
* `user_preferences_page-blue-light.png`: golden refresh
* `user_preferences_page-brown-dark.png`: golden refresh
* `user_preferences_page-brown-light.png`: golden refresh
* `user_preferences_page-green-dark.png`: golden refresh
* `user_preferences_page-green-light.png`: golden refresh

packages/smooth_app/lib/widgets/attribute_button.dart

@@ -28,14 +28,13 @@ class AttributeButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final ThemeData themeData = Theme.of(context);
-    final IconThemeData iconThemeData = IconTheme.of(context);
     final String currentImportanceId =
         productPreferences.getImportanceIdForAttributeId(attribute.id!);
     const double horizontalPadding = LARGE_SPACE;
     final double widgetWidth =
         MediaQuery.of(context).size.width - 2 * horizontalPadding;
     final double importanceWidth = widgetWidth / 4;
-    final TextStyle style = themeData.textTheme.headline3!;
+    final TextStyle style = themeData.textTheme.headline4!;
     final String? info = attribute.settingNote;
     final List<Widget> children = <Widget>[];
     for (final String importanceId in _importanceIds) {
@@ -59,26 +58,26 @@ class AttributeButton extends StatelessWidget {
               ),
             );
           },
-          child: SizedBox(
+          child: Container(
             width: importanceWidth,
-            height: MINIMUM_TARGET_SIZE,
+            constraints: const BoxConstraints(minHeight: MINIMUM_TARGET_SIZE),
             child: Column(
-              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              mainAxisAlignment: MainAxisAlignment.start,
               crossAxisAlignment: CrossAxisAlignment.center,
               children: <Widget>[
-                AutoSizeText(
-                  productPreferences
-                      .getPreferenceImportanceFromImportanceId(importanceId)!
-                      .name!,
-                  maxLines: 1,
-                  textAlign: TextAlign.center,
-                ),
                 Icon(
                   currentImportanceId == importanceId
                       ? Icons.radio_button_checked
                       : Icons.radio_button_off,
                   color: themeData.colorScheme.primary,
                 ),
+                AutoSizeText(
+                  productPreferences
+                      .getPreferenceImportanceFromImportanceId(importanceId)!
+                      .name!,
+                  maxLines: 2,
+                  textAlign: TextAlign.center,
+                ),
               ],
             ),
           ),
@@ -94,31 +93,12 @@ class AttributeButton extends StatelessWidget {
         mainAxisAlignment: MainAxisAlignment.start,
         crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
-          GestureDetector(
-            child: SizedBox(
-              height: MINIMUM_TARGET_SIZE,
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.start,
-                crossAxisAlignment: CrossAxisAlignment.center,
-                children: <Widget>[
-                  if (info != null) const Icon(Icons.info_outline),
-                  Container(
-                    padding: info == null
-                        ? null
-                        : const EdgeInsets.only(left: SMALL_SPACE),
-                    child: SizedBox(
-                      width: widgetWidth -
-                          SMALL_SPACE -
-                          (iconThemeData.size ?? DEFAULT_ICON_SIZE),
-                      child: AutoSizeText(
-                        attribute.settingName ?? attribute.name!,
-                        maxLines: 2,
-                        style: style,
-                      ),
-                    ),
-                  ),
-                ],
-              ),
+          ListTile(
+            trailing: info == null ? null : const Icon(Icons.info_outline),
+            title: AutoSizeText(
+              attribute.settingName ?? attribute.name!,
+              maxLines: 2,
+              style: style,
             ),
             onTap: info == null
                 ? null
@@ -141,7 +121,7 @@ class AttributeButton extends StatelessWidget {
           ),
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            crossAxisAlignment: CrossAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.start,
             children: children,
           ),
         ],