DROID-1503 App | Design | Scan Qr Code, base dialog (#169)

app/src/main/java/com/anytypeio/anytype/ui/onboarding/OnboardingFragment.kt

@@ -3,7 +3,6 @@ package com.anytypeio.anytype.ui.onboarding
 import android.content.ClipData
 import android.content.ClipboardManager
 import android.content.Context
-import android.content.DialogInterface
 import android.content.Intent
 import android.net.Uri
 import android.os.Build
@@ -16,7 +15,6 @@ import androidx.activity.compose.ManagedActivityResultLauncher
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.ActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
-import androidx.appcompat.app.AlertDialog
 import androidx.compose.animation.AnimatedContentScope.SlideDirection.Companion.Left
 import androidx.compose.animation.AnimatedContentScope.SlideDirection.Companion.Right
 import androidx.compose.animation.ExperimentalAnimationApi
@@ -28,6 +26,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
@@ -43,6 +42,7 @@ import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.core.view.ViewCompat
@@ -55,6 +55,7 @@ import androidx.navigation.NavHostController
 import androidx.navigation.fragment.findNavController
 import com.anytypeio.anytype.R
 import com.anytypeio.anytype.core_ui.BuildConfig
+import com.anytypeio.anytype.core_ui.views.BaseAlertDialog
 import com.anytypeio.anytype.core_utils.ext.toast
 import com.anytypeio.anytype.core_utils.insets.RootViewDeferringInsetsCallback
 import com.anytypeio.anytype.di.common.ComponentManager
@@ -341,6 +342,7 @@ class OnboardingFragment : Fragment() {
     @Composable
     private fun ContentPaddingTop() = LocalConfiguration.current.screenHeightDp * 2 / 6
 
+    @OptIn(ExperimentalMaterial3Api::class)
     @Composable
     private fun Recovery(navController: NavHostController) {
         val component = componentManager().onboardingMnemonicLoginComponent.ReleaseOn(
@@ -348,6 +350,7 @@ class OnboardingFragment : Fragment() {
             state = Lifecycle.State.DESTROYED
         )
         val vm = daggerViewModel { component.get().getViewModel() }
+        val openDialog = remember { mutableStateOf(false) }
 
         val launcher = rememberLauncherForActivityResult(
             contract = ActivityResultContracts.StartActivityForResult()
@@ -361,15 +364,7 @@ class OnboardingFragment : Fragment() {
         RecoveryScreenWrapper(
             vm = vm,
             onBackClicked = vm::onBackButtonPressed,
-            onScanQrClick = {
-                AlertDialog.Builder(requireContext())
-                    .setMessage(R.string.alert_qr_camera)
-                    .setPositiveButton(R.string.alert_qr_camera_ok) { dialog, _ ->
-                        proceedWithQrCodeActivity(launcher, dialog)
-                    }
-                    .setCancelable(true)
-                    .show()
-            }
+            onScanQrClick = { openDialog.value = true },
         )
         LaunchedEffect(Unit) {
             vm.sideEffects.collect { effect ->
@@ -386,22 +381,29 @@ class OnboardingFragment : Fragment() {
                 }
             }
         }
+        if (openDialog.value) {
+            BaseAlertDialog(
+                dialogText = stringResource(id = R.string.alert_qr_camera),
+                buttonText = stringResource(id = R.string.alert_qr_camera_ok),
+                onButtonClick = {
+                    openDialog.value = false
+                    proceedWithQrCodeActivity(launcher)
+                },
+                onDismissRequest = { openDialog.value = false }
+            )
+        }
     }
 
-    private fun proceedWithQrCodeActivity(
-        launcher: ManagedActivityResultLauncher<Intent, ActivityResult>,
-        dialog: DialogInterface
-    ) {
+    private fun proceedWithQrCodeActivity(launcher: ManagedActivityResultLauncher<Intent, ActivityResult>) {
         try {
             launcher.launch(
                 IntentIntegrator
                     .forSupportFragment(this)
                     .setBeepEnabled(false)
                     .createScanIntent()
-            ).also {
-                dialog.dismiss()
-            }
+            )
         } catch (e: Exception) {
+            toast("Error while scanning QR code")
             Timber.e(e, "Error while scanning QR code")
         }
     }

core-ui/src/main/java/com/anytypeio/anytype/core_ui/views/DesignSystemButtons.kt

@@ -154,6 +154,45 @@ fun ButtonPrimary(
     }
 }
 
+@Composable
+fun ButtonPrimaryDarkTheme(
+    text: String = "",
+    onClick: () -> Unit,
+    enabled: Boolean = true,
+    modifier: Modifier = Modifier,
+    size: ButtonSize
+) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val backgroundColor = Color(0xFFF3F2EC)
+
+    CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
+        Button(
+            onClick = onClick,
+            interactionSource = interactionSource,
+            enabled = enabled,
+            shape = RoundedCornerShape(size.cornerSize),
+            colors = ButtonDefaults.buttonColors(
+                backgroundColor = backgroundColor,
+                contentColor = Color(0xFF1F1E1D),
+                disabledBackgroundColor = Color(0xFF1F1E1D),
+                disabledContentColor = Color(0xFF1F1E1D)
+            ),
+            modifier = modifier
+                .defaultMinSize(minWidth = 1.dp, minHeight = 1.dp),
+            elevation = ButtonDefaults.elevation(
+                defaultElevation = 0.dp,
+                pressedElevation = 0.dp
+            ),
+            contentPadding = size.contentPadding
+        ) {
+            Text(
+                text = text,
+                style = size.textStyle
+            )
+        }
+    }
+}
+
 @Composable
 fun ButtonPrimaryLoading(
     text: String = "",
@@ -487,6 +526,19 @@ fun MyPrimaryButton() {
     )
 }
 
+@Composable
+@Preview
+fun MyPrimaryButtonDark() {
+    ButtonPrimaryDarkTheme(
+        onClick = {},
+        size = ButtonSize.Large,
+        text = "Login",
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(start = 16.dp, end = 16.dp)
+    )
+}
+
 @Composable
 @Preview
 fun MySecondaryButton() {

core-ui/src/main/java/com/anytypeio/anytype/core_ui/views/DesignSystemDialogs.kt

@@ -0,0 +1,75 @@
+package com.anytypeio.anytype.core_ui.views
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.AlertDialogDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+
+@ExperimentalMaterial3Api
+@Composable
+fun BaseAlertDialog(
+    dialogText: String,
+    buttonText: String,
+    onButtonClick: () -> Unit,
+    onDismissRequest: () -> Unit
+): Unit {
+    val modifier = Modifier
+        .shadow(
+            elevation = 40.dp, spotColor = Color(0x40000000), ambientColor = Color(0x40000000)
+        )
+        .wrapContentWidth()
+        .wrapContentHeight()
+        .background(
+            color = Color(0xFF1F1E1D), shape = RoundedCornerShape(size = 8.dp)
+        )
+        .padding(start = 32.dp, top = 32.dp, end = 32.dp, bottom = 32.dp)
+
+    AlertDialog(onDismissRequest = onDismissRequest) {
+        Surface(
+            modifier = modifier,
+            shape = MaterialTheme.shapes.large,
+            tonalElevation = AlertDialogDefaults.TonalElevation,
+            color = Color.Transparent
+        ) {
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                Text(
+                    text = dialogText,
+                    style = UXBody,
+                    textAlign = TextAlign.Center,
+                    color = Color(0xFFFFFFFF),
+                    modifier = Modifier.padding(horizontal = 10.dp)
+                )
+                Spacer(modifier = Modifier.height(18.dp))
+                ButtonPrimaryDarkTheme(
+                    text = buttonText,
+                    onClick = onButtonClick,
+                    size = ButtonSize.Large,
+                    modifier = Modifier
+                        .wrapContentHeight()
+                        .fillMaxWidth()
+                        .align(Alignment.CenterHorizontally)
+                )
+            }
+        }
+    }
+}