tor-browser

commit ad0d6dcc6255b656a839cbfe1c7ffcd9c0a83982
parent 417daabdbc3f818cc8f55187c60cf1d111e9eaca
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date:   Thu,  4 Dec 2025 06:50:15 +0000

Bug 1993368 - Part 43: Migrate TermsOfUseBottomSheet to use M3 specs r=android-reviewers,007

- Migrated color tokens to use the M3 color tokens. Added the correct color for the DragHandle.
- Aligned the spacing/padding with the latest designs from Figma (See "Updated buttons" in Figma)
- Switched TextButton to use OutlinedButton. The colors will look different from the Figma, but it will capture the intended design system component that should be used.
- Filed https://bugzilla.mozilla.org/show_bug.cgi?id=2003421 about aligning the OutlinedButton colors with the M3 specs.
- Figma: https://www.figma.com/design/YRMAZpQ0ZzvcaQxNKORWTI/ToU---PN-tweaks?node-id=11-4777&m=dev
- Bottom Sheet: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=64221-16576&m=dev

Differential Revision: https://phabricator.services.mozilla.com/D274715

Diffstat:
M
mobile/android/fenix/app/src/main/java/org/mozilla/fenix/termsofuse/ui/TermsOfUseBottomSheet.kt
 | 
50
+++++++++++++++++++++++---------------------------

1 file changed, 23 insertions(+), 27 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/termsofuse/ui/TermsOfUseBottomSheet.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/termsofuse/ui/TermsOfUseBottomSheet.kt
@@ -4,7 +4,6 @@
 
 package org.mozilla.fenix.termsofuse.ui
 
-import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -35,7 +34,7 @@ import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.launch
 import mozilla.components.compose.base.button.FilledButton
-import mozilla.components.compose.base.button.TextButton
+import mozilla.components.compose.base.button.OutlinedButton
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.LinkText
 import org.mozilla.fenix.compose.LinkTextState
@@ -105,14 +104,14 @@ private fun BottomSheet(
     ModalBottomSheet(
         sheetGesturesEnabled = showDragHandle,
         dragHandle = if (showDragHandle) {
-            { BottomSheetDefaults.DragHandle() }
+            { BottomSheetDefaults.DragHandle(color = MaterialTheme.colorScheme.outline) }
         } else {
             null
         },
-        onDismissRequest = { onDismissRequest() },
+        onDismissRequest = onDismissRequest,
         sheetMaxWidth = sheetMaxWidth,
         sheetState = sheetState,
-        containerColor = FirefoxTheme.colors.layer2,
+        containerColor = MaterialTheme.colorScheme.surface,
         properties = ModalBottomSheetProperties(
             shouldDismissOnClickOutside = false,
         ),
@@ -148,7 +147,7 @@ private fun BottomSheetContent(
     Column(
         modifier = Modifier
             .verticalScroll(scrollState)
-            .padding(start = 32.dp, end = 32.dp, bottom = 16.dp),
+            .padding(start = 36.dp, end = 36.dp, bottom = 32.dp),
     ) {
         if (!showDragHandle) {
             Spacer(Modifier.size(16.dp))
@@ -162,17 +161,15 @@ private fun BottomSheetContent(
                 .align(Alignment.CenterHorizontally),
         )
 
-        Spacer(Modifier.size(16.dp))
+        Spacer(Modifier.size(20.dp))
 
         Text(
-            modifier = Modifier
-                .align(Alignment.CenterHorizontally),
+            modifier = Modifier.align(Alignment.CenterHorizontally),
             text = stringResource(R.string.terms_of_use_prompt_title),
             style = FirefoxTheme.typography.headline6,
-            color = FirefoxTheme.colors.textPrimary,
         )
 
-        Spacer(Modifier.size(16.dp))
+        Spacer(Modifier.size(20.dp))
 
         BottomSheetMessage(
             onTermsOfUseClicked = onTermsOfUseClicked,
@@ -180,22 +177,20 @@ private fun BottomSheetContent(
             onLearnMoreClicked = onLearnMoreClicked,
         )
 
-        Spacer(Modifier.size(16.dp))
+        Spacer(Modifier.size(34.dp))
 
-        TextButton(
-            modifier = Modifier.fillMaxWidth(),
-            border = BorderStroke(width = 1.dp, color = MaterialTheme.colorScheme.outline),
+        OutlinedButton(
             text = stringResource(R.string.terms_of_use_prompt_postpone),
-            onClick = {
-                onRemindMeLaterClicked()
-
-                coroutineScope.launch {
-                    sheetState.hide()
-                }.invokeOnCompletion {
-                    onDismiss()
-                }
-            },
-        )
+            modifier = Modifier.fillMaxWidth(),
+        ) {
+            onRemindMeLaterClicked()
+
+            coroutineScope.launch {
+                sheetState.hide()
+            }.invokeOnCompletion {
+                onDismiss()
+            }
+        }
 
         FilledButton(
             modifier = Modifier.fillMaxWidth(),
@@ -233,6 +228,7 @@ private fun BottomSheetMessage(
         url = "",
         onClick = { onLearnMoreClicked() },
     )
+
     LinkText(
         text = stringResource(
             id = R.string.terms_of_use_prompt_message_1,
@@ -245,7 +241,7 @@ private fun BottomSheetMessage(
             privacyNoticeLinkState,
         ),
         style = FirefoxTheme.typography.body2.copy(
-            color = FirefoxTheme.colors.textSecondary,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
         ),
         linkTextDecoration = TextDecoration.Underline,
     )
@@ -261,7 +257,7 @@ private fun BottomSheetMessage(
             learnMoreLinkState,
         ),
         style = FirefoxTheme.typography.body2.copy(
-            color = FirefoxTheme.colors.textSecondary,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
         ),
         linkTextDecoration = TextDecoration.Underline,
     )