adjust layout

src/client/js/components/OutsideShareLinkModal.jsx

@@ -25,9 +25,9 @@ const OutsideShareLinkModal = (props) => {
       </ModalHeader>
       <ModalBody>
         <div className="container">
-          <div className="row align-items-center mb-3 mr-0">
-            <h4 className="col-10">Shared Link List</h4>
-            <button className="col btn btn-danger" type="button">Delete all links</button>
+          <div className="form-inline mb-3">
+            <h4>Shared Link List</h4>
+            <button className="ml-auto btn btn-danger" type="button">Delete all links</button>
           </div>
 
           <div>

src/client/js/components/ShareLinkForm.jsx

@@ -10,53 +10,50 @@ import PageContainer from '../services/PageContainer';
 
 const ShareLinkForm = (props) => {
   return (
-    <div className="share-link-form border">
-      <h4 className="ml-3">Expiration Date</h4>
+    <div className="share-link-form border p-3">
+      <h4>Expiration Date</h4>
       <form>
-        <div className="form-group">
+        <fieldset className="form-group">
           <div className="row">
-            <div className="custom-control custom-radio offset-3 col-4 mb-2">
-              <input id="customRadio1" name="customRadio" type="radio" className="custom-control-input"></input>
-              <label className="custom-control-label" htmlFor="customRadio1">Unlimited</label>
-            </div>
-          </div>
+            <legend className="col-form-label col-3"></legend>
+            <div>
+              <div className="custom-control custom-radio mb-2">
+                <input id="customRadio1" name="customRadio" type="radio" className="custom-control-input"></input>
+                <label className="custom-control-label" htmlFor="customRadio1">Unlimited</label>
+              </div>
 
-          <div className="row">
-            <div className="custom-control custom-radio offset-3 col-4 mb-2">
-              <input id="customRadio2" name="customRadio" type="radio" className="custom-control-input"></input>
-              <label className="custom-control-label" htmlFor="customRadio2">
-                <div className="row align-items-center m-0">
-                  <input className="form-control col-2" type="number" min="1" max="7" value="7"></input>
-                  <span className="col-auto">Days</span>
-                </div>
-              </label>
-            </div>
-          </div>
+              <div className="custom-control custom-radio mb-2">
+                <input id="customRadio2" name="customRadio" type="radio" className="custom-control-input"></input>
+                <label className="custom-control-label" htmlFor="customRadio2">
+                  <div className="row align-items-center m-0">
+                    <input className="form-control col-2" type="number" min="1" max="7" value="7"></input>
+                    <span className="col-auto">Days</span>
+                  </div>
+                </label>
+              </div>
 
-          <div className="row">
-            <div className="custom-control custom-radio offset-3 col-4 mb-2">
-              <input id="customRadio3" name="customRadio" type="radio" className="custom-control-input"></input>
-              <label className="custom-control-label" htmlFor="customRadio3">
-                Custom
-                <div className="date-picker">Date Picker</div>
-              </label>
+              <div className="custom-control custom-radio mb-2">
+                <input id="customRadio3" name="customRadio" type="radio" className="custom-control-input"></input>
+                <label className="custom-control-label" htmlFor="customRadio3">
+                  Custom
+                  <div className="date-picker">Date Picker</div>
+                </label>
+              </div>
             </div>
           </div>
+        </fieldset>
 
-          <hr />
+        <hr />
 
-          <div className="form-group row">
-            <label htmlFor="inputDesc" className="offset-3 col-form-label">Description</label>
-            <div className="col-5">
-              <input type="text" className="form-control" id="inputDesc" placeholder="Enter description"></input>
-            </div>
+        <div className="form-group row">
+          <label htmlFor="inputDesc" className="offset-3 col-form-label">Description</label>
+          <div className="col-5">
+            <input type="text" className="form-control" id="inputDesc" placeholder="Enter description"></input>
           </div>
+        </div>
 
-          <div className="form-group row mx-0">
-            <div className="offset-10 col">
-              <button type="button" className="btn btn-primary">Issue</button>
-            </div>
-          </div>
+        <div className="form-inline">
+          <button type="button" className="ml-auto btn btn-primary">Issue</button>
         </div>
       </form>
     </div>