Style pop up modal

src/app.scss

@@ -150,4 +150,31 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+}
+
+.awx-c-list {
+  border-top: 1px solid #d7d7d7;
+  border-bottom: 1px solid #d7d7d7;
+}
+
+.awx-c-modal {
+  width: 550px;
+  margin: 0;
+}
+
+.pf-c-modal-box__footer {
+  --pf-c-modal-box__footer--PaddingTop: 0;
+  --pf-c-modal-box__footer--PaddingBottom: 0;
+}
+
+.pf-c-modal-box__header {
+  --pf-c-modal-box__header--PaddingTop: 10px;
+  --pf-c-modal-box__header--PaddingRight: 0;
+  --pf-c-modal-box__header--PaddingBottom: 0;
+  --pf-c-modal-box__header--PaddingLeft: 20px;
+}
+
+.pf-c-modal-box__body {
+  --pf-c-modal-box__body--PaddingLeft: 20px;
+  --pf-c-modal-box__body--PaddingRight: 20px;
 }

src/components/ListItem/ListItem.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { I18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import {
+  Checkbox,
+} from '@patternfly/react-core';
+
+export default ({
+  itemId,
+  name,
+  isSelected,
+  onSelect,
+}) => (
+    <li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1">
+      <div className="pf-c-data-list__check">
+        <I18n>
+          {({ i18n }) => (
+            <Checkbox
+              checked={isSelected}
+              onChange={onSelect}
+              aria-label={i18n._(t`selected ${itemId}`)}
+              id={`selectd-${itemId}`}
+              value={itemId}
+            />
+          )}
+        </I18n>
+      </div>
+      <div className="pf-c-data-list__cell">
+        <span id="check-action-item1">
+          <b>{name}</b>
+        </span>
+      </div>
+    </li>
+  );

src/components/ListItem/index.js

@@ -0,0 +1,3 @@
+import ListItem from './ListItem';
+
+export default ListItem;

src/components/Lookup/Lookup.jsx

@@ -3,15 +3,14 @@ import React from 'react';
 import { SearchIcon } from '@patternfly/react-icons';
 import {
   Modal,
-  List,
-  ListItem,
-  Checkbox,
   Button,
   ActionGroup,
   Toolbar,
   ToolbarGroup,
 } from '@patternfly/react-core';
 
+import ListItem from '../ListItem'
+
 class Lookup extends React.Component {
   constructor(props) {
     super(props);
@@ -54,24 +53,23 @@ class Lookup extends React.Component {
         <span className="pf-c-input-group__text" aria-label="search" id="search" onClick={this.onLookup}><SearchIcon /></span>
         <div className="pf-c-form-control">{this.wrapTags(this.props.data)}</div>
         <Modal
+          isLarge
           className="awx-c-modal"
           title={`Select ${this.props.lookup_header}`}
           isOpen={isModalOpen}
           onClose={this.handleModalToggle}
         >
-          <List>
+          <ul className="pf-c-data-list awx-c-list">
             {data.map(i =>
-              <ListItem key={i.id}>
+              <ListItem
-                <Checkbox
+                key={i.id}
-                  label={i.name}
+                itemId={i.id}
-                  checked={i.isChecked}
+                name={i.name}
-                  onChange={this.onChecked}
+                isSelected={i.isChecked}
-                  aria-label="result checkbox"
+                onSelect={this.onChecked}
-                  id={`checked-${i.id}`}
+              />
-                  value={i.id}
+            )}
-                />
+          </ul>
-              </ListItem>)}
-          </List>
           <ActionGroup className="at-align-right">
             <Toolbar>
               <ToolbarGroup>