Changed Visibility

actualbudget · Dec 10, 2023 · 5083d0b · 5083d0b
1 parent fdf36de
commit 5083d0b
Showing 1 changed file with 25 additions and 20 deletions.
diff --git a/packages/desktop-client/src/components/accounts/MobileAccountDetails.js b/packages/desktop-client/src/components/accounts/MobileAccountDetails.js
@@ -12,6 +12,7 @@ import MobileBackButton from '../MobileBackButton';
 import { Page } from '../Page';
 import PullToRefresh from '../responsive/PullToRefresh';
 import CellValue from '../spreadsheet/CellValue';
+import useSheetValue from '../spreadsheet/useSheetValue';
 import { TransactionList } from '../transactions/MobileTransaction';
 
 function TransactionSearchInput({ accountName, onSearch }) {
@@ -130,41 +131,48 @@ export default function AccountDetails({
             justifyContent: 'space-evenly',
           }}
         >
-          <View>
-            <Label title="BALANCE" style={{ textAlign: 'center' }} />
+          <View
+            style={{
+              visibility:
+                useSheetValue(balanceUncleared) === 0 ? 'hidden' : 'visible',
+            }}
+          >
+            <Label
+              title="CLEARED"
+              style={{ textAlign: 'center', fontSize: 12 }}
+            />
             <CellValue
-              binding={balance}
+              binding={balanceCleared}
               type="financial"
               style={{
-                fontSize: 18,
+                fontSize: 12,
+                textAlign: 'center',
                 fontWeight: '500',
               }}
-              getStyle={value => ({
-                color: value < 0 ? theme.errorText : theme.pillTextHighlighted,
-              })}
-              data-testid="account-balance"
+              data-testid="account-balance-cleared"
             />
           </View>
           <View>
-            <Label
-              title="CLEARED"
-              style={{ textAlign: 'center', fontSize: 12 }}
-            />
+            <Label title="BALANCE" style={{ textAlign: 'center' }} />
             <CellValue
-              binding={balanceCleared}
+              binding={balance}
               type="financial"
               style={{
-                fontSize: 12,
-                textAlign: 'center',
+                fontSize: 18,
                 fontWeight: '500',
               }}
               getStyle={value => ({
                 color: value < 0 ? theme.errorText : theme.pillTextHighlighted,
               })}
-              data-testid="account-balance-cleared"
+              data-testid="account-balance"
             />
           </View>
-          <View>
+          <View
+            style={{
+              visibility:
+                useSheetValue(balanceUncleared) === 0 ? 'hidden' : 'visible',
+            }}
+          >
             <Label
               title="UNCLEARED"
               style={{ textAlign: 'center', fontSize: 12 }}
@@ -177,9 +185,6 @@ export default function AccountDetails({
                 textAlign: 'center',
                 fontWeight: '500',
               }}
-              getStyle={value => ({
-                color: value < 0 ? theme.errorText : theme.pillTextHighlighted,
-              })}
               data-testid="account-balance-uncleared"
             />
           </View>