[Maintenance] Use Page component for mobile pages (#1993)

* Use Page component for mobile pages

* Release notes

* Use Button instead of Link in MobileBackButton

* Update mobile budget table to use Page component

* Settings page cleanup

* Fix lint error

* Updates + small font size increase in  page headings

* Fix rebase error

* Button height

* Revert payees navtab

packages/desktop-client/src/components/MobileBackButton.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import useNavigate from '../hooks/useNavigate';
+import CheveronLeft from '../icons/v1/CheveronLeft';
+import { type CSSProperties, styles, theme } from '../style';
+
+import Button from './common/Button';
+import Text from './common/Text';
+
+type MobileBackButtonProps = {
+  style?: CSSProperties;
+};
+
+export default function MobileBackButton({ style }: MobileBackButtonProps) {
+  const navigate = useNavigate();
+  return (
+    <Button
+      type="bare"
+      style={{
+        color: theme.mobileHeaderText,
+        justifyContent: 'center',
+        margin: 10,
+        paddingLeft: 5,
+        paddingRight: 3,
+        ...style,
+      }}
+      hoveredStyle={{
+        color: theme.mobileHeaderText,
+        background: theme.mobileHeaderTextHover,
+      }}
+      onPointerUp={() => navigate(-1)}
+    >
+      <CheveronLeft
+        style={{ width: 30, height: 30, margin: -10, marginLeft: -5 }}
+      />
+      <Text
+        style={{
+          ...styles.text,
+          fontWeight: 500,
+          marginLeft: 5,
+          marginRight: 5,
+        }}
+      >
+        Back
+      </Text>
+    </Button>
+  );
+}

packages/desktop-client/src/components/Page.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import React, { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 
 import { useResponsive } from '../ResponsiveProvider';
 import { theme, styles, type CSSProperties } from '../style';
@@ -7,18 +7,24 @@ import Text from './common/Text';
 import View from './common/View';
 
 type PageHeaderProps = {
-  name: ReactNode;
+  title: ReactNode;
+  titleContainerProps?: ComponentPropsWithoutRef<typeof View>;
   style?: CSSProperties;
+  leftContentContainerProps?: ComponentPropsWithoutRef<typeof View>;
   leftContent?: ReactNode;
+  rightContentContainerProps?: ComponentPropsWithoutRef<typeof View>;
   rightContent?: ReactNode;
 };
 
 const HEADER_HEIGHT = 50;
 
 function PageHeader({
-  name,
+  title,
+  titleContainerProps,
   style,
+  leftContentContainerProps,
   leftContent,
+  rightContentContainerProps,
   rightContent,
 }: PageHeaderProps) {
   const { isNarrowWidth } = useResponsive();
@@ -28,41 +34,49 @@ function PageHeader({
       <View
         style={{
           alignItems: 'center',
-          backgroundColor: theme.mobilePageBackground,
-          color: theme.mobileModalText,
+          backgroundColor: theme.mobileHeaderBackground,
+          color: theme.mobileHeaderText,
           flexDirection: 'row',
           flexShrink: 0,
           height: HEADER_HEIGHT,
           ...style,
         }}
       >
         <View
+          {...leftContentContainerProps}
           style={{
             flexBasis: '25%',
             justifyContent: 'flex-start',
             flexDirection: 'row',
+            ...leftContentContainerProps?.style,
           }}
         >
           {leftContent}
         </View>
         <View
+          role="heading"
+          {...titleContainerProps}
           style={{
+            textAlign: 'center',
             alignItems: 'center',
+            justifyContent: 'center',
             flexDirection: 'row',
             flexBasis: '50%',
-            fontSize: 18,
+            fontSize: 17,
             fontWeight: 500,
-            justifyContent: 'center',
             overflowY: 'auto',
+            ...titleContainerProps?.style,
           }}
         >
-          {name}
+          {title}
         </View>
         <View
+          {...rightContentContainerProps}
           style={{
             flexBasis: '25%',
             justifyContent: 'flex-end',
             flexDirection: 'row',
+            ...rightContentContainerProps?.style,
           }}
         >
           {rightContent}
@@ -80,53 +94,88 @@ function PageHeader({
         ...style,
       }}
     >
-      {name}
+      {title}
     </Text>
   );
 }
 
 type PageProps = {
-  title: ReactNode;
-  titleStyle?: CSSProperties;
-  headerLeftContent?: ReactNode;
-  headerRightContent?: ReactNode;
+  titleContainerProps?: PageHeaderProps['titleContainerProps'];
+  title: PageHeaderProps['title'];
+  headerStyle?: CSSProperties;
+  headerLeftContentContainerProps?: PageHeaderProps['leftContentContainerProps'];
+  headerLeftContent?: PageHeaderProps['leftContent'];
+  headerRightContentContainerProps?: PageHeaderProps['rightContentContainerProps'];
+  headerRightContent?: PageHeaderProps['rightContent'];
+  style?: CSSProperties;
+  padding?: number;
+  childrenContainerProps?: ComponentPropsWithoutRef<typeof View>;
   children: ReactNode;
+  footer?: ReactNode;
 };
 
 export function Page({
+  titleContainerProps,
   title,
-  titleStyle,
+  headerStyle,
+  headerLeftContentContainerProps,
   headerLeftContent,
+  headerRightContentContainerProps,
   headerRightContent,
+  style,
+  padding,
+  childrenContainerProps,
   children,
+  footer,
 }: PageProps) {
-  let { isNarrowWidth } = useResponsive();
-  let HORIZONTAL_PADDING = isNarrowWidth ? 10 : 20;
+  const { isNarrowWidth } = useResponsive();
+  const _padding = padding != null ? padding : isNarrowWidth ? 10 : 20;
 
   return (
-    <View style={isNarrowWidth ? undefined : styles.page}>
+    <View
+      style={{
+        ...(!isNarrowWidth && styles.page),
+        ...style,
+      }}
+    >
       <PageHeader
-        name={title}
+        title={title}
+        titleContainerProps={titleContainerProps}
+        leftContentContainerProps={headerLeftContentContainerProps}
         leftContent={headerLeftContent}
+        rightContentContainerProps={headerRightContentContainerProps}
         rightContent={headerRightContent}
         style={{
-          ...titleStyle,
-          ...(!isNarrowWidth && { paddingInline: HORIZONTAL_PADDING }),
+          ...(!isNarrowWidth && { paddingInline: _padding }),
+          ...headerStyle,
         }}
       />
-      <View
-        style={
-          isNarrowWidth
-            ? { overflowY: 'auto', padding: HORIZONTAL_PADDING }
-            : {
-                paddingLeft: HORIZONTAL_PADDING,
-                paddingRight: HORIZONTAL_PADDING,
-                flex: 1,
-              }
-        }
-      >
-        {children}
-      </View>
+      {isNarrowWidth ? (
+        <View
+          {...childrenContainerProps}
+          style={{
+            flex: 1,
+            overflowY: 'auto',
+            padding: _padding,
+            ...childrenContainerProps?.style,
+          }}
+        >
+          {children}
+        </View>
+      ) : (
+        <View
+          {...childrenContainerProps}
+          style={{
+            flex: 1,
+            paddingLeft: _padding,
+            paddingRight: _padding,
+            ...childrenContainerProps?.style,
+          }}
+        >
+          {children}
+        </View>
+      )}
+      {footer}
     </View>
   );
 }

packages/desktop-client/src/components/Titlebar.tsx

@@ -130,7 +130,7 @@ type SyncButtonProps = {
   style?: CSSProperties;
   isMobile?: boolean;
 };
-export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
+function SyncButton({ style, isMobile = false }: SyncButtonProps) {
   let cloudFileId = useSelector(state => state.prefs.local.cloudFileId);
   let { sync } = useActions();