expo-dev-launcher 6.0.0 → 6.0.2

package/android/src/debug/java/expo/modules/devlauncher/compose/screens/NoUpdatesScreen.kt

@@ -1,10 +1,13 @@
 package expo.modules.devlauncher.compose.screens
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -17,50 +20,62 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.withLink
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import expo.modules.devlauncher.R
+import expo.modules.devlauncher.compose.DefaultScreenContainer
 import expo.modules.devlauncher.compose.ui.AppHeader
-import expo.modules.devlauncher.compose.ui.ScreenHeaderContainer
-import expo.modules.devmenu.compose.primitives.RoundedSurface
-import expo.modules.devmenu.compose.primitives.Spacer
-import expo.modules.devmenu.compose.primitives.Text
-import expo.modules.devmenu.compose.theme.Theme
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
+import expo.modules.devmenu.compose.primitives.NewText
 
 @Composable
 fun NoUpdatesScreen(onProfileClick: () -> Unit = {}) {
-  Column(modifier = Modifier.fillMaxSize()) {
-    ScreenHeaderContainer(modifier = Modifier.padding(Theme.spacing.medium)) {
-      AppHeader(
-        onProfileClick = onProfileClick
-      )
+  Column(
+    modifier = Modifier.padding(horizontal = NewAppTheme.spacing.`4`)
+  ) {
+    Box(modifier = Modifier.padding(vertical = NewAppTheme.spacing.`4`)) {
+      AppHeader(onProfileClick = onProfileClick)
     }
 
-    Row(modifier = Modifier.padding(Theme.spacing.medium)) {
-      RoundedSurface {
-        Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.padding(Theme.spacing.small)) {
-          Image(
-            painter = painterResource(R.drawable.extensions_icon),
-            contentDescription = "Updates Screen"
-          )
+    Box(
+      contentAlignment = Alignment.Center,
+      modifier = Modifier.fillMaxSize()
+    ) {
+      Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`4`),
+        modifier = Modifier.fillMaxWidth()
+      ) {
+        Image(
+          painter = painterResource(R.drawable.extensions_icon),
+          contentDescription = "Updates Screen",
+          modifier = Modifier.size(48.dp)
+        )
 
-          Spacer(Theme.spacing.small)
-
-          val annotatedString = buildAnnotatedString {
-            append("Extensions allow you to customize your development build with additional capabilities. ")
-            withLink(
-              LinkAnnotation.Url(
-                "https://docs.expo.dev/develop/development-builds/development-workflows/",
-                TextLinkStyles(style = SpanStyle(textDecoration = TextDecoration.Underline))
+        val annotatedString = buildAnnotatedString {
+          append("Extensions allow you to customize your development build\nwith additional capabilities. ")
+          withLink(
+            LinkAnnotation.Url(
+              "https://docs.expo.dev/develop/development-builds/development-workflows/",
+              TextLinkStyles(
+                style = SpanStyle(
+                  textDecoration = TextDecoration.Underline,
+                  color = NewAppTheme.colors.text.link
+                )
               )
-            ) {
-              append("Learn more.")
-            }
+            )
+          ) {
+            append("Learn more.")
           }
-          Text(
-            annotatedString,
-            fontSize = Theme.typography.small,
-            textAlign = TextAlign.Center
-          )
         }
+
+        NewText(
+          annotatedString,
+          style = NewAppTheme.font.sm.merge(
+            color = NewAppTheme.colors.text.secondary,
+            textAlign = TextAlign.Center
+          ),
+          color = NewAppTheme.colors.text.secondary
+        )
       }
     }
   }
@@ -69,5 +84,7 @@ fun NoUpdatesScreen(onProfileClick: () -> Unit = {}) {
 @Preview(showBackground = true)
 @Composable
 fun NoUpdatesScreenPreview() {
-  NoUpdatesScreen()
+  DefaultScreenContainer {
+    NoUpdatesScreen()
+  }
 }

package/android/src/debug/java/expo/modules/devlauncher/compose/screens/SettingsScreen.kt

@@ -1,31 +1,37 @@
 package expo.modules.devlauncher.compose.screens
 
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.composeunstyled.Button
+import com.composeunstyled.Icon
 import expo.modules.devlauncher.R
+import expo.modules.devlauncher.compose.DefaultScreenContainer
 import expo.modules.devlauncher.compose.models.SettingsAction
 import expo.modules.devlauncher.compose.models.SettingsState
-import expo.modules.devlauncher.compose.ui.ScreenHeaderContainer
-import expo.modules.devlauncher.compose.ui.SectionHeader
-import expo.modules.devmenu.compose.utils.copyToClipboard
 import expo.modules.devlauncher.services.ApplicationInfo
-import expo.modules.devmenu.compose.primitives.DayNighIcon
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
 import expo.modules.devmenu.compose.primitives.Divider
-import expo.modules.devmenu.compose.primitives.Heading
+import expo.modules.devmenu.compose.primitives.NewText
 import expo.modules.devmenu.compose.primitives.RoundedSurface
 import expo.modules.devmenu.compose.primitives.Spacer
-import expo.modules.devmenu.compose.primitives.Text
-import expo.modules.devmenu.compose.theme.Theme
-import expo.modules.devmenu.compose.ui.MenuButton
-import expo.modules.devmenu.compose.ui.MenuInfo
-import expo.modules.devmenu.compose.ui.MenuSwitch
+import expo.modules.devmenu.compose.primitives.ToggleSwitch
+import expo.modules.devmenu.compose.ui.NewMenuButton
+import expo.modules.devmenu.compose.utils.copyToClipboard
 
 @Composable
 fun SettingsScreen(
@@ -34,117 +40,248 @@ fun SettingsScreen(
 ) {
   val context = LocalContext.current
 
-  Column(modifier = Modifier.padding(Theme.spacing.medium)) {
-    ScreenHeaderContainer(backgroundColor = Theme.colors.background.secondary) {
-      Heading("Settings")
-    }
-
-    Spacer(Theme.spacing.large)
+  Column(
+    modifier = Modifier
+      .statusBarsPadding()
+      .padding(horizontal = NewAppTheme.spacing.`4`)
+  ) {
+    Column(
+      horizontalAlignment = Alignment.CenterHorizontally,
+      verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`2`),
+      modifier = Modifier
+        .fillMaxWidth()
+        .padding(vertical = NewAppTheme.spacing.`6`)
+    ) {
+      Icon(
+        painterResource(R.drawable.settings),
+        contentDescription = "Settings icon",
+        modifier = Modifier.size(48.dp)
+      )
 
-    RoundedSurface {
-      MenuSwitch(
-        "Show menu at launch",
-        icon = painterResource(R.drawable.show_menu_at_launch_icon),
-        toggled = state.showMenuAtLaunch,
-        onToggled = { onAction(SettingsAction.ToggleShowMenuAtLaunch(it)) }
+      NewText(
+        "Settings",
+        style = NewAppTheme.font.xxl.merge(
+          fontWeight = FontWeight.Bold
+        )
       )
     }
 
-    Spacer(Theme.spacing.medium)
+    NewMenuButton(
+      icon = {
+        Icon(
+          painter = painterResource(R.drawable.show_at_launch),
+          contentDescription = "Show at launch icon",
+          tint = NewAppTheme.colors.icon.tertiary,
+          modifier = Modifier.size(20.dp)
+        )
+      },
+      content = {
+        NewText(
+          text = "Show menu at launch"
+        )
+      },
+      rightComponent = {
+        ToggleSwitch(
+          isToggled = state.showMenuAtLaunch
+        )
+      },
+      onClick = { onAction(SettingsAction.ToggleShowMenuAtLaunch(!state.showMenuAtLaunch)) }
+    )
+
+    Spacer(NewAppTheme.spacing.`6`)
 
-    SectionHeader(
-      "Menu gestures"
+    NewText(
+      "MENU GESTURES",
+      style = NewAppTheme.font.sm.merge(
+        fontWeight = FontWeight.Medium,
+        fontFamily = NewAppTheme.font.mono
+      ),
+      color = NewAppTheme.colors.text.quaternary
     )
 
-    Spacer(Theme.spacing.small)
+    Spacer(NewAppTheme.spacing.`3`)
 
     RoundedSurface {
       Column {
-        MenuButton(
-          "Shake device",
-          leftComponent = @Composable {
-            // This icon has two different versions file version, one for light and one for dark mode.
-            // That's why we use Image instead of DayNighIcon.
-            Image(
-              painter = painterResource(R.drawable.shake_device_icon),
-              contentDescription = "Shake device to open menu icon"
+        NewMenuButton(
+          withSurface = false,
+          icon = {
+            Icon(
+              painter = painterResource(R.drawable.pulse),
+              contentDescription = "Shake device icon",
+              tint = NewAppTheme.colors.icon.tertiary,
+              modifier = Modifier.size(20.dp)
             )
           },
-          onClick = {
-            onAction(SettingsAction.ToggleShakeEnable(!state.isShakeEnable))
+          content = {
+            NewText(
+              text = "Shake device"
+            )
+          },
+          rightComponent = {
+            ToggleSwitch(
+              isToggled = state.isShakeEnable
+            )
           },
-          rightComponent = @Composable {
-            if (state.isShakeEnable) {
-              DayNighIcon(
-                id = R.drawable.check_icon,
-                contentDescription = "Shake enabled icon"
-              )
-            } else {
-              null
-            }
-          }
+          onClick = { onAction(SettingsAction.ToggleShakeEnable(!state.isShakeEnable)) }
         )
-        Divider()
-        MenuButton(
-          "Three three-finger long press",
-          leftIcon = painterResource(R.drawable.three_finger_long_press_icon),
-          onClick = {
-            onAction(SettingsAction.ToggleThreeFingerLongPressEnable(!state.isThreeFingerLongPressEnable))
+
+        Divider(
+          thickness = 0.5.dp,
+          color = NewAppTheme.colors.border.default
+        )
+
+        NewMenuButton(
+          withSurface = false,
+          icon = {
+            Icon(
+              painter = painterResource(R.drawable.inspect),
+              contentDescription = "3 fingers long press icon",
+              tint = NewAppTheme.colors.icon.tertiary,
+              modifier = Modifier.size(20.dp)
+            )
+          },
+          content = {
+            NewText(
+              text = "3 fingers long press"
+            )
+          },
+          rightComponent = {
+            ToggleSwitch(
+              isToggled = state.isThreeFingerLongPressEnable
+            )
           },
-          rightIcon = if (state.isThreeFingerLongPressEnable) {
-            painterResource(R.drawable.check_icon)
-          } else {
-            null
-          }
+          onClick = { onAction(SettingsAction.ToggleThreeFingerLongPressEnable(!state.isThreeFingerLongPressEnable)) }
         )
-        Divider()
-        MenuButton(
-          "Developer Action Button",
-          // TODO: @behenate Find a proper icon for this option
-          leftIcon = painterResource(R.drawable.dev_menu_fab_icon),
-          onClick = {
-            onAction(SettingsAction.ToggleShowFabAtLaunch(!state.showFabAtLaunch))
+
+        Divider(
+          thickness = 0.5.dp,
+          color = NewAppTheme.colors.border.default
+        )
+
+        NewMenuButton(
+          withSurface = false,
+          icon = {
+            Icon(
+              painter = painterResource(R.drawable.dev_menu_fab_icon),
+              contentDescription = "Action button icon",
+              tint = NewAppTheme.colors.icon.tertiary,
+              modifier = Modifier.size(20.dp)
+            )
           },
-          rightIcon = if (state.showFabAtLaunch) {
-            painterResource(R.drawable.check_icon)
-          } else {
-            null
-          }
+          content = {
+            NewText(
+              text = "Action button"
+            )
+          },
+          rightComponent = {
+            ToggleSwitch(
+              isToggled = state.showFabAtLaunch
+            )
+          },
+          onClick = { onAction(SettingsAction.ToggleShowFabAtLaunch(!state.showFabAtLaunch)) }
         )
       }
     }
 
-    Box(modifier = Modifier.padding(Theme.spacing.small)) {
-      Text(
-        "Selected gestures will toggle the developer menu while inside a preview. The menu allows you to reload or return to home and exposes developer tools.",
-        fontSize = Theme.typography.small,
-        color = Theme.colors.text.secondary
+    Spacer(NewAppTheme.spacing.`3`)
+
+    NewText(
+      "Selected gestures will toggle the developer menu while inside a preview. The menu allows you to reload or return to home and exposes developer tools.",
+      style = NewAppTheme.font.md.merge(
+        lineHeight = 21.sp
+      ),
+      color = NewAppTheme.colors.text.quaternary
+    )
+
+    Spacer(NewAppTheme.spacing.`6`)
+
+    NewText(
+      "SYSTEM",
+      style = TextStyle(
+        fontSize = NewAppTheme.font.sm.fontSize,
+        fontFamily = NewAppTheme.font.mono,
+        fontWeight = FontWeight.Medium,
+        color = NewAppTheme.colors.text.quaternary
+      )
+    )
+
+    Spacer(NewAppTheme.spacing.`3`)
+
+    Divider(
+      thickness = 0.5.dp,
+      color = NewAppTheme.colors.border.default
+    )
+
+    Row(
+      horizontalArrangement = Arrangement.SpaceBetween,
+      modifier = Modifier
+        .fillMaxWidth()
+        .padding(vertical = 12.dp)
+    ) {
+      NewText(
+        "Version",
+        color = NewAppTheme.colors.text.secondary
+      )
+
+      NewText(
+        state.applicationInfo?.appVersion ?: "N/A",
+        color = NewAppTheme.colors.text.secondary
       )
     }
 
-    Spacer(Theme.spacing.medium)
+    Divider(
+      thickness = 0.5.dp,
+      color = NewAppTheme.colors.border.default
+    )
 
-    RoundedSurface {
-      Column {
-        MenuInfo("Version", state.applicationInfo?.appVersion ?: "N/A")
-        Divider()
-        val runtimeVersion = (state.applicationInfo as? ApplicationInfo.Updates)?.runtimeVersion
-        if (runtimeVersion != null) {
-          MenuInfo("Runtime version", runtimeVersion)
-          Divider()
-        }
-
-        MenuButton(
-          "Tap to Copy All",
-          onClick = {
-            copyToClipboard(
-              context,
-              label = "Application Info",
-              text = state.applicationInfo?.toJson() ?: "No application info available"
-            )
-          },
-          leftIcon = null,
-          labelTextColor = Theme.colors.text.link
+    Row(
+      horizontalArrangement = Arrangement.SpaceBetween,
+      modifier = Modifier
+        .fillMaxWidth()
+        .padding(vertical = 12.dp)
+    ) {
+      NewText(
+        "Runtime version",
+        color = NewAppTheme.colors.text.secondary
+      )
+
+      val runtimeVersion = (state.applicationInfo as? ApplicationInfo.Updates)?.runtimeVersion
+      NewText(
+        runtimeVersion ?: "N/A",
+        color = NewAppTheme.colors.text.secondary
+      )
+    }
+
+    Divider(
+      thickness = 0.5.dp,
+      color = NewAppTheme.colors.border.default
+    )
+
+    Button(onClick = {
+      copyToClipboard(
+        context,
+        label = "Copy system info",
+        text = state.applicationInfo?.toJson() ?: "No application info available"
+      )
+    }) {
+      Row(
+        horizontalArrangement = Arrangement.SpaceBetween,
+        modifier = Modifier
+          .fillMaxWidth()
+          .padding(vertical = 12.dp)
+      ) {
+        NewText(
+          "Copy system info",
+          color = NewAppTheme.colors.text.link,
+          style = NewAppTheme.font.sm
+        )
+        Icon(
+          painter = painterResource(expo.modules.devmenu.R.drawable.copy),
+          contentDescription = "Copy system info",
+          tint = NewAppTheme.colors.text.link,
+          modifier = Modifier
+            .size(12.dp)
         )
       }
     }
@@ -154,15 +291,17 @@ fun SettingsScreen(
 @Composable
 @Preview(showBackground = true)
 fun SettingsScreenPreview() {
-  SettingsScreen(
-    state = SettingsState(
-      applicationInfo = ApplicationInfo.Updates(
-        appName = "BareExpo",
-        appVersion = "1.0.0",
-        appId = "01980973-2cf9-71fb-a891-a53444132a6e",
-        runtimeVersion = "1.0.0",
-        projectUrl = "https://u.expo.dev/01980973-2cf9-71fb-a891-a53444132a6e"
+  DefaultScreenContainer {
+    SettingsScreen(
+      state = SettingsState(
+        applicationInfo = ApplicationInfo.Updates(
+          appName = "BareExpo",
+          appVersion = "1.0.0",
+          appId = "01980973-2cf9-71fb-a891-a53444132a6e",
+          runtimeVersion = "1.0.0",
+          projectUrl = "https://u.expo.dev/01980973-2cf9-71fb-a891-a53444132a6e"
+        )
       )
     )
-  )
+  }
 }

package/android/src/debug/java/expo/modules/devlauncher/compose/ui/AccountAvatar.kt

@@ -1,35 +1,43 @@
 package expo.modules.devlauncher.compose.ui
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.composeunstyled.Icon
 import expo.modules.devlauncher.R
 import expo.modules.devlauncher.compose.primitives.AsyncImage
-import expo.modules.devmenu.compose.primitives.DayNighIcon
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
 import expo.modules.devmenu.compose.primitives.RoundedSurface
-import expo.modules.devmenu.compose.theme.Theme
 
 @Composable
 fun AccountAvatar(
   url: String?,
-  size: Dp = Theme.sizing.icon.medium,
+  size: Dp = 44.dp,
   modifier: Modifier = Modifier
 ) {
   RoundedSurface(
-    borderRadius = Theme.sizing.borderRadius.full,
-    modifier = Modifier.size(size).then(modifier)
+    borderRadius = NewAppTheme.borderRadius.full,
+    modifier = Modifier
+      .size(size)
+      .then(modifier)
   ) {
     if (url != null) {
       AsyncImage(
         url = url
       )
     } else {
-      DayNighIcon(
-        id = R.drawable.building_icon,
-        contentDescription = "Avatar",
-        modifier = Modifier.padding(Theme.spacing.micro)
+      Icon(
+        painter = painterResource(R.drawable.user),
+        contentDescription = "User Icon",
+        tint = NewAppTheme.colors.icon.tertiary,
+        modifier = Modifier
+          .background(NewAppTheme.colors.background.element)
+          .padding(size / 4)
       )
     }
   }