🚀 Change corners for HelpItem

* Changed corners for HelpItem, now rounded corners are only for top and bottom item

app/src/main/java/ua/acclorite/book_story/presentation/screens/help/HelpScreen.kt

@@ -158,6 +158,11 @@ private fun HelpScreen() {
             ) { index, helpTip ->
                 HelpItem(
                     helpTip = helpTip,
+                    position = when (index) {
+                        0 -> Position.TOP
+                        Constants.HELP_TIPS.lastIndex -> Position.BOTTOM
+                        else -> Position.CENTER
+                    },
                     fromStart = state.value.fromStart
                 )
             }

app/src/main/java/ua/acclorite/book_story/presentation/screens/help/components/HelpItem.kt

@@ -5,6 +5,7 @@ import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -12,6 +13,8 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CornerSize
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.ArrowDropUp
 import androidx.compose.material3.HorizontalDivider
@@ -20,6 +23,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -30,6 +34,7 @@ import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.unit.dp
 import ua.acclorite.book_story.R
 import ua.acclorite.book_story.domain.model.HelpTip
+import ua.acclorite.book_story.domain.util.Position
 import ua.acclorite.book_story.presentation.core.navigation.LocalNavigator
 import ua.acclorite.book_story.presentation.core.util.noRippleClickable
 import ua.acclorite.book_story.presentation.ui.ExpandingTransition
@@ -39,18 +44,17 @@ import ua.acclorite.book_story.presentation.ui.ExpandingTransition
  * Can be Expanded or Collapsed.
  *
  * @param helpTip [HelpTip] to be shown.
+ * @param position Position of the [helpTip](top/center/bottom).
  * @param fromStart Whether user came from Start screen.
  */
 @Composable
 fun HelpItem(
     helpTip: HelpTip,
+    position: Position,
     fromStart: Boolean
 ) {
     val onNavigate = LocalNavigator.current
-
+    val showDescription = rememberSaveable { mutableStateOf(false) }
-    val showDescription = rememberSaveable {
-        mutableStateOf(false)
-    }
 
     val animatedArrowRotation = animateFloatAsState(
         targetValue = if (showDescription.value) 0f else -180f,
@@ -69,15 +73,40 @@ fun HelpItem(
         animationSpec = tween(400)
     )
 
+    val extraLargeShape = MaterialTheme.shapes.extraLarge
+    val shape = remember(position) {
+        when (position) {
+            Position.TOP -> extraLargeShape.copy(
+                bottomStart = CornerSize(3.dp),
+                bottomEnd = CornerSize(3.dp)
+            )
+
+            Position.CENTER -> RoundedCornerShape(3.dp)
+
+            Position.SOLO -> extraLargeShape
+
+            Position.BOTTOM -> extraLargeShape.copy(
+                topStart = CornerSize(3.dp),
+                topEnd = CornerSize(3.dp)
+            )
+        }
+    }
+    val paddingValues = remember(position) {
+        when (position) {
+            Position.TOP -> PaddingValues(top = 4.dp, bottom = 1.dp)
+            Position.CENTER -> PaddingValues(vertical = 1.dp)
+            Position.SOLO -> PaddingValues(0.dp)
+            Position.BOTTOM -> PaddingValues(bottom = 4.dp, top = 1.dp)
+        }
+    }
+
     Column(
         Modifier
             .fillMaxWidth()
-            .clip(MaterialTheme.shapes.extraLarge)
+            .padding(horizontal = 16.dp)
-            .padding(horizontal = 8.dp, vertical = 4.dp)
+            .padding(paddingValues)
-            .background(
+            .clip(shape)
-                animatedBackgroundColor.value,
+            .background(animatedBackgroundColor.value)
-                MaterialTheme.shapes.extraLarge
-            )
             .padding(vertical = 18.dp, horizontal = 18.dp)
     ) {
         Row(