Mobile pages standardized (Colors/UI) (#1874)

* Mobile Color Consistency

* VRT updates

* color updates

* notes

* Sync Text

* Adjust header font smaller

* color and format adjustments

* tidying header buttons

* color and button adjustments

* Header Text color

* VRT updates

* back button changes

* VRT changes

* adjust buttons

* lint fix

* darkTheme header background

* VRT updates

* VRT updates

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

@@ -15,17 +15,25 @@ let spin = keyframes({
 type AnimatedRefreshProps = {
   animating: boolean;
   iconStyle?: CSSProperties;
+  width?: number;
+  height?: number;
 };
 
 export default function AnimatedRefresh({
   animating,
   iconStyle,
+  width,
+  height,
 }: AnimatedRefreshProps) {
   return (
     <View
       style={{ animation: animating ? `${spin} 1s infinite linear` : null }}
     >
-      <Refresh width={14} height={14} style={iconStyle} />
+      <Refresh
+        width={width ? width : 14}
+        height={height ? height : 14}
+        style={iconStyle}
+      />
     </View>
   );
 }

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

@@ -22,7 +22,7 @@ import SvgEye from '../icons/v2/Eye';
 import SvgEyeSlashed from '../icons/v2/EyeSlashed';
 import NavigationMenu from '../icons/v2/NavigationMenu';
 import { useResponsive } from '../ResponsiveProvider';
-import { theme, type CSSProperties } from '../style';
+import { theme, type CSSProperties, styles } from '../style';
 
 import AccountSyncCheck from './accounts/AccountSyncCheck';
 import AnimatedRefresh from './AnimatedRefresh';
@@ -163,8 +163,8 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
       : syncState === 'disabled' ||
         syncState === 'offline' ||
         syncState === 'local'
-      ? theme.sidebarItemText
-      : style.color;
+      ? theme.mobileHeaderTextSubdued
+      : theme.mobileHeaderText;
   const desktopColor =
     syncState === 'error'
       ? theme.errorTextDark
@@ -180,6 +180,28 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
       }
     : {};
 
+  const hoveredStyle = isMobile
+    ? {
+        color: mobileColor,
+        background: theme.mobileHeaderTextHover,
+      }
+    : {};
+
+  const mobileIconStyle = {
+    color: mobileColor,
+    justifyContent: 'center',
+    margin: 10,
+    paddingLeft: 5,
+    paddingRight: 3,
+  };
+
+  const mobileTextStyle = {
+    ...styles.text,
+    fontWeight: 500,
+    marginLeft: 2,
+    marginRight: 5,
+  };
+
   return (
     <>
       <KeyHandlers
@@ -192,21 +214,35 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
 
       <Button
         type="bare"
-        style={{
-          ...style,
-          WebkitAppRegion: 'none',
-          color: isMobile ? mobileColor : desktopColor,
-        }}
-        hoveredStyle={activeStyle}
+        style={
+          isMobile
+            ? {
+                ...style,
+                WebkitAppRegion: 'none',
+                ...mobileIconStyle,
+              }
+            : {
+                ...style,
+                WebkitAppRegion: 'none',
+                color: desktopColor,
+              }
+        }
+        hoveredStyle={hoveredStyle}
         activeStyle={activeStyle}
         onClick={sync}
       >
-        {syncState === 'error' ? (
+        {isMobile ? (
+          syncState === 'error' ? (
+            <AlertTriangle width={14} height={14} />
+          ) : (
+            <AnimatedRefresh width={18} height={18} animating={syncing} />
+          )
+        ) : syncState === 'error' ? (
           <AlertTriangle width={13} />
         ) : (
           <AnimatedRefresh animating={syncing} />
         )}
-        <Text style={{ marginLeft: 3 }}>
+        <Text style={isMobile ? { ...mobileTextStyle } : { marginLeft: 3 }}>
           {syncState === 'disabled'
             ? 'Disabled'
             : syncState === 'offline'

packages/desktop-client/src/components/accounts/MobileAccount.js

@@ -165,7 +165,7 @@ export default function Account(props) {
 
   useEffect(updateSearchQuery, [searchText, currentQuery, state.dateFormat]);
 
-  useSetThemeColor(theme.mobileAccountViewTheme);
+  useSetThemeColor(theme.mobileViewTheme);
 
   if (!accounts || !accounts.length) {
     return null;

packages/desktop-client/src/components/accounts/MobileAccountDetails.js

@@ -6,6 +6,7 @@ import Add from '../../icons/v1/Add';
 import CheveronLeft from '../../icons/v1/CheveronLeft';
 import SearchAlternate from '../../icons/v2/SearchAlternate';
 import { theme, styles } from '../../style';
+import Button from '../common/Button';
 import ButtonLink from '../common/ButtonLink';
 import InputWithContent from '../common/InputWithContent';
 import Label from '../common/Label';
@@ -23,9 +24,8 @@ function TransactionSearchInput({ accountName, onSearch }) {
       style={{
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: theme.tableHeaderBackground,
+        backgroundColor: theme.mobilePageBackground,
         margin: '11px auto 4px',
-        borderRadius: 4,
         padding: 10,
         width: '100%',
       }}
@@ -50,7 +50,7 @@ function TransactionSearchInput({ accountName, onSearch }) {
         }}
         placeholder={`Search ${accountName}`}
         style={{
-          backgroundColor: theme.formInputBackground,
+          backgroundColor: theme.tableBackground,
           border: `1px solid ${theme.formInputBorder}`,
           fontSize: 15,
           flex: 1,
@@ -64,6 +64,8 @@ function TransactionSearchInput({ accountName, onSearch }) {
 }
 
 const LEFT_RIGHT_FLEX_WIDTH = 70;
+const BUDGET_HEADER_HEIGHT = 50;
+
 export default function AccountDetails({
   account,
   prependTransactions,
@@ -91,62 +93,121 @@ export default function AccountDetails({
     <View
       style={{
         flex: 1,
-        backgroundColor: theme.tableHeaderBackground,
+        backgroundColor: theme.mobilePageBackground,
         overflowY: 'hidden',
-        width: '100%',
+        flexGrow: 1,
       }}
     >
       <View
         style={{
           alignItems: 'center',
           flexShrink: 0,
           overflowY: 'hidden',
-          paddingTop: 10,
           top: 0,
-          width: '100%',
         }}
       >
         <View
           style={{
-            alignItems: 'center',
             flexDirection: 'row',
-            justifyContent: 'space-between',
+            flexShrink: 0,
+            height: BUDGET_HEADER_HEIGHT,
             width: '100%',
+            backgroundColor: theme.mobileHeaderBackground,
           }}
         >
-          <Link
-            to={-1}
+          <View
             style={{
-              color: theme.formLabelText,
-              alignItems: 'center',
-              display: 'flex',
-              textDecoration: 'none',
               width: LEFT_RIGHT_FLEX_WIDTH,
+              flexDirection: 'row',
             }}
           >
-            <CheveronLeft style={{ width: 32, height: 32 }} />
-            <Text style={{ ...styles.text, fontWeight: 500 }}>Back</Text>
-          </Link>
+            <Button
+              type="bare"
+              style={{
+                color: theme.mobileHeaderText,
+                justifyContent: 'center',
+                margin: 10,
+                paddingLeft: 5,
+                paddingRight: 3,
+              }}
+              hoveredStyle={{
+                color: theme.mobileHeaderText,
+                background: theme.mobileHeaderTextHover,
+              }}
+            >
+              <Link
+                to={-1}
+                style={{
+                  alignItems: 'center',
+                  display: 'flex',
+                  textDecoration: 'none',
+                }}
+              >
+                <CheveronLeft
+                  style={{ width: 30, height: 30, margin: -10, marginLeft: -5 }}
+                />
+                <Text
+                  style={{
+                    ...styles.text,
+                    fontWeight: 500,
+                    marginLeft: 5,
+                    marginRight: 5,
+                  }}
+                >
+                  Back
+                </Text>
+              </Link>
+            </Button>
+            <View
+              style={{
+                flex: 1,
+              }}
+            />
+          </View>
           <View
             style={{
+              flex: 1,
               fontSize: 16,
               fontWeight: 500,
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: theme.mobileHeaderText,
             }}
             role="heading"
           >
             {account.name}
           </View>
 
-          <ButtonLink
-            to="transactions/new"
-            type="bare"
-            aria-label="Add Transaction"
-            style={{ justifyContent: 'center', width: LEFT_RIGHT_FLEX_WIDTH }}
-            hoveredStyle={{ background: 'transparent' }}
-            activeStyle={{ background: 'transparent' }}
+          <View
+            style={{
+              width: LEFT_RIGHT_FLEX_WIDTH,
+              flexDirection: 'row',
+            }}
           >
-            <Add width={20} height={20} />
-          </ButtonLink>
+            <View
+              style={{
+                flex: 1,
+              }}
+            />
+            <ButtonLink
+              to="transactions/new"
+              type="bare"
+              aria-label="Add Transaction"
+              style={{
+                justifyContent: 'center',
+                padding: 10,
+                margin: 10,
+                color: theme.mobileHeaderText,
+              }}
+              hoveredStyle={{
+                color: theme.mobileHeaderText,
+                background: theme.mobileHeaderTextHover,
+              }}
+              activeStyle={{ background: 'transparent' }}
+            >
+              <Add width={20} height={20} style={{ margin: -5 }} />
+            </ButtonLink>
+          </View>
         </View>
         <Label title="BALANCE" style={{ marginTop: 10 }} />
         <CellValue

packages/desktop-client/src/components/accounts/MobileAccounts.js

@@ -23,6 +23,7 @@ function AccountHeader({ name, amount, style = {} }) {
         flex: '1 0 auto',
         flexDirection: 'row',
         marginTop: 10,
+        marginRight: 10,
         color: theme.pageTextLight,
         ...style,
       }}
@@ -58,6 +59,7 @@ function AccountCard({ account, updated, getBalanceQuery, onSelect }) {
         boxShadow: `0 1px 1px ${theme.mobileAccountShadow}`,
         borderRadius: 6,
         marginTop: 10,
+        marginRight: 10,
       }}
       data-testid="account"
     >
@@ -170,8 +172,15 @@ function AccountList({
   }
 
   return (
-    <View style={{ flex: 1 }}>
-      <Page title="Accounts">
+    <View style={{ flex: 1, backgroundColor: theme.mobilePageBackground }}>
+      <Page
+        title="Accounts"
+        titleStyle={{
+          backgroundColor: theme.mobileHeaderBackground,
+          color: theme.mobileHeaderText,
+          fontSize: 16,
+        }}
+      >
         <PullToRefresh onRefresh={syncAndDownload}>
           <AccountHeader name="For Budget" amount={getOnBudgetBalance()} />
           {budgetedAccounts.map(acct => (
@@ -233,7 +242,7 @@ export default function Accounts() {
     navigate(`/transaction/${transaction}`);
   };
 
-  useSetThemeColor(theme.mobileAccountsViewTheme);
+  useSetThemeColor(theme.mobileViewTheme);
 
   return (
     <View style={{ flex: 1 }}>

packages/desktop-client/src/components/budget/MobileBudget.js

@@ -340,7 +340,7 @@ class Budget extends Component {
         <View
           style={{
             flex: 1,
-            backgroundColor: theme.pageBackgroundLineTop,
+            backgroundColor: theme.mobilePageBackground,
             alignItems: 'center',
             justifyContent: 'center',
             marginBottom: 25,
@@ -400,7 +400,7 @@ export default function BudgetWrapper() {
 
   let actions = useActions();
   let spreadsheet = useSpreadsheet();
-  useSetThemeColor(theme.mobileBudgetViewTheme);
+  useSetThemeColor(theme.mobileViewTheme);
   return (
     <Budget
       categoryGroups={categoryGroups}