feat: redesign disconnection indicator

app/src/main/java/chat/revolt/components/chat/DisconnectedNotice.kt

@@ -15,11 +15,13 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import chat.revolt.R
 import chat.revolt.api.realtime.DisconnectionState
@@ -27,6 +29,7 @@ import chat.revolt.api.realtime.DisconnectionState
 @Composable
 private fun DisconnectedNoticeBase(
     background: Color,
+    foreground: Color,
     icon: ImageVector,
     text: String,
     canTapToRetry: Boolean = false,
@@ -34,23 +37,27 @@ private fun DisconnectedNoticeBase(
 ) {
     Row(
         modifier = Modifier
+            .clickable(enabled = canTapToRetry, onClick = onRetry)
             .fillMaxWidth()
             .background(background)
-            .padding(vertical = 8.dp, horizontal = 16.dp)
+            .padding(vertical = 8.dp, horizontal = 16.dp),
-            .clickable(enabled = canTapToRetry, onClick = onRetry),
+        verticalAlignment = Alignment.CenterVertically,
     ) {
         Icon(
             modifier = Modifier.padding(end = 8.dp),
             imageVector = icon,
+            tint = foreground,
             contentDescription = null
         )
         Text(
             text = text,
+            color = foreground,
             fontWeight = FontWeight.Bold
         )
         if (canTapToRetry) {
             Text(
                 text = stringResource(R.string.tap_to_reconnect),
+                color = foreground,
                 modifier = Modifier.padding(start = 8.dp),
                 fontWeight = FontWeight.Normal
             )
@@ -73,30 +80,64 @@ fun DisconnectedNotice(
                     retries.value++
                 }
             }
+
             DisconnectionState.Connected -> {
                 retries.value = 0
             }
+
             else -> Unit
         }
     }
 
     when (state) {
         DisconnectionState.Disconnected -> DisconnectedNoticeBase(
-            background = Color(0xfffe4654),
+            background = Color(0xff4E0C0C),
+            foreground = Color(0xffff1744),
             icon = Icons.Default.Warning,
             text = stringResource(id = R.string.disconnected),
             canTapToRetry = true,
             onRetry = onReconnect
         )
+
         DisconnectionState.Reconnecting -> DisconnectedNoticeBase(
-            background = Color(0xfffcb205),
+            background = Color(0xff5B5300),
+            foreground = Color(0xffffea00),
             icon = Icons.Default.Refresh,
             text = stringResource(id = R.string.reconnecting),
         )
+
         DisconnectionState.Connected -> DisconnectedNoticeBase(
-            background = Color(0xff4b9f6a),
+            background = Color(0xff0E2F10),
+            foreground = Color(0xff00e676),
             icon = Icons.Default.Done,
             text = stringResource(id = R.string.reconnected),
         )
     }
 }
+
+@Preview
+@Composable
+private fun DisconnectedNoticePreview() {
+    DisconnectedNotice(
+        state = DisconnectionState.Disconnected,
+        onReconnect = {}
+    )
+}
+
+@Preview
+@Composable
+private fun ReconnectingNoticePreview() {
+    DisconnectedNotice(
+        state = DisconnectionState.Reconnecting,
+        onReconnect = {}
+    )
+}
+
+@Preview
+@Composable
+private fun ReconnectedNoticePreview() {
+    DisconnectedNotice(
+        state = DisconnectionState.Connected,
+        onReconnect = {}
+    )
+}