expo-dev-launcher 6.0.0 → 6.0.1

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

@@ -1,20 +1,24 @@
 package expo.modules.devlauncher.compose.ui
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+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.Modifier
-import com.composeunstyled.Button
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.composeunstyled.Icon
 import expo.modules.devlauncher.R
 import expo.modules.devlauncher.compose.models.Account
-import expo.modules.devlauncher.compose.utils.withIsLast
-import expo.modules.devmenu.compose.primitives.DayNighIcon
-import expo.modules.devmenu.compose.primitives.Divider
-import expo.modules.devmenu.compose.primitives.RoundedSurface
-import expo.modules.devmenu.compose.primitives.RowLayout
-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
+import expo.modules.devmenu.compose.ui.NewMenuButton
 
 @Composable
 fun AccountSelector(
@@ -22,49 +26,62 @@ fun AccountSelector(
   onClick: (Account) -> Unit = {},
   onSignOut: () -> Unit = {}
 ) {
-  Column {
-    RoundedSurface {
-      Column {
-        for ((account, isLast) in accounts.withIsLast()) {
-          Button(
-            onClick = { onClick(account) },
-            enabled = !account.isSelected
-          ) {
-            val avatar = @Composable {
-              RoundedSurface(borderRadius = Theme.sizing.borderRadius.full) {
-                AccountAvatar(
-                  account.avatar
-                )
-              }
-            }
-            RowLayout(
-              modifier = Modifier.padding(Theme.spacing.small),
-              leftComponent = avatar,
-              rightComponent = {
-                if (account.isSelected) {
-                  DayNighIcon(
-                    id = R.drawable.check_icon,
-                    contentDescription = "Checked"
-                  )
-                }
-              }
-            ) {
-              Text(account.name)
-            }
-          }
+  Column(
+    verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`4`)
+  ) {
+    NewText(
+      "Account",
+      style = NewAppTheme.font.xxl.merge(
+        fontWeight = FontWeight.SemiBold,
+        lineHeight = 20.sp,
+        textAlign = TextAlign.Center
+      ),
+      modifier = Modifier.fillMaxWidth()
+    )
 
-          if (!isLast) {
-            Divider()
-          }
-        }
+    Column(
+      verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`2`)
+    ) {
+      for (account in accounts) {
+        NewMenuButton(
+          spacedBy = NewAppTheme.spacing.`3`,
+          icon = {
+            AccountAvatar(
+              account.avatar,
+              size = 32.dp
+            )
+          },
+          content = {
+            NewText(
+              text = account.name,
+              style = NewAppTheme.font.lg.merge(
+                fontWeight = FontWeight.SemiBold
+              )
+            )
+          },
+          rightComponent = {
+            if (account.isSelected) {
+              Icon(
+                painterResource(R.drawable.check_circle),
+                contentDescription = "Checked",
+                tint = Color(0xFF34C759),
+                modifier = Modifier.size(20.dp)
+              )
+            }
+          },
+          onClick = {
+            onClick(account)
+          },
+          enabled = !account.isSelected
+        )
       }
     }
 
-    Spacer(Theme.spacing.medium)
-
     ActionButton(
       "Log Out",
-      style = Theme.colors.button.tertiary,
+      foreground = Color.White,
+      background = Color.Black,
+      modifier = Modifier.padding(NewAppTheme.spacing.`3`),
       onClick = onSignOut
     )
   }

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

@@ -7,8 +7,13 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.Dp
 import com.composeunstyled.Button
-import expo.modules.devmenu.compose.primitives.Heading
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
+import expo.modules.devmenu.compose.primitives.NewText
 import expo.modules.devmenu.compose.ripple.ripple
 import expo.modules.devmenu.compose.theme.ButtonStyle
 import expo.modules.devmenu.compose.theme.Theme
@@ -21,7 +26,7 @@ fun ActionButton(
 ) {
   Button(
     onClick = onClick,
-    shape = RoundedCornerShape(Theme.sizing.borderRadius.medium),
+    shape = RoundedCornerShape(NewAppTheme.borderRadius.xl),
     backgroundColor = style.background,
     indication = ripple(color = style.foreground)
   ) {
@@ -31,7 +36,50 @@ fun ActionButton(
         .padding(vertical = Theme.spacing.small)
         .fillMaxWidth()
     ) {
-      Heading(text, color = style.foreground)
+      NewText(
+        text,
+        color = style.foreground
+      )
+    }
+  }
+}
+
+@Composable
+fun ActionButton(
+  text: String,
+  foreground: Color,
+  background: Color,
+  modifier: Modifier = Modifier,
+  fill: Boolean = true,
+  borderRadius: Dp = NewAppTheme.borderRadius.xl,
+  textStyle: TextStyle = NewAppTheme.font.lg.merge(
+    fontWeight = FontWeight.SemiBold
+  ),
+  onClick: () -> Unit = {}
+) {
+  Button(
+    onClick = onClick,
+    shape = RoundedCornerShape(borderRadius),
+    backgroundColor = background,
+    indication = ripple(color = foreground)
+  ) {
+    Box(
+      contentAlignment = Alignment.Center,
+      modifier = Modifier
+        .then(
+          if (fill) {
+            Modifier.fillMaxWidth()
+          } else {
+            Modifier
+          }
+        )
+        .then(modifier)
+    ) {
+      NewText(
+        text,
+        color = foreground,
+        style = textStyle
+      )
     }
   }
 }

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

@@ -1,31 +1,41 @@
 package expo.modules.devlauncher.compose.ui
 
+import android.os.Build
+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.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.composeunstyled.Button
+import com.composeunstyled.Icon
 import expo.modules.devlauncher.MeQuery
 import expo.modules.devlauncher.R
+import expo.modules.devlauncher.compose.primitives.AsyncImage
 import expo.modules.devlauncher.services.AppService
 import expo.modules.devlauncher.services.SessionService
 import expo.modules.devlauncher.services.UserState
 import expo.modules.devlauncher.services.inject
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
 import expo.modules.devmenu.compose.primitives.AppIcon
-import expo.modules.devmenu.compose.primitives.DayNighIcon
-import expo.modules.devmenu.compose.primitives.Heading
-import expo.modules.devmenu.compose.primitives.RowLayout
+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.Surface
-import expo.modules.devmenu.compose.primitives.Text
-import expo.modules.devmenu.compose.theme.Theme
 
 @Composable
-fun AppHeader(onProfileClick: () -> Unit) {
-  val isRunningInPreview = android.os.Build.DEVICE == "layoutlib"
+fun AppHeader(
+  onProfileClick: () -> Unit,
+  modifier: Modifier = Modifier
+) {
+  val isRunningInPreview = Build.DEVICE == "layoutlib"
   if (isRunningInPreview) {
     // In the preview, we don't have access to the app service or session service.
     // We can use a placeholder app name and current account.
@@ -44,6 +54,7 @@ fun AppHeader(onProfileClick: () -> Unit) {
   val user = currentUser.value
 
   AppHeader(
+    modifier = modifier,
     appName = appService.applicationInfo.appName,
     currentAccount = when (user) {
       UserState.Fetching, UserState.LoggedOut -> null
@@ -56,50 +67,64 @@ fun AppHeader(onProfileClick: () -> Unit) {
 @Composable
 fun AppHeader(
   appName: String,
+  modifier: Modifier = Modifier,
   currentAccount: MeQuery.Account? = null,
   onProfileClick: () -> Unit = {}
 ) {
-  RowLayout(
-    leftComponent = {
-      AppIcon()
-    },
-    rightComponent = {
-      if (currentAccount != null) {
-        Surface(shape = RoundedCornerShape(Theme.sizing.borderRadius.full)) {
-          Button(onClick = onProfileClick) {
-            AccountAvatar(
-              url = currentAccount.ownerUserActor?.profilePhoto,
-              size = Theme.sizing.icon.medium
+  Row(
+    horizontalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`3`),
+    verticalAlignment = Alignment.CenterVertically,
+    modifier = modifier
+  ) {
+    AppIcon()
+
+    Column(
+      verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`1`)
+    ) {
+      NewText(
+        appName,
+        style = NewAppTheme.font.lg.merge(
+          fontWeight = FontWeight.SemiBold
+        )
+      )
+
+      NewText(
+        "Development Build",
+        color = NewAppTheme.colors.text.secondary
+      )
+    }
+
+    Spacer(
+      modifier = Modifier.weight(1f)
+    )
+
+    RoundedSurface(
+      borderRadius = NewAppTheme.borderRadius.full,
+      color = NewAppTheme.colors.background.element
+    ) {
+      Button(onClick = onProfileClick) {
+        Box(
+          modifier = Modifier.size(44.dp),
+          contentAlignment = Alignment.Center
+        ) {
+          val profilePhoto = currentAccount?.ownerUserActor?.profilePhoto
+
+          if (profilePhoto != null) {
+            AsyncImage(
+              url = profilePhoto
             )
-          }
-        }
-      } else {
-        Surface(shape = RoundedCornerShape(Theme.sizing.borderRadius.full)) {
-          Button(onClick = onProfileClick) {
-            DayNighIcon(
-              id = R.drawable.user_icon,
-              contentDescription = "Expo Logo",
+          } else {
+            Icon(
+              painter = painterResource(R.drawable.user),
+              contentDescription = "User Icon",
+              tint = NewAppTheme.colors.icon.tertiary,
               modifier = Modifier
-                .padding(Theme.spacing.tiny)
+                .size(24.dp)
             )
           }
         }
       }
     }
-  ) {
-    Column {
-      Heading(
-        text = appName
-      )
-
-      Spacer(Theme.spacing.tiny)
-
-      Text(
-        text = "Development Build",
-        fontSize = Theme.typography.small,
-        color = Theme.colors.text.secondary
-      )
-    }
   }
 }
 
@@ -108,7 +133,8 @@ fun AppHeader(
 fun AppHeaderPreview() {
   ScreenHeaderContainer {
     AppHeader(
-      appName = "BareExpo"
+      appName = "BareExpo",
+      modifier = Modifier.padding(NewAppTheme.spacing.`4`)
     )
   }
 }

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

@@ -2,7 +2,20 @@ package expo.modules.devlauncher.compose.ui
 
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
+import androidx.compose.foundation.background
+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.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
 import com.composables.core.ModalBottomSheet
 import com.composables.core.ModalBottomSheetState
 import com.composables.core.Scrim
@@ -10,7 +23,7 @@ import com.composables.core.Sheet
 import com.composables.core.SheetDetent
 import com.composables.core.SheetDetent.Companion.Hidden
 import com.composables.core.rememberModalBottomSheetState
-import expo.modules.devlauncher.compose.DefaultScreenContainer
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
 
 val Full = SheetDetent(identifier = "full") { containerHeight, sheetHeight ->
   containerHeight * 0.90f
@@ -36,7 +49,34 @@ fun BottomSheet(
       enter = fadeIn(animationSpec = tween(durationMillis = 300))
     )
     Sheet {
-      DefaultScreenContainer {
+      Column(
+        modifier = Modifier
+          .clip(
+            RoundedCornerShape(
+              topStart = NewAppTheme.borderRadius.xxxl,
+              topEnd = NewAppTheme.borderRadius.xxxl
+            )
+          )
+          .background(NewAppTheme.colors.background.default)
+          .navigationBarsPadding()
+          .padding(horizontal = NewAppTheme.spacing.`4`)
+          .padding(bottom = NewAppTheme.spacing.`4`)
+      ) {
+        Row(
+          horizontalArrangement = Arrangement.Center,
+          modifier = Modifier
+            .fillMaxWidth()
+            .padding(
+              top = NewAppTheme.spacing.`2`,
+              bottom = NewAppTheme.spacing.`4`
+            )
+        ) {
+          Box(
+            modifier = Modifier
+              .size(width = 60.dp, height = 5.dp)
+              .background(NewAppTheme.colors.border.secondary, shape = RoundedCornerShape(size = 5.dp))
+          )
+        }
         content()
       }
     }

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

@@ -1,13 +1,16 @@
 package expo.modules.devlauncher.compose.ui
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
@@ -16,43 +19,44 @@ import androidx.navigation.NavDestination.Companion.hasRoute
 import androidx.navigation.compose.currentBackStackEntryAsState
 import expo.modules.devlauncher.R
 import expo.modules.devlauncher.compose.Tab
-import expo.modules.devmenu.compose.theme.Theme
-import androidx.compose.runtime.getValue
 import expo.modules.devlauncher.compose.routes.Routes
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
 
 @Composable
 fun BottomTabBar(
   navController: NavController
 ) {
   Box(
-    contentAlignment = Alignment.Companion.Center
+    contentAlignment = Alignment.Center
   ) {
     Row(
-      modifier = Modifier.Companion
-        .background(Theme.colors.background.default)
+      horizontalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`3`),
+      modifier = Modifier
+        .background(NewAppTheme.colors.background.default)
         .height(IntrinsicSize.Max)
         .navigationBarsPadding()
+        .padding(horizontal = NewAppTheme.spacing.`3`)
     ) {
       val navBackStackEntry by navController.currentBackStackEntryAsState()
       val currentDestination = navBackStackEntry?.destination
 
-      val buttonModifier = Modifier.Companion
+      val buttonModifier = Modifier
         .weight(1f)
         .fillMaxHeight()
       val icons = listOf(
         Tab(
           label = "Home",
-          icon = painterResource(id = R.drawable.home_icon),
+          icon = painterResource(id = R.drawable.home),
           screen = Routes.Home
         ),
         Tab(
-          label = "Extensions",
-          icon = painterResource(id = R.drawable.extensions_icon),
+          label = "Updates",
+          icon = painterResource(id = R.drawable.reload),
           screen = Routes.Updates
         ),
         Tab(
           label = "Settings",
-          icon = painterResource(id = R.drawable.settings_icon),
+          icon = painterResource(id = R.drawable.settings),
           screen = Routes.Settings
         )
       )

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

@@ -1,18 +1,23 @@
 package expo.modules.devlauncher.compose.ui
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import com.composeunstyled.Button
 import com.composeunstyled.Icon
-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 BottomTabButton(
@@ -22,28 +27,46 @@ fun BottomTabButton(
   modifier: Modifier = Modifier,
   onClick: () -> Unit
 ) {
-  Button(onClick = onClick, enabled = !isSelected, modifier = modifier) {
-    Column(horizontalAlignment = Alignment.Companion.CenterHorizontally, modifier = Modifier.Companion.padding(Theme.spacing.small)) {
-      Icon(
-        painter = icon,
-        tint = if (isSelected) {
-          Theme.colors.button.primary.background
-        } else {
-          Theme.colors.icon.default
-        },
-        contentDescription = "$label Icon",
-        modifier = Modifier.size(18.dp)
+  Column(
+    horizontalAlignment = Alignment.Companion.CenterHorizontally,
+    verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`1`),
+    modifier = modifier
+      .clip(
+        RoundedCornerShape(NewAppTheme.borderRadius.md)
       )
-      Spacer(Theme.spacing.tiny)
-      Text(
-        label,
-        fontSize = Theme.typography.small,
-        color = if (isSelected) {
-          Theme.colors.button.primary.background
+      .clickable(enabled = !isSelected) {
+        onClick()
+      }
+      .background(
+        if (isSelected) {
+          NewAppTheme.colors.background.info
         } else {
-          Theme.colors.text.secondary
+          Color.Unspecified
         }
       )
-    }
+      .padding(vertical = NewAppTheme.spacing.`2`)
+  ) {
+    Icon(
+      painter = icon,
+      tint = if (isSelected) {
+        NewAppTheme.colors.icon.info
+      } else {
+        NewAppTheme.colors.icon.quaternary
+      },
+      contentDescription = "$label Icon",
+      modifier = Modifier.size(24.dp)
+    )
+
+    NewText(
+      label,
+      style = NewAppTheme.font.sm.merge(
+        fontWeight = FontWeight.Medium
+      ),
+      color = if (isSelected) {
+        NewAppTheme.colors.icon.info
+      } else {
+        NewAppTheme.colors.icon.quaternary
+      }
+    )
   }
 }

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

@@ -1,6 +1,7 @@
 package expo.modules.devlauncher.compose.ui
 
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -8,36 +9,42 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
-import expo.modules.devmenu.compose.primitives.Mono
+import androidx.compose.ui.unit.dp
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
+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
 
 @Composable
 fun DevelopmentSessionHelper() {
-  Column {
-    Text("Start a local development server with:")
-
-    Spacer(Theme.spacing.small)
+  Column(
+    verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`3`)
+  ) {
+    NewText(
+      "Start a local development server with:"
+    )
 
     RoundedSurface(
-      color = Theme.colors.background.secondary,
+      color = NewAppTheme.colors.background.subtle,
       border = BorderStroke(
-        width = Theme.sizing.border.default,
-        color = Theme.colors.border.default
+        width = 1.dp,
+        color = NewAppTheme.colors.border.default
       ),
       modifier = Modifier
         .fillMaxWidth()
     ) {
-      Box(modifier = Modifier.padding(Theme.spacing.medium)) {
-        Mono("npx expo start", fontSize = Theme.typography.small)
+      Box(modifier = Modifier.padding(NewAppTheme.spacing.`3`)) {
+        NewText(
+          "npx expo start",
+          style = NewAppTheme.font.md.merge(
+            fontFamily = NewAppTheme.font.mono
+          )
+        )
       }
     }
 
-    Spacer(Theme.spacing.small)
-
-    Text("Then, select the local server when it appears here.")
+    NewText(
+      "Then, select the local server when it appears here."
+    )
   }
 }