fix: fix stars size for all screens sizes (#616)

Author: eslam-mohamed-dev

ui/src/main/java/com/amsterdam/ui/components/RatingBar.kt

@@ -9,16 +9,23 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredSizeIn
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.min
 import com.amsterdam.designsystem.R
 import com.amsterdam.designsystem.components.Icon
 import com.amsterdam.designsystem.theme.AppTheme
@@ -31,16 +38,24 @@ fun RatingBar(
     modifier: Modifier = Modifier,
     starsCount: Int = 10,
     starSize: Dp = 24.dp,
-    starsSpacing: Dp = 12.dp,
-    useEqualSpacing: Boolean = true
+    starsSpacing: Dp = 6.dp,
 ) {
+    val density = LocalDensity.current
+    var dialogWidth by remember { mutableStateOf(0.dp) }
+    val maxRowWidth = ((starSize.value + starsSpacing.value) * starsCount).dp
+    val availableSpace = min(maxRowWidth, dialogWidth)
+    val newStarSize = (availableSpace.value / starsCount * 5 / 6).dp
+    val newStarSpacing = ((availableSpace.value - newStarSize.value * starsCount) / starsCount).dp
+
     Row(
-        modifier = modifier.fillMaxWidth().padding(horizontal = 12.dp),
-        horizontalArrangement = if (useEqualSpacing) {
-            Arrangement.Start
-        } else {
-            Arrangement.spacedBy(starsSpacing, Alignment.CenterHorizontally)
-        }
+        modifier = modifier
+            .fillMaxWidth()
+            .onSizeChanged {
+                dialogWidth = with(density) { it.width.toDp() }
+            }
+            .padding(horizontal = 12.dp)
+            .requiredSizeIn(maxWidth = dialogWidth),
+        horizontalArrangement = Arrangement.spacedBy(newStarSpacing, Alignment.CenterHorizontally)
     ) {
         repeat(starsCount) { index ->
             val starIndex = index + 1
@@ -50,7 +65,7 @@ fun RatingBar(
 
             LaunchedEffect(key1 = selectedStarIndex) {
                 if (isSelected) {
-                    delay(index * 50L) // delay per star
+                    delay(index * 50L)
                     translateY.snapTo(10f)
                     translateY.animateTo(
                         targetValue = 0f,
@@ -71,8 +86,7 @@ fun RatingBar(
                 tint = AppTheme.color.yellowAccent,
                 modifier =
                     Modifier
-                        .size(starSize)
-                        .weight(1f)
+                        .size(newStarSize)
                         .graphicsLayer(translationY = translateY.value)
                         .clickable(
                             onClick = { onRatingStarChanged(starIndex) },

ui/src/main/java/com/amsterdam/ui/components/movieAndTvShowDetails/RateDialog.kt

@@ -76,8 +76,7 @@ fun RateDialog(
             RatingBar(
                 modifier = Modifier.padding(bottom = 24.dp),
                 selectedStarIndex = selectedStarIndex,
-                onRatingStarChanged = interaction::onChangeRating,
-                useEqualSpacing = false
+                onRatingStarChanged = interaction::onChangeRating
             )
 
             ConfirmButton(

ui/src/main/java/com/amsterdam/ui/screens/search/keywordSearch/sections/filterDialog/FilterDialog.kt

@@ -118,8 +118,7 @@ internal fun FilterDialog(
             RatingBar(
                 modifier = Modifier.padding(top = 8.dp, bottom = 12.dp),
                 selectedStarIndex = filterState.selectedStarIndex,
-                onRatingStarChanged = interaction::onChangeRatingStar,
-                useEqualSpacing = false
+                onRatingStarChanged = interaction::onChangeRatingStar
             )
             Text(
                 text = stringResource(R.string.genre),