Add styling

ReactJS-Project-CardinalKit/package.json

@@ -23,6 +23,7 @@
     "react-day-picker": "^7.2.4",
     "react-dom": "^16.10.2",
     "react-feather": "^1.1.4",
+    "react-icons": "^4.2.0",
     "react-intl": "3.2.1",
     "react-redux": "^7.1.1",
     "react-router": "5.1.2",

ReactJS-Project-CardinalKit/src/components/MedicationCard.js

@@ -9,6 +9,8 @@ import { defineMessages, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import MedicationPage from './MedicationPage';
 
+import { BsUnlock, BsLock } from 'react-icons/bs';
+
 const messages = defineMessages({
   medicineName: {
     id: 'app.containers.UserCard.name',
@@ -94,7 +96,7 @@ class MedicationCard extends React.Component {
             <div style={{"flexGrow": 1}} className="w-full"></div>
             <div onClick={() => this.toggleEdit()} className="bg-blue hover:bg-blue-dark border border-blue rounded mx-2 px-2 py-1 my-1 flex justify-center">
               <span className="text-white text-center">
-                {(!this.state.editing) ? "Unlock" : "Lock"}
+                {(!this.state.editing) ? <BsLock/> : <BsUnlock/>}
               </span>
             </div>
             <div onClick={() => this.deleteRow()} className="bg-red hover:bg-red-dark border border-red rounded mx-1 px-2 py-1 my-1 flex justify-center"

ReactJS-Project-CardinalKit/src/components/MedicationForm.js

@@ -78,10 +78,13 @@ class MedicationForm extends React.Component {
         <div className="flex h-full w-full p-2">
           <div className="flex-grow flex flex-col justify-between">
             <div className="w-full mt-4 mb-4 ml-4">
-              <h1>Medications for {this.state.firstName + " " + this.state.lastName}</h1>
-              <h4>Email: {this.state.email}</h4>
-              <br />
+              <h2>Medications for <span>{this.state.lastName + ", " + this.state.firstName}</span></h2>
+              <h4 className="px-2 py-2">Email: {this.state.email}</h4>
+              <h4 className="px-2">UserID: {this.props.userID}</h4>
               <div>
+              {(Object.entries(medications).length === 0) &&
+               <p className="mx-10 my-10">No medications registered.</p>
+              }
               {Object.keys(medications).sort().map(function(medication) {
                   const interval = medications[medication];
                   return <MedicationCard parentCallback={handleCallback}

ReactJS-Project-CardinalKit/src/components/RegisterForm.js

@@ -11,7 +11,7 @@ class RegisterForm extends React.Component {
       first_name: '',
       last_name: '',
       email: '',
-      medication: '',
+      medications: [],
     };
 
     this.state = this.initialState;
@@ -80,7 +80,7 @@ class RegisterForm extends React.Component {
                   onChange={this.handleChange}
                 />
               </div>
-              <div className="flex flex-col mb-4 mr-4">
+              {/* <div className="flex flex-col mb-4 mr-4">
                 <label className="mb-2 font-bold text-lg text-grey-darkest">Medication:</label>
                 <input
                   className="border py-2 px-3 text-grey-darkest"
@@ -89,7 +89,7 @@ class RegisterForm extends React.Component {
                   value={this.state.medication}
                   onChange={this.handleChange}
                 />
-              </div>
+              </div> */}
               <button type="submit" value="Register">
                 <div className="bg-green hover:bg-green-dark border border-green rounded px-2 py-2 my-1 flex flex-wrap justify-center">
                   <span className="text-white text-center">Register</span>