From b3e2e2e5a0b992d7efe161698e94756dc1fb8097 Mon Sep 17 00:00:00 2001
From: Alex Phillips <ahp118@gmail.com>
Date: Fri, 10 Dec 2021 18:16:43 -0500
Subject: [PATCH] more UI tweaks

---
 .../src/components/BudgetTable/BudgetTable.js | 13 +++++
 frontend/src/components/CategoryForm.js       |  2 +-
 frontend/src/components/CategoryGroupForm.js  |  1 +
 frontend/src/components/Drawer.js             |  2 +-
 frontend/src/pages/Account.js                 | 47 +++++++++++--------
 5 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/BudgetTable/BudgetTable.js b/frontend/src/components/BudgetTable/BudgetTable.js
index a9aeea8..1aa7140 100644
--- a/frontend/src/components/BudgetTable/BudgetTable.js
+++ b/frontend/src/components/BudgetTable/BudgetTable.js
@@ -16,6 +16,7 @@ import BudgetTableHeader from './BudgetTableHeader'
 import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state'
 import CategoryGroupForm from '../CategoryGroupForm'
 import CategoryForm from '../CategoryForm'
+import Tooltip from '@mui/material/Tooltip'
 
 export default function BudgetTable(props) {
   const theme = useTheme()
@@ -240,6 +241,15 @@ export default function BudgetTable(props) {
             }
           }
 
+          // Tooltip for CC warning
+          if (rowData.trackingAccountId && color === 'warning') {
+            return (
+              <Tooltip title="Month is underfunded, this amount may not be accurate">
+                <Chip size="small" label={value} color={color}></Chip>
+              </Tooltip>
+            )
+          }
+
           return <Chip size="small" label={value} color={color}></Chip>
         }
       },
@@ -324,8 +334,11 @@ export default function BudgetTable(props) {
           },
           EditField: props => {
             const childProps = { ...props }
+
+            // This prevents console errors, can't pass these to the DOM
             delete childProps.columnDef
             delete childProps.rowData
+
             return (
               <TextField
                 { ...childProps }
diff --git a/frontend/src/components/CategoryForm.js b/frontend/src/components/CategoryForm.js
index 5fccf31..6b96609 100644
--- a/frontend/src/components/CategoryForm.js
+++ b/frontend/src/components/CategoryForm.js
@@ -43,7 +43,7 @@ export default function NewCategoryDialog(props) {
     }
 
     setName('')
-    props.closeDialog()
+    props.popupState.close()
   }
 
   return (
diff --git a/frontend/src/components/CategoryGroupForm.js b/frontend/src/components/CategoryGroupForm.js
index 92bdc99..dae1fab 100644
--- a/frontend/src/components/CategoryGroupForm.js
+++ b/frontend/src/components/CategoryGroupForm.js
@@ -36,6 +36,7 @@ export default function NewCategoryDialog(props) {
         break
     }
 
+    setName('')
     props.popupState.close()
   }
 
diff --git a/frontend/src/components/Drawer.js b/frontend/src/components/Drawer.js
index 1c3d9fe..34a74d7 100644
--- a/frontend/src/components/Drawer.js
+++ b/frontend/src/components/Drawer.js
@@ -205,7 +205,7 @@ export default function AppDrawer(props) {
             selected={selectedItem === menuItemConfig.name}
           >
             <ListItemIcon style={{minWidth: '40px'}}>
-              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+              {index % 2 === 0 ? <AccountBalanceIcon /> : <MailIcon />}
             </ListItemIcon>
             <ListItemText primary={menuItemConfig.name} />
           </ListItemButton>
diff --git a/frontend/src/pages/Account.js b/frontend/src/pages/Account.js
index 254d85a..850dc5e 100644
--- a/frontend/src/pages/Account.js
+++ b/frontend/src/pages/Account.js
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import MaterialTable, { MTableBodyRow, MTableEditField } from "@material-table/core";
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from "react-router";
@@ -17,14 +17,12 @@ import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import LockIcon from '@mui/icons-material/Lock';
 import { inputToDinero, intlFormat } from '../utils/Currency'
-import { dinero, toUnit, isZero, isPositive, isNegative, multiply } from "dinero.js";
+import { dinero, toUnit, isZero, isNegative, multiply } from "dinero.js";
 import { toSnapshot } from "@dinero.js/core";
 import Tooltip from '@mui/material/Tooltip'
-import { Icon } from "@mui/material";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
 import Button from '@mui/material/Button';
 import Popover from '@mui/material/Popover'
-import PopupState, {
+import {
   usePopupState,
   bindTrigger,
   bindPopover,
@@ -34,7 +32,6 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/styles'
 import ReconcileForm from '../components/ReconcileForm'
-import CategoryForm from '../components/CategoryForm'
 
 export default function Account(props) {
   const theme = useTheme()
@@ -290,31 +287,37 @@ export default function Account(props) {
       editComponent: props => (<></>), // Doing this so that the button isn't available to click when in edit mode
       render: rowData => {
         let statusIcon = <></>
+        let tooltipText = ''
         switch (rowData.status) {
           case 0: // pending
+            tooltipText = "Pending"
             statusIcon = <AccessTimeIcon color="disabled" fontSize="small" />
             break
           case 1: // cleared
+            tooltipText = "Cleared"
             statusIcon = <CheckCircleOutlineIcon color="success" fontSize="small" />
             break
           case 2: // reconciled
+            tooltipText = "Reconciled"
             statusIcon = <LockIcon color="success" fontSize="small" />
             break
         }
 
         return (
-          <IconButton
-            size="small"
-            style={{padding: 0}}
-            aria-label="transaction status"
-            onClick={(e) => {
-              e.stopPropagation()
-              setTransactionStatus(rowData)
-            }}
-            color="inherit"
-          >
-            {statusIcon}
-          </IconButton>
+          <Tooltip title={tooltipText}>
+            <IconButton
+              size="small"
+              style={{padding: 0}}
+              aria-label="transaction status"
+              onClick={(e) => {
+                e.stopPropagation()
+                setTransactionStatus(rowData)
+              }}
+              color="inherit"
+            >
+              {statusIcon}
+            </IconButton>
+          </Tooltip>
         )
       },
     },
@@ -618,7 +621,13 @@ export default function Account(props) {
         }}
         actions={[
           {
-            icon: () => (<LockIcon></LockIcon>),
+            icon: () => (
+              <LockIcon
+                style={{
+                  color: showReconciled ? theme.palette.text.primary : theme.palette.text.disabled,
+                }}
+              />
+            ),
             tooltip: 'Show reconciled transactions',
             isFreeAction: true,
             onClick: (event) => setShowReconciled(!showReconciled)