@planningcenter/chat-react-native 3.23.0 → 3.23.1-qa-538.0

package/src/screens/conversation_details_screen.tsx

@@ -1,25 +1,25 @@
+import { HeaderTitle as ElementsHeaderTitle, HeaderTitleProps } from '@react-navigation/elements'
 import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React, {
   useCallback,
   useEffect,
+  useRef,
   useState,
-  type SetStateAction,
   type Dispatch,
   type ReactNode,
-  useRef,
+  type SetStateAction,
 } from 'react'
 import {
+  Alert,
   FlatList,
+  Platform,
+  Pressable,
   StyleSheet,
   TextInput,
   View,
-  type ViewStyle,
   type ViewProps,
-  Pressable,
-  Alert,
-  Platform,
+  type ViewStyle,
 } from 'react-native'
-import { HeaderTitle as ElementsHeaderTitle, HeaderTitleProps } from '@react-navigation/elements'
 import {
   Badge,
   ChildNotice,
@@ -31,21 +31,20 @@ import {
   TextButton,
   type TextStyle,
 } from '../components'
+import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
+import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
 import { useSuspensePaginator, useTheme } from '../hooks'
 import {
   useConversation,
   useConversationDelete,
   useConversationDisableReplies,
-  useConversationMute,
   useConversationUpdate,
 } from '../hooks/use_conversation'
+import { useConversationMembershipUpdate } from '../hooks/use_conversation_membership'
+import { availableFeatures, useFeatures } from '../hooks/use_features'
 import { MemberResource, isDefined } from '../types'
-import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
-import { tokens } from '../vendor/tapestry/tokens'
-import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
 import { GroupResource } from '../types/resources/group_resource'
-import { useFeatures } from '../hooks/use_features'
-import { availableFeatures } from '../hooks/use_features'
+import { tokens } from '../vendor/tapestry/tokens'
 
 // =========================================
 // ====== Factory Constants & Types ========
@@ -91,7 +90,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
 
   const { data: conversation } = useConversation(route.params)
   const [title, setTitle] = useState(conversation.title)
-  const { muted, setMuted } = useConversationMute(route.params)
+  const { mutate: updateMembership } = useConversationMembershipUpdate(route.params)
   const { repliesDisabled, setRepliesDisabled } = useConversationDisableReplies(route.params)
   const { mutate: saveTitle } = useConversationUpdate(route.params)
   const { mutate: deleteConversation } = useConversationDelete(route.params)
@@ -101,6 +100,10 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const trimmedTitle = title.trim()
   const emptyTitle = trimmedTitle === '' || title === null
 
+  const notificationsEnabled =
+    conversation.conversationMembership?.notificationLevel === 'everything'
+  const notificationLevelDescription =
+    conversation?.conversationMembership?.notificationLevelDescription
   const canUpdate = conversation.memberAbility?.canUpdate || false
   const canDelete = conversation.memberAbility?.canDelete || false
   const isLeader = conversation.memberAbility?.leader || false
@@ -163,6 +166,15 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const productName = badge?.appName
   const name = badge?.text || undefined
 
+  const handleToggleNotificationPreferences = useCallback(
+    (value: boolean) => {
+      updateMembership({
+        notificationLevel: value ? 'everything' : 'nothing',
+      })
+    },
+    [updateMembership]
+  )
+
   const handleDelete = useCallback(() => {
     Alert.alert(
       'Delete conversation',
@@ -246,8 +258,14 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     {
       type: SectionTypes.setting,
       data: {
-        title: 'Mute',
-        rightItem: <Switch value={muted} onChange={() => setMuted(!muted)} />,
+        title: 'Enable notifications',
+        subtitle: notificationLevelDescription,
+        rightItem: (
+          <Switch
+            value={notificationsEnabled}
+            onValueChange={handleToggleNotificationPreferences}
+          />
+        ),
       },
       showBottomBorder: true,
     },

package/src/screens/conversation_filter_recipients/conversation_filter_recipients_screen.tsx

@@ -1,7 +1,7 @@
 import { RouteProp, StackActions, useNavigation, useRoute } from '@react-navigation/native'
 import { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import React, { useCallback, useMemo, useState } from 'react'
-import { LayoutChangeEvent, Platform, StyleSheet, View } from 'react-native'
+import { LayoutChangeEvent, Platform, ScrollView, StyleSheet, View } from 'react-native'
 import { FlatList, TextInput } from 'react-native-gesture-handler'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Heading, ToggleButton } from '../../components'
@@ -192,7 +192,12 @@ const TeamFilters = ({ onLayout }: { onLayout?: (event: LayoutChangeEvent) => vo
           })
         }}
       />
-      <View style={styles.filterToggleContainer}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.filterToggleContainer}
+        accessibilityRole="toolbar"
+      >
         <ToggleButton
           active={active === TeamFilterTypes.TeamsIlead}
           title={TeamFilterTypes.TeamsIlead}
@@ -211,7 +216,7 @@ const TeamFilters = ({ onLayout }: { onLayout?: (event: LayoutChangeEvent) => vo
           accessibilityLabel="Show all teams"
           onPress={() => handleFilterChange(TeamFilterTypes.All)}
         />
-      </View>
+      </ScrollView>
     </View>
   )
 }
@@ -253,7 +258,9 @@ const useStyles = () => {
     },
     filterToggleContainer: {
       flexDirection: 'row',
+      justifyContent: 'flex-start',
       gap: 8,
+      flexGrow: 1,
     },
     searchInput: {
       paddingVertical: 16,

package/src/screens/conversation_select_recipients/conversation_new_entry_screen.tsx

@@ -0,0 +1,100 @@
+import { useNavigation } from '@react-navigation/native'
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
+import React, { useEffect } from 'react'
+import { ScrollView, StyleSheet, View } from 'react-native'
+import { Button, Heading } from '../../components'
+import { DefaultLoading } from '../../components/page/loading'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import type {
+  ConversationSelectRecipientsParams,
+  ConversationSelectRecipientsScreenProps,
+} from './types/screen_props'
+import { useNewConversationEntry } from '../../hooks/use_new_conversation_entry'
+import { Haptic } from '../../utils/native_adapters'
+
+type NewConversationStackParamList = {
+  ConversationNewEntry: ConversationSelectRecipientsParams | undefined
+  ConversationSelectGroupRecipients: ConversationSelectRecipientsParams | undefined
+  ConversationSelectTeamsILeadRecipients: ConversationSelectRecipientsParams | undefined
+}
+
+export const ConversationNewEntryScreen = ({ route }: ConversationSelectRecipientsScreenProps) => {
+  const styles = useStyles()
+  const navigation = useNavigation<NativeStackNavigationProp<NewConversationStackParamList>>()
+  const entryMode = useNewConversationEntry()
+
+  useEffect(() => {
+    if (entryMode === 'groups') {
+      navigation.replace('ConversationSelectGroupRecipients', route.params)
+      return
+    }
+
+    if (entryMode === 'teams') {
+      navigation.replace('ConversationSelectTeamsILeadRecipients', route.params)
+      return
+    }
+
+    if (entryMode === 'none') {
+      navigation.goBack()
+      return
+    }
+  }, [entryMode, navigation, route.params])
+
+  if (entryMode !== 'select_type') return <DefaultLoading />
+
+  const handleGroupPress = () => {
+    Haptic.impactLight()
+    navigation.navigate('ConversationSelectGroupRecipients', route.params)
+  }
+
+  const handleTeamPress = () => {
+    Haptic.impactLight()
+    navigation.navigate('ConversationSelectTeamsILeadRecipients', route.params)
+  }
+
+  return (
+    <ScrollView contentContainerStyle={styles.contentContainer}>
+      <View style={styles.header}>
+        <Heading variant="h2">Start a conversation by</Heading>
+      </View>
+      <View style={styles.actions}>
+        <Button
+          title="Group"
+          onPress={handleGroupPress}
+          size="lg"
+          variant="outline"
+          accessibilityHint="Opens group selection screen"
+        />
+        <Button
+          title="Team"
+          onPress={handleTeamPress}
+          size="lg"
+          variant="outline"
+          accessibilityHint="Opens team selection screen"
+        />
+      </View>
+    </ScrollView>
+  )
+}
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+
+  return StyleSheet.create({
+    contentContainer: {
+      flexGrow: 1,
+      padding: 16,
+      paddingBottom: 16 + bottom,
+      justifyContent: 'center',
+    },
+    header: {
+      marginBottom: 24,
+      alignItems: 'center',
+    },
+    actions: {
+      gap: 12,
+      flexDirection: 'row',
+      justifyContent: 'center',
+    },
+  })
+}

package/src/screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen.tsx

@@ -1,12 +1,13 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { FlatList, StyleSheet, View } from 'react-native'
-import { Heading } from '../../components'
+import { Button, Heading } from '../../components'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
 import { useServiceTypesWithTeams } from '../conversation_filter_recipients/hooks/use_service_types_with_teams'
-import { ServiceTypeWithTeams } from '../conversation_filter_recipients/types'
+import { ServiceTypeWithTeams, TeamFilterTypes } from '../conversation_filter_recipients/types'
 import { TeamRecipientRow } from './components/team_recipient_row'
+import { Haptic } from '../../utils/native_adapters'
 
 export const ConversationSelectTeamsILeadRecipientsScreen = ({
   route,
@@ -14,6 +15,7 @@ export const ConversationSelectTeamsILeadRecipientsScreen = ({
   const styles = useStyles()
   const navigation = useNavigation()
   const { serviceTypes } = useServiceTypesWithTeams()
+  const hasServiceTypes = serviceTypes.length > 0
 
   const handleNavigateToConversationNew = (teams: ServiceTypeWithTeams['teams']) => {
     const teamIds = teams.map(team => team.id)
@@ -35,7 +37,25 @@ export const ConversationSelectTeamsILeadRecipientsScreen = ({
       contentContainerStyle={styles.contentContainer}
       ListHeaderComponent={
         <View style={styles.sectionHeader}>
-          <Heading variant="h3">All teams I lead</Heading>
+          <Heading variant="h3">Teams I lead</Heading>
+          <Button
+            onPress={() => {
+              Haptic.impactLight()
+              navigation.navigate('New', {
+                screen: 'ConversationFilterRecipients',
+                params: {
+                  source_app_name: 'Services',
+                  team_filter_type: hasServiceTypes
+                    ? TeamFilterTypes.TeamsIlead
+                    : TeamFilterTypes.All,
+                },
+              })
+            }}
+            title="Select teams"
+            variant="outline"
+            iconNameLeft="general.search"
+            size="sm"
+          />
         </View>
       }
       renderItem={({ item: serviceType }: { item: ServiceTypeWithTeams }) => {

package/src/screens/conversation_select_type_screen.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
+import { Haptic } from '../utils/native_adapters'
+import { AppName } from '../types/resources/app_name'
+import { GraphId } from '../types/resources/group_resource'
+
+export const ConversationSelectTypeScreenOptions = getFormSheetScreenOptions({
+  headerTitle: 'New conversation',
+})
+
+export type ConversationSelectTypeScreenProps = StaticScreenProps<{
+  chat_group_graph_id?: GraphId
+  group_source_app_name?: AppName
+}>
+
+export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeScreenProps) {
+  const navigation = useNavigation()
+
+  const handleGroupPress = () => {
+    Haptic.impactLight()
+    navigation.navigate('New', {
+      screen: 'ConversationSelectGroupRecipients',
+      params: { ...route.params },
+    })
+  }
+
+  const handleTeamPress = () => {
+    Haptic.impactLight()
+    navigation.navigate('New', {
+      screen: 'ConversationSelectTeamsILeadRecipients',
+      params: { ...route.params },
+    })
+  }
+
+  return (
+    <FormSheet.Root>
+      <FormSheet.Header>
+        <FormSheet.HeaderTitle>Start a conversation by</FormSheet.HeaderTitle>
+      </FormSheet.Header>
+      <FormSheet.Action
+        title="Group"
+        onPress={handleGroupPress}
+        accessibilityHint="Opens group selection screen"
+      />
+      <FormSheet.Action
+        title="Team"
+        onPress={handleTeamPress}
+        accessibilityHint="Opens team selection screen"
+      />
+    </FormSheet.Root>
+  )
+}

package/src/screens/conversations/components/list_header_component.tsx

@@ -6,6 +6,7 @@ import { useAtFontScaleBreakpoint, useCurrentPersonCache, useTheme } from '../..
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
 import { useCanDisplayGroups } from '../../../hooks/use_groups'
 import { useCanCreateConversations } from '../../../hooks'
+import { useNewConversationEntry } from '../../../hooks/use_new_conversation_entry'
 import { useAppName } from '../../../hooks/use_app_name'
 import { ConversationsScreenProps } from '../conversations_screen'
 import { ChatGroupBadge } from './chat_group_badge'
@@ -23,7 +24,6 @@ enum FilterTypes {
 }
 
 export const ListHeaderComponent = () => {
-  const styles = useStyles()
   const navigation = useNavigation()
   const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })
   const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })
@@ -32,6 +32,7 @@ export const ListHeaderComponent = () => {
   const currentPersonCache = useCurrentPersonCache()
   const { markAllRead, isPending } = useMarkAllRead()
   const canCreateConversations = useCanCreateConversations()
+  const entryMode = useNewConversationEntry()
   const appName = useAppName()
 
   const active: FilterTypes = useMemo(() => {
@@ -47,18 +48,36 @@ export const ListHeaderComponent = () => {
   }, [chat_group_graph_id, group_source_app_name])
 
   const handleNewConversationNavigation = useCallback(() => {
-    return navigation.navigate('New', {
-      screen: 'ConversationSelectRecipients',
-      params: {
-        ...route.params,
-      },
-    })
-  }, [navigation, route.params])
+    if (entryMode === 'select_type') {
+      return navigation.navigate('ConversationSelectType', { ...route.params })
+    }
+
+    if (entryMode === 'groups') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectGroupRecipients',
+        params: { ...route.params },
+      })
+    }
+
+    if (entryMode === 'teams') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectTeamsILeadRecipients',
+        params: { ...route.params },
+      })
+    }
+  }, [navigation, route.params, entryMode])
 
   const handleGetHelp = useCallback(() => {
     navigation.navigate('GetHelp', { type: 'chat' })
   }, [navigation])
 
+  const handleOpenConversationFilters = useCallback(() => {
+    navigation.navigate('ConversationFilters', {
+      chat_group_graph_id,
+      group_source_app_name,
+    })
+  }, [navigation, chat_group_graph_id, group_source_app_name])
+
   const handleMarkAllRead = useCallback(() => {
     currentPersonCache.update({ unreadCount: 0 })
     Haptic.notificationSuccess()
@@ -74,7 +93,22 @@ export const ListHeaderComponent = () => {
     ])
   }, [active, handleMarkAllRead])
 
-  const showAppFilters = canFilterByGroups && canFilterByTeams
+  const hasSomeSourceFilterCapability = canFilterByTeams || canFilterByGroups
+  const hasMultiSourceFilterCapabilities = canFilterByTeams && canFilterByGroups
+  const shouldShowHeaderFiltersButton =
+    hasSomeSourceFilterCapability && !hasMultiSourceFilterCapabilities
+  const moreFiltersButtonA11yLabel = shouldShowHeaderFiltersButton
+    ? 'View filters'
+    : 'View more filters'
+
+  const moreFiltersButtonProps = {
+    onPress: handleOpenConversationFilters,
+    active: active === FilterTypes.More,
+    iconNameRight: 'general.threeReducingHorizontalBars' as const,
+    accessibilityLabel: moreFiltersButtonA11yLabel,
+  }
+
+  const styles = useStyles({ shouldShowHeaderFiltersButton })
 
   return (
     <View style={styles.listHeader}>
@@ -111,73 +145,70 @@ export const ListHeaderComponent = () => {
               maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
             />
           )}
+          {shouldShowHeaderFiltersButton && <ToggleButton {...moreFiltersButtonProps} />}
         </View>
       </View>
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={styles.filterRow}
-        accessibilityRole="toolbar"
-      >
-        {showAppFilters && (
-          <>
-            <ToggleButton
-              title={FilterTypes.All}
-              active={active === FilterTypes.All}
-              onPress={() =>
-                navigation.setParams({
-                  chat_group_graph_id: undefined,
-                  group_source_app_name: undefined,
-                })
-              }
-              accessibilityLabel="Show all conversations"
-            />
-            <ToggleButton
-              title={FilterTypes.Groups}
-              active={active === FilterTypes.Groups}
-              onPress={() =>
-                navigation.setParams({
-                  chat_group_graph_id: undefined,
-                  group_source_app_name: 'Groups',
-                })
-              }
-              accessibilityLabel="Filter to group conversations"
-            />
+      {hasMultiSourceFilterCapabilities && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.filterRow}
+          accessibilityRole="toolbar"
+        >
+          <ToggleButton
+            title={FilterTypes.All}
+            active={active === FilterTypes.All}
+            onPress={() =>
+              navigation.setParams({
+                chat_group_graph_id: undefined,
+                group_source_app_name: undefined,
+              })
+            }
+            accessibilityLabel="Show all conversations"
+            style={styles.filterButton}
+          />
+          <ToggleButton
+            title={FilterTypes.Groups}
+            active={active === FilterTypes.Groups}
+            onPress={() =>
+              navigation.setParams({
+                chat_group_graph_id: undefined,
+                group_source_app_name: 'Groups',
+              })
+            }
+            accessibilityLabel="Filter to group conversations"
+            style={styles.filterButton}
+          />
 
-            <ToggleButton
-              title={FilterTypes.Teams}
-              active={active === FilterTypes.Teams}
-              onPress={() =>
-                navigation.setParams({
-                  chat_group_graph_id: undefined,
-                  group_source_app_name: 'Services',
-                })
-              }
-              accessibilityLabel="Filter to team conversations"
-            />
-          </>
-        )}
-        <ToggleButton
-          title={showAppFilters ? FilterTypes.More : 'Filter'}
-          onPress={() =>
-            navigation.navigate('ConversationFilters', {
-              chat_group_graph_id,
-              group_source_app_name,
-            })
-          }
-          active={active === FilterTypes.More}
-          iconNameRight="general.threeReducingHorizontalBars"
-          accessibilityLabel={showAppFilters ? 'View all filters' : 'View more filters'}
-        />
-      </ScrollView>
+          <ToggleButton
+            title={FilterTypes.Teams}
+            active={active === FilterTypes.Teams}
+            onPress={() =>
+              navigation.setParams({
+                chat_group_graph_id: undefined,
+                group_source_app_name: 'Services',
+              })
+            }
+            accessibilityLabel="Filter to team conversations"
+            style={styles.filterButton}
+          />
+          <ToggleButton {...moreFiltersButtonProps} />
+        </ScrollView>
+      )}
       <ChatGroupBadge rowPaddingHorizontal={ROW_PADDING_HORIZONTAL} />
     </View>
   )
 }
 
-const useStyles = () => {
+const useStyles = ({
+  shouldShowHeaderFiltersButton,
+}: {
+  shouldShowHeaderFiltersButton: boolean
+}) => {
   const theme = useTheme()
-  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint(
+    shouldShowHeaderFiltersButton ? 1.2 : undefined
+  )
 
   return StyleSheet.create({
     listHeader: {
@@ -210,6 +241,11 @@ const useStyles = () => {
       justifyContent: 'flex-start',
       gap: 8,
       paddingHorizontal: ROW_PADDING_HORIZONTAL,
+      flexGrow: 1,
+    },
+    filterButton: {
+      flex: 1,
+      minWidth: 65,
     },
   })
 }

package/src/screens/index.ts

@@ -3,8 +3,8 @@ export * from './conversation_details_screen'
 export * from './conversation_screen'
 export * from './conversation_new/conversation_new_screen'
 export * from './conversation_filter_recipients/conversation_filter_recipients_screen'
-export * from './conversation_select_recipients/conversation_select_recipients_screen'
 export * from './message_actions_screen'
+export * from './message_report_screen'
 export * from './send_giphy_screen'
 export * from './not_found'
 export * from './reactions_screen'

package/src/screens/message_actions_screen.tsx

@@ -120,6 +120,14 @@ function MessageActionsScreenContent({
     navigation.goBack()
   }
 
+  const handleReportPress = useCallback(() => {
+    Haptic.impactLight()
+    navigation.navigate('MessageReport', {
+      conversation_id,
+      message_id: message.id,
+    })
+  }, [navigation, conversation_id, message.id])
+
   const { handleReactionToggle, isPending } = useMessageReactionToggle({
     conversation_id,
     message,
@@ -212,6 +220,9 @@ function MessageActionsScreenContent({
     ])
   }, [handleRemoveLinkPreview])
 
+  const showReportMessageAction =
+    !message?.mine && featureEnabled(availableFeatures.message_reporting)
+
   return (
     <FormSheet.Root style={styles.formSheetContent}>
       <View style={styles.reactionList}>
@@ -246,6 +257,14 @@ function MessageActionsScreenContent({
           iconName="services.fileCopy"
           accessibilityHint="Copies text and links to clipboard"
         />
+        {showReportMessageAction && (
+          <FormSheet.Action
+            onPress={handleReportPress}
+            title="Report message"
+            iconName="chat.reportMessageO"
+            accessibilityHint="Opens a form to report this message"
+          />
+        )}
         {message?.mine && (
           <FormSheet.Action
             onPress={() => handleEditPress()}
@@ -306,7 +325,9 @@ const Reaction = ({
       android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
       onPress={onPress}
     >
-      <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
+      <Text style={styles.reactionEmoji} allowFontScaling={false}>
+        {REACTION_EMOJIS[reaction.value]}
+      </Text>
     </PlatformPressable>
   )
 }
@@ -316,7 +337,7 @@ const useStyles = () => {
   const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 })
 
   const btnBorderWidth = 1
-  const baseSize = 46 * fontScale
+  const baseSize = 46 * Math.max(1, fontScale)
   const reactionBtnSize = Platform.select({
     ios: baseSize,
     android: baseSize + btnBorderWidth * 2,
@@ -346,6 +367,7 @@ const useStyles = () => {
     },
     reactionEmoji: {
       fontSize: 24,
+      textAlign: 'center',
     },
     actions: {
       paddingTop: 4,