From 5c67b72f46f32e177b10b6a30bc2039ca2874514 Mon Sep 17 00:00:00 2001
From: Jack Meyer <jackcmeyer@gmail.com>
Date: Sat, 21 Mar 2020 17:08:20 -0500
Subject: [PATCH] fix(search): fixes search inputs being too small

---
 .../patients/view/ViewPatient.test.tsx        |  1 -
 .../appointments/AppointmentsList.tsx         | 31 ++++++++------
 src/patients/list/Patients.tsx                | 40 +++++++++++++------
 3 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/src/__tests__/patients/view/ViewPatient.test.tsx b/src/__tests__/patients/view/ViewPatient.test.tsx
index 29a8ad18b7..ed428a3da5 100644
--- a/src/__tests__/patients/view/ViewPatient.test.tsx
+++ b/src/__tests__/patients/view/ViewPatient.test.tsx
@@ -113,7 +113,6 @@ describe('ViewPatient', () => {
     setup()
 
     const actualButtons: React.ReactNode[] = setButtonToolBarSpy.mock.calls[0][0]
-    console.log(actualButtons)
     expect(actualButtons.length).toEqual(0)
   })
 
diff --git a/src/patients/appointments/AppointmentsList.tsx b/src/patients/appointments/AppointmentsList.tsx
index 7224bce5f8..e9fb809be4 100644
--- a/src/patients/appointments/AppointmentsList.tsx
+++ b/src/patients/appointments/AppointmentsList.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router'
 import { useTranslation } from 'react-i18next'
-import { TextInput, Button, List, ListItem, Container, Row } from '@hospitalrun/components'
+import { TextInput, Button, List, ListItem, Container, Row, Column } from '@hospitalrun/components'
 import { RootState } from '../../store'
 import { fetchPatientAppointments } from '../../scheduling/appointments/appointments-slice'
 import useAddBreadcrumbs from '../../breadcrumbs/useAddBreadcrumbs'
@@ -54,18 +54,23 @@ const AppointmentsList = (props: Props) => {
 
   return (
     <Container>
-      <form className="form-inline" onSubmit={onSearchFormSubmit}>
-        <div className="input-group" style={{ width: '100%' }}>
-          <TextInput
-            size="lg"
-            value={searchText}
-            placeholder={t('actions.search')}
-            onChange={onSearchBoxChange}
-          />
-          <div className="input-group-append">
-            <Button onClick={onSearchFormSubmit}>{t('actions.search')}</Button>
-          </div>
-        </div>
+      <form className="form" onSubmit={onSearchFormSubmit}>
+        <Row>
+          <Column md={10}>
+            <TextInput
+              size="lg"
+              type="text"
+              onChange={onSearchBoxChange}
+              value={searchText}
+              placeholder={t('actions.search')}
+            />
+          </Column>
+          <Column md={2}>
+            <Button size="large" onClick={onSearchFormSubmit}>
+              {t('actions.search')}
+            </Button>
+          </Column>
+        </Row>
       </form>
 
       <Row>
diff --git a/src/patients/list/Patients.tsx b/src/patients/list/Patients.tsx
index 50fa041b73..4d426a50a4 100644
--- a/src/patients/list/Patients.tsx
+++ b/src/patients/list/Patients.tsx
@@ -2,7 +2,16 @@ import React, { useEffect, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router'
 import { useTranslation } from 'react-i18next'
-import { Spinner, TextInput, Button, List, ListItem, Container, Row } from '@hospitalrun/components'
+import {
+  Spinner,
+  Button,
+  List,
+  ListItem,
+  Container,
+  Row,
+  TextInput,
+  Column,
+} from '@hospitalrun/components'
 import { useButtonToolbarSetter } from 'page-header/ButtonBarProvider'
 import { RootState } from '../../store'
 import { fetchPatients, searchPatients } from '../patients-slice'
@@ -67,18 +76,23 @@ const Patients = () => {
 
   return (
     <Container>
-      <form className="form-inline" onSubmit={onSearchFormSubmit}>
-        <div className="input-group" style={{ width: '100%' }}>
-          <TextInput
-            size="lg"
-            value={searchText}
-            placeholder={t('actions.search')}
-            onChange={onSearchBoxChange}
-          />
-          <div className="input-group-append">
-            <Button onClick={onSearchFormSubmit}>{t('actions.search')}</Button>
-          </div>
-        </div>
+      <form className="form" onSubmit={onSearchFormSubmit}>
+        <Row>
+          <Column md={10}>
+            <TextInput
+              size="lg"
+              type="text"
+              onChange={onSearchBoxChange}
+              value={searchText}
+              placeholder={t('actions.search')}
+            />
+          </Column>
+          <Column md={2}>
+            <Button size="large" onClick={onSearchFormSubmit}>
+              {t('actions.search')}
+            </Button>
+          </Column>
+        </Row>
       </form>
 
       <Row>