diff --git a/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/filters/RoomListFiltersView.kt b/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/filters/RoomListFiltersView.kt index 91b00b1180..58cd985600 100644 --- a/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/filters/RoomListFiltersView.kt +++ b/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/filters/RoomListFiltersView.kt @@ -19,6 +19,7 @@ import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.shape.CircleShape @@ -34,6 +35,7 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +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 @@ -48,6 +50,9 @@ import io.element.android.libraries.designsystem.theme.components.Text import io.element.android.libraries.testtags.TestTags import io.element.android.libraries.testtags.testTag +/** + * Ref: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=2191-606 + */ @Composable fun RoomListFiltersView( state: RoomListFiltersState, @@ -143,9 +148,12 @@ private fun RoomListClearFiltersButton( .clip(CircleShape) .background(ElementTheme.colors.bgActionPrimaryRest) .clickable(onClick = onClick) + .padding(4.dp) ) { Icon( - modifier = Modifier.align(Alignment.Center), + modifier = Modifier + .align(Alignment.Center) + .size(16.dp), imageVector = CompoundIcons.Close(), tint = ElementTheme.colors.iconOnSolidPrimary, contentDescription = stringResource(id = R.string.screen_roomlist_clear_filters), @@ -170,21 +178,34 @@ private fun RoomListFilterView( animationSpec = spring(stiffness = Spring.StiffnessMediumLow), label = "chip text colour", ) + val borderColour = animateColorAsState( + targetValue = if (selected) Color.Transparent else ElementTheme.colors.borderInteractiveSecondary, + animationSpec = spring(stiffness = Spring.StiffnessMediumLow), + label = "chip border colour", + ) FilterChip( selected = selected, onClick = { onClick(roomListFilter) }, - modifier = modifier.height(36.dp), + modifier = modifier.height(32.dp), shape = CircleShape, colors = FilterChipDefaults.filterChipColors( containerColor = background.value, selectedContainerColor = background.value, labelColor = textColour.value, - selectedLabelColor = textColour.value + selectedLabelColor = textColour.value, ), label = { - Text(text = stringResource(id = roomListFilter.stringResource)) - } + Text( + text = stringResource(id = roomListFilter.stringResource), + style = ElementTheme.typography.fontBodyMdRegular, + ) + }, + border = FilterChipDefaults.filterChipBorder( + enabled = true, + selected = selected, + borderColor = borderColour.value, + ), ) } @@ -192,6 +213,7 @@ private fun RoomListFilterView( @Composable internal fun RoomListFiltersViewPreview(@PreviewParameter(RoomListFiltersStateProvider::class) state: RoomListFiltersState) = ElementPreview { RoomListFiltersView( + modifier = Modifier.padding(vertical = 4.dp), state = state, ) }