Alargean/compose sample updates (#99)

* save slider state when configuration changes occurs

* update sample apps color to light blue

* update sample apps top bar and status bar color to light blue

* not show top bar on the bottom screen in dual-landscape mode

* update screenshots

* change icons color

CompanionPane/src/main/java/com/microsoft/device/display/samples/companionpane/HomePage.kt

@@ -17,6 +17,8 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
+import com.microsoft.device.display.samples.companionpane.ui.components.SliderState
+import com.microsoft.device.display.samples.companionpane.ui.components.rememberSliderState
 import com.microsoft.device.display.samples.companionpane.ui.view.DualLandscapePane1
 import com.microsoft.device.display.samples.companionpane.ui.view.DualLandscapePane2
 import com.microsoft.device.display.samples.companionpane.ui.view.DualPortraitPane1
@@ -32,14 +34,17 @@ fun CompanionPaneApp(windowState: WindowState) {
     var windowMode by remember { mutableStateOf(WindowMode.SINGLE_PORTRAIT) }
     windowMode = windowState.windowMode
 
-    CompanionPaneAppContent(windowMode)
+    CompanionPaneAppContent(windowMode, rememberSliderState())
 }
 
 @Composable
-fun CompanionPaneAppContent(windowMode: WindowMode) {
+fun CompanionPaneAppContent(
+    windowMode: WindowMode,
+    sliderState: SliderState = rememberSliderState()
+) {
     TwoPaneLayout(
-        pane1 = { Pane1(windowMode) },
-        pane2 = { Pane2(windowMode) },
+        pane1 = { Pane1(windowMode, sliderState) },
+        pane2 = { Pane2(windowMode, sliderState) },
     )
 }
 
@@ -53,13 +58,13 @@ fun CompanionPaneTopBar(title: String? = null) {
 }
 
 @Composable
-fun Pane1(windowMode: WindowMode) {
+fun Pane1(windowMode: WindowMode, sliderState: SliderState = rememberSliderState()) {
     Scaffold(
         topBar = { CompanionPaneTopBar(stringResource(R.string.app_name)) }
     ) {
         when (windowMode) {
             WindowMode.SINGLE_PORTRAIT -> PortraitLayout()
-            WindowMode.SINGLE_LANDSCAPE -> LandscapeLayout()
+            WindowMode.SINGLE_LANDSCAPE -> LandscapeLayout(sliderState)
             WindowMode.DUAL_PORTRAIT -> DualPortraitPane1()
             WindowMode.DUAL_LANDSCAPE -> DualLandscapePane1()
         }
@@ -67,16 +72,16 @@ fun Pane1(windowMode: WindowMode) {
 }
 
 @Composable
-fun Pane2(windowMode: WindowMode) {
+fun Pane2(windowMode: WindowMode, sliderState: SliderState = rememberSliderState()) {
     when (windowMode) {
         WindowMode.DUAL_PORTRAIT -> {
             Scaffold(
                 topBar = { CompanionPaneTopBar() }
             ) {
-                DualPortraitPane2()
+                DualPortraitPane2(sliderState)
             }
         }
-        WindowMode.DUAL_LANDSCAPE -> DualLandscapePane2()
+        WindowMode.DUAL_LANDSCAPE -> DualLandscapePane2(sliderState)
         else -> {}
     }
 }

CompanionPane/src/main/java/com/microsoft/device/display/samples/companionpane/ui/components/AdjustmentsPanel.kt

@@ -18,29 +18,41 @@ private val iconWidth = 25.dp
 private val controlWidth = 70.dp
 
 @Composable
-fun MagicWandPanel(modifier: Modifier) {
-    AdjustmentPanel(modifier, R.drawable.filter_icon, R.string.magic_wand)
+fun MagicWandPanel(modifier: Modifier, sliderPosition: Float, onValueChange: (Float) -> Unit) {
+    AdjustmentPanel(
+        modifier,
+        R.drawable.filter_icon,
+        R.string.magic_wand,
+        sliderPosition,
+        onValueChange
+    )
 }
 
 @Composable
-fun DefinitionPanel(modifier: Modifier) {
-    AdjustmentPanel(modifier, R.drawable.hdr_icon, R.string.definition)
+fun DefinitionPanel(modifier: Modifier, sliderPosition: Float, onValueChange: (Float) -> Unit) {
+    AdjustmentPanel(modifier, R.drawable.hdr_icon, R.string.definition, sliderPosition, onValueChange)
 }
 
 @Composable
-fun VignettePanel(modifier: Modifier) {
-    AdjustmentPanel(modifier, R.drawable.zoom_icon, R.string.vignette)
+fun VignettePanel(modifier: Modifier, sliderPosition: Float, onValueChange: (Float) -> Unit) {
+    AdjustmentPanel(modifier, R.drawable.zoom_icon, R.string.vignette, sliderPosition, onValueChange)
 }
 
 @Composable
-fun BrightnessPanel(modifier: Modifier) {
-    AdjustmentPanel(modifier, R.drawable.brightness_icon, R.string.brightness)
+fun BrightnessPanel(modifier: Modifier, sliderPosition: Float, onValueChange: (Float) -> Unit) {
+    AdjustmentPanel(modifier, R.drawable.brightness_icon, R.string.brightness, sliderPosition, onValueChange)
 }
 
 @Composable
-private fun AdjustmentPanel(modifier: Modifier, @DrawableRes icon: Int, @StringRes label: Int) {
+private fun AdjustmentPanel(
+    modifier: Modifier,
+    @DrawableRes icon: Int,
+    @StringRes label: Int,
+    sliderPosition: Float,
+    onValueChange: (Float) -> Unit
+) {
     Row {
         ImageWithText(icon, stringResource(label), iconWidth, controlWidth)
-        SliderControl(modifier)
+        SliderControl(modifier, sliderPosition, onValueChange)
     }
 }

CompanionPane/src/main/java/com/microsoft/device/display/samples/companionpane/ui/components/Components.kt

@@ -15,10 +15,6 @@ import androidx.compose.material.Slider
 import androidx.compose.material.SliderDefaults
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
@@ -28,17 +24,13 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.microsoft.device.display.samples.companionpane.R
-import kotlin.random.Random
 
 @Composable
-fun SliderControl(modifier: Modifier) {
-    val defaultValue = Random.nextInt(0, 100)
-    var sliderPosition by remember { mutableStateOf(defaultValue.toFloat()) }
-
+fun SliderControl(modifier: Modifier, sliderPosition: Float, onValueChange: (Float) -> Unit) {
     Slider(
         modifier = modifier,
         value = sliderPosition,
-        onValueChange = { sliderPosition = it },
+        onValueChange = onValueChange,
         valueRange = 0f..100f,
         colors = SliderDefaults.colors(
             thumbColor = MaterialTheme.colors.secondary,

CompanionPane/src/main/java/com/microsoft/device/display/samples/companionpane/ui/components/SliderState.kt

@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+package com.microsoft.device.display.samples.companionpane.ui.components
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.mapSaver
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+
+const val MAGIC_WAND_KEY = "magicWandKey"
+const val DEFINITION_KEY = "definitionKey"
+const val VIGNETTE_KEY = "vignetteKey"
+const val BRIGHTNESS_KEY = "brightnessKey"
+const val DEFAULT_SLIDER_VALUE = 50f
+
+class SliderState(
+    magicWand: Float,
+    definition: Float,
+    vignette: Float,
+    brightness: Float
+) {
+
+    private var _magicWand by mutableStateOf(magicWand)
+    var magicWand: Float
+        get() = _magicWand
+        set(value) {
+            _magicWand = value
+        }
+
+    private var _definition by mutableStateOf(definition)
+    var definition: Float
+        get() = _definition
+        set(value) {
+            _definition = value
+        }
+
+    private var _vignette by mutableStateOf(vignette)
+    var vignette: Float
+        get() = _vignette
+        set(value) {
+            _vignette = value
+        }
+
+    private var _brightness by mutableStateOf(brightness)
+    var brightness: Float
+        get() = _brightness
+        set(value) {
+            _brightness = value
+        }
+
+    companion object {
+        val Saver = run {
+            mapSaver(
+                save = {
+                    mapOf(
+                        MAGIC_WAND_KEY to it.magicWand,
+                        DEFINITION_KEY to it.definition,
+                        VIGNETTE_KEY to it.vignette,
+                        BRIGHTNESS_KEY to it.brightness,
+                    )
+                },
+                restore = {
+                    SliderState(
+                        it[MAGIC_WAND_KEY] as Float,
+                        it[DEFINITION_KEY] as Float,
+                        it[VIGNETTE_KEY] as Float,
+                        it[BRIGHTNESS_KEY] as Float
+                    )
+                }
+            )
+        }
+    }
+}
+
+@Composable
+fun rememberSliderState(
+    magicWand: Float = DEFAULT_SLIDER_VALUE,
+    definition: Float = DEFAULT_SLIDER_VALUE,
+    vignette: Float = DEFAULT_SLIDER_VALUE,
+    brightness: Float = DEFAULT_SLIDER_VALUE,
+): SliderState = rememberSaveable(saver = SliderState.Saver) {
+    SliderState(
+        magicWand = magicWand,
+        definition = definition,
+        vignette = vignette,
+        brightness = brightness
+    )
+}

CompanionPane/src/main/java/com/microsoft/device/display/samples/companionpane/ui/theme/Color.kt

@@ -10,3 +10,4 @@ import androidx.compose.ui.graphics.Color
 val darkGray = Color(0xFF2B2B2B)
 val gray = Color(0xFF555555)
 val lightGray = Color.Gray
+val lightBlue = Color(0xFF0085FF)

CompanionPane/src/main/java/com/microsoft/device/display/samples/companionpane/ui/theme/Theme.kt

@@ -12,9 +12,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 
 private val DarkColorPalette = darkColors(
-    primary = lightGray,
+    primary = lightBlue,
     primaryVariant = gray,
-    onPrimary = darkGray,
+    onPrimary = Color.White,
     secondary = Color.White,
     background = darkGray,
     surface = darkGray,

CompanionPane/src/main/java/com/microsoft/device/display/samples/companionpane/ui/view/LandscapeLayouts.kt

@@ -33,6 +33,7 @@ import com.microsoft.device.display.samples.companionpane.ui.components.FilterPa
 import com.microsoft.device.display.samples.companionpane.ui.components.ImagePanel
 import com.microsoft.device.display.samples.companionpane.ui.components.MagicWandPanel
 import com.microsoft.device.display.samples.companionpane.ui.components.ShortFilterControl
+import com.microsoft.device.display.samples.companionpane.ui.components.SliderState
 import com.microsoft.device.display.samples.companionpane.ui.components.VignettePanel
 
 private val shortSlideWidth = 200.dp
@@ -52,7 +53,7 @@ fun DualLandscapePane1() {
 }
 
 @Composable
-fun DualLandscapePane2() {
+fun DualLandscapePane2(sliderState: SliderState) {
     Surface {
         Column(
             modifier = Modifier
@@ -69,14 +70,34 @@ fun DualLandscapePane2() {
                     .horizontalScroll(rememberScrollState())
             ) {
                 Column(verticalArrangement = Arrangement.SpaceEvenly) {
-                    MagicWandPanel(modifier = Modifier.width(shortSlideWidth))
+                    MagicWandPanel(
+                        modifier = Modifier.width(shortSlideWidth),
+                        sliderState.magicWand
+                    ) {
+                        sliderState.magicWand = it
+                    }
                     Spacer(Modifier.height(20.dp))
-                    DefinitionPanel(modifier = Modifier.width(shortSlideWidth))
+                    DefinitionPanel(
+                        modifier = Modifier.width(shortSlideWidth),
+                        sliderState.definition
+                    ) {
+                        sliderState.definition = it
+                    }
                 }
                 Column(verticalArrangement = Arrangement.SpaceEvenly) {
-                    VignettePanel(modifier = Modifier.width(shortSlideWidth))
+                    VignettePanel(
+                        modifier = Modifier.width(shortSlideWidth),
+                        sliderState.vignette
+                    ) {
+                        sliderState.vignette = it
+                    }
                     Spacer(Modifier.height(20.dp))
-                    BrightnessPanel(modifier = Modifier.width(shortSlideWidth))
+                    BrightnessPanel(
+                        modifier = Modifier.width(shortSlideWidth),
+                        sliderState.brightness
+                    ) {
+                        sliderState.brightness = it
+                    }
                 }
             }
             ShortFilterControl()
@@ -85,7 +106,7 @@ fun DualLandscapePane2() {
 }
 
 @Composable
-fun LandscapeLayout() {
+fun LandscapeLayout(sliderState: SliderState) {
     Column(
         modifier = Modifier
             .fillMaxSize()
@@ -108,10 +129,24 @@ fun LandscapeLayout() {
                     .padding(top = 10.dp),
                 verticalArrangement = Arrangement.spacedBy(20.dp)
             ) {
-                MagicWandPanel(modifier = Modifier.width(shortSlideWidth))
-                DefinitionPanel(modifier = Modifier.width(shortSlideWidth))
-                VignettePanel(modifier = Modifier.width(shortSlideWidth))
-                BrightnessPanel(modifier = Modifier.width(shortSlideWidth))
+                MagicWandPanel(modifier = Modifier.width(shortSlideWidth), sliderState.magicWand) {
+                    sliderState.magicWand = it
+                }
+                DefinitionPanel(
+                    modifier = Modifier.width(shortSlideWidth),
+                    sliderState.definition
+                ) {
+                    sliderState.definition = it
+                }
+                VignettePanel(modifier = Modifier.width(shortSlideWidth), sliderState.vignette) {
+                    sliderState.vignette = it
+                }
+                BrightnessPanel(
+                    modifier = Modifier.width(shortSlideWidth),
+                    sliderState.brightness
+                ) {
+                    sliderState.brightness = it
+                }
             }
         }
         ShortFilterControl()

CompanionPane/src/main/java/com/microsoft/device/display/samples/companionpane/ui/view/PortraitLayouts.kt

@@ -27,6 +27,7 @@ import com.microsoft.device.display.samples.companionpane.ui.components.FullFilt
 import com.microsoft.device.display.samples.companionpane.ui.components.ImagePanel
 import com.microsoft.device.display.samples.companionpane.ui.components.MagicWandPanel
 import com.microsoft.device.display.samples.companionpane.ui.components.ShortFilterControl
+import com.microsoft.device.display.samples.companionpane.ui.components.SliderState
 import com.microsoft.device.display.samples.companionpane.ui.components.VignettePanel
 
 private val longSliderWidth = 350.dp
@@ -45,7 +46,7 @@ fun DualPortraitPane1() {
 }
 
 @Composable
-fun DualPortraitPane2() {
+fun DualPortraitPane2(sliderState: SliderState) {
     Column(
         modifier = Modifier
             .fillMaxSize()
@@ -54,10 +55,18 @@ fun DualPortraitPane2() {
         verticalArrangement = Arrangement.spacedBy(80.dp, Alignment.CenterVertically)
     ) {
         Column(verticalArrangement = Arrangement.spacedBy(35.dp)) {
-            MagicWandPanel(modifier = Modifier.width(longSliderWidth))
-            DefinitionPanel(modifier = Modifier.width(longSliderWidth))
-            VignettePanel(modifier = Modifier.width(longSliderWidth))
-            BrightnessPanel(modifier = Modifier.width(longSliderWidth))
+            MagicWandPanel(modifier = Modifier.width(longSliderWidth), sliderState.magicWand) {
+                sliderState.magicWand = it
+            }
+            DefinitionPanel(modifier = Modifier.width(longSliderWidth), sliderState.definition) {
+                sliderState.definition = it
+            }
+            VignettePanel(modifier = Modifier.width(longSliderWidth), sliderState.vignette) {
+                sliderState.vignette = it
+            }
+            BrightnessPanel(modifier = Modifier.width(longSliderWidth), sliderState.brightness) {
+                sliderState.brightness = it
+            }
         }
         ShortFilterControl()
     }

CompanionPane/src/main/res/drawable/ic_launcher_foreground.xml

@@ -14,41 +14,41 @@
         android:pathData="M24,30L72.5957,30A3,3 0,0 1,75.5957 33L75.5957,63A3,3 0,0 1,72.5957 66L24,66A3,3 0,0 1,21 63L21,33A3,3 0,0 1,24 30z"
         android:strokeWidth="2"
         android:fillColor="#00000000"
-        android:strokeColor="#000000"/>
+        android:strokeColor="#9E9E9E"/>
     <path
         android:pathData="M48.6172,29V67"
         android:strokeWidth="2"
         android:fillColor="#00000000"
-        android:strokeColor="#000000"/>
+        android:strokeColor="#9E9E9E"/>
     <path
         android:pathData="M25.6172,34L43.6172,34A1,1 0,0 1,44.6172 35L44.6172,62A1,1 0,0 1,43.6172 63L25.6172,63A1,1 0,0 1,24.6172 62L24.6172,35A1,1 0,0 1,25.6172 34z"
-        android:fillColor="#888888"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M52.1172,56L71.1172,56A0.5,0.5 0,0 1,71.6172 56.5L71.6172,56.5A0.5,0.5 0,0 1,71.1172 57L52.1172,57A0.5,0.5 0,0 1,51.6172 56.5L51.6172,56.5A0.5,0.5 0,0 1,52.1172 56z"
-        android:fillColor="#888888"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M52.1172,52L71.1172,52A0.5,0.5 0,0 1,71.6172 52.5L71.6172,52.5A0.5,0.5 0,0 1,71.1172 53L52.1172,53A0.5,0.5 0,0 1,51.6172 52.5L51.6172,52.5A0.5,0.5 0,0 1,52.1172 52z"
-        android:fillColor="#888888"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M53.1172,52.5m-1.5,0a1.5,1.5 0,1 1,3 0a1.5,1.5 0,1 1,-3 0"
-        android:fillColor="#888888"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M70.1172,56.5m-1.5,0a1.5,1.5 0,1 1,3 0a1.5,1.5 0,1 1,-3 0"
-        android:fillColor="#888888"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M53.1172,47.5m-1.5,0a1.5,1.5 0,1 1,3 0a1.5,1.5 0,1 1,-3 0"
-        android:fillColor="#888888"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M57.1172,47.5m-1.5,0a1.5,1.5 0,1 1,3 0a1.5,1.5 0,1 1,-3 0"
-        android:fillColor="#888888"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M61.1172,47.5m-1.5,0a1.5,1.5 0,1 1,3 0a1.5,1.5 0,1 1,-3 0"
-        android:fillColor="#888888"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M65.1172,47.5m-1.5,0a1.5,1.5 0,1 1,3 0a1.5,1.5 0,1 1,-3 0"
-        android:fillColor="#888888"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M69.1172,47.5m-1.5,0a1.5,1.5 0,1 1,3 0a1.5,1.5 0,1 1,-3 0"
-        android:fillColor="#888888"/>
+        android:fillColor="#0085FF"/>
   </group>
 </vector>

CompanionPane/src/main/res/values-night/themes.xml

@@ -7,8 +7,8 @@
     <!-- Base application theme. -->
     <style name="Theme.CompanionPaneApps" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/light_gray</item>
-        <item name="colorPrimaryVariant">@color/gray</item>
+        <item name="colorPrimary">@color/light_blue</item>
+        <item name="colorPrimaryVariant">@color/light_blue</item>
         <item name="colorOnPrimary">@color/dark_gray</item>
         <!-- Secondary brand color. -->
         <item name="colorSecondary">@color/white</item>

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

@@ -10,4 +10,5 @@
     <color name="gray">#FF555555</color>
     <color name="dark_gray">#FF2B2B2B</color>
     <color name="light_gray">#FF888888</color>
+    <color name="light_blue">#0085FF</color>
 </resources>

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

@@ -7,8 +7,8 @@
     <!-- Base application theme. -->
     <style name="Theme.CompanionPaneApps" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/light_gray</item>
-        <item name="colorPrimaryVariant">@color/gray</item>
+        <item name="colorPrimary">@color/light_blue</item>
+        <item name="colorPrimaryVariant">@color/light_blue</item>
         <item name="colorOnPrimary">@color/dark_gray</item>
         <!-- Secondary brand color. -->
         <item name="colorSecondary">@color/white</item>

DualView/src/main/java/com/microsoft/device/display/samples/dualview/ui/theme/Color.kt

@@ -10,3 +10,4 @@ import androidx.compose.ui.graphics.Color
 val gray500 = Color(0xFF9E9E9E)
 val red200 = Color(0xFFF54D4D)
 val red500 = Color(0xFFF65F5F)
+val lightBlue = Color(0xFF0085FF)

DualView/src/main/java/com/microsoft/device/display/samples/dualview/ui/theme/Theme.kt

@@ -5,37 +5,22 @@
 
 package com.microsoft.device.display.samples.dualview.ui.theme
 
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.darkColors
 import androidx.compose.material.lightColors
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 
-private val DarkColorPalette = darkColors(
-    primary = red200,
-    primaryVariant = red500,
-    secondary = gray500,
-    onPrimary = Color.White,
-)
-
 private val LightColorPalette = lightColors(
-    primary = red200,
-    primaryVariant = red500,
+    primary = lightBlue,
+    primaryVariant = lightBlue,
     secondary = gray500,
     onPrimary = Color.White,
 )
 
 @Composable
-fun DualViewAppTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
-    val colors = if (darkTheme) {
-        DarkColorPalette
-    } else {
-        LightColorPalette
-    }
-
+fun DualViewAppTheme(content: @Composable () -> Unit) {
     MaterialTheme(
-        colors = colors,
+        colors = LightColorPalette,
         typography = typography,
         shapes = shapes,
         content = content

DualView/src/main/java/com/microsoft/device/display/samples/dualview/ui/view/HomePage.kt

@@ -26,6 +26,7 @@ fun DualViewApp(windowState: WindowState) {
     val viewWidth = if (windowState.isDualScreen()) pane1SizeWidthDp else screenWidthDp
 
     DualViewAppContent(
+        isDualLandscape = windowState.isDualLandscape(),
         viewWidth = with(LocalDensity.current) { viewWidth.toPx() }.roundToInt(),
         selectedIndex = selectedIndex,
         updateSelectedIndex = updateSelectedIndex,
@@ -34,12 +35,13 @@ fun DualViewApp(windowState: WindowState) {
 
 @Composable
 fun DualViewAppContent(
+    isDualLandscape: Boolean,
     viewWidth: Int,
     selectedIndex: Int,
     updateSelectedIndex: (Int) -> Unit,
 ) {
     TwoPaneLayout(
         pane1 = { RestaurantViewWithTopBar(viewWidth, selectedIndex, updateSelectedIndex) },
-        pane2 = { MapViewWithTopBar(selectedIndex) }
+        pane2 = { MapViewWithTopBar(isDualLandscape, selectedIndex) }
     )
 }

DualView/src/main/java/com/microsoft/device/display/samples/dualview/ui/view/MapView.kt

@@ -16,6 +16,7 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.offset
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
 import androidx.compose.material.TopAppBar
@@ -46,9 +47,9 @@ import kotlin.math.roundToInt
 private const val nonSelection = -1
 
 @Composable
-fun TwoPaneScope.MapViewWithTopBar(selectedIndex: Int) {
+fun TwoPaneScope.MapViewWithTopBar(isDualLandscape: Boolean, selectedIndex: Int) {
     Scaffold(
-        topBar = { MapTopBar() }
+        topBar = { if (!isDualLandscape) MapTopBar() }
     ) {
         MapView(selectedIndex)
     }
@@ -80,7 +81,8 @@ fun TwoPaneScope.MapTopBar() {
                     )
                 }
             }
-        }
+        },
+        backgroundColor = MaterialTheme.colors.primary
     )
 }
 

DualView/src/main/java/com/microsoft/device/display/samples/dualview/ui/view/RestaurantView.kt

@@ -89,7 +89,8 @@ fun TwoPaneScope.RestaurantTopBar() {
                     color = MaterialTheme.colors.onPrimary
                 )
             )
-        }
+        },
+        backgroundColor = MaterialTheme.colors.primary
     )
 }
 

DualView/src/main/res/drawable/ic_launcher_foreground.xml

@@ -14,27 +14,27 @@
         android:pathData="M23,30L71.5957,30A3,3 0,0 1,74.5957 33L74.5957,63A3,3 0,0 1,71.5957 66L23,66A3,3 0,0 1,20 63L20,33A3,3 0,0 1,23 30z"
         android:strokeWidth="2"
         android:fillColor="#00000000"
-        android:strokeColor="#000000"/>
+        android:strokeColor="#9E9E9E"/>
     <path
         android:pathData="M47.2129,29V67"
         android:strokeWidth="2"
         android:fillColor="#00000000"
-        android:strokeColor="#000000"/>
+        android:strokeColor="#9E9E9E"/>
     <path
         android:strokeWidth="1"
         android:pathData="M60.6565,56L53.2129,53.0395V43.4671M60.6565,56L68.2129,53.0395V43.4671M60.6565,56V46.3289M68.2129,43.4671L60.6565,41L53.2129,43.4671M68.2129,43.4671L60.6565,46.3289M53.2129,43.4671L60.6565,46.3289"
         android:fillColor="#00000000"
-        android:strokeColor="#F65F5F"/>
+        android:strokeColor="#0085FF"/>
     <path
         android:strokeWidth="1"
         android:pathData="M27.7129,41.5h14v14h-14z"
         android:fillColor="#00000000"
-        android:strokeColor="#F65F5F"/>
+        android:strokeColor="#0085FF"/>
     <path
         android:pathData="M55.2129,49.5V48L57.9993,49.1117V49.6117V50.6117L57.5349,50.4264L56.6061,50.0558L55.2129,49.5Z"
-        android:fillColor="#F65F5F"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M32.2129,49V47H37.2129V47.6667V49H36.3796H34.7129H32.2129Z"
-        android:fillColor="#F65F5F"/>
+        android:fillColor="#0085FF"/>
   </group>
 </vector>

DualView/src/main/res/values-night/themes.xml

@@ -7,8 +7,8 @@
     <!-- Base application theme. -->
     <style name="Theme.DualViewComposeSampleTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/red_500</item>
-        <item name="colorPrimaryVariant">@color/red_200</item>
+        <item name="colorPrimary">@color/light_blue</item>
+        <item name="colorPrimaryVariant">@color/light_blue</item>
         <item name="colorOnPrimary">@color/white</item>
         <!-- Secondary brand color. -->
         <item name="colorSecondary">@color/gray_500</item>

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

@@ -17,4 +17,5 @@
     <color name="red_200">#FFF65F5F</color>
     <color name="red_500">#FFF54D4D</color>
     <color name="gray_500">#FF9E9E9E</color>
+    <color name="light_blue">#0085FF</color>
 </resources>

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

@@ -6,8 +6,8 @@
     <!-- Base application theme. -->
     <style name="Theme.DualViewComposeSampleTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/red_500</item>
-        <item name="colorPrimaryVariant">@color/red_200</item>
+        <item name="colorPrimary">@color/light_blue</item>
+        <item name="colorPrimaryVariant">@color/light_blue</item>
         <item name="colorOnPrimary">@color/white</item>
         <!-- Secondary brand color. -->
         <item name="colorSecondary">@color/gray_500</item>

ExtendedCanvas/src/main/java/com/microsoft/device/display/samples/extendedcanvas/ui/Color.kt

@@ -10,3 +10,4 @@ import androidx.compose.ui.graphics.Color
 val teal200 = Color(0xFF03DAC5)
 val teal500 = Color(0xFF017374)
 val teal700 = Color(0xFF01A299)
+val lightBlue = Color(0xFF0085FF)

ExtendedCanvas/src/main/java/com/microsoft/device/display/samples/extendedcanvas/ui/Theme.kt

@@ -13,16 +13,17 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 
 private val DarkColorPalette = darkColors(
-    primary = teal700,
-    primaryVariant = teal700,
+    primary = lightBlue,
+    primaryVariant = lightBlue,
     secondary = teal200,
     onPrimary = Color.White
 )
 
 private val LightColorPalette = lightColors(
-    primary = teal700,
-    primaryVariant = teal700,
-    secondary = teal200
+    primary = lightBlue,
+    primaryVariant = lightBlue,
+    secondary = teal200,
+    onPrimary = Color.White
 )
 
 @Composable

ExtendedCanvas/src/main/res/drawable/ic_launcher_foreground.xml

@@ -14,14 +14,14 @@
         android:pathData="M23,30L71.5957,30A3,3 0,0 1,74.5957 33L74.5957,63A3,3 0,0 1,71.5957 66L23,66A3,3 0,0 1,20 63L20,33A3,3 0,0 1,23 30z"
         android:strokeWidth="2"
         android:fillColor="#00000000"
-        android:strokeColor="#000000"/>
+        android:strokeColor="#9E9E9E"/>
     <path
         android:pathData="M25,33L69.5,33A2,2 0,0 1,71.5 35L71.5,61A2,2 0,0 1,69.5 63L25,63A2,2 0,0 1,23 61L23,35A2,2 0,0 1,25 33z"
-        android:fillColor="#01A299"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M47,29V67"
         android:strokeWidth="2"
         android:fillColor="#00000000"
-        android:strokeColor="#000000"/>
+        android:strokeColor="#9E9E9E"/>
   </group>
 </vector>

ExtendedCanvas/src/main/res/values-night/themes.xml

@@ -7,8 +7,8 @@
     <!-- Base application theme. -->
     <style name="Theme.ExtendedCanvasApps" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/teal_200</item>
-        <item name="colorPrimaryVariant">@color/teal_700</item>
+        <item name="colorPrimary">@color/light_blue</item>
+        <item name="colorPrimaryVariant">@color/light_blue</item>
         <item name="colorOnPrimary">@color/teal_200</item>
         <!-- Secondary brand color. -->
         <item name="colorSecondary">@color/teal_200</item>

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

@@ -12,4 +12,5 @@
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
+    <color name="light_blue">#0085FF</color>
 </resources>

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

@@ -7,8 +7,8 @@
     <!-- Base application theme. -->
     <style name="Theme.ExtendedCanvasApps" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/purple_500</item>
-        <item name="colorPrimaryVariant">@color/teal_700</item>
+        <item name="colorPrimary">@color/light_blue</item>
+        <item name="colorPrimaryVariant">@color/light_blue</item>
         <item name="colorOnPrimary">@color/white</item>
         <!-- Secondary brand color. -->
         <item name="colorSecondary">@color/teal_200</item>

ListDetail/src/main/java/com/microsoft/device/display/samples/listdetail/ui/theme/Color.kt

@@ -12,3 +12,4 @@ val purple500 = Color(0xFF6200EE)
 val purple700 = Color(0xFF3700B3)
 val teal200 = Color(0xFF03DAC5)
 val darkGray = Color(0xFF141414)
+val lightBlue = Color(0xFF0085FF)

ListDetail/src/main/java/com/microsoft/device/display/samples/listdetail/ui/theme/Theme.kt

@@ -13,19 +13,21 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 
 private val DarkColorPalette = darkColors(
-    primary = purple500,
-    primaryVariant = purple200,
+    primary = lightBlue,
+    primaryVariant = lightBlue,
     secondary = teal200,
     background = Color.Black,
-    onBackground = Color.White
+    onBackground = Color.White,
+    onPrimary = Color.White,
 )
 
 private val LightColorPalette = lightColors(
-    primary = purple500,
-    primaryVariant = purple200,
+    primary = lightBlue,
+    primaryVariant = lightBlue,
     secondary = teal200,
     background = Color.Black,
-    onBackground = Color.White
+    onBackground = Color.White,
+    onPrimary = Color.White,
 )
 
 @Composable

ListDetail/src/main/java/com/microsoft/device/display/samples/listdetail/ui/view/DetailView.kt

@@ -18,6 +18,7 @@ import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
 import androidx.compose.material.TopAppBar
@@ -61,7 +62,8 @@ fun TwoPaneScope.DetailViewTopBar() {
             if (isSinglePane) {
                 DetailViewTopBarButton()
             }
-        }
+        },
+        backgroundColor = MaterialTheme.colors.primary
     )
 }
 

ListDetail/src/main/java/com/microsoft/device/display/samples/listdetail/ui/view/ListView.kt

@@ -58,7 +58,8 @@ fun ListViewTopBar() {
                     fontWeight = FontWeight.Bold
                 )
             )
-        }
+        },
+        backgroundColor = MaterialTheme.colors.primary
     )
 }
 

ListDetail/src/main/res/drawable/ic_launcher_foreground.xml

@@ -14,29 +14,29 @@
         android:pathData="M23,30L71.5957,30A3,3 0,0 1,74.5957 33L74.5957,63A3,3 0,0 1,71.5957 66L23,66A3,3 0,0 1,20 63L20,33A3,3 0,0 1,23 30z"
         android:strokeWidth="2"
         android:fillColor="#00000000"
-        android:strokeColor="#000000"/>
+        android:strokeColor="#9E9E9E"/>
     <path
         android:pathData="M47.4043,29V67"
         android:strokeWidth="2"
         android:fillColor="#00000000"
-        android:strokeColor="#000000"/>
+        android:strokeColor="#9E9E9E"/>
     <path
         android:pathData="M24.4043,34L42.4043,34A1,1 0,0 1,43.4043 35L43.4043,36A1,1 0,0 1,42.4043 37L24.4043,37A1,1 0,0 1,23.4043 36L23.4043,35A1,1 0,0 1,24.4043 34z"
-        android:fillColor="#141414"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M52.4043,34L70.4043,34A1,1 0,0 1,71.4043 35L71.4043,62A1,1 0,0 1,70.4043 63L52.4043,63A1,1 0,0 1,51.4043 62L51.4043,35A1,1 0,0 1,52.4043 34z"
-        android:fillColor="#141414"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M24.4043,39L42.4043,39A1,1 0,0 1,43.4043 40L43.4043,41A1,1 0,0 1,42.4043 42L24.4043,42A1,1 0,0 1,23.4043 41L23.4043,40A1,1 0,0 1,24.4043 39z"
-        android:fillColor="#141414"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M24.4043,44L42.4043,44A1,1 0,0 1,43.4043 45L43.4043,46A1,1 0,0 1,42.4043 47L24.4043,47A1,1 0,0 1,23.4043 46L23.4043,45A1,1 0,0 1,24.4043 44z"
-        android:fillColor="#141414"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M24.4043,49L42.4043,49A1,1 0,0 1,43.4043 50L43.4043,51A1,1 0,0 1,42.4043 52L24.4043,52A1,1 0,0 1,23.4043 51L23.4043,50A1,1 0,0 1,24.4043 49z"
-        android:fillColor="#141414"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M24.4043,54L42.4043,54A1,1 0,0 1,43.4043 55L43.4043,56A1,1 0,0 1,42.4043 57L24.4043,57A1,1 0,0 1,23.4043 56L23.4043,55A1,1 0,0 1,24.4043 54z"
-        android:fillColor="#141414"/>
+        android:fillColor="#0085FF"/>
   </group>
 </vector>

ListDetail/src/main/res/values-night/themes.xml

@@ -7,8 +7,8 @@
     <!-- Base application theme. -->
     <style name="Theme.ListDetailComposeSample" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/purple_200</item>
-        <item name="colorPrimaryVariant">@color/purple_700</item>
+        <item name="colorPrimary">@color/light_blue</item>
+        <item name="colorPrimaryVariant">@color/light_blue</item>
         <item name="colorOnPrimary">@color/black</item>
         <!-- Secondary brand color. -->
         <item name="colorSecondary">@color/teal_200</item>

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

@@ -14,4 +14,5 @@
     <color name="white">#FFFFFFFF</color>
     <color name="dark_gary">#FF141414</color>
     <color name="light_gary">#FF878181</color>
+    <color name="light_blue">#0085FF</color>
 </resources>

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

@@ -7,8 +7,8 @@
     <!-- Base application theme. -->
     <style name="Theme.ListDetailComposeSample" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/purple_500</item>
-        <item name="colorPrimaryVariant">@color/purple_200</item>
+        <item name="colorPrimary">@color/light_blue</item>
+        <item name="colorPrimaryVariant">@color/light_blue</item>
         <item name="colorOnPrimary">@color/white</item>
         <!-- Secondary brand color. -->
         <item name="colorSecondary">@color/teal_200</item>

TwoPage/src/main/java/com/microsoft/device/display/samples/twopage/ui/theme/Color.kt

@@ -6,3 +6,4 @@ val Purple200 = Color(0xFFBB86FC)
 val Purple500 = Color(0xFF6200EE)
 val Purple700 = Color(0xFF3700B3)
 val Teal200 = Color(0xFF03DAC5)
+val lightBlue = Color(0xFF0085FF)

TwoPage/src/main/java/com/microsoft/device/display/samples/twopage/ui/theme/Theme.kt

@@ -1,33 +1,21 @@
 package com.microsoft.device.display.samples.twopage.ui.theme
 
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.darkColors
 import androidx.compose.material.lightColors
 import androidx.compose.runtime.Composable
-
-private val DarkColorPalette = darkColors(
-    primary = Purple200,
-    primaryVariant = Purple700,
-    secondary = Teal200
-)
+import androidx.compose.ui.graphics.Color
 
 private val LightColorPalette = lightColors(
-    primary = Purple500,
-    primaryVariant = Purple700,
-    secondary = Teal200
+    primary = lightBlue,
+    primaryVariant = lightBlue,
+    secondary = Teal200,
+    onPrimary = Color.White,
 )
 
 @Composable
-fun TwoPageAppTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
-    val colors = if (darkTheme) {
-        DarkColorPalette
-    } else {
-        LightColorPalette
-    }
-
+fun TwoPageAppTheme(content: @Composable () -> Unit) {
     MaterialTheme(
-        colors = colors,
+        colors = LightColorPalette,
         typography = Typography,
         shapes = Shapes,
         content = content

TwoPage/src/main/java/com/microsoft/device/display/samples/twopage/ui/view/HomePage.kt

@@ -9,13 +9,22 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Text
+import androidx.compose.material.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.min
+import androidx.compose.ui.unit.sp
+import com.microsoft.device.display.samples.twopage.R
 import com.microsoft.device.display.samples.twopage.utils.PagerState
 import com.microsoft.device.display.samples.twopage.utils.ViewPager
 import com.microsoft.device.dualscreen.windowstate.WindowState
@@ -23,11 +32,32 @@ import kotlin.math.abs
 
 @Composable
 fun TwoPageApp(windowState: WindowState) {
-    TwoPageAppContent(
-        pane1WidthDp = windowState.pane1SizeDp.width,
-        pane2WidthDp = windowState.pane2SizeDp.width,
-        isDualScreen = windowState.isDualPortrait(),
-        foldSizeDp = windowState.foldSizeDp
+    Scaffold(
+        topBar = { TwoPageTopBar() },
+        content = {
+            TwoPageAppContent(
+                pane1WidthDp = windowState.pane1SizeDp.width,
+                pane2WidthDp = windowState.pane2SizeDp.width,
+                isDualScreen = windowState.isDualPortrait(),
+                foldSizeDp = windowState.foldSizeDp
+            )
+        }
+    )
+}
+
+@Composable
+fun TwoPageTopBar() {
+    TopAppBar(
+        title = {
+            Text(
+                text = stringResource(R.string.app_name),
+                style = TextStyle(
+                    fontSize = 18.sp,
+                    fontWeight = FontWeight.Bold
+                )
+            )
+        },
+        backgroundColor = MaterialTheme.colors.primary
     )
 }
 

TwoPage/src/main/res/drawable/ic_launcher_foreground.xml

@@ -14,17 +14,17 @@
         android:pathData="M23,30L71.5957,30A3,3 0,0 1,74.5957 33L74.5957,63A3,3 0,0 1,71.5957 66L23,66A3,3 0,0 1,20 63L20,33A3,3 0,0 1,23 30z"
         android:strokeWidth="2"
         android:fillColor="#00000000"
-        android:strokeColor="#000000"/>
+        android:strokeColor="#9E9E9E"/>
     <path
         android:pathData="M24.8086,34L42.8086,34A1,1 0,0 1,43.8086 35L43.8086,62A1,1 0,0 1,42.8086 63L24.8086,63A1,1 0,0 1,23.8086 62L23.8086,35A1,1 0,0 1,24.8086 34z"
-        android:fillColor="#6200EE"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M50.8086,34L69.8086,34A1,1 0,0 1,70.8086 35L70.8086,62A1,1 0,0 1,69.8086 63L50.8086,63A1,1 0,0 1,49.8086 62L49.8086,35A1,1 0,0 1,50.8086 34z"
-        android:fillColor="#6200EE"/>
+        android:fillColor="#0085FF"/>
     <path
         android:pathData="M46.8086,29V67"
         android:strokeWidth="2"
         android:fillColor="#00000000"
-        android:strokeColor="#000000"/>
+        android:strokeColor="#9E9E9E"/>
   </group>
 </vector>

TwoPage/src/main/res/values-night/themes.xml

@@ -2,8 +2,8 @@
     <!-- Base application theme. -->
     <style name="Theme.Surfaceduocomposesamples" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/purple_200</item>
-        <item name="colorPrimaryVariant">@color/purple_700</item>
+        <item name="colorPrimary">@color/light_blue</item>
+        <item name="colorPrimaryVariant">@color/light_blue</item>
         <item name="colorOnPrimary">@color/black</item>
         <!-- Secondary brand color. -->
         <item name="colorSecondary">@color/teal_200</item>

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

@@ -7,4 +7,5 @@
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
+    <color name="light_blue">#0085FF</color>
 </resources>

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

@@ -2,8 +2,8 @@
     <!-- Base application theme. -->
     <style name="Theme.Surfaceduocomposesamples" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/purple_500</item>
-        <item name="colorPrimaryVariant">@color/purple_700</item>
+        <item name="colorPrimary">@color/light_blue</item>
+        <item name="colorPrimaryVariant">@color/light_blue</item>
         <item name="colorOnPrimary">@color/white</item>
         <!-- Secondary brand color. -->
         <item name="colorSecondary">@color/teal_200</item>

screenshots/companion_pane.svg

@@ -2,14 +2,14 @@
 <rect width="96" height="96" fill="white"/>
 <rect x="21" y="30" width="54.5957" height="36" rx="3" stroke="black" stroke-width="2"/>
 <path d="M48.6172 29V67" stroke="black" stroke-width="2"/>
-<rect x="24.6172" y="34" width="20" height="29" rx="1" fill="#888888"/>
-<rect x="51.6172" y="56" width="20" height="1" rx="0.5" fill="#888888"/>
-<rect x="51.6172" y="52" width="20" height="1" rx="0.5" fill="#888888"/>
-<circle cx="53.1172" cy="52.5" r="1.5" fill="#888888"/>
-<circle cx="70.1172" cy="56.5" r="1.5" fill="#888888"/>
-<circle cx="53.1172" cy="47.5" r="1.5" fill="#888888"/>
-<circle cx="57.1172" cy="47.5" r="1.5" fill="#888888"/>
-<circle cx="61.1172" cy="47.5" r="1.5" fill="#888888"/>
-<circle cx="65.1172" cy="47.5" r="1.5" fill="#888888"/>
-<circle cx="69.1172" cy="47.5" r="1.5" fill="#888888"/>
+<rect x="24.6172" y="34" width="20" height="29" rx="1" fill="#0085FF"/>
+<rect x="51.6172" y="56" width="20" height="1" rx="0.5" fill="#0085FF"/>
+<rect x="51.6172" y="52" width="20" height="1" rx="0.5" fill="#0085FF"/>
+<circle cx="53.1172" cy="52.5" r="1.5" fill="#0085FF"/>
+<circle cx="70.1172" cy="56.5" r="1.5" fill="#0085FF"/>
+<circle cx="53.1172" cy="47.5" r="1.5" fill="#0085FF"/>
+<circle cx="57.1172" cy="47.5" r="1.5" fill="#0085FF"/>
+<circle cx="61.1172" cy="47.5" r="1.5" fill="#0085FF"/>
+<circle cx="65.1172" cy="47.5" r="1.5" fill="#0085FF"/>
+<circle cx="69.1172" cy="47.5" r="1.5" fill="#0085FF"/>
 </svg>

screenshots/dual_view.svg

@@ -2,8 +2,8 @@
 <rect width="96" height="96" fill="white"/>
 <rect x="20" y="30" width="54.5957" height="36" rx="3" stroke="black" stroke-width="2"/>
 <path d="M47.2129 29V67" stroke="black" stroke-width="2"/>
-<path d="M60.6565 56L53.2129 53.0395V43.4671M60.6565 56L68.2129 53.0395V43.4671M60.6565 56V46.3289M68.2129 43.4671L60.6565 41L53.2129 43.4671M68.2129 43.4671L60.6565 46.3289M53.2129 43.4671L60.6565 46.3289" stroke="#F65F5F"/>
-<rect x="27.7129" y="41.5" width="14" height="14" stroke="#F65F5F"/>
-<path d="M55.2129 49.5V48L57.9993 49.1117V49.6117V50.6117L57.5349 50.4264L56.6061 50.0558L55.2129 49.5Z" fill="#F65F5F"/>
-<path d="M32.2129 49V47H37.2129V47.6667V49H36.3796H34.7129H32.2129Z" fill="#F65F5F"/>
+<path d="M60.6565 56L53.2129 53.0395V43.4671M60.6565 56L68.2129 53.0395V43.4671M60.6565 56V46.3289M68.2129 43.4671L60.6565 41L53.2129 43.4671M68.2129 43.4671L60.6565 46.3289M53.2129 43.4671L60.6565 46.3289" stroke="#0085FF"/>
+<rect x="27.7129" y="41.5" width="14" height="14" stroke="#0085FF"/>
+<path d="M55.2129 49.5V48L57.9993 49.1117V49.6117V50.6117L57.5349 50.4264L56.6061 50.0558L55.2129 49.5Z" fill="#0085FF"/>
+<path d="M32.2129 49V47H37.2129V47.6667V49H36.3796H34.7129H32.2129Z" fill="#0085FF"/>
 </svg>

screenshots/extended_canvas.svg

@@ -1,6 +1,6 @@
 <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="96" height="96" fill="white"/>
 <rect x="20" y="30" width="54.5957" height="36" rx="3" stroke="black" stroke-width="2"/>
-<rect x="23" y="33" width="48.5" height="30" rx="2" fill="#01A299"/>
+<rect x="23" y="33" width="48.5" height="30" rx="2" fill="#0085FF"/>
 <path d="M47 29V67" stroke="black" stroke-width="2"/>
 </svg>

screenshots/list_detail.svg

@@ -2,10 +2,10 @@
 <rect width="96" height="96" fill="white"/>
 <rect x="20" y="30" width="54.5957" height="36" rx="3" stroke="black" stroke-width="2"/>
 <path d="M47.4043 29V67" stroke="black" stroke-width="2"/>
-<rect x="23.4043" y="34" width="20" height="3" rx="1" fill="#141414"/>
-<rect x="51.4043" y="34" width="20" height="29" rx="1" fill="#141414"/>
-<rect x="23.4043" y="39" width="20" height="3" rx="1" fill="#141414"/>
-<rect x="23.4043" y="44" width="20" height="3" rx="1" fill="#141414"/>
-<rect x="23.4043" y="49" width="20" height="3" rx="1" fill="#141414"/>
-<rect x="23.4043" y="54" width="20" height="3" rx="1" fill="#141414"/>
+<rect x="23.4043" y="34" width="20" height="3" rx="1" fill="#0085FF"/>
+<rect x="51.4043" y="34" width="20" height="29" rx="1" fill="#0085FF"/>
+<rect x="23.4043" y="39" width="20" height="3" rx="1" fill="#0085FF"/>
+<rect x="23.4043" y="44" width="20" height="3" rx="1" fill="#0085FF"/>
+<rect x="23.4043" y="49" width="20" height="3" rx="1" fill="#0085FF"/>
+<rect x="23.4043" y="54" width="20" height="3" rx="1" fill="#0085FF"/>
 </svg>

screenshots/two_page.svg

@@ -1,7 +1,7 @@
 <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="96" height="96" fill="white"/>
 <rect x="20" y="30" width="54.5957" height="36" rx="3" stroke="black" stroke-width="2"/>
-<rect x="23.8086" y="34" width="20" height="29" rx="1" fill="#6200EE"/>
-<rect x="49.8086" y="34" width="21" height="29" rx="1" fill="#6200EE"/>
+<rect x="23.8086" y="34" width="20" height="29" rx="1" fill="#0085FF"/>
+<rect x="49.8086" y="34" width="21" height="29" rx="1" fill="#0085FF"/>
 <path d="M46.8086 29V67" stroke="black" stroke-width="2"/>
 </svg>