Component Library and UI Overhaul

[jgaehring]

Going back to #195 or earlier there've been some UI issues that have been needling at me, but more than anything its the general layout of the EditLog screen, with its hodge-podge of Bootstrap and Material design elements and lack of any solid organizing principles to make it easier to read and edit.

At the end of last year these ideas culminated in the Figma prototype I started but never completed, although some of the elements have been implemented as part of the Spray module.

I think the best way to establish a stable API for the component library, which is the main objective of milestone 0.8.0, is to finally go about implementing the new design of My Logs.

Along the way, as a part of #337, I want to start phasing out as much of the Bootstrap styles as possible, and wrap any others we can't eliminate in Vue components, so it will be easier to phase them out later down the road.

Here's a general roadmap for how I think these changes can be rolled out.

• Bug fixes and "low hanging fruit". Name field length error #159 Open remote log in new window #255 Feature request: sync logs individually #210
• Investigate how to use Storybook as an option for documenting the component library. Investigate Storybook for documenting component library #410
• Add component testing. Add component testing #387
• Integrate layout components. Integrate layout components and core design tokens. #407
• User FarmTabs component in TasksEdit. General and Movement tabs scroll position is synced in Firefox #321
• Encapsulate any remaining Bootstrap styles in Vue components. Encapsulate Bootstrap styles in Vue components #337
• Use layout components in TasksEdit instead of Bootstrap classes Use layout components in TasksEdit instead of Bootstrap classes #425
• Refactor TasksFilter to use loadLogs and SelectBox. Refactor TasksFilter using new loadLogs action #398
• Replace remaining content components. Remove remaining Bootstrap classes and delete CSS asset #409
• Implement the Figma prototype in TasksEdit. Implement Figma prototype in EditLog screen #408 Pick a picker #423
• Changes toTasksAll screen & gesture components (eg, swipe). Sort TasksAll into "Late", "Upcoming" and "Done" sections #399 Select multiple logs for batch operations #370 Left swipe to hide user menu #169
• Overhaul error handling. Overhaul error handling #305 Errors on Edit Log screen are hidden behind tab bar #239 Add support for logging in production #37
• Handling sync conflicts. Provide a UI for resolving sync conflicts #190 Handling logs that were deleted on the server. #284

[jgaehring]

We'll be reigning in the scope for this issue and the milestone as a whole, as outlined in #373 (comment). I'll update the checklist above to reflect this.