[launcher][Android] Final touches (expo#38433)

lukmccall · web-flow · commit 0234a4fc29dc · 2025-07-30T13:45:55.000+02:00
diff --git a/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/primitives/Accordion.kt b/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/primitives/Accordion.kt
@@ -57,6 +57,7 @@ fun Accordion(
             contentDescription = "Accordion Arrow",
             modifier = Modifier
               .rotate(arrowRotation)
+              .size(Theme.sizing.icon.extraSmall)
           )
           Spacer(Modifier.size(Theme.spacing.small))
           Text(
diff --git a/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/routes/Updates.kt b/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/routes/Updates.kt
@@ -1,5 +1,7 @@
 package expo.modules.devlauncher.compose.routes
 
+import androidx.compose.animation.AnimatedContentTransitionScope
+import androidx.compose.animation.core.tween
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -25,7 +27,19 @@ fun UpdatesRoute(
   DefaultScreenContainer {
     NavHost(
       navController = updatesNavController,
-      startDestination = Routes.Updates.Branches
+      startDestination = Routes.Updates.Branches,
+      enterTransition = {
+        slideIntoContainer(
+          AnimatedContentTransitionScope.SlideDirection.Up,
+          animationSpec = tween(400)
+        )
+      },
+      exitTransition = {
+        slideOutOfContainer(
+          AnimatedContentTransitionScope.SlideDirection.Down,
+          animationSpec = tween(400)
+        )
+      }
     ) {
       composable<Routes.Updates.Branches> {
         val viewModel = viewModel<BranchesViewModel>()
diff --git a/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/screens/BranchScreen.kt b/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/screens/BranchScreen.kt
@@ -4,6 +4,7 @@ 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
@@ -18,6 +19,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
@@ -45,24 +47,28 @@ fun BranchScreen(
   goBack: () -> Unit = {},
   onAction: (BranchAction) -> Unit = {}
 ) {
-  Column {
+  Column(modifier = Modifier.fillMaxSize()) {
     ScreenHeaderContainer {
       Box(
         modifier = Modifier
           .fillMaxWidth()
           .padding(Theme.spacing.small)
       ) {
-        Button(
-          onClick = goBack,
+        RoundedSurface(
+          color = Color.Transparent,
           modifier = Modifier.align(Alignment.CenterStart)
         ) {
-          DayNighIcon(
-            R.drawable.chevron_right_icon,
-            contentDescription = "Back icon",
-            modifier = Modifier
-              .rotate(180f)
-              .size(Theme.sizing.icon.medium)
-          )
+          Button(
+            onClick = goBack
+          ) {
+            DayNighIcon(
+              R.drawable.chevron_right_icon,
+              contentDescription = "Back icon",
+              modifier = Modifier
+                .rotate(180f)
+                .size(Theme.sizing.icon.small)
+            )
+          }
         }
 
         Heading(branchName, modifier = Modifier.align(Alignment.Center))
@@ -126,7 +132,7 @@ fun BranchScreen(
                 DayNighIcon(
                   painter = painterResource(R.drawable.chevron_right_icon),
                   contentDescription = "Chevron Right Icon",
-                  modifier = Modifier.size(Theme.sizing.icon.medium)
+                  modifier = Modifier.size(Theme.sizing.icon.extraSmall)
                 )
               }
 
diff --git a/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/screens/BranchesScreen.kt b/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/screens/BranchesScreen.kt
@@ -4,6 +4,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 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
@@ -85,7 +86,7 @@ fun BranchesScreen(
   onProfileClick: () -> Unit = {},
   onAction: (BranchesAction) -> Unit = { _ -> }
 ) {
-  Column {
+  Column(modifier = Modifier.fillMaxSize()) {
     ScreenHeaderContainer(modifier = Modifier.padding(Theme.spacing.medium)) {
       AppHeader(
         onProfileClick = onProfileClick
@@ -134,7 +135,7 @@ fun BranchesScreen(
                   DayNighIcon(
                     painter = painterResource(R.drawable.chevron_right_icon),
                     contentDescription = "Chevron Right Icon",
-                    modifier = Modifier.size(Theme.sizing.icon.medium)
+                    modifier = Modifier.size(Theme.sizing.icon.extraSmall)
                   )
                 }
 
diff --git a/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/screens/HomeScreen.kt b/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/screens/HomeScreen.kt
@@ -22,6 +22,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
@@ -301,7 +302,7 @@ fun HomeScreen(
                   Image(
                     painter = painterResource(R.drawable.qr_code),
                     contentDescription = "QR Code Icon",
-                    modifier = Modifier.size(24.dp)
+                    modifier = Modifier.size(Theme.spacing.medium)
                   )
                 }
               ) {
@@ -338,18 +339,24 @@ fun HomeScreen(
             "Recently",
             rightIcon = {
               Row {
-                Button(onClick = {
-                  onAction(HomeAction.ResetRecentlyOpenedApps)
-                }) {
-                  Text(
-                    "Reset",
-                    color = Theme.colors.text.secondary,
-                    fontSize = Theme.typography.small,
-                    fontWeight = FontWeight.Bold
-                  )
+                RoundedSurface(color = Color.Unspecified, borderRadius = Theme.sizing.borderRadius.extraSmall) {
+                  Button(
+                    onClick = {
+                      onAction(HomeAction.ResetRecentlyOpenedApps)
+                    }
+                  ) {
+                    Text(
+                      "Reset",
+                      color = Theme.colors.text.secondary,
+                      fontSize = Theme.typography.small,
+                      fontWeight = FontWeight.Bold,
+                      modifier = Modifier
+                        .padding(horizontal = Theme.spacing.tiny, vertical = Theme.spacing.micro)
+                    )
+                  }
                 }
 
-                Spacer(Theme.spacing.small)
+                Spacer(Theme.spacing.small - Theme.spacing.tiny)
               }
             }
           )
diff --git a/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/screens/NoUpdatesScreen.kt b/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/screens/NoUpdatesScreen.kt
@@ -3,6 +3,7 @@ package expo.modules.devlauncher.compose.screens
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -26,7 +27,7 @@ import expo.modules.devmenu.compose.theme.Theme
 
 @Composable
 fun NoUpdatesScreen(onProfileClick: () -> Unit = {}) {
-  Column {
+  Column(modifier = Modifier.fillMaxSize()) {
     ScreenHeaderContainer(modifier = Modifier.padding(Theme.spacing.medium)) {
       AppHeader(
         onProfileClick = onProfileClick
diff --git a/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/ui/AppHeader.kt b/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/ui/AppHeader.kt
@@ -1,13 +1,13 @@
 package expo.modules.devlauncher.compose.ui
 
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.composeunstyled.Button
 import expo.modules.devlauncher.MeQuery
 import expo.modules.devlauncher.R
 import expo.modules.devlauncher.services.AppService
@@ -65,18 +65,24 @@ fun AppHeader(
     },
     rightComponent = {
       if (currentAccount != null) {
-        AccountAvatar(
-          url = currentAccount.ownerUserActor?.profilePhoto,
-          size = Theme.sizing.icon.medium,
-          modifier = Modifier.clickable(onClick = onProfileClick)
-        )
+        Surface(shape = RoundedCornerShape(Theme.sizing.borderRadius.full)) {
+          Button(onClick = onProfileClick) {
+            AccountAvatar(
+              url = currentAccount.ownerUserActor?.profilePhoto,
+              size = Theme.sizing.icon.medium
+            )
+          }
+        }
       } else {
-        Surface(shape = RoundedCornerShape(Theme.sizing.borderRadius.full), modifier = Modifier.clickable(onClick = onProfileClick)) {
-          DayNighIcon(
-            id = R.drawable.user_icon,
-            contentDescription = "Expo Logo",
-            modifier = Modifier.padding(Theme.spacing.tiny)
-          )
+        Surface(shape = RoundedCornerShape(Theme.sizing.borderRadius.full)) {
+          Button(onClick = onProfileClick) {
+            DayNighIcon(
+              id = R.drawable.user_icon,
+              contentDescription = "Expo Logo",
+              modifier = Modifier
+                .padding(Theme.spacing.tiny)
+            )
+          }
         }
       }
     }
diff --git a/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/ui/ProfileLayout.kt b/packages/expo-dev-launcher/android/src/debug/java/expo/modules/devlauncher/compose/ui/ProfileLayout.kt
@@ -5,14 +5,17 @@ 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.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.composeunstyled.Button
 import expo.modules.devlauncher.R
 import expo.modules.devmenu.compose.primitives.DayNighIcon
 import expo.modules.devmenu.compose.primitives.Heading
+import expo.modules.devmenu.compose.primitives.RoundedSurface
 import expo.modules.devmenu.compose.primitives.Spacer
 import expo.modules.devmenu.compose.theme.Theme
 
@@ -26,13 +29,20 @@ fun ProfileLayout(
       .padding(horizontal = 12.dp)
       .padding(top = 12.dp)
   ) {
-    Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween, modifier = Modifier.fillMaxWidth()) {
-      Heading("Account", fontSize = Theme.typography.size25)
-      Button(onClick = onClose) {
-        DayNighIcon(
-          id = R.drawable.x_icon,
-          contentDescription = "Close"
-        )
+    Row(
+      verticalAlignment = Alignment.CenterVertically,
+      horizontalArrangement = Arrangement.SpaceBetween,
+      modifier = Modifier.fillMaxWidth()
+    ) {
+      Heading("Account", fontSize = Theme.typography.size22)
+      RoundedSurface(color = Color.Unspecified) {
+        Button(onClick = onClose) {
+          DayNighIcon(
+            id = R.drawable.x_icon,
+            contentDescription = "Close",
+            modifier = Modifier.size(Theme.sizing.icon.small)
+          )
+        }
       }
     }
 

Original file line number	Diff line number	Diff line change
`@@ -57,6 +57,7 @@ fun Accordion(`
`57`	`57`	`contentDescription = "Accordion Arrow",`
`58`	`58`	`modifier = Modifier`
`59`	`59`	`.rotate(arrowRotation)`
	`60`	`+ .size(Theme.sizing.icon.extraSmall)`
`60`	`61`	`)`
`61`	`62`	`Spacer(Modifier.size(Theme.spacing.small))`
`62`	`63`	`Text(`