feat(NotificationCard): rewrite & consistent usage (#1426)

app/src/main/java/app/revanced/manager/ui/component/NotificationCard.kt

@@ -1,59 +1,171 @@
 package app.revanced.manager.ui.component
 
-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.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Close
 import androidx.compose.material3.Card
-import androidx.compose.material3.CardColors
 import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 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.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import app.revanced.manager.R
 
 @Composable
 fun NotificationCard(
-    color: Color,
+    isWarning: Boolean = false,
-    icon: ImageVector,
+    title: String? = null,
     text: String,
-    content: (@Composable () -> Unit)? = null,
+    icon: ImageVector,
+    actions: (@Composable () -> Unit)?
 ) {
-    Card(
+    NotificationCardInstance(isWarning = isWarning) {
-        colors = CardDefaults.cardColors(containerColor = color),
+        Column(
-        modifier = Modifier
+            modifier = Modifier.padding(if (title != null) 20.dp else 16.dp),
-            .fillMaxWidth()
+            verticalArrangement = Arrangement.spacedBy(16.dp)
-            .clip(RoundedCornerShape(28.dp))
         ) {
+            if (title != null) {
+                Icon(
+                    modifier = Modifier.size(36.dp),
+                    imageVector = icon,
+                    contentDescription = null,
+                    tint = if (isWarning) MaterialTheme.colorScheme.onError else MaterialTheme.colorScheme.onPrimaryContainer
+                )
+                Column(
+                    verticalArrangement = Arrangement.spacedBy(6.dp)
+                ) {
+                    Text(
+                        text = title,
+                        style = MaterialTheme.typography.titleLarge,
+                        color = if (isWarning) MaterialTheme.colorScheme.onError else MaterialTheme.colorScheme.onPrimaryContainer
+                    )
+                    Text(
+                        text = text,
+                        style = MaterialTheme.typography.bodyMedium,
+                        color = if (isWarning) MaterialTheme.colorScheme.onError else MaterialTheme.colorScheme.onPrimaryContainer
+                    )
+                }
+            } else {
+                Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
+                    Icon(
+                        modifier = Modifier.size(24.dp),
+                        imageVector = icon,
+                        contentDescription = null,
+                        tint = if (isWarning) MaterialTheme.colorScheme.onError else MaterialTheme.colorScheme.onPrimaryContainer
+                    )
+                    Text(
+                        text = text,
+                        style = MaterialTheme.typography.bodyMedium,
+                        color = if (isWarning) MaterialTheme.colorScheme.onError else MaterialTheme.colorScheme.onPrimaryContainer
+                    )
+                }
+            }
+            actions?.invoke()
+        }
+    }
+}
+
+@Composable
+fun NotificationCard(
+    isWarning: Boolean = false,
+    title: String? = null,
+    text: String,
+    icon: ImageVector,
+    onDismiss: (() -> Unit)? = null,
+    primaryAction: (() -> Unit)? = null
+) {
+    NotificationCardInstance(isWarning = isWarning, onClick = primaryAction) {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(16.dp),
             verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
-                16.dp,
-                Alignment.Start
-            )
         ) {
             Icon(
+                modifier = Modifier.size(if (title != null) 36.dp else 24.dp),
                 imageVector = icon,
                 contentDescription = null,
+                tint = if (isWarning) MaterialTheme.colorScheme.onError else MaterialTheme.colorScheme.onPrimaryContainer
+            )
+            if (title != null) {
+                Column(
+                    modifier = Modifier.weight(1f),
+                    verticalArrangement = Arrangement.spacedBy(6.dp)
+                ) {
+                    Text(
+                        text = title,
+                        style = MaterialTheme.typography.titleLarge,
+                        color = if (isWarning) MaterialTheme.colorScheme.onError else MaterialTheme.colorScheme.onPrimaryContainer
                     )
                     Text(
-                modifier = if (content != null) Modifier.width(220.dp) else Modifier,
                         text = text,
-                style = MaterialTheme.typography.bodyMedium
+                        style = MaterialTheme.typography.bodyMedium,
+                        color = if (isWarning) MaterialTheme.colorScheme.onError else MaterialTheme.colorScheme.onPrimaryContainer
+                    )
+                }
+            } else {
+                Text(
+                    modifier = Modifier.weight(1f),
+                    text = text,
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = if (isWarning) MaterialTheme.colorScheme.onError else MaterialTheme.colorScheme.onPrimaryContainer
+                )
+            }
+            if (onDismiss != null) {
+                IconButton(onClick = onDismiss) {
+                    Icon(
+                        imageVector = Icons.Outlined.Close,
+                        contentDescription = stringResource(R.string.close),
+                        tint = if (isWarning) MaterialTheme.colorScheme.onError else MaterialTheme.colorScheme.onPrimaryContainer
                     )
-            content?.invoke()
+                }
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun NotificationCardInstance(
+    isWarning: Boolean = false,
+    onClick: (() -> Unit)? = null,
+    content: (@Composable () -> Unit),
+) {
+    if (onClick != null) {
+        Card(
+            onClick = onClick,
+            colors = CardDefaults.cardColors(containerColor = (if (isWarning) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primaryContainer)),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp)
+                .clip(RoundedCornerShape(24.dp))
+        ) {
+            content.invoke()
+        }
+    } else {
+        Card(
+            colors = CardDefaults.cardColors(containerColor = (if (isWarning) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primaryContainer)),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp)
+                .clip(RoundedCornerShape(24.dp))
+        ) {
+            content.invoke()
         }
     }
 }

app/src/main/java/app/revanced/manager/ui/component/bundle/BundlePatchesDialog.kt

@@ -70,19 +70,12 @@ fun BundlePatchesDialog(
                 item {
                     AnimatedVisibility(visible = informationCardVisible) {
                         NotificationCard(
-                            color = MaterialTheme.colorScheme.secondaryContainer,
                             icon = Icons.Outlined.Lightbulb,
-                            text = stringResource(R.string.tap_on_patches)
+                            text = stringResource(R.string.tap_on_patches),
-                        ) {
+                            onDismiss = { informationCardVisible = false }
-                            IconButton(onClick = { informationCardVisible = false }) {
-                                Icon(
-                                    imageVector = Icons.Outlined.Close,
-                                    contentDescription = stringResource(R.string.close),
                         )
                     }
                 }
-                    }
-                }
 
                 state.patchBundleOrNull()?.let { bundle ->
                     items(bundle.patches.size) { bundleIndex ->

app/src/main/java/app/revanced/manager/ui/screen/InstalledAppsScreen.kt

@@ -2,10 +2,8 @@ package app.revanced.manager.ui.screen
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
@@ -18,7 +16,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -40,10 +37,9 @@ fun InstalledAppsScreen(
     val installedApps by viewModel.apps.collectAsStateWithLifecycle(initialValue = null)
 
     Column {
-        if (!Aapt.supportsDevice())
+        if (!Aapt.supportsDevice()) {
-            Box(modifier = Modifier.padding(16.dp)) {
             NotificationCard(
-                    color = MaterialTheme.colorScheme.errorContainer,
+                isWarning = true,
                 icon = Icons.Outlined.WarningAmber,
                 text = stringResource(
                     R.string.unsupported_architecture_warning

app/src/main/java/app/revanced/manager/ui/screen/SettingsScreen.kt

@@ -7,8 +7,6 @@ import android.net.Uri
 import android.os.PowerManager
 import android.provider.Settings
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.ExperimentalAnimationApi
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -16,9 +14,7 @@ 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.foundation.rememberScrollState
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.BatteryAlert
@@ -29,14 +25,13 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import app.revanced.manager.R
 import app.revanced.manager.ui.component.AppTopBar
+import app.revanced.manager.ui.component.NotificationCard
 import app.revanced.manager.ui.destination.SettingsDestination
 import app.revanced.manager.ui.screen.settings.*
 import app.revanced.manager.ui.screen.settings.update.ManagerUpdateChangelog
@@ -161,40 +156,18 @@ fun SettingsScreen(
                             .verticalScroll(rememberScrollState())
                     ) {
                         AnimatedVisibility(visible = showBatteryButton) {
-                            Card(
+                            NotificationCard(
-                                onClick = {
+                                isWarning = true,
+                                icon = Icons.Default.BatteryAlert,
+                                text = stringResource(R.string.battery_optimization_notification),
+                                primaryAction = {
                                     context.startActivity(Intent(Settings.ACTION_REQUEST_IGNORE_BATTERY_OPTIMIZATIONS).apply {
                                         data = Uri.parse("package:${context.packageName}")
                                     })
                                     showBatteryButton =
                                         !pm.isIgnoringBatteryOptimizations(context.packageName)
-                                },
-                                modifier = Modifier
-                                    .fillMaxWidth()
-                                    .padding(16.dp)
-                                    .clip(RoundedCornerShape(24.dp))
-                                    .background(MaterialTheme.colorScheme.tertiaryContainer),
-                            ) {
-                                Row(
-                                    modifier = Modifier
-                                        .fillMaxWidth()
-                                        .padding(16.dp),
-                                    verticalAlignment = Alignment.CenterVertically,
-                                    horizontalArrangement = Arrangement.spacedBy(16.dp)
-                                ) {
-                                    Icon(
-                                        imageVector = Icons.Default.BatteryAlert,
-                                        contentDescription = null,
-                                        tint = MaterialTheme.colorScheme.onTertiaryContainer,
-                                        modifier = Modifier.size(24.dp)
-                                    )
-                                    Text(
-                                        text = stringResource(R.string.battery_optimization_notification),
-                                        style = MaterialTheme.typography.bodyMedium,
-                                        color = MaterialTheme.colorScheme.onTertiaryContainer
-                                    )
-                                }
                                 }
+                            )
                         }
                         settingsSections.forEach { (titleDescIcon, destination) ->
                             SettingsListItem(

app/src/main/java/app/revanced/manager/ui/screen/settings/update/UpdatesSettingsScreen.kt

@@ -1,33 +1,26 @@
 package app.revanced.manager.ui.screen.settings.update
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-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.rememberScrollState
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Update
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 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.clip
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import app.revanced.manager.R
 import app.revanced.manager.ui.component.AppTopBar
+import app.revanced.manager.ui.component.NotificationCard
 import app.revanced.manager.ui.component.SettingsListItem
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -70,8 +63,10 @@ fun UpdatesSettingsScreen(
                 .padding(paddingValues)
                 .verticalScroll(rememberScrollState())
         ) {
-            UpdateNotification(
+            NotificationCard(
-                onClick = onUpdateClick
+                text = stringResource(R.string.update_notification),
+                icon = Icons.Default.Update,
+                primaryAction = onUpdateClick
             )
 
             listItems.forEach { (title, description, onClick) ->
@@ -87,31 +82,3 @@ fun UpdatesSettingsScreen(
         }
     }
 }
-
-@Composable
-fun UpdateNotification(
-    onClick: () -> Unit
-) {
-    Box(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(16.dp)
-            .clip(RoundedCornerShape(24.dp))
-            .background(MaterialTheme.colorScheme.secondaryContainer)
-            .clickable { onClick() },
-    ) {
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(16.dp),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(16.dp)
-        ) {
-            Icon(imageVector = Icons.Default.Update, contentDescription = null)
-            Text(
-                text = stringResource(R.string.update_notification),
-                style = MaterialTheme.typography.bodyMedium
-            )
-        }
-    }
-}

app/src/main/res/values/strings.xml

@@ -254,6 +254,7 @@
 
     <string name="more">More</string>
     <string name="continue_">Continue</string>
+    <string name="dismiss">Dismiss</string>
     <string name="permanent_dismiss">Do not show this again</string>
     <string name="donate">Donate</string>
     <string name="website">Website</string>
@@ -281,7 +282,7 @@
     <string name="changelog_loading">Loading changelog</string>
     <string name="changelog_download_fail">Failed to download changelog: %s</string>
     <string name="changelog_description">Check out the latest changes in this update</string>
-    <string name="battery_optimization_notification">Battery optimization must be turned off in order for ReVanced Manager to work correctly in the background. Tap here to turn off.</string>
+    <string name="battery_optimization_notification">Battery optimization must be turned off in order for ReVanced Manager to work correctly in the background. Click here to turn off.</string>
     <string name="installing_manager_update">Installing update…</string>
     <string name="downloading_manager_update">Downloading update…</string>
     <string name="download_manager_failed">Failed to download update: %s</string>
@@ -289,4 +290,5 @@
     <string name="save">Save</string>
     <string name="update">Update</string>
     <string name="installing_message">Tap on <b>Update</b> when prompted. \n ReVanced Manager will close when updating.</string>
+    <string name="disable_battery_optimization">Disable battery optimization</string>
 </resources>