Merge pull request #2976 from pangeachat/2951-activity-planner-title-too-narrow-on-mobile

chore: change create an activity button on mobile

lib/pangea/activity_planner/activity_planner_page_appbar.dart

@@ -4,6 +4,7 @@ import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:go_router/go_router.dart';
 
 import 'package:fluffychat/config/app_config.dart';
+import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/pangea/activity_planner/activity_planner_page.dart';
 import 'package:fluffychat/pangea/activity_suggestions/activity_suggestions_constants.dart';
 import 'package:fluffychat/pangea/common/widgets/customized_svg.dart';
@@ -28,16 +29,6 @@ class ActivityPlannerPageAppBar extends StatelessWidget
     final theme = Theme.of(context);
 
     return AppBar(
-      leadingWidth: 150.0,
-      leading: Row(
-        children: [
-          const SizedBox(width: 8.0),
-          IconButton(
-            icon: const Icon(Icons.arrow_back),
-            onPressed: () => Navigator.of(context).pop(),
-          ),
-        ],
-      ),
       title: pageMode == PageMode.savedActivities
           ? Row(
               mainAxisAlignment: MainAxisAlignment.center,
@@ -63,52 +54,59 @@ class ActivityPlannerPageAppBar extends StatelessWidget
               ],
             ),
       actions: [
-        Container(
-          width: 150.0,
-          alignment: Alignment.center,
-          child: InkWell(
-            customBorder: const CircleBorder(),
-            onTap: () => roomID != null
-                ? context.go('/rooms/$roomID/details/planner/generator')
-                : context.go("/rooms/homepage/planner/generator"),
-            child: Container(
-              decoration: BoxDecoration(
-                color: theme.colorScheme.surfaceContainerHighest,
-                borderRadius: BorderRadius.circular(36.0),
-              ),
-              padding: const EdgeInsets.symmetric(
-                vertical: 6.0,
-                horizontal: 10.0,
-              ),
-              child: Row(
-                spacing: 8.0,
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  CustomizedSvg(
-                    svgUrl:
-                        "${AppConfig.assetsBaseURL}/${ActivitySuggestionsConstants.crayonIconPath}",
-                    colorReplacements: {
-                      "#CDBEF9": colorToHex(
-                        theme.colorScheme.secondary,
-                      ),
-                    },
-                    height: 16.0,
-                    width: 16.0,
-                  ),
-                  Flexible(
-                    child: Text(
-                      L10n.of(context).createActivity,
-                      style: theme.textTheme.titleSmall?.copyWith(
-                        fontWeight: FontWeight.bold,
-                      ),
-                      overflow: TextOverflow.ellipsis,
+        FluffyThemes.isColumnMode(context)
+            ? Container(
+                width: 150.0,
+                alignment: Alignment.center,
+                child: InkWell(
+                  customBorder: const CircleBorder(),
+                  onTap: () => roomID != null
+                      ? context.go('/rooms/$roomID/details/planner/generator')
+                      : context.go("/rooms/homepage/planner/generator"),
+                  child: Container(
+                    decoration: BoxDecoration(
+                      color: theme.colorScheme.surfaceContainerHighest,
+                      borderRadius: BorderRadius.circular(36.0),
+                    ),
+                    padding: const EdgeInsets.symmetric(
+                      vertical: 6.0,
+                      horizontal: 10.0,
+                    ),
+                    child: Row(
+                      spacing: 8.0,
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        CustomizedSvg(
+                          svgUrl:
+                              "${AppConfig.assetsBaseURL}/${ActivitySuggestionsConstants.crayonIconPath}",
+                          colorReplacements: {
+                            "#CDBEF9": colorToHex(
+                              theme.colorScheme.secondary,
+                            ),
+                          },
+                          height: 16.0,
+                          width: 16.0,
+                        ),
+                        Flexible(
+                          child: Text(
+                            L10n.of(context).createActivity,
+                            style: theme.textTheme.titleSmall?.copyWith(
+                              fontWeight: FontWeight.bold,
+                            ),
+                            overflow: TextOverflow.ellipsis,
+                          ),
+                        ),
+                      ],
                     ),
                   ),
-                ],
+                ),
+              )
+            : IconButton(
+                icon: const Icon(Icons.add),
+                onPressed: () => roomID != null
+                    ? context.go('/rooms/$roomID/details/planner/generator')
+                    : context.go("/rooms/homepage/planner/generator"),
               ),
-            ),
-          ),
-        ),
       ],
     );
   }