Merge pull request #3303 from LD4P/fix-modal

Fix modal by getting rid of extraneous styles
LD4P · Nov 4, 2021 · 6d3e9b7 · 6d3e9b7
2 parents 7f379d1 + aa779c2
commit 6d3e9b7
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 87 deletions.
diff --git a/src/components/ResourceTemplateChoiceModal.jsx b/src/components/ResourceTemplateChoiceModal.jsx
@@ -66,7 +66,7 @@ const ResourceTemplateChoiceModal = (props) => {
     >
       <div className="modal-dialog modal-lg" role="document">
         <div className="modal-content">
-          <div className="modal-header prop-heading">
+          <div className="modal-header">
             <h4 className="modal-title">Choose resource template</h4>
             <button
               type="button"
@@ -75,40 +75,38 @@ const ResourceTemplateChoiceModal = (props) => {
               aria-label="Close"
             ></button>
           </div>
-          <form className="group-select-options">
-            <div className="modal-body group-panel">
-              <label className="group-select-label" htmlFor="template-lookup">
-                Into which resource template do you want to load this resource?
-              </label>
-              <AsyncTypeahead
-                onSearch={search}
-                onChange={change}
-                options={options}
-                multiple={false}
-                isLoading={isLoading}
-                selected={selected}
-                placeholder="Enter id, label, URI, remark, or author"
-                minLength={1}
-                allowNew={() => false}
-                id={"template-lookup"}
-              />
-              <div className="group-choose-buttons">
-                <button
-                  className="btn btn-link"
-                  style={{ paddingRight: "20px" }}
-                  onClick={close}
-                >
-                  Cancel
-                </button>
-                <button
-                  className="btn btn-primary btn-sm"
-                  onClick={(event) => saveAndClose(event)}
-                >
-                  Save
-                </button>
-              </div>
-            </div>
-          </form>
+          <div className="modal-body">
+            <label htmlFor="template-lookup">
+              Into which resource template do you want to load this resource?
+            </label>
+            <AsyncTypeahead
+              onSearch={search}
+              onChange={change}
+              options={options}
+              multiple={false}
+              isLoading={isLoading}
+              selected={selected}
+              placeholder="Enter id, label, URI, remark, or author"
+              minLength={1}
+              allowNew={() => false}
+              id={"template-lookup"}
+            />
+          </div>
+          <div className="modal-footer">
+            <button
+              className="btn btn-link"
+              style={{ paddingRight: "20px" }}
+              onClick={close}
+            >
+              Cancel
+            </button>
+            <button
+              className="btn btn-primary btn-sm"
+              onClick={(event) => saveAndClose(event)}
+            >
+              Save
+            </button>
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/components/editor/GroupChoiceModal.jsx b/src/components/editor/GroupChoiceModal.jsx
@@ -113,15 +113,15 @@ const GroupChoiceModal = () => {
       >
         <div className="modal-dialog modal-lg" role="document">
           <div className="modal-content">
-            <div className="modal-header prop-heading">
+            <div className="modal-header">
               <button
                 type="button"
                 className="btn-close"
                 onClick={close}
                 aria-label="Close"
               ></button>
             </div>
-            <div className="modal-body group-panel">
+            <div className="modal-body">
               <label htmlFor="ownerSelect">
                 <h4>Who owns this?</h4>
               </label>
@@ -150,29 +150,26 @@ const GroupChoiceModal = () => {
               ) : (
                 <p>{editGroupLabels} </p>
               )}
-              <div>
-                <div className="group-choose-buttons">
-                  <button
-                    className="btn btn-link btn-sm"
-                    style={{ paddingRight: "20px" }}
-                    onClick={close}
-                    aria-label="Cancel Save Group"
-                  >
-                    Cancel
-                  </button>
-                  {canChange && (
-                    <button
-                      className="btn btn-primary btn-sm"
-                      data-dismiss="modal"
-                      aria-label="Save Group"
-                      data-testid="Save Group"
-                      onClick={saveAndClose}
-                    >
-                      Save
-                    </button>
-                  )}
-                </div>
-              </div>
+            </div>
+            <div className="modal-footer">
+              <button
+                className="btn btn-link btn-sm"
+                onClick={close}
+                aria-label="Cancel Save Group"
+              >
+                Cancel
+              </button>
+              {canChange && (
+                <button
+                  className="btn btn-primary btn-sm"
+                  data-dismiss="modal"
+                  aria-label="Save Group"
+                  data-testid="Save Group"
+                  onClick={saveAndClose}
+                >
+                  Save
+                </button>
+              )}
             </div>
           </div>
         </div>

diff --git a/src/components/editor/leftNav/DiffModal.jsx b/src/components/editor/leftNav/DiffModal.jsx
@@ -56,7 +56,7 @@ const DiffModal = () => {
       >
         <div className="modal-dialog modal-lg" role="document">
           <div className="modal-content">
-            <div className="modal-header prop-heading">
+            <div className="modal-header">
               <h4 className="modal-title" id="view-resource-modal-title">
                 Compare
               </h4>
@@ -68,7 +68,7 @@ const DiffModal = () => {
                 data-testid="Close"
               ></button>
             </div>
-            <div className="modal-body group-panel">
+            <div className="modal-body">
               {diff && <DiffDisplay diff={diff} />}
             </div>
           </div>

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -129,31 +129,6 @@
   margin-bottom: 1rem;
 }
 
-.group-panel {
-  border-color: #8c8a83;
-  border-style: solid;
-  border-width: 1px;
-  background-color: #f8f6ef;
-  min-height: 200px;
-  padding: 80px;
-}
-
-.group-choose-buttons {
-  float: right;
-  position: relative;
-  top: 40px;
-}
-
-.group-select-label {
-  float: left;
-  padding-right: 20px;
-  position: relative;
-}
-
-.group-select-options {
-  position: relative;
-}
-
 .close-icon {
   font-size: 1.6em;
   margin-top: 10%;