UI is a little less ugly (but still ugly)

app/src/main/java/com/geeksville/mesh/ui/MeshApp.kt

@@ -22,7 +22,14 @@ fun HomeContent() {
     Column {
         Text(text = "Meshtastic")
 
-        Text("Radio connected: ${UIState.isConnected.value}")
+
+        Row {
+            Container(LayoutSize(40.dp, 40.dp)) {
+                VectorImage(id = if (UIState.isConnected.value) R.drawable.cloud_on else R.drawable.cloud_off)
+            }
+
+            Text(if (UIState.isConnected.value) "Connected" else "Not Connected")
+        }
 
         UIState.nodes.value.values.forEach {
             NodeInfoCard(it)

app/src/main/java/com/geeksville/mesh/ui/NodeInfoCard.kt

@@ -3,15 +3,10 @@ package com.geeksville.mesh.ui
 import androidx.compose.Composable
 import androidx.ui.core.Modifier
 import androidx.ui.core.Text
-import androidx.ui.foundation.DrawImage
-import androidx.ui.layout.Container
-import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutSize
-import androidx.ui.layout.Row
+import androidx.ui.layout.*
 import androidx.ui.material.EmphasisLevels
 import androidx.ui.material.MaterialTheme
 import androidx.ui.material.ProvideEmphasis
-import androidx.ui.res.imageResource
 import androidx.ui.tooling.preview.Preview
 import androidx.ui.unit.dp
 import com.geeksville.mesh.NodeInfo
@@ -20,10 +15,26 @@ import com.geeksville.mesh.R
 
 @Composable
 fun NodeIcon(modifier: Modifier = Modifier.None, node: NodeInfo) {
-    val image = imageResource(R.drawable.ic_launcher_foreground)
+    Column {
+        Container(modifier = modifier + LayoutSize(40.dp, 40.dp)) {
+            VectorImage(id = if (node.user?.shortName != null) R.drawable.person else R.drawable.help)
+        }
 
-    Container(modifier = modifier + LayoutSize(40.dp, 40.dp)) {
-        DrawImage(image)
+        // Show our shortname if possible
+        node.user?.shortName?.let {
+            Text(it)
+        }
+
+    }
+}
+
+@Composable
+fun CompassHeading(modifier: Modifier = Modifier.None, node: NodeInfo) {
+    Column {
+        Container(modifier = modifier + LayoutSize(40.dp, 40.dp)) {
+            VectorImage(id = R.drawable.navigation)
+        }
+        Text("2.3 km")
     }
 }
 
@@ -49,14 +60,14 @@ fun NodeInfoCard(node: NodeInfo) {
     // Text("Node: ${it.user?.longName}")
     Row(modifier = LayoutPadding(16.dp)) {
         NodeIcon(
-            modifier = LayoutPadding(left = 0.dp, top = 0.dp, right = 16.dp, bottom = 0.dp),
+            modifier = LayoutPadding(left = 0.dp, top = 0.dp, right = 0.dp, bottom = 0.dp),
             node = node
         )
 
         NodeHeading(node)
 
         // FIXME - show compass instead
-        NodeIcon(node = node)
+        CompassHeading(node = node)
     }
 }