Add new modals based on #406 (#415)

* Added basic themed modal * Update BasicModal and add UpdateVersionModal (Add & Edit Browser/AT Versions) * Add datepicker to approximate date of availability input field * remove fieldset * Change titles to h1s * Adjusted styling for modals; Added At and Browser Details Modal; Added ua-parser-js * Added logic to alerts for AtAndBrowserDetailsModal * Add missing scenario * Updated logic for AT and Browser Details modal * Updated logic for AT and Browser Details modal * Variable name change for clarity * Additional logic to account for admin in At And Browser Details Modal * Prop updates for modals
w3c · May 3, 2022 · 71337cd · 71337cd
1 parent c157cb7
commit 71337cd
Show file tree

Hide file tree

Showing 9 changed files with 760 additions and 66 deletions.
diff --git a/client/components/App/App.css b/client/components/App/App.css
@@ -494,13 +494,14 @@ img {
 }
 
 @media (min-width: 1100px) {
-    h1 {
-        width: 45%;
-    }
     .hero-section {
         padding: 5rem;
     }
 
+    .hero-section h1 {
+        width: 45%;
+    }
+
     .hero-copy {
         margin-bottom: 0;
     }

diff --git a/client/components/TestRun/TestRun.css b/client/components/TestRun/TestRun.css
@@ -315,3 +315,38 @@ main.container-fluid .test-iframe-container > .row {
     display: flex;
     align-items: center;
 }
+
+.at-browser-details-modal-alert {
+    display: flex;
+
+    grid-column: 1 / -1;
+}
+
+fieldset .at-browser-details-modal-alert {
+    margin-bottom: 0;
+}
+
+.at-browser-details-modal-alert span {
+    font-size: 0.875rem;
+    line-height: 1.125rem;
+}
+
+.at-browser-details-full-column {
+    grid-column: 1 / -1;
+}
+
+.modal-header,
+.modal-body,
+.modal-footer {
+    padding: 1.5rem 2.5rem;
+}
+
+@media (min-width: 768px) {
+    .modal-50w {
+        min-width: 50%;
+    }
+
+    .modal-60w {
+        min-width: 60%;
+    }
+}
diff --git a/client/components/TestRun/index.jsx b/client/components/TestRun/index.jsx
@@ -671,10 +671,8 @@ const TestRun = () => {
                         show={showStartOverModal}
                         centered={true}
                         animation={false}
-                        details={{
-                            title: 'Start Over',
-                            description: `Are you sure you want to start over Test #${currentTest.seq}? Your progress (if any), will be lost.`
-                        }}
+                        title="Start Over"
+                        content={`Are you sure you want to start over Test #${currentTest.seq}? Your progress (if any), will be lost.`}
                         handleAction={handleStartOverAction}
                         handleClose={() => setShowStartOverModal(false)}
                     />
@@ -685,18 +683,16 @@ const TestRun = () => {
                         show={showGetInvolvedModal}
                         centered={true}
                         animation={false}
-                        details={{
-                            title: 'Ready to Get Involved?',
-                            description: (
-                                <>
-                                    Only members of the ARIA-AT test team can
-                                    submit data. If you fill in this form, your
-                                    data will not be saved! Check out the{' '}
-                                    <a href="/">home page</a> to learn more
-                                    about how to get involved.
-                                </>
-                            )
-                        }}
+                        title="Ready to Get Involved?"
+                        content={
+                            <>
+                                Only members of the ARIA-AT test team can submit
+                                data. If you fill in this form, your data will
+                                not be saved! Check out the{' '}
+                                <a href="/">home page</a> to learn more about
+                                how to get involved.
+                            </>
+                        }
                         closeLabel="Close"
                         handleClose={() => setShowGetInvolvedModal(false)}
                     />