UI: Redesign CollapsibleAlert and improve HTML text styling (#376)

### TL;DR
Enhanced the visual appearance and functionality of service alerts in the trip planner UI.

### What changed?
- Redesigned the CollapsibleAlert component with a semi-transparent background and rounded corners
- Added a "Read More" button for collapsed alerts
- Updated HtmlText component to support customizable text and URL colors
- Improved text alignment and spacing in alert displays
- Enhanced contrast between background and foreground colors for better readability

### How to test?
1. Navigate to the trip planner service alerts screen
2. Verify alerts display with semi-transparent backgrounds
3. Check that collapsed alerts show a "Read More" button
4. Confirm text is readable and properly aligned
5. Test that HTML links are properly colored and clickable
6. Verify alerts expand/collapse smoothly when tapped

### Why make this change?
To improve the user experience by making service alerts more visually appealing and easier to read. The addition of the "Read More" button makes it clearer that alerts are expandable, while the enhanced color contrast ensures better accessibility.

feature/trip-planner/ui/src/androidMain/kotlin/HtmlText.kt

@@ -6,6 +6,7 @@ import android.widget.TextView
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalFontFamilyResolver
 import androidx.compose.ui.text.font.FontFamily
@@ -20,16 +21,21 @@ import xyz.ksharma.krail.taj.theme.KrailTheme
  * Reference - https://developer.android.com/codelabs/jetpack-compose-migration#8
  */
 @Composable
-actual fun HtmlText(text: String, modifier: Modifier, onClick: () -> Unit) {
+actual fun HtmlText(
+    text: String,
+    modifier: Modifier,
+    onClick: () -> Unit,
+    color: Color,
+    urlColor: Color,
+) {
     // Remembers the HTML formatted description. Re-executes on a new description
     val htmlDescription = remember(text) {
         HtmlCompat.fromHtml(text, HtmlCompat.FROM_HTML_MODE_COMPACT)
     }
 
-    val textColor = KrailTheme.colors.label.toArgb()
+    val textColor = color.toArgb()
     val textStyle = KrailTheme.typography.bodyLarge
     val resolver: FontFamily.Resolver = LocalFontFamilyResolver.current
-    val urlColor = KrailTheme.colors.alert.toArgb()
 
     val textTypeface: Typeface = remember(resolver, textStyle) {
         resolver.resolve(
@@ -49,7 +55,7 @@ actual fun HtmlText(text: String, modifier: Modifier, onClick: () -> Unit) {
                 setTextColor(textColor)
                 setTextSize(android.util.TypedValue.COMPLEX_UNIT_SP, textStyle.fontSize.value)
                 typeface = textTypeface
-                setLinkTextColor(urlColor)
+                setLinkTextColor(urlColor.toArgb())
                 setOnClickListener {
                     onClick()
                 }

feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/CollapsibleAlert.kt

@@ -1,12 +1,8 @@
 package xyz.ksharma.krail.trip.planner.ui.alerts
 
-import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.animateContentSize
-import androidx.compose.animation.core.LinearEasing
-import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.content.MediaType.Companion.HtmlText
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -25,13 +21,13 @@ import androidx.compose.runtime.remember
 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.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import xyz.ksharma.krail.taj.LocalThemeColor
 import xyz.ksharma.krail.taj.components.Text
 import xyz.ksharma.krail.taj.theme.KrailTheme
+import xyz.ksharma.krail.taj.theme.getForegroundColor
 import xyz.ksharma.krail.taj.toAdaptiveSize
-import xyz.ksharma.krail.trip.planner.ui.components.themeBackgroundColor
 import xyz.ksharma.krail.trip.planner.ui.state.TransportMode
 import xyz.ksharma.krail.trip.planner.ui.state.alerts.ServiceAlert
 import xyz.ksharma.krail.trip.planner.ui.state.alerts.ServiceAlertPriority
@@ -44,32 +40,21 @@ fun CollapsibleAlert(
     modifier: Modifier = Modifier,
     collapsed: Boolean = true,
 ) {
-    val indexBackgroundColor by animateColorAsState(
-        targetValue = if (collapsed) themeBackgroundColor() else Color.Transparent,
-        label = "indexBackgroundColor",
-        animationSpec = tween(durationMillis = 300, easing = LinearEasing)
-    )
-
-    val parentBackgroundColor by animateColorAsState(
-        targetValue = if (collapsed) KrailTheme.colors.surface else themeBackgroundColor(),
-        label = "parentBackgroundColor",
-        animationSpec = tween(durationMillis = 300, easing = LinearEasing)
-    )
+    val backgroundColor = KrailTheme.colors.alert.copy(alpha = 0.7f)
 
     Column(
         modifier = modifier
             .fillMaxWidth()
             .background(
-                color = parentBackgroundColor,
-                shape = RoundedCornerShape(12.dp),
+                color = backgroundColor,
+                shape = RoundedCornerShape(16.dp),
             )
             .clickable(
                 indication = null,
                 interactionSource = remember { MutableInteractionSource() },
                 onClick = onClick,
             )
             .padding(vertical = 8.dp)
-            .padding(horizontal = 8.dp)
             .animateContentSize(),
         verticalArrangement = Arrangement.spacedBy(16.dp),
     ) {
@@ -81,21 +66,22 @@ fun CollapsibleAlert(
                 modifier = Modifier
                     .size(24.dp.toAdaptiveSize())
                     .clip(CircleShape)
-                    .background(
-                        color = indexBackgroundColor,
-                    ),
+                    .alignByBaseline(),
                 contentAlignment = Alignment.Center,
             ) {
                 Text(
-                    text = index.toString(),
+                    text = "$index",
                     style = KrailTheme.typography.titleSmall,
+                    color = getForegroundColor(backgroundColor),
+                    modifier = Modifier
                 )
             }
 
             Text(
                 text = serviceAlert.heading,
                 style = KrailTheme.typography.titleSmall,
-                modifier = Modifier.padding(start = 12.dp),
+                modifier = Modifier.padding(start = 12.dp).alignByBaseline(),
+                color = getForegroundColor(backgroundColor),
             )
         }
 
@@ -106,12 +92,36 @@ fun CollapsibleAlert(
                 )
             }
             if (isHtml) {
-                HtmlText(text = serviceAlert.message, onClick = onClick)
+                HtmlText(
+                    text = serviceAlert.message,
+                    onClick = onClick,
+                    color = getForegroundColor(backgroundColor),
+                    urlColor = getForegroundColor(backgroundColor),
+                    modifier = Modifier.padding(horizontal = 16.dp)
+                )
             } else {
                 Text(
                     text = serviceAlert.message,
                     style = KrailTheme.typography.body,
-                    modifier = Modifier.padding(vertical = 8.dp),
+                    color = getForegroundColor(backgroundColor),
+                    modifier = Modifier.padding(vertical = 8.dp, horizontal = 16.dp),
+                )
+            }
+        } else {
+            Box(
+                modifier = Modifier
+                    .padding(start = 12.dp + 24.dp.toAdaptiveSize(), bottom = 12.dp)
+                    .background(
+                        color = getForegroundColor(backgroundColor),
+                        shape = RoundedCornerShape(50),
+                    )
+                    .padding(horizontal = 16.dp, vertical = 2.dp),
+                contentAlignment = Alignment.Center,
+            ) {
+                Text(
+                    text = "Read More",
+                    style = KrailTheme.typography.bodySmall.copy(fontWeight = FontWeight.Bold),
+                    color = getForegroundColor(getForegroundColor(backgroundColor)),
                 )
             }
         }

feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/HtmlText.kt

@@ -2,6 +2,13 @@ package xyz.ksharma.krail.trip.planner.ui.alerts
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 
 @Composable
-expect fun HtmlText(text: String, modifier: Modifier = Modifier, onClick: () -> Unit)
+expect fun HtmlText(
+    text: String,
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+    color: Color,
+    urlColor: Color,
+)

feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/ServiceAlertScreen.kt

@@ -24,6 +24,7 @@ import androidx.compose.ui.unit.dp
 import kotlinx.collections.immutable.ImmutableSet
 import kotlinx.collections.immutable.persistentSetOf
 import kotlinx.collections.immutable.toImmutableList
+import xyz.ksharma.krail.taj.components.Divider
 import xyz.ksharma.krail.taj.components.Text
 import xyz.ksharma.krail.taj.components.TitleBar
 import xyz.ksharma.krail.taj.theme.KrailTheme

feature/trip-planner/ui/src/iosMain/kotlin/HtmlText.kt

@@ -3,11 +3,18 @@ package xyz.ksharma.krail.trip.planner.ui.alerts
 import androidx.compose.foundation.clickable
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import xyz.ksharma.krail.taj.components.Text
 
 @Composable
-actual fun HtmlText(text: String, modifier: Modifier, onClick: () -> Unit) {
-    Text(text = replaceHtmlTags(text), modifier = Modifier.clickable { onClick() })
+actual fun HtmlText(
+    text: String,
+    modifier: Modifier,
+    onClick: () -> Unit,
+    color: Color,
+    urlColor: Color,
+) {
+    Text(text = replaceHtmlTags(text), modifier = Modifier.clickable { onClick() }, color = color)
 }
 
 // TODO - A workaround for iOS until https://issuetracker.google.com/issues/139326648 is fixed.