WIP: Landing Page component

[meghanmc]

Description:

Closes issue #43 This update contains a React component for the Data Entrant Landing Page.

Currently, the button presses trigger logs to the console. These should be updated to route to the appropriate pages when routing is completed for the application.

Notes:

To test, change the content of pwa/App.tsx to

import LandingPage from './components/LandingPage'

const App = () => {
  return (
    <>
      <LandingPage/>
    </>
  );
}

Screenshots (Optional):

Checklist:

• [ ] 90% Test Coverage

[meghanmc]

A couple of things about this:

1. I added some styling - mainly based on what @bmitchinson already had for the Login Component. One thing that would be nice is having the buttons vertically centered. Am I right to assume that would be done in whatever this component is wrapped in, or should it be done here?

2. There are no updated tests in this PR, as it is simply for the component itself. I assume testing will be done once the components are added to their respective pages.

[meghanmc]

Also, I would have liked to have the icon for "New Patient" be something like this, but I wasn't able to find that in the Ant library that we already have imported so I went with a more simple "plus" icon.

Do others think its worth it to create custom icons/import another icon library, or are we fine with the simpler option?

[bmitchinson]

Coverage is at 75%, looking at this now. @meghanmc , could we pair sometime during the week on writing the tests? I'd look it over beforehand, and later tests should be kinda copy paste for all these forms.

[bmitchinson]

A couple of things about this:

1. I added some styling - mainly based on what @bmitchinson already had for the Login Component. One thing that would be nice is having the buttons vertically centered. Am I right to assume that would be done in whatever this component is wrapped in, or should it be done here?
2. There are no updated tests in this PR, as it is simply for the component itself. I assume testing will be done once the components are added to their respective pages.

1.) These should be vertically centered. Even when they're wrapped, they'll need to be centered vertically within that.

[bmitchinson]

Also, I would have liked to have the icon for "New Patient" be something like this, but I wasn't able to find that in the Ant library that we already have imported so I went with a more simple "plus" icon.

Do others think its worth it to create custom icons/import another icon library, or are we fine with the simpler option?

To answer this question, I implemented the icon to see how difficult it was. Here's a branch that has the custom Icon. You can see how I implemented it within an isolated commit: https://github.com/Haiti-Distributed-Healthcare-System/hdhs/tree/ben-landing-page-comp

Ant Design provides example of creating your own Icon and wrapping it in their Icon class, so I did that. Here's the docs I used to do that: https://ant.design/components/icon/#components-icon-demo-custom

It required converting the PNG you posted to a SVG, just used a website for that, and then this site converts SVG files to what they're defined as in jsx. The output of that is what you can see defined as PlusPersonSVG here on this line.

Personally, I didn't find it too terrible. We'd ideally want to use icons from the start that are made as SVGS, so as long as you can find an SVG of the icon, we can use that.

(Also -> a SCSS change so that when you hover over the buttons, you get a "pointer" cursor, which is what you would expect from a web button)

** Please Consider merging in the branch I made and linked above into yours if you agree with the changes: ben-landing-page-component -> landing-page-component