feat: add basic (sorta styled) first feedback screen

website/src/components/UserFeedback/index.jsx

@@ -3,8 +3,42 @@ import './styles.css';
 
 const Component = ({ text }) => (
     <article className="user-feedback">
-        <form></form>
+        <form>
-        <p className="scream">{text}</p>
+            <p>
+                <span className="visually-hidden">
+                    On a scale from 1 to 5 where 1 is very unsatisfied and 5 is
+                    very satisfied,
+                </span>{' '}
+                How would you rate your overall satisfaction with the Unleash
+                documentation?
+            </p>
+
+            <div className="satisfaction-input-container">
+                <span aria-hidden="true">Very unsatisfied</span>
+                {[1, 2, 3, 4, 5].map((n) => (
+                    <span key={`input-group-${n}`}>
+                        <input
+                            className="visually-hidden user-satisfaction-score-input"
+                            required
+                            id={`user-satisfaction-score-${n}`}
+                            name="satisfaction-level"
+                            type="radio"
+                            value={n}
+                        />
+                        <label
+                            className="user-satisfaction-score-label"
+                            htmlFor={`user-satisfaction-score-${n}`}
+                        >
+                            {n}
+                        </label>
+                    </span>
+                ))}
+                <span aria-hidden="true">Very satisfied</span>
+            </div>
+            <div className="button-container">
+                <button type="submit">Next</button>
+            </div>
+        </form>
     </article>
 );
 

website/src/components/UserFeedback/styles.css

@@ -3,6 +3,46 @@
     position: absolute;
     bottom: 0;
     border: var(--ifm-global-border-width) solid var(--unleash-color-gray);
-    border-radius: var(--ifm-global-radius);
+    border-radius: var(--ifm-global-radius) var(--ifm-global-radius) 0 0;
     box-shadow: var(--ifm-global-shadow-lw);
+    padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
+    text-align: center;
+}
+
+.satisfaction-input-container {
+    display: flex;
+    place-content: center;
+    align-items: center;
+    gap: 1em;
+}
+
+
+.user-satisfaction-score-label {
+    display: grid;
+    place-content: center;
+    height: 3em;
+    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);
+}
+
+.user-satisfaction-score-label:hover {
+    color: var(--ifm-color-primary)
+}
+
+.user-satisfaction-score-input:checked + label {
+    color: var(--ifm-color-primary);
+    background: var(--ifm-color-primary);
+    color: var(--ifm-color-primary-contrast-background);
+    border-color: var(--ifm-color-primary);
+}
+
+.button-container {
+    display: flex;
+    justify-content: end;
 }

website/src/css/custom.css

@@ -62,6 +62,18 @@ html[data-theme='dark'] {
     --docsearch-primary-color: var(--ifm-color-primary-darkest);
 }
 
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: auto;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
 main img {
     background: var(--unleash-img-background-color);
     display: block;