From 1534fd1674889a1e2c12fada8f65a214f98fd3dc Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.ai>
Date: Sun, 27 Feb 2022 16:15:46 +0100
Subject: [PATCH] feat: style page 3

---
 website/src/components/UserFeedback/index.jsx        | 12 ++++--------
 .../src/components/UserFeedback/styles.module.css    |  8 ++++++++
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/website/src/components/UserFeedback/index.jsx b/website/src/components/UserFeedback/index.jsx
index c6ca06fe28..f12d0eb8ce 100644
--- a/website/src/components/UserFeedback/index.jsx
+++ b/website/src/components/UserFeedback/index.jsx
@@ -211,17 +211,15 @@ export const FeedbackWrapper = ({ seedData }) => {
                     Finally, would you mind telling us a little about yourself?
                     What kind of customer are you?
                 </span>
-                <div>
+                <div className={styles['customer-type-inputs']}>
                     {[
-                        ['an', 'open source', 'opensource'],
                         ['a', 'paying', 'paying'],
+                        ['an', 'open source', 'opensource'],
                     ].map(([article, customerType, key]) => (
                         <span key={`input-group-${key}`}>
                             <input
-                                className={join(
-                                    styles['user-satisfaction-score-input'],
-                                )}
                                 id={`customer-type-${key}`}
+                                className={styles['customer-type-input']}
                                 name="customer-type"
                                 type="radio"
                                 value={key}
@@ -233,9 +231,7 @@ export const FeedbackWrapper = ({ seedData }) => {
                                 }}
                             />
                             <label
-                                className={
-                                    styles['user-satisfaction-score-label']
-                                }
+                                className={styles['customer-type-label']}
                                 htmlFor={`customer-type-${key}`}
                             >
                                 I'm {article} {customerType} customer
diff --git a/website/src/components/UserFeedback/styles.module.css b/website/src/components/UserFeedback/styles.module.css
index 3725083d68..47913a0d62 100644
--- a/website/src/components/UserFeedback/styles.module.css
+++ b/website/src/components/UserFeedback/styles.module.css
@@ -133,3 +133,11 @@ button.close-button {
     display: block;
     width: 100%;
 }
+
+.customer-type-inputs {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: var(--ifm-spacing-horizontal);
+    accent-color: var(--ifm-color-primary);
+}