feat: overlay form sections

Unleash · Feb 28, 2022 · f215980 · f215980
1 parent 355b516
commit f215980
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/website/src/components/UserFeedback/index.jsx b/website/src/components/UserFeedback/index.jsx
@@ -210,7 +210,7 @@ export const FeedbackWrapper = ({ seedData, open }) => {
                         id={textareaId}
                         /* cols="30" */
                         name=""
-                        rows="5"
+                        rows="3"
                     >
                         {state.data.comment}
                     </textarea>
@@ -311,7 +311,17 @@ export const FeedbackWrapper = ({ seedData, open }) => {
     };
 
     const Step4 = () => {
-        return <p className={styles['thank-you']}>Thank you! 🙌</p>;
+        return (
+            <div>
+                <p className={styles['thank-you']}>Thank you! 🙌</p>
+                <button
+                    className={styles['button-secondary']}
+                    onClick={() => setFeedbackIsOpen(false)}
+                >
+                    close
+                </button>
+            </div>
+        );
     };
 
     return (
@@ -353,10 +363,12 @@ export const FeedbackWrapper = ({ seedData, open }) => {
                         <CloseIcon />
                     </button>
                 </div>
-                <Step1 />
-                <Step2 />
-                <Step3 />
-                <Step4 />
+                <div className={styles['form-section-container']}>
+                    <Step1 />
+                    <Step2 />
+                    <Step3 />
+                    {/* <Step4 /> */}
+                </div>
             </article>
         </div>
     );

diff --git a/website/src/components/UserFeedback/styles.module.css b/website/src/components/UserFeedback/styles.module.css
@@ -43,15 +43,15 @@
     padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
 }
 
-.user-feedback > form {
+.user-feedback form {
     max-width: 850px;
     margin-left: auto;
     margin-right: auto;
     transition: var(--fade-in-transition);
-    opacity: 1;
+    /* opacity: 1; */
 }
 
-.user-feedback > form > * + * {
+.user-feedback form > * + * {
     margin-top: var(--row-gap);
 }
 
@@ -225,3 +225,13 @@ button.close-button {
     opacity: 0;
     transition: var(--fade-out-transition);
 }
+
+.form-section-container {
+    display: grid;
+    align-items: center;
+}
+
+.form-section-container > * {
+    grid-column: 1;
+    grid-row: 1;
+}