feat(android): brand + accessibility pass on the UI

Branding: brand-indigo Material3 theme (light-only, replacing default purple),
swap the Bluetooth icon for the app-icon glasses mark on a dark badge, and
reframe the subtitle to 'Reads code aloud through your glasses.'

Accessibility (it's an app for blind/low-vision devs): mark the title as a
heading, give the logo a contentDescription, raise text contrast (darker status
green + onSurfaceVariant for secondary text), pair the green status with a check
icon rather than color alone, and wrap the screen in verticalScroll so large
font scales / landscape don't clip. Also corrected the folder to 'Download/Meta AI'.

Verified locally: compiles, installs, and renders the rebranded screen.

Author: Builder106

android/app/src/main/kotlin/com/metahelper/app/MainActivity.kt

@@ -12,16 +12,23 @@ import android.util.Log
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Bluetooth
+import androidx.compose.material.icons.filled.CheckCircle
 import androidx.compose.material.icons.filled.Refresh
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.semantics.heading
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.core.content.ContextCompat
@@ -150,56 +157,82 @@ fun LoadingScreen(status: String) {
     }
 }
 
+// Darker green than Material's default for WCAG-AA contrast on the light card.
+private val StatusGreen = Color(0xFF2E7D32)
+
 @Composable
 fun MainScreen(manager: GlassesManager) {
     Column(
         modifier = Modifier
             .fillMaxSize()
+            .verticalScroll(rememberScrollState())  // survives large font scale / landscape
             .padding(32.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.spacedBy(24.dp)
+        verticalArrangement = Arrangement.spacedBy(20.dp)
     ) {
-        Column(horizontalAlignment = Alignment.CenterHorizontally) {
-            Icon(
-                imageVector = Icons.Default.Bluetooth,
-                contentDescription = null,
-                tint = MaterialTheme.colorScheme.primary,
-                modifier = Modifier.size(48.dp)
-            )
-            Text(
-                text = "MetaHelper",
-                style = MaterialTheme.typography.displaySmall,
-                color = MaterialTheme.colorScheme.onBackground
-            )
-            Text(
-                text = "Smart Glasses Companion",
-                style = MaterialTheme.typography.bodyLarge,
-                color = MaterialTheme.colorScheme.secondary
+        Spacer(modifier = Modifier.height(24.dp))
+
+        // The app-icon mark on its dark tile, so the light code glyph stays
+        // legible on the light background.
+        Surface(
+            shape = RoundedCornerShape(22.dp),
+            color = Color(0xFF0B0F1A),
+            modifier = Modifier.size(88.dp)
+        ) {
+            Image(
+                painter = painterResource(R.drawable.ic_launcher_foreground),
+                contentDescription = "MetaHelper logo",
+                modifier = Modifier.fillMaxSize()
             )
         }
 
-        Spacer(modifier = Modifier.weight(1f))
+        Text(
+            text = "MetaHelper",
+            style = MaterialTheme.typography.displaySmall,
+            color = MaterialTheme.colorScheme.onBackground,
+            modifier = Modifier.semantics { heading() }
+        )
+        Text(
+            text = "Reads code aloud through your glasses.",
+            style = MaterialTheme.typography.bodyLarge,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            textAlign = TextAlign.Center
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
 
         Card(
             modifier = Modifier.fillMaxWidth(),
             colors = CardDefaults.cardColors(
-                containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f)
+                containerColor = MaterialTheme.colorScheme.surfaceVariant
             )
         ) {
             Column(
                 modifier = Modifier.padding(20.dp),
-                horizontalAlignment = Alignment.CenterHorizontally
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.spacedBy(10.dp)
             ) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    Icon(
+                        imageVector = Icons.Default.CheckCircle,
+                        contentDescription = null,  // label conveyed by the adjacent text
+                        tint = StatusGreen,
+                        modifier = Modifier.size(18.dp)
+                    )
+                    Spacer(modifier = Modifier.width(6.dp))
+                    Text(
+                        text = "GALLERY WATCHER ACTIVE",
+                        style = MaterialTheme.typography.labelLarge,
+                        color = StatusGreen
+                    )
+                }
                 Text(
-                    text = "GALLERY WATCHER ACTIVE",
-                    style = MaterialTheme.typography.labelLarge,
-                    color = Color(0xFF4CAF50)
-                )
-                Spacer(modifier = Modifier.height(8.dp))
-                Text(
-                    text = "1. Take a photo with your glasses.\n2. Meta AI will save it to 'Downloads/Meta AI'.\n3. MetaHelper will detect it and play the answer!",
+                    text = "1. Take a photo with your glasses.\n" +
+                        "2. Meta AI saves it to 'Download/Meta AI'.\n" +
+                        "3. MetaHelper detects it and plays the answer.",
                     textAlign = TextAlign.Center,
-                    style = MaterialTheme.typography.bodyMedium
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant
                 )
             }
         }
@@ -218,8 +251,9 @@ fun MainScreen(manager: GlassesManager) {
 
         Text(
             text = "Cloud: Connected to Render",
-            style = MaterialTheme.typography.labelSmall,
-            color = MaterialTheme.colorScheme.outline
+            style = MaterialTheme.typography.labelMedium,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            textAlign = TextAlign.Center
         )
     }
 }

android/app/src/main/kotlin/com/metahelper/app/ui/theme/Theme.kt

@@ -3,20 +3,30 @@ package com.metahelper.app.ui.theme
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
 
-private val LightColorScheme = lightColorScheme(
-    primary = androidx.compose.ui.graphics.Color(0xFF6200EE),
-    secondary = androidx.compose.ui.graphics.Color(0xFF03DAC6),
-    tertiary = androidx.compose.ui.graphics.Color(0xFF3700B3)
+// Brand palette (matches the banner/app-icon): indigo accent on a light surface.
+// Light-only by design — no dark scheme. Colors chosen for WCAG-AA text contrast.
+private val BrandColorScheme = lightColorScheme(
+    primary = Color(0xFF6366F1),            // brand indigo
+    onPrimary = Color(0xFFFFFFFF),
+    primaryContainer = Color(0xFFE0E7FF),
+    onPrimaryContainer = Color(0xFF1E1B4B),
+    secondary = Color(0xFF4F46E5),
+    onSecondary = Color(0xFFFFFFFF),
+    background = Color(0xFFF8FAFC),
+    onBackground = Color(0xFF0B0F1A),
+    surface = Color(0xFFFFFFFF),
+    onSurface = Color(0xFF0B0F1A),
+    surfaceVariant = Color(0xFFEEF1F6),
+    onSurfaceVariant = Color(0xFF3F4356),   // ~8:1 on surfaceVariant
+    outline = Color(0xFF565B6E),
 )
 
 @Composable
-fun MetaHelperTheme(
-    content: @Composable () -> Unit
-) {
+fun MetaHelperTheme(content: @Composable () -> Unit) {
     MaterialTheme(
-        colorScheme = LightColorScheme,
+        colorScheme = BrandColorScheme,
         content = content
     )
 }
-