klequis
commented
3 years ago The length of the description edit boxes looks good.
There are 2 different workflows for creating and editing rules
- Create Rule (which is a brand new rule)
- Edit Rule (which is an existing rule being edited)
Your can see these headings in file RuleCreate.js
<div>
{_isTmpRule ? <H2>Create Rule</H2> : <H2>Edit Rule</H2>}
<Rule />
</div>isTmpRule really means 'isNewRule'.
- For Create Rule _isTmpRule will be true (a new rule)
- For Edit Rule _isTmpRule will be false (an existing rule)
The 3 buttons, save, cancel & delete, should go at the very top of the page in line with the Create Rule/Edit Rule header. The extra 'Rule Edit' isn't needed.
The headers are in RuleCreate.js and the buttons and their event handlers are in Rule.js. I think we should move the headers to Rule.
If you save a rule and then click on the transaction that has that rule you will see the 'Edit Rule' header instead of 'Create Rule'
Criteria Checkboxes
They aren't really aligned with the center of the select and edit boxes
They should be like this:
I think this is a case where using the shared component components/Checkbox.js is causing problems because of the styles that are applied to it. Rather than try to override those styles, I think it best in CriterionEdit.js to replace <Checkbox> with a native <input type="checkbox"> and then add align-items: center to RowDiv styled component.
- You can remove the blue background from the checkboxes in criteria
If you can, also add a min-width prop for the Criteria selects to avoid this.
If you need help with anything let me know.
dhaef
No worries on not having time for details on my last pull request (busy times!).
This PR includes the feedback from the previous PR using styled components to make the improvements.
I included the "Rule Edit" heading that was in the picture but left the labels for #19
I'm including a screenshot just for reference and let me know any feedback you may have!