action_sheet: Implement BottomSheetHeaderPlainText, following Figma

Author: chrisbobbe

lib/widgets/action_sheet.dart

@@ -98,6 +98,34 @@ void _showActionSheet(
     });
 }
 
+/// A header for a bottom sheet with a multiline UI string.
+///
+/// Assumes 8px padding below the top of the bottom sheet.
+///
+/// Figma:
+///   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3481-26993&m=dev
+class BottomSheetHeaderPlainText extends StatelessWidget {
+  const BottomSheetHeaderPlainText({super.key, required this.text});
+
+  final String text;
+
+  @override
+  Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
+
+    return Padding(
+      padding: EdgeInsets.fromLTRB(16, 8, 16, 4),
+      child: SizedBox(
+        width: double.infinity,
+        child: Text(
+          style: TextStyle(
+            color: designVariables.labelTime,
+            fontSize: 17,
+            height: 22 / 17),
+          text)));
+  }
+}
+
 /// A button in an action sheet.
 ///
 /// When built from server data, the action sheet ignores changes in that data;

lib/widgets/theme.dart

@@ -171,6 +171,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 0).toColor(),
     labelMenuButton: const Color(0xff222222),
     labelSearchPrompt: const Color(0xff000000).withValues(alpha: 0.5),
+    labelTime: const Color(0x00000000).withValues(alpha: 0.49),
     listMenuItemBg: const Color(0xffcbcdd6),
     listMenuItemIcon: const Color(0xff9194a3),
     listMenuItemText: const Color(0xff2d303c),
@@ -260,6 +261,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 1).toColor(),
     labelMenuButton: const Color(0xffffffff).withValues(alpha: 0.85),
     labelSearchPrompt: const Color(0xffffffff).withValues(alpha: 0.5),
+    labelTime: const Color(0xffffffff).withValues(alpha: 0.50),
     listMenuItemBg: const Color(0xff2d303c),
     listMenuItemIcon: const Color(0xff767988),
     listMenuItemText: const Color(0xffcbcdd6),
@@ -358,6 +360,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.labelEdited,
     required this.labelMenuButton,
     required this.labelSearchPrompt,
+    required this.labelTime,
     required this.listMenuItemBg,
     required this.listMenuItemIcon,
     required this.listMenuItemText,
@@ -447,6 +450,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color labelEdited;
   final Color labelMenuButton;
   final Color labelSearchPrompt;
+  final Color labelTime;
   final Color listMenuItemBg;
   final Color listMenuItemIcon;
   final Color listMenuItemText;
@@ -531,6 +535,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? labelEdited,
     Color? labelMenuButton,
     Color? labelSearchPrompt,
+    Color? labelTime,
     Color? listMenuItemBg,
     Color? listMenuItemIcon,
     Color? listMenuItemText,
@@ -610,6 +615,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       labelEdited: labelEdited ?? this.labelEdited,
       labelMenuButton: labelMenuButton ?? this.labelMenuButton,
       labelSearchPrompt: labelSearchPrompt ?? this.labelSearchPrompt,
+      labelTime: labelTime ?? this.labelTime,
       listMenuItemBg: listMenuItemBg ?? this.listMenuItemBg,
       listMenuItemIcon: listMenuItemIcon ?? this.listMenuItemIcon,
       listMenuItemText: listMenuItemText ?? this.listMenuItemText,
@@ -696,6 +702,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       labelEdited: Color.lerp(labelEdited, other.labelEdited, t)!,
       labelMenuButton: Color.lerp(labelMenuButton, other.labelMenuButton, t)!,
       labelSearchPrompt: Color.lerp(labelSearchPrompt, other.labelSearchPrompt, t)!,
+      labelTime: Color.lerp(labelTime, other.labelTime, t)!,
       listMenuItemBg: Color.lerp(listMenuItemBg, other.listMenuItemBg, t)!,
       listMenuItemIcon: Color.lerp(listMenuItemIcon, other.listMenuItemIcon, t)!,
       listMenuItemText: Color.lerp(listMenuItemText, other.listMenuItemText, t)!,