feat: overlay form sections

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>
+                <div className={styles['form-section-container']}>
                     <Step1 />
                     <Step2 />
                     <Step3 />
-                <Step4 />
+                    {/* <Step4 /> */}
+                </div>
             </article>
         </div>
     );

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;
+}