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

This reverts commit e8055bb.

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

@@ -15,25 +15,17 @@ 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={width ? width : 14}
-        height={height ? height : 14}
-        style={iconStyle}
-      />
+      <Refresh width={14} 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, styles } from '../style';
+import { theme, type CSSProperties } 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.mobileHeaderTextSubdued
-      : theme.mobileHeaderText;
+      ? theme.sidebarItemText
+      : style.color;
   const desktopColor =
     syncState === 'error'
       ? theme.errorTextDark
@@ -180,28 +180,6 @@ 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
@@ -214,35 +192,21 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
 
       <Button
         type="bare"
-        style={
-          isMobile
-            ? {
-                ...style,
-                WebkitAppRegion: 'none',
-                ...mobileIconStyle,
-              }
-            : {
-                ...style,
-                WebkitAppRegion: 'none',
-                color: desktopColor,
-              }
-        }
-        hoveredStyle={hoveredStyle}
+        style={{
+          ...style,
+          WebkitAppRegion: 'none',
+          color: isMobile ? mobileColor : desktopColor,
+        }}
+        hoveredStyle={activeStyle}
         activeStyle={activeStyle}
         onClick={sync}
       >
-        {isMobile ? (
-          syncState === 'error' ? (
-            <AlertTriangle width={14} height={14} />
-          ) : (
-            <AnimatedRefresh width={18} height={18} animating={syncing} />
-          )
-        ) : syncState === 'error' ? (
+        {syncState === 'error' ? (
           <AlertTriangle width={13} />
         ) : (
           <AnimatedRefresh animating={syncing} />
         )}
-        <Text style={isMobile ? { ...mobileTextStyle } : { marginLeft: 3 }}>
+        <Text style={{ 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.mobileViewTheme);
+  useSetThemeColor(theme.mobileAccountViewTheme);
 
   if (!accounts || !accounts.length) {
     return null;

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

@@ -6,7 +6,6 @@ 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';
@@ -24,8 +23,9 @@ function TransactionSearchInput({ accountName, onSearch }) {
       style={{
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: theme.mobilePageBackground,
+        backgroundColor: theme.tableHeaderBackground,
         margin: '11px auto 4px',
+        borderRadius: 4,
         padding: 10,
         width: '100%',
       }}
@@ -50,7 +50,7 @@ function TransactionSearchInput({ accountName, onSearch }) {
         }}
         placeholder={`Search ${accountName}`}
         style={{
-          backgroundColor: theme.tableBackground,
+          backgroundColor: theme.formInputBackground,
           border: `1px solid ${theme.formInputBorder}`,
           fontSize: 15,
           flex: 1,
@@ -64,8 +64,6 @@ function TransactionSearchInput({ accountName, onSearch }) {
 }
 
 const LEFT_RIGHT_FLEX_WIDTH = 70;
-const BUDGET_HEADER_HEIGHT = 50;
-
 export default function AccountDetails({
   account,
   prependTransactions,
@@ -93,121 +91,62 @@ export default function AccountDetails({
     <View
       style={{
         flex: 1,
-        backgroundColor: theme.mobilePageBackground,
+        backgroundColor: theme.tableHeaderBackground,
         overflowY: 'hidden',
-        flexGrow: 1,
+        width: '100%',
       }}
     >
       <View
         style={{
           alignItems: 'center',
           flexShrink: 0,
           overflowY: 'hidden',
+          paddingTop: 10,
           top: 0,
+          width: '100%',
         }}
       >
         <View
           style={{
+            alignItems: 'center',
             flexDirection: 'row',
-            flexShrink: 0,
-            height: BUDGET_HEADER_HEIGHT,
+            justifyContent: 'space-between',
             width: '100%',
-            backgroundColor: theme.mobileHeaderBackground,
           }}
         >
-          <View
+          <Link
+            to={-1}
             style={{
+              color: theme.formLabelText,
+              alignItems: 'center',
+              display: 'flex',
+              textDecoration: 'none',
               width: LEFT_RIGHT_FLEX_WIDTH,
-              flexDirection: 'row',
             }}
           >
-            <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>
+            <CheveronLeft style={{ width: 32, height: 32 }} />
+            <Text style={{ ...styles.text, fontWeight: 500 }}>Back</Text>
+          </Link>
           <View
             style={{
-              flex: 1,
               fontSize: 16,
               fontWeight: 500,
-              alignItems: 'center',
-              justifyContent: 'center',
-              color: theme.mobileHeaderText,
             }}
             role="heading"
           >
             {account.name}
           </View>
 
-          <View
-            style={{
-              width: LEFT_RIGHT_FLEX_WIDTH,
-              flexDirection: 'row',
-            }}
+          <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={{
-                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>
+            <Add width={20} height={20} />
+          </ButtonLink>
         </View>
         <Label title="BALANCE" style={{ marginTop: 10 }} />
         <CellValue

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

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