Browser: Update UI with new components and elements (#5671)

browser/app/js/buckets/BucketPolicyModal.js

@@ -21,24 +21,29 @@ import * as actionsBuckets from "./actions"
 import PolicyInput from "./PolicyInput"
 import Policy from "./Policy"
 
-export const BucketPolicyModal = ({ showBucketPolicy, currentBucket, hideBucketPolicy, policies }) => {
+export const BucketPolicyModal = ({
+  showBucketPolicy,
+  currentBucket,
+  hideBucketPolicy,
+  policies,
+}) => {
   return (
-    <Modal className="modal-policy"
-            animation={ false }
-            show={ showBucketPolicy }
-            onHide={ hideBucketPolicy }
+    <Modal
+      className="policy"
+      animation={false}
+      show={showBucketPolicy}
+      onHide={hideBucketPolicy}
     >
-      <ModalHeader>
-        Bucket Policy (
-        { currentBucket })
-        <button className="close close-alt" onClick={ hideBucketPolicy }>
-          <span>×</span>
-        </button>
-      </ModalHeader>
-      <div className="pm-body">
+      <Modal.Header>
+        Bucket Policy
+        <small>Bucket Name: {currentBucket}</small>
+        <i className="close" onClick={hideBucketPolicy} />
+      </Modal.Header>
+      <div className="policy__content">
         <PolicyInput />
-        { policies.map((policy, i) => <Policy key={ i } prefix={ policy.prefix } policy={ policy.policy } />
-          ) }
+        {policies.map((policy, i) => (
+          <Policy key={i} prefix={policy.prefix} policy={policy.policy} />
+        ))}
       </div>
     </Modal>
   )
@@ -48,14 +53,14 @@ const mapStateToProps = state => {
   return {
     currentBucket: state.buckets.currentBucket,
     showBucketPolicy: state.buckets.showBucketPolicy,
-    policies: state.buckets.policies
+    policies: state.buckets.policies,
   }
 }
 
 const mapDispatchToProps = dispatch => {
   return {
-    hideBucketPolicy: () => dispatch(actionsBuckets.hideBucketPolicy())
+    hideBucketPolicy: () => dispatch(actionsBuckets.hideBucketPolicy()),
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(BucketPolicyModal)
+export default connect(mapStateToProps, mapDispatchToProps)(BucketPolicyModal)