From babb5e123a8cfb4bfac56e918c06ffbecb5d85a7 Mon Sep 17 00:00:00 2001
From: Sam Park <samp1800@live.com>
Date: Tue, 26 Nov 2024 21:14:42 -0500
Subject: [PATCH] bedset creation modal details

---
 .../components/modals/create-bedset-modal.tsx | 50 ++++++++++---------
 ui/src/custom.scss                            |  6 +++
 ui/src/pages/bed-cart.tsx                     |  2 +-
 3 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/ui/src/components/modals/create-bedset-modal.tsx b/ui/src/components/modals/create-bedset-modal.tsx
index 0c26a14..60d715d 100644
--- a/ui/src/components/modals/create-bedset-modal.tsx
+++ b/ui/src/components/modals/create-bedset-modal.tsx
@@ -82,38 +82,40 @@ export const CreateBedSetModal = (props: Props) => {
         ></button>
         <div className="w-100 text-sm">
           <h1 className="fs-5 mb-1 fw-semibold d-inline">Create BEDset</h1>
-
-          <div className="border-bottom my-3" style={{ margin: '0 -1.13em' }}></div>
-
-          <Markdown className="" rehypePlugins={[rehypeHighlight]}>
-            {generateBEDsetCreationDescription()}
-          </Markdown>
         </div>
       </Modal.Header>
 
       <Modal.Body>
-        <div className="position-relative pt-2 px-3" style={{ margin: '-1em' }}>
-          <Markdown rehypePlugins={[rehypeHighlight]}>{generateBEDsetPEPMd(cart)}</Markdown>
+        <div className="w-100 text-sm">
+          <Markdown rehypePlugins={[rehypeHighlight]}>
+            {generateBEDsetCreationDescription()}
+          </Markdown>
         </div>
-        <div className="position-absolute top-0 end-0 m-3">
-          <button
-            className="btn btn-sm btn-primary mt-2 me-2"
-            onClick={() => {
-              copyToClipboard(generateBEDsetPEPDownloadRaw(cart));
-              setCopied(true);
-              setTimeout(() => setCopied(false), 2000);
-            }}
-          >
-            <i className="bi bi-clipboard me-2"></i>
-            {copied ? 'Copied!' : 'Copy'}
-          </button>
 
+        <div className="position-relative my-1 px-3" style={{ margin: '-1em' }}>
+          <Markdown className='rounded rounded-2 bg-body-secondary markdown-bg' rehypePlugins={[rehypeHighlight]}>{generateBEDsetPEPMd(cart)}</Markdown>
+          <div className="position-absolute top-0 end-0 m-3">
+            <button
+              className="btn btn-sm btn-primary me-3"
+              onClick={() => {
+                copyToClipboard(generateBEDsetPEPDownloadRaw(cart));
+                setCopied(true);
+                setTimeout(() => setCopied(false), 2000);
+              }}
+            >
+              <i className="bi bi-clipboard me-2"></i>
+              {copied ? 'Copied!' : 'Copy'}
+            </button>
+          </div>
         </div>
-        <div className="border-top pt-4 ">
-          <div className="fw-bold text-lg ">
+
+        <div className="border-bottom my-3" style={{ margin: '0 -1em' }}></div>
+
+        <div className="">
+          <span className="fw-semibold text-lg">
             Submit PEP
-          </div>
-          <div className="d-flex align-items-center mt-3">
+          </span>
+          <div className="d-flex align-items-center mt-1">
             <input type="text" className="form-control me-2" placeholder="Provide a PEPhub registry path."
                    value={inputValue}
                    onChange={handleInputRegistryPathChange} />
diff --git a/ui/src/custom.scss b/ui/src/custom.scss
index a2ca052..7be2237 100644
--- a/ui/src/custom.scss
+++ b/ui/src/custom.scss
@@ -305,3 +305,9 @@ td {
   padding-left: 1rem !important;
   padding-right: 1rem !important;
 }
+
+.markdown-bg code {
+  border-radius: 1rem !important;
+  color: #212529;
+  background: #e9ecef;
+}
diff --git a/ui/src/pages/bed-cart.tsx b/ui/src/pages/bed-cart.tsx
index 81592f3..e436f0e 100644
--- a/ui/src/pages/bed-cart.tsx
+++ b/ui/src/pages/bed-cart.tsx
@@ -41,7 +41,7 @@ export const BedCart = () => {
   }
 
   return (
-    <Layout title="BEDbase | Cart">
+    <Layout footer title="BEDbase | Cart">
       <div className="p-2">
         <div className="d-flex flex-row align-items-start justify-content-between">
           <div className="d-flex flex-column">