Merge pull request #77 from opatry/better-authorize-button-layout

Better `AuthorizeGoogleTasksButton` layout
opatry · Oct 28, 2024 · 212815e · 212815e
2 parents 6e0d758 + d33ff7f
commit 212815e
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 28 deletions.
diff --git a/tasks-app-android/src/main/java/net/opatry/tasks/app/MainActivity.kt b/tasks-app-android/src/main/java/net/opatry/tasks/app/MainActivity.kt
@@ -65,7 +65,7 @@ class MainActivity : AppCompatActivity() {
                     when (userState) {
                         null -> LoadingPane()
 
-                        is UserState.Unsigned,
+                        UserState.Unsigned,
                         is UserState.SignedIn -> {
                             val aboutApp = AboutApp(
                                 name = getString(R.string.app_name),
@@ -77,7 +77,7 @@ class MainActivity : AppCompatActivity() {
                             TasksApp(aboutApp, userViewModel, tasksViewModel)
                         }
 
-                        is UserState.Newcomer -> AuthorizationScreen(
+                        UserState.Newcomer -> AuthorizationScreen(
                             onSkip = userViewModel::skipSignIn,
                             onSuccess = userViewModel::signIn,
                         )

diff --git a/tasks-app-desktop/src/main/kotlin/mainApp.kt b/tasks-app-desktop/src/main/kotlin/mainApp.kt
@@ -124,7 +124,7 @@ fun main() {
                         when (userState) {
                             null -> LoadingPane()
 
-                            is UserState.Unsigned,
+                            UserState.Unsigned,
                             is UserState.SignedIn -> {
                                 val aboutApp = AboutApp(
                                     name = appName,
@@ -136,7 +136,7 @@ fun main() {
                                 TasksApp(aboutApp, userViewModel, tasksViewModel)
                             }
 
-                            is UserState.Newcomer -> AuthorizationScreen(
+                            UserState.Newcomer -> AuthorizationScreen(
                                 onSkip = userViewModel::skipSignIn,
                                 onSuccess = userViewModel::signIn,
                             )

diff --git a/...ndroidMain/kotlin/net/opatry/tasks/app/ui/component/AuthorizeGoogleTasksButton.android.kt b/...ndroidMain/kotlin/net/opatry/tasks/app/ui/component/AuthorizeGoogleTasksButton.android.kt
@@ -28,11 +28,12 @@ import androidx.activity.result.IntentSenderRequest
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.animation.AnimatedContent
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Button
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -95,12 +96,7 @@ actual fun AuthorizeGoogleTasksButton(
         }
     }
 
-    Row(modifier, verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp)) {
-        if (ongoingAuth) {
-            CircularProgressIndicator(Modifier.size(24.dp), strokeWidth = 1.dp)
-        } else {
-            Spacer(Modifier.size(24.dp))
-        }
+    Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(8.dp)) {
         Button(
             onClick = {
                 ongoingAuth = true
@@ -127,11 +123,20 @@ actual fun AuthorizeGoogleTasksButton(
             },
             enabled = !ongoingAuth
         ) {
-            Text(stringResource(Res.string.onboarding_screen_authorize_cta))
+            Box(modifier, contentAlignment = Alignment.Center) {
+                AnimatedContent(ongoingAuth, label = "authorize_button_content") { ongoing ->
+                    if (ongoing) {
+                        CircularProgressIndicator(Modifier.size(24.dp), strokeWidth = 1.dp)
+                    } else {
+                        Text(stringResource(Res.string.onboarding_screen_authorize_cta))
+                    }
+                }
+            }
+        }
+
+        AnimatedContent(error, label = "authorize_error_message") { message ->
+            Text(message ?: "", color = MaterialTheme.colorScheme.error)
         }
-    }
-    AnimatedContent(error, label = "authorize_error_message") {
-        Text(it ?: "")
     }
 }
 

diff --git a/...ed/src/jvmMain/kotlin/net/opatry/tasks/app/ui/component/AuthorizeGoogleTasksButton.jvm.kt b/...ed/src/jvmMain/kotlin/net/opatry/tasks/app/ui/component/AuthorizeGoogleTasksButton.jvm.kt
@@ -24,11 +24,12 @@ package net.opatry.tasks.app.ui.component
 
 import androidx.compose.animation.AnimatedContent
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Button
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -60,12 +61,7 @@ actual fun AuthorizeGoogleTasksButton(
     var ongoingAuth by remember { mutableStateOf(false) }
     var error by remember { mutableStateOf<String?>(null) }
 
-    Row(modifier, verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp)) {
-        if (ongoingAuth) {
-            CircularProgressIndicator(Modifier.size(24.dp), strokeWidth = 1.dp)
-        } else {
-            Spacer(Modifier.size(24.dp))
-        }
+    Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(8.dp)) {
         Button(
             onClick = {
                 ongoingAuth = true
@@ -88,10 +84,19 @@ actual fun AuthorizeGoogleTasksButton(
             },
             enabled = !ongoingAuth
         ) {
-            Text(stringResource(Res.string.onboarding_screen_authorize_cta))
+            Box(modifier, contentAlignment = Alignment.Center) {
+                AnimatedContent(ongoingAuth, label = "authorize_button_content") { ongoing ->
+                    if (ongoing) {
+                        CircularProgressIndicator(Modifier.size(24.dp), strokeWidth = 1.dp)
+                    } else {
+                        Text(stringResource(Res.string.onboarding_screen_authorize_cta))
+                    }
+                }
+            }
+        }
+
+        AnimatedContent(error, label = "authorize_error_message") { message ->
+            Text(message ?: "", color = MaterialTheme.colorScheme.error)
         }
-    }
-    AnimatedContent(error, label = "authorize_error_message") {
-        Text(it ?: "")
     }
 }