chore: first feedback page

website/src/components/UserFeedback/index.jsx

@@ -2,15 +2,17 @@ import React from 'react';
 import styles from './styles.module.css';
 import CloseIcon from '@site/src/icons/close'
 
+const join = (...cs) => cs.join(" ")
+
 const Component = ({ text }) => (
-    <article className="user-feedback">
-        <div className="close-button-row">
-            <button className="close-button" onClick={() => console.log("add some close button action")}>
+    <article className={styles["user-feedback"]}>
+        <div className={ styles["close-button-row" ]}>
+            <button className={styles["close-button"]} onClick={() => console.log("add some close button action")}>
             <span className="visually-hidden">close feedback popup</span>
             <CloseIcon/>
         </button>
         </div>
-        <form className={styles.bah}>
+        <form>
             <p>
                 <span className="visually-hidden">
                     On a scale from 1 to 5 where 1 is very unsatisfied and 5 is
@@ -20,12 +22,12 @@ const Component = ({ text }) => (
                 documentation?
             </p>
 
-            <div className="satisfaction-input-container">
+            <div className={styles["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"
+                            className={join("visually-hidden", styles["user-satisfaction-score-input"]) }
                             required
                             id={`user-satisfaction-score-${n}`}
                             name="satisfaction-level"
@@ -33,7 +35,7 @@ const Component = ({ text }) => (
                             value={n}
                         />
                         <label
-                            className="user-satisfaction-score-label"
+                            className={styles["user-satisfaction-score-label"]}
                             htmlFor={`user-satisfaction-score-${n}`}
                         >
                             {n}
@@ -42,8 +44,8 @@ const Component = ({ text }) => (
                 ))}
                 <span aria-hidden="true">Very satisfied</span>
             </div>
-            <div className="button-container">
-                <button className="button-secondary">Skip</button>
+            <div className={styles["button-container"]}>
+                <button className={styles["button-secondary"]}>Skip</button>
                 <button type="submit">Next</button>
             </div>
         </form>

website/src/components/UserFeedback/styles.module.css

@@ -1,6 +1,7 @@
 .user-feedback {
     width: 100%;
     position: absolute;
+    background: var(--ifm-background-color);
     bottom: 0;
     border: var(--ifm-global-border-width) solid var(--unleash-color-gray);
     border-radius: var(--ifm-global-radius) var(--ifm-global-radius) 0 0;
@@ -99,10 +100,14 @@ button.close-button {
 
 .user-feedback button[type=submit] {
     background-color: var(--ifm-color-primary);
-    color: var(--ifm-color-primary-contrast-background);
+    color: var(--ifm-background-color);
     padding-inline: calc(var(--ifm-spacing-horizontal) * 4);
 }
 
+.user-feedback button[type=submit]:hover {
+    background-color: var(--ifm-color-primary-lighter);
+}
+
 .user-feedback button[type=submit]:active {
     background-color: var(--ifm-color-primary-dark);
 }
@@ -116,3 +121,7 @@ button.close-button {
 .button-secondary:active {
     color: var(--ifm-color-primary-darker);
 }
+
+.button-secondary:hover {
+    color: var(--ifm-color-primary-lightest);
+}

website/src/icons/close.jsx

@@ -1,8 +1,9 @@
-import './styles.css';
+import React from 'react';
+import styles from './styles.module.css';
 
 const svg = () => (
     <svg
-        className="icon"
+        className={styles['icon']}
         viewBox="0 0 12 12"
         xmlns="http://www.w3.org/2000/svg"
     >

website/src/theme/Root.js

@@ -5,7 +5,8 @@ import UF from '@site/src/components/UserFeedback';
 function Root({ children }) {
     return (
         <>
-            {children} <UF />
+            <UF />
+            {children}
         </>
     );
 }