[Mobile] Update mobile labels to be sentence case + add labels to mobile...

[Mobile] Update mobile labels to be sentence case + add labels to mobile budget and balance modals (#2627)

* Mobile UI updates

* Release notes

* VRT updates

* Midnight VRT

packages/desktop-client/src/components/common/Label.tsx

@@ -16,7 +16,7 @@ export function Label({ title, style }: LabelProps) {
         ...styles.text,
         color: theme.tableRowHeaderText,
         textAlign: 'right',
-        fontSize: 12,
+        fontSize: 14,
         marginBottom: 2,
         ...style,
       }}

packages/desktop-client/src/components/common/Modal.tsx

@@ -156,9 +156,9 @@ export const Modal = ({
             style={{
               justifyContent: 'center',
               alignItems: 'center',
-              padding: 20,
+              padding: '0 20px',
               position: 'relative',
-              height: 80,
+              height: 70,
             }}
           >
             <View

packages/desktop-client/src/components/mobile/MobileForms.tsx

@@ -24,10 +24,9 @@ export function FieldLabel({ title, flush, style }: FieldLabelProps) {
       style={{
         marginBottom: 5,
         marginTop: flush ? 0 : 25,
-        fontSize: 13,
+        fontSize: 14,
         color: theme.tableRowHeaderText,
         padding: `0 ${styles.mobileEditingPadding}px`,
-        textTransform: 'uppercase',
         userSelect: 'none',
         ...style,
       }}

packages/desktop-client/src/components/mobile/accounts/Accounts.jsx

@@ -37,8 +37,7 @@ function AccountHeader({ name, amount, style = {} }) {
         <Text
           style={{
             ...styles.text,
-            textTransform: 'uppercase',
-            fontSize: 13,
+            fontSize: 14,
           }}
           data-testid="name"
         >
@@ -47,7 +46,7 @@ function AccountHeader({ name, amount, style = {} }) {
       </View>
       <CellValue
         binding={amount}
-        style={{ ...styles.text, fontSize: 13 }}
+        style={{ ...styles.text, fontSize: 14 }}
         type="financial"
       />
     </View>
@@ -220,7 +219,7 @@ function AccountList({
 
           {offbudgetAccounts.length > 0 && (
             <AccountHeader
-              name="Off budget"
+              name="Off Budget"
               amount={getOffBudgetBalance()}
               style={{ marginTop: 30 }}
             />

packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx

@@ -43,7 +43,7 @@ function ToBudget({ toBudget, onClick }) {
       onClick={onClick}
     >
       <Label
-        title={amount < 0 ? 'OVERBUDGETED' : 'TO BUDGET'}
+        title={amount < 0 ? 'Overbudgeted' : 'To Budget'}
         style={{
           ...styles.underlinedText,
           color: theme.formInputText,
@@ -82,18 +82,32 @@ function Saved({ projected, onClick }) {
       onClick={onClick}
     >
       {projected ? (
-        <Label
-          title="PROJECTED SAVINGS"
-          style={{
-            ...styles.underlinedText,
-            color: theme.formInputText,
-            textAlign: 'left',
-            fontSize: 9,
-          }}
-        />
+        <>
+          <Label
+            title="Projected"
+            style={{
+              ...styles.underlinedText,
+              color: theme.formInputText,
+              textAlign: 'left',
+              letterSpacing: 2,
+              fontSize: 8,
+              marginBottom: 0,
+            }}
+          />
+          <Label
+            title="Savings"
+            style={{
+              ...styles.underlinedText,
+              color: theme.formInputText,
+              textAlign: 'left',
+              letterSpacing: 2,
+              fontSize: 8,
+            }}
+          />
+        </>
       ) : (
         <Label
-          title={isNegative ? 'OVERSPENT' : 'SAVED'}
+          title={isNegative ? 'Overspent' : 'Saved'}
           style={{
             ...styles.underlinedText,
             color: theme.formInputText,
@@ -267,7 +281,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
   const onTransfer = () => {
     dispatch(
       pushModal('transfer', {
-        title: `Transfer: ${category.name}`,
+        title: category.name,
         month,
         amount: catBalance,
         onSubmit: (amount, toCategoryId) => {
@@ -993,8 +1007,8 @@ function IncomeGroup({
           marginRight: 14,
         }}
       >
-        {type === 'report' && <Label title="BUDGETED" style={{ width: 90 }} />}
-        <Label title="RECEIVED" style={{ width: 90 }} />
+        {type === 'report' && <Label title="Budgeted" style={{ width: 90 }} />}
+        <Label title="Received" style={{ width: 90 }} />
       </View>
 
       <Card style={{ marginTop: 0 }}>
@@ -1270,7 +1284,7 @@ export function BudgetTable({
               }}
             >
               <Label
-                title="BUDGETED"
+                title="Budgeted"
                 style={{ color: theme.buttonNormalText }}
               />
               <CellValue
@@ -1313,7 +1327,7 @@ export function BudgetTable({
                 alignItems: 'flex-end',
               }}
             >
-              <Label title="SPENT" style={{ color: theme.formInputText }} />
+              <Label title="Spent" style={{ color: theme.formInputText }} />
               <CellValue
                 binding={
                   type === 'report'
@@ -1338,7 +1352,7 @@ export function BudgetTable({
             alignItems: 'flex-end',
           }}
         >
-          <Label title="BALANCE" style={{ color: theme.formInputText }} />
+          <Label title="Balance" style={{ color: theme.formInputText }} />
           <CellValue
             binding={
               type === 'report'

packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.jsx

@@ -95,7 +95,7 @@ export function TransactionListWithBalances({
             }}
           >
             <Label
-              title="CLEARED"
+              title="Cleared"
               style={{ textAlign: 'center', fontSize: 12 }}
             />
             <CellValue
@@ -110,7 +110,7 @@ export function TransactionListWithBalances({
             />
           </View>
           <View style={{ flexBasis: '33%' }}>
-            <Label title="BALANCE" style={{ textAlign: 'center' }} />
+            <Label title="Balance" style={{ textAlign: 'center' }} />
             <CellValue
               binding={balance}
               type="financial"
@@ -132,7 +132,7 @@ export function TransactionListWithBalances({
             }}
           >
             <Label
-              title="UNCLEARED"
+              title="Uncleared"
               style={{ textAlign: 'center', fontSize: 12 }}
             />
             <CellValue

packages/desktop-client/src/components/modals/CoverModal.tsx

@@ -75,7 +75,7 @@ export function CoverModal({
 
   return (
     <Modal
-      title={`Cover: ${category.name}`}
+      title={category.name}
       showHeader
       focusAfterClose={false}
       {...modalProps}

packages/desktop-client/src/components/modals/ReportBalanceMenuModal.tsx

@@ -7,6 +7,7 @@ import { type CSSProperties, theme, styles } from '../../style';
 import { BalanceWithCarryover } from '../budget/BalanceWithCarryover';
 import { BalanceMenu } from '../budget/report/BalanceMenu';
 import { Modal } from '../common/Modal';
+import { Text } from '../common/Text';
 import { View } from '../common/View';
 import { type CommonModalProps } from '../Modals';
 
@@ -36,7 +37,7 @@ export function ReportBalanceMenuModal({
 
   return (
     <Modal
-      title={`Balance: ${category.name}`}
+      title={category.name}
       showHeader
       focusAfterClose={false}
       {...modalProps}
@@ -55,6 +56,14 @@ export function ReportBalanceMenuModal({
           marginBottom: 20,
         }}
       >
+        <Text
+          style={{
+            fontSize: 17,
+            fontWeight: 400,
+          }}
+        >
+          Balance
+        </Text>
         <BalanceWithCarryover
           disabled
           balanceStyle={{

packages/desktop-client/src/components/modals/ReportBudgetMenuModal.tsx

@@ -11,6 +11,7 @@ import { useCategory } from '../../hooks/useCategory';
 import { type CSSProperties, theme, styles } from '../../style';
 import { BudgetMenu } from '../budget/report/BudgetMenu';
 import { Modal } from '../common/Modal';
+import { Text } from '../common/Text';
 import { View } from '../common/View';
 import { FocusableAmountInput } from '../mobile/transactions/FocusableAmountInput';
 import { type CommonModalProps } from '../Modals';
@@ -51,9 +52,13 @@ export function ReportBudgetMenuModal({
     setAmountFocused(true);
   }, []);
 
+  if (!category) {
+    return null;
+  }
+
   return (
     <Modal
-      title={`Budget: ${category?.name}`}
+      title={category.name}
       showHeader
       focusAfterClose={false}
       {...modalProps}
@@ -72,6 +77,14 @@ export function ReportBudgetMenuModal({
           marginBottom: 20,
         }}
       >
+        <Text
+          style={{
+            fontSize: 17,
+            fontWeight: 400,
+          }}
+        >
+          Budget
+        </Text>
         <FocusableAmountInput
           value={integerToAmount(budgeted || 0)}
           focused={amountFocused}