From 563956ddddd96e2901ff1ce676d222124511f7ad Mon Sep 17 00:00:00 2001
From: ggurdin <46800240+ggurdin@users.noreply.github.com>
Date: Wed, 12 Mar 2025 10:59:56 -0400
Subject: [PATCH] chore: update space view buttons design (#2126)

---
 assets/l10n/intl_en.arb                       |  3 +-
 .../spaces/widgets/space_filter_buttons.dart  | 73 ++++++-------------
 2 files changed, 26 insertions(+), 50 deletions(-)

diff --git a/assets/l10n/intl_en.arb b/assets/l10n/intl_en.arb
index f43632c0a..92d969dcb 100644
--- a/assets/l10n/intl_en.arb
+++ b/assets/l10n/intl_en.arb
@@ -4811,5 +4811,6 @@
   "inviteAndLaunch": "Invite and launch",
   "createOwnChat": "Create your own chat",
   "pleaseEnterInt": "Please enter a number",
-  "home": "Home"
+  "home": "Home",
+  "join": "Join"
 } 
diff --git a/lib/pangea/spaces/widgets/space_filter_buttons.dart b/lib/pangea/spaces/widgets/space_filter_buttons.dart
index 4adfd369d..c2bbebfb4 100644
--- a/lib/pangea/spaces/widgets/space_filter_buttons.dart
+++ b/lib/pangea/spaces/widgets/space_filter_buttons.dart
@@ -10,69 +10,44 @@ class SpaceFilterButtons extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
     return SliverList(
       delegate: SliverChildListDelegate(
         [
           const SizedBox(height: 16.0),
           Padding(
-            padding: const EdgeInsets.symmetric(
-              horizontal: 8.0,
-              vertical: 4.0,
-            ),
-            child: ElevatedButton(
-              style: ElevatedButton.styleFrom(
-                backgroundColor: theme.colorScheme.primary,
-                padding: const EdgeInsets.all(0),
-              ),
-              onPressed: () => SpaceCodeUtil.joinWithSpaceCodeDialog(context),
-              child: Row(
-                spacing: 16.0,
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Icon(
-                    Icons.join_right_outlined,
-                    color: theme.colorScheme.onPrimary,
+            padding: const EdgeInsets.all(4.0),
+            child: Center(
+              child: SizedBox(
+                width: 100.0,
+                child: FloatingActionButton.extended(
+                  onPressed: () =>
+                      SpaceCodeUtil.joinWithSpaceCodeDialog(context),
+                  icon: const Icon(Icons.join_right_outlined),
+                  label: Text(
+                    L10n.of(context).join,
+                    overflow: TextOverflow.fade,
                   ),
-                  Text(
-                    L10n.of(context).joinByCode,
-                    style: theme.textTheme.bodyMedium?.copyWith(
-                      color: theme.colorScheme.onPrimary,
-                    ),
-                  ),
-                ],
+                ),
               ),
             ),
           ),
           Padding(
-            padding: const EdgeInsets.symmetric(
-              horizontal: 8.0,
-              vertical: 2.0,
-            ),
-            child: ElevatedButton(
-              style: ElevatedButton.styleFrom(
-                backgroundColor: theme.colorScheme.primary,
-                padding: const EdgeInsets.all(0),
-              ),
-              onPressed: () => context.go('/rooms/newspace'),
-              child: Row(
-                spacing: 16.0,
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Icon(
-                    Icons.add,
-                    color: theme.colorScheme.onPrimary,
-                  ),
-                  Text(
-                    L10n.of(context).createASpace,
-                    style: theme.textTheme.bodyMedium?.copyWith(
-                      color: theme.colorScheme.onPrimary,
-                    ),
+            padding: const EdgeInsets.all(4.0),
+            child: Center(
+              child: SizedBox(
+                width: 100.0,
+                child: FloatingActionButton.extended(
+                  onPressed: () => context.go('/rooms/newspace'),
+                  icon: const Icon(Icons.add),
+                  label: Text(
+                    L10n.of(context).space,
+                    overflow: TextOverflow.fade,
                   ),
-                ],
+                ),
               ),
             ),
           ),
+          const SizedBox(height: 16.0),
         ],
       ),
     );