From 5bc48076a2634c02e9f6dfe8a21c24af69321edb Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.ai>
Date: Sun, 27 Feb 2022 16:01:30 +0100
Subject: [PATCH] feat: reverse source order of form control buttons.

this makes 'submit' or 'next' the first button you reach when tabbing
out of the control
---
 website/src/components/UserFeedback/index.jsx | 42 +++++++++----------
 .../components/UserFeedback/styles.module.css |  1 +
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/website/src/components/UserFeedback/index.jsx b/website/src/components/UserFeedback/index.jsx
index 3517e020a7..c6ca06fe28 100644
--- a/website/src/components/UserFeedback/index.jsx
+++ b/website/src/components/UserFeedback/index.jsx
@@ -171,20 +171,6 @@ export const FeedbackWrapper = ({ seedData }) => {
                 ></textarea>
 
                 <div className={styles['button-container']}>
-                    <button
-                        className={styles['button-secondary']}
-                        type="button"
-                        onClick={stepForward}
-                    >
-                        Skip
-                    </button>
-                    <button
-                        className={styles['button-secondary']}
-                        type="button"
-                        onClick={stepBack}
-                    >
-                        Back
-                    </button>
                     <button
                         type="submit"
                         onSubmit={(e) => {
@@ -197,6 +183,20 @@ export const FeedbackWrapper = ({ seedData }) => {
                     >
                         Next
                     </button>
+                    <button
+                        className={styles['button-secondary']}
+                        type="button"
+                        onClick={stepBack}
+                    >
+                        Back
+                    </button>
+                    <button
+                        className={styles['button-secondary']}
+                        type="button"
+                        onClick={stepForward}
+                    >
+                        Skip
+                    </button>
                 </div>
             </form>
         );
@@ -245,13 +245,6 @@ export const FeedbackWrapper = ({ seedData }) => {
                 </div>
 
                 <div className={styles['button-container']}>
-                    <button
-                        className={styles['button-secondary']}
-                        type="button"
-                        onClick={stepBack}
-                    >
-                        Back
-                    </button>
                     <button
                         type="submit"
                         onSubmit={(e) => {
@@ -262,6 +255,13 @@ export const FeedbackWrapper = ({ seedData }) => {
                     >
                         Submit feedback
                     </button>
+                    <button
+                        className={styles['button-secondary']}
+                        type="button"
+                        onClick={stepBack}
+                    >
+                        Back
+                    </button>
                 </div>
             </form>
         );
diff --git a/website/src/components/UserFeedback/styles.module.css b/website/src/components/UserFeedback/styles.module.css
index bbdbe82c72..3725083d68 100644
--- a/website/src/components/UserFeedback/styles.module.css
+++ b/website/src/components/UserFeedback/styles.module.css
@@ -75,6 +75,7 @@
 .button-container {
     margin-top: var(--row-gap);
     display: flex;
+    flex-direction: row-reverse;
     justify-content: end;
     gap: var(--element-horizontal-gap);
 }