Merge pull request #5033 from element-hq/feature/bma/updateFabStyle

Iterate on FloatingActionButton shape and colors.

features/home/impl/src/main/kotlin/io/element/android/features/home/impl/HomeView.kt

@@ -274,13 +274,11 @@ private fun HomeScaffold(
         floatingActionButton = {
             if (state.displayActions) {
                 FloatingActionButton(
-                    containerColor = ElementTheme.colors.iconPrimary,
-                    onClick = onCreateRoomClick
+                    onClick = onCreateRoomClick,
                 ) {
                     Icon(
                         imageVector = CompoundIcons.Plus(),
                         contentDescription = stringResource(id = R.string.screen_roomlist_a11y_create_message),
-                        tint = ElementTheme.colors.iconOnSolidPrimary,
                     )
                 }
             }

features/location/impl/src/main/kotlin/io/element/android/features/location/impl/common/ui/LocationFloatingActionButton.kt

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.features.location.impl.common.ui
+
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.FloatingActionButtonDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.CompoundIcons
+import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.ui.strings.CommonStrings
+
+/**
+ * Ref: See design in https://www.figma.com/design/0MMNu7cTOzLOlWb7ctTkv3/Element-X?node-id=3426-141111
+ */
+@Composable
+internal fun LocationFloatingActionButton(
+    isMapCenteredOnUser: Boolean,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    FloatingActionButton(
+        shape = FloatingActionButtonDefaults.smallShape,
+        containerColor = ElementTheme.colors.bgCanvasDefault,
+        contentColor = ElementTheme.colors.iconPrimary,
+        onClick = onClick,
+        modifier = modifier
+            // Note: design is 40dp, but min is 48 for accessibility.
+            .size(48.dp),
+    ) {
+        val iconImage = if (isMapCenteredOnUser) {
+            CompoundIcons.LocationNavigatorCentred()
+        } else {
+            CompoundIcons.LocationNavigator()
+        }
+        Icon(
+            imageVector = iconImage,
+            contentDescription = stringResource(CommonStrings.a11y_move_the_map_to_my_location),
+        )
+    }
+}

features/location/impl/src/main/kotlin/io/element/android/features/location/impl/send/SendLocationView.kt

@@ -30,7 +30,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
-import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.location.api.Location
 import io.element.android.features.location.api.internal.centerBottomEdge
 import io.element.android.features.location.api.internal.rememberTileStyleUrl
@@ -38,11 +37,11 @@ import io.element.android.features.location.impl.R
 import io.element.android.features.location.impl.common.MapDefaults
 import io.element.android.features.location.impl.common.PermissionDeniedDialog
 import io.element.android.features.location.impl.common.PermissionRationaleDialog
+import io.element.android.features.location.impl.common.ui.LocationFloatingActionButton
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.BottomSheetScaffold
-import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
@@ -189,17 +188,13 @@ fun SendLocationView(
                 tint = Color.Unspecified,
                 modifier = Modifier.centerBottomEdge(this),
             )
-            FloatingActionButton(
+            LocationFloatingActionButton(
+                isMapCenteredOnUser = state.mode == SendLocationState.Mode.SenderLocation,
                 onClick = { state.eventSink(SendLocationEvents.SwitchToMyLocationMode) },
                 modifier = Modifier
                     .align(Alignment.BottomEnd)
-                    .padding(end = 16.dp, bottom = 72.dp + navBarPadding),
-            ) {
-                when (state.mode) {
-                    SendLocationState.Mode.PinLocation -> Icon(imageVector = CompoundIcons.LocationNavigator(), contentDescription = null)
-                    SendLocationState.Mode.SenderLocation -> Icon(imageVector = CompoundIcons.LocationNavigatorCentred(), contentDescription = null)
-                }
-            }
+                    .padding(end = 18.dp, bottom = 72.dp + navBarPadding),
+            )
         }
     }
 }

features/location/impl/src/main/kotlin/io/element/android/features/location/impl/show/ShowLocationView.kt

@@ -27,10 +27,10 @@ import io.element.android.features.location.api.internal.rememberTileStyleUrl
 import io.element.android.features.location.impl.common.MapDefaults
 import io.element.android.features.location.impl.common.PermissionDeniedDialog
 import io.element.android.features.location.impl.common.PermissionRationaleDialog
+import io.element.android.features.location.impl.common.ui.LocationFloatingActionButton
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.theme.components.Scaffold
@@ -118,14 +118,10 @@ fun ShowLocationView(
             )
         },
         floatingActionButton = {
-            FloatingActionButton(
+            LocationFloatingActionButton(
+                isMapCenteredOnUser = state.isTrackMyLocation,
                 onClick = { state.eventSink(ShowLocationEvents.TrackMyLocation(true)) },
-            ) {
-                when (state.isTrackMyLocation) {
-                    false -> Icon(imageVector = CompoundIcons.LocationNavigator(), contentDescription = null)
-                    true -> Icon(imageVector = CompoundIcons.LocationNavigatorCentred(), contentDescription = null)
-                }
-            }
+            )
         },
     ) { paddingValues ->
         Column(

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt

@@ -366,7 +366,7 @@ private fun JumpToBottomButton(
             shape = CircleShape,
             modifier = Modifier.size(36.dp),
             containerColor = ElementTheme.colors.bgSubtleSecondary,
-            contentColor = ElementTheme.colors.iconSecondary
+            contentColor = ElementTheme.colors.iconSecondary,
         ) {
             Icon(
                 modifier = Modifier

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/FloatingActionButton.kt

@@ -10,10 +10,8 @@ package io.element.android.libraries.designsystem.theme.components
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.FloatingActionButtonDefaults
 import androidx.compose.material3.FloatingActionButtonElevation
-import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
@@ -21,6 +19,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
@@ -31,10 +30,9 @@ import io.element.android.libraries.testtags.testTag
 fun FloatingActionButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
-    // FloatingActionButtonDefaults.shape
-    shape: Shape = CircleShape,
-    containerColor: Color = FloatingActionButtonDefaults.containerColor,
-    contentColor: Color = contentColorFor(containerColor),
+    shape: Shape = FloatingActionButtonDefaults.shape,
+    containerColor: Color = ElementTheme.colors.textActionAccent,
+    contentColor: Color = ElementTheme.colors.iconOnSolidPrimary,
     elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     content: @Composable () -> Unit,

libraries/ui-strings/src/main/res/values/localazy.xml

@@ -12,6 +12,7 @@
   <string name="a11y_hide_password">"Hide password"</string>
   <string name="a11y_join_call">"Join call"</string>
   <string name="a11y_jump_to_bottom">"Jump to bottom"</string>
+  <string name="a11y_move_the_map_to_my_location">"Move the map to my location"</string>
   <string name="a11y_notifications_mentions_only">"Mentions only"</string>
   <string name="a11y_notifications_muted">"Muted"</string>
   <string name="a11y_notifications_new_mentions">"New mentions"</string>