Design completed

packages/esm-patient-list-app/src/AddPatientToList/add-patient-to-list.scss

@@ -0,0 +1,21 @@
+@import "../style.scss";
+
+.modalContent {
+  width: 100%;
+  max-width: 678px;
+  background-color: #f4f4f4;
+}
+
+.modalHeader {
+  margin: 1rem;
+}
+
+.buttonSet {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.largeButtons {
+  padding-bottom: 2rem;
+}

packages/esm-patient-list-app/src/AddPatientToList/index.tsx

@@ -3,6 +3,7 @@ import Search from 'carbon-components-react/lib/components/Search';
 import ButtonSet from 'carbon-components-react/lib/components/ButtonSet';
 import Button from 'carbon-components-react/lib/components/Button';
 import { useTranslation } from 'react-i18next';
+import styles from './add-patient-to-list.scss';
 
 import { OpenmrsCohort } from '../patientListData/api';
 
@@ -14,49 +15,42 @@ const CheckboxedPatientList: React.FC<{
   return <div></div>;
 };
 
-/**
- * layout grid
- *
- * header | close
- * search
- * ListList
- * spacer
- * buttons
- *
- *
- */
-
 const AddPatient: React.FC<{ close: () => void; patientUuid: string }> = ({ close, patientUuid }) => {
   const { t } = useTranslation();
   const [searchValue, setSearchValue] = React.useState('');
 
   return (
-    <div>
-      <h1>{t('add_patient_to_list', 'Add patient to list')}</h1>
-      <h3>{t('add_patient_to_list', 'Add patient to list')}</h3>
-      <Search
-        style={{ backgroundColor: 'white', borderBottomColor: '#e0e0e0' }}
-        labelText={t('search_for_list', 'Search for a list')}
-        onChange={({ target }) => {
-          setSearchValue(target.value);
-        }}
-        onKeyPress={(e) => {
-          if (e.key === 'Enter') {
-            // trigger search or search on typing?
-          }
-        }}
-        value={searchValue}
-      />
-      <div>
-        {
-          // list of five patients list here
-        }
+    <div className={styles.modalContent}>
+      <div className={styles.modalHeader}>
+        <h1 className={styles.productiveHeading03}>{t('addPatientToList', 'Add patient to list')}</h1>
+        <h3 className={styles.bodyLong01} style={{ margin: '1rem 0' }}>
+          {t('searchForAListToAddThisPatientTo', 'Search for a list to add this patient to.')}
+        </h3>
+      </div>
+      <div style={{ marginBottom: '0.875rem' }}>
+        <Search
+          style={{ backgroundColor: 'white', borderBottom: '1px solid #e0e0e0' }}
+          labelText={t('searchForList', 'Search for a list')}
+          onChange={({ target }) => {
+            setSearchValue(target.value);
+          }}
+          onKeyPress={(e) => {
+            if (e.key === 'Enter') {
+              // trigger search or search on typing?
+            }
+          }}
+          value={searchValue}
+        />
+      </div>
+      <div className={styles.buttonSet}>
+        <Button kind="ghost">Create new patient list</Button>
+        <div>
+          <Button kind="secondary" className={styles.largeButtons} onClick={close}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button className={styles.largeButtons}>{t('addToList', 'Add to list')}</Button>
+        </div>
       </div>
-      <ButtonSet>
-        <Button>Create new patient list</Button>
-        <Button onClick={close}>Cancel</Button>
-        <Button>Add to list</Button>
-      </ButtonSet>
     </div>
   );
 };

packages/esm-patient-list-app/src/patient-list-action.tsx

@@ -32,9 +32,7 @@ const AddPastVisitOverflowMenuItem: React.FC<AddPastVisitOverflowMenuItemProps>
       </li>
       {modalOpen && (
         <Modal close={closeModal}>
-          <div style={{ backgroundColor: '#f4f4f4', height: '70vh', width: '90vw' }}>
-            <AddPatientToList close={closeModal} patientUuid="" />
-          </div>
+          <AddPatientToList close={closeModal} patientUuid="" />
         </Modal>
       )}
     </>

packages/esm-patient-list-app/src/style.scss

@@ -1,3 +1,14 @@
+@import "~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/styles";
+@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/spacing";
+
+.productiveHeading03 {
+  @include carbon--type-style("productive-heading-03");
+}
+
+.bodyLong01 {
+  @include carbon--type-style("body-long-01");
+}
+
 .modal {
   position: fixed;
   width: 100vw;
@@ -8,7 +19,3 @@
   justify-items: center;
   align-items: center;
 }
-
-// .modal .card {
-//   padding: 2;
-// }