make Log Out button a NavBarButton; tweak NavBarButton

On the other screens of the UI, we use a NavBarButton for clickable buttons with text. I realized the Log Out button is inconsistent with this, so I changed it to a NavBarButton.
I tested this with a screen reader and it is still accessible (since it uses the Button component it is grouped as and recognized as 1 element with role 'button')

Using a NavBarButton made the log out icon smaller than before, so while making this change I revised the NavBarButton props. I added an optional "iconSize" that can be used to override the default 20.
I removed "onPressAction" because the Button component already has "onPress" which we can just use.
I organized the styles for both NavBar and NavBarButton, and made them able to be extended on by props.

www/js/components/NavBar.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import color from 'color';
-import { Appbar, Button, Icon, useTheme } from 'react-native-paper';
+import { Appbar, Button, ButtonProps, Icon, useTheme } from 'react-native-paper';
 
 const NavBar = ({ children }) => {
   const { colors } = useTheme();
   return (
-    <Appbar.Header
-      statusBarHeight={0}
-      elevated={true}
-      style={{ height: 56, backgroundColor: colors.surface }}>
+    <Appbar.Header statusBarHeight={0} elevated={true} style={s.navBar(colors.surface)}>
       {children}
     </Appbar.Header>
   );
@@ -19,7 +16,8 @@ export default NavBar;
 
 // NavBarButton, a greyish button with outline, to be used inside a NavBar
 
-export const NavBarButton = ({ children, icon, onPressAction, ...otherProps }) => {
+type Props = ButtonProps & { icon?: string; iconSize?: number };
+export const NavBarButton = ({ children, icon, iconSize, ...rest }: Props) => {
   const { colors } = useTheme();
   const buttonColor = color(colors.onBackground).alpha(0.07).rgb().string();
   const outlineColor = color(colors.onBackground).alpha(0.2).rgb().string();
@@ -30,15 +28,14 @@ export const NavBarButton = ({ children, icon, onPressAction, ...otherProps }) =
         mode="outlined"
         buttonColor={buttonColor}
         textColor={colors.onBackground}
-        contentStyle={{ height: 44, flexDirection: 'row' }}
-        style={[s.btn, { borderColor: outlineColor }]}
-        labelStyle={s.label}
-        onPress={() => onPressAction()}
-        {...otherProps}>
+        contentStyle={[s.btnContent, rest.contentStyle]}
+        style={[s.btn(outlineColor), rest.style]}
+        labelStyle={[s.btnLabel, rest.labelStyle]}
+        {...rest}>
         <View style={s.textWrapper}>{children}</View>
         {icon && (
           <View style={{ justifyContent: 'center' }}>
-            <Icon source={icon} color={colors.onBackground} size={20} />
+            <Icon source={icon} color={colors.onBackground} size={iconSize || 20} />
           </View>
         )}
       </Button>
@@ -47,11 +44,22 @@ export const NavBarButton = ({ children, icon, onPressAction, ...otherProps }) =
 };
 
 const s = StyleSheet.create({
-  btn: {
+  navBar: (backgroundColor) => ({
+    backgroundColor,
+    height: 56,
+    paddingHorizontal: 8,
+    gap: 5,
+  }),
+  btn: (borderColor) => ({
+    borderColor,
     borderRadius: 10,
-    marginLeft: 5,
+  }),
+  btnContent: {
+    height: 44,
+    flexDirection: 'row',
+    paddingHorizontal: 2,
   },
-  label: {
+  btnLabel: {
     fontSize: 12.5,
     fontWeight: '400',
     height: '100%',

www/js/control/ProfileSettings.tsx

@@ -1,15 +1,6 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
 import { Modal, StyleSheet, ScrollView } from 'react-native';
-import {
-  Dialog,
-  Button,
-  useTheme,
-  Text,
-  Appbar,
-  IconButton,
-  TextInput,
-  List,
-} from 'react-native-paper';
+import { Dialog, Button, useTheme, Text, Appbar, TextInput } from 'react-native-paper';
 import { useTranslation } from 'react-i18next';
 import ExpansionSection from './ExpandMenu';
 import SettingRow from './SettingRow';
@@ -50,7 +41,7 @@ import {
 } from '../splash/notifScheduler';
 import { DateTime } from 'luxon';
 import { AppConfig } from '../types/appConfigTypes';
-import NavBar from '../components/NavBar';
+import NavBar, { NavBarButton } from '../components/NavBar';
 
 //any pure functions can go outside
 const ProfileSettings = () => {
@@ -415,16 +406,9 @@ const ProfileSettings = () => {
     <>
       <NavBar>
         <Appbar.Content title={t('control.profile-tab')} />
-        <List.Item
-          style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}
-          title={t('control.log-out')}
-          titleStyle={{ fontSize: 14, color: colors.onSurface, paddingEnd: 5 }}
-          accessible={true}
-          accessibilityLabel={t('control.log-out')}
-          accessibilityRole="button"
-          onPress={() => setLogoutVis(true)}
-          right={() => <List.Icon icon="logout" aria-hidden={true} />}
-        />
+        <NavBarButton icon="logout" iconSize={24} onPress={() => setLogoutVis(true)}>
+          <Text>{t('control.log-out')}</Text>
+        </NavBarButton>
       </NavBar>
 
       <ScrollView>

www/js/diary/list/DateSelect.tsx

@@ -68,7 +68,7 @@ const DateSelect = ({ tsRange, loadSpecificWeekFn }) => {
         accessibilityLabel={
           'Date range: ' + (dateRange[0] ? dateRange[0] + ' to ' : '') + dateRangeEnd
         }
-        onPressAction={() => setOpen(true)}>
+        onPress={() => setOpen(true)}>
         {dateRange[0] && (
           <>
             <Text>{dateRange[0]}</Text>

www/js/diary/list/FilterSelect.tsx

@@ -46,9 +46,7 @@ const FilterSelect = ({ filters, setFilters, numListDisplayed, numListTotal }) =
 
   return (
     <>
-      <NavBarButton
-        icon={filters ? 'chevron-down' : null}
-        onPressAction={() => setModalVisible(true)}>
+      <NavBarButton icon={filters ? 'chevron-down' : null} onPress={() => setModalVisible(true)}>
         <Text>{labelDisplayText}</Text>
       </NavBarButton>
       <Modal visible={modalVisible} transparent={true} onDismiss={() => setModalVisible(false)}>

www/js/metrics/MetricsDateSelect.tsx

@@ -59,7 +59,7 @@ const MetricsDateSelect = ({ dateRange, setDateRange }: Props) => {
 
   return (
     <>
-      <NavBarButton icon="calendar" onPressAction={() => setOpen(true)}>
+      <NavBarButton icon="calendar" onPress={() => setOpen(true)}>
         {dateRange[0] && (
           <>
             <Text>{dateRange[0].toLocaleString()}</Text>