style(sample): Improve app colors and readability

- Switch from purple to teal color scheme for better contrast
- Use light theme instead of dark action bar
- Update collapsible section colors for readability
- Add bottom padding to prevent nav bar overlap
- Increase font size and spacing for content

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: oschwald

sample/src/main/java/com/maxmind/device/sample/MainActivity.kt

@@ -136,15 +136,17 @@ class MainActivity : AppCompatActivity() {
             text = "▶ $title"
             setTypeface(typeface, Typeface.BOLD)
             setTextSize(TypedValue.COMPLEX_UNIT_SP, 14f)
-            setPadding(0, dpToPx(8), 0, dpToPx(4))
-            setTextColor(getColor(R.color.purple_700))
+            setPadding(0, dpToPx(12), 0, dpToPx(4))
+            setTextColor(getColor(R.color.section_header))
         }
 
         val contentView = TextView(this).apply {
             text = content
-            setTextSize(TypedValue.COMPLEX_UNIT_SP, 11f)
+            setTextSize(TypedValue.COMPLEX_UNIT_SP, 12f)
             typeface = Typeface.MONOSPACE
-            setPadding(dpToPx(16), 0, 0, dpToPx(8))
+            setPadding(dpToPx(16), dpToPx(4), 0, dpToPx(12))
+            setTextColor(getColor(R.color.section_content))
+            setBackgroundColor(getColor(R.color.surface))
             visibility = View.GONE
         }
 

sample/src/main/res/layout/activity_main.xml

@@ -100,15 +100,19 @@
                     android:text="Log Output"
                     android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
                     android:padding="12dp"
-                    android:background="@color/purple_500"
-                    android:textColor="@android:color/white" />
+                    android:background="@color/primary"
+                    android:textColor="@color/text_on_primary" />
 
                 <ScrollView
                     android:id="@+id/scrollView"
                     android:layout_width="match_parent"
                     android:layout_height="0dp"
                     android:layout_weight="1"
-                    android:padding="12dp"
+                    android:paddingStart="12dp"
+                    android:paddingEnd="12dp"
+                    android:paddingTop="12dp"
+                    android:paddingBottom="48dp"
+                    android:clipToPadding="false"
                     android:fillViewport="true">
 
                     <LinearLayout

sample/src/main/res/values/colors.xml

@@ -1,5 +1,27 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
+    <!-- Primary colors - Teal -->
+    <color name="primary">#FF00897B</color>
+    <color name="primary_dark">#FF00695C</color>
+    <color name="primary_light">#FF4DB6AC</color>
+
+    <!-- Accent -->
+    <color name="accent">#FF26A69A</color>
+
+    <!-- Text colors -->
+    <color name="text_primary">#DE000000</color>
+    <color name="text_secondary">#8A000000</color>
+    <color name="text_on_primary">#FFFFFFFF</color>
+
+    <!-- Section header colors -->
+    <color name="section_header">#FF00796B</color>
+    <color name="section_content">#FF37474F</color>
+
+    <!-- Background -->
+    <color name="surface">#FFFAFAFA</color>
+    <color name="card_background">#FFFFFFFF</color>
+
+    <!-- Legacy colors (keep for compatibility) -->
     <color name="purple_200">#FFBB86FC</color>
     <color name="purple_500">#FF6200EE</color>
     <color name="purple_700">#FF3700B3</color>

sample/src/main/res/values/themes.xml

@@ -1,17 +1,19 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <!-- Base application theme. -->
-    <style name="Theme.DeviceTrackerSample" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
+    <style name="Theme.DeviceTrackerSample" parent="Theme.MaterialComponents.Light.NoActionBar">
         <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/purple_500</item>
-        <item name="colorPrimaryVariant">@color/purple_700</item>
-        <item name="colorOnPrimary">@color/white</item>
+        <item name="colorPrimary">@color/primary</item>
+        <item name="colorPrimaryVariant">@color/primary_dark</item>
+        <item name="colorOnPrimary">@color/text_on_primary</item>
         <!-- Secondary brand color. -->
-        <item name="colorSecondary">@color/teal_200</item>
-        <item name="colorSecondaryVariant">@color/teal_700</item>
-        <item name="colorOnSecondary">@color/black</item>
+        <item name="colorSecondary">@color/accent</item>
+        <item name="colorSecondaryVariant">@color/primary_dark</item>
+        <item name="colorOnSecondary">@color/text_on_primary</item>
         <!-- Status bar color. -->
-        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
-        <!-- Customize your theme here. -->
+        <item name="android:statusBarColor">@color/primary_dark</item>
+        <!-- Surface and background -->
+        <item name="colorSurface">@color/surface</item>
+        <item name="android:colorBackground">@color/surface</item>
     </style>
 </resources>