From aa3fb6c4e230f5adfd6acde51be347d8912b3d8d Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.ai>
Date: Thu, 24 Feb 2022 18:00:03 +0100
Subject: [PATCH] chore: rename styles to module, add more focus styles

---
 website/src/components/UserFeedback/index.jsx |  4 ++--
 .../{styles.css => styles.module.css}         | 19 +++++++++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)
 rename website/src/components/UserFeedback/{styles.css => styles.module.css} (80%)

diff --git a/website/src/components/UserFeedback/index.jsx b/website/src/components/UserFeedback/index.jsx
index 5f718adb53..16679e3e40 100644
--- a/website/src/components/UserFeedback/index.jsx
+++ b/website/src/components/UserFeedback/index.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import './styles.css';
+import styles from './styles.module.css';
 
 const Component = ({ text }) => (
     <article className="user-feedback">
-        <form>
+        <form className={styles.bah}>
             <p>
                 <span className="visually-hidden">
                     On a scale from 1 to 5 where 1 is very unsatisfied and 5 is
diff --git a/website/src/components/UserFeedback/styles.css b/website/src/components/UserFeedback/styles.module.css
similarity index 80%
rename from website/src/components/UserFeedback/styles.css
rename to website/src/components/UserFeedback/styles.module.css
index 6a82119a13..ee5dc6d4af 100644
--- a/website/src/components/UserFeedback/styles.css
+++ b/website/src/components/UserFeedback/styles.module.css
@@ -7,6 +7,20 @@
     box-shadow: var(--ifm-global-shadow-lw);
     padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
     text-align: center;
+    --outline-style: 2px solid var(--ifm-color-primary);
+}
+
+.user-feedback > form {
+    max-width: 850px;
+    margin: auto;
+}
+
+.user-feedback * {
+        outline-offset: 4px;
+}
+
+.user-feedback *:focus {
+    outline: var(--outline-style);
 }
 
 .satisfaction-input-container {
@@ -24,11 +38,10 @@
     width: 3em;
     border: var(--ifm-global-border-width) solid currentColor;
     border-radius: 50%;
-    outline-offset: 4px;
 }
 
 .user-satisfaction-score-input:focus-visible + .user-satisfaction-score-label {
-    outline: 2px solid var(--ifm-color-primary);
+    outline: var(--outline-style);
 }
 
 .user-satisfaction-score-label:hover {
@@ -46,3 +59,5 @@
     display: flex;
     justify-content: end;
 }
+
+.bah {}