diff --git a/app/src/main/java/org/mozilla/fenix/compose/PagerIndicator.kt b/app/src/main/java/org/mozilla/fenix/compose/PagerIndicator.kt index addbaa703d..301e8cb259 100644 --- a/app/src/main/java/org/mozilla/fenix/compose/PagerIndicator.kt +++ b/app/src/main/java/org/mozilla/fenix/compose/PagerIndicator.kt @@ -25,6 +25,7 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import org.mozilla.fenix.compose.annotation.LightDarkPreview import org.mozilla.fenix.theme.FirefoxTheme @@ -43,6 +44,7 @@ import org.mozilla.fenix.theme.FirefoxTheme * @param inactiveColor The color of page indicators that are inactive. * @param leaveTrail Whether to leave the trail of indicators to show progress. * This defaults to false and just shows the current one as active. + * @param spacing The spacing between each pager indicator in [Dp]. */ @Composable fun PagerIndicator( @@ -52,10 +54,11 @@ fun PagerIndicator( activeColor: Color = FirefoxTheme.colors.indicatorActive, inactiveColor: Color = FirefoxTheme.colors.indicatorInactive, leaveTrail: Boolean = false, + spacing: Dp = 8.dp, ) { Row( modifier = modifier, - horizontalArrangement = Arrangement.spacedBy(8.dp), + horizontalArrangement = Arrangement.spacedBy(spacing), verticalAlignment = Alignment.CenterVertically, ) { val showActiveModifier: (pageIndex: Int) -> Boolean = diff --git a/app/src/main/java/org/mozilla/fenix/home/topsites/TopSites.kt b/app/src/main/java/org/mozilla/fenix/home/topsites/TopSites.kt index 949284a39b..d6874aa7a0 100644 --- a/app/src/main/java/org/mozilla/fenix/home/topsites/TopSites.kt +++ b/app/src/main/java/org/mozilla/fenix/home/topsites/TopSites.kt @@ -125,10 +125,13 @@ fun TopSites( } if (pageCount > 1) { + Spacer(modifier = Modifier.height(8.dp)) + PagerIndicator( pagerState = pagerState, pageCount = pageCount, - modifier = Modifier.padding(16.dp), + modifier = Modifier.padding(horizontal = 16.dp), + spacing = 4.dp, ) } }