feat: rough style first question page of feedback component.

Unleash · Feb 25, 2022 · a6191f5 · a6191f5
1 parent aa3fb6c
commit a6191f5
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 5 deletions.
diff --git a/website/.storybook/main.js b/website/.storybook/main.js
@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
     stories: [
         '../src/**/*.stories.mdx',
@@ -16,4 +18,8 @@ module.exports = {
             to: '/',
         },
     ],
+    webpackFinal: async (config) => {
+        config.resolve.alias['@site'] = path.resolve(__dirname, '../');
+        return config;
+    },
 };
diff --git a/website/src/components/UserFeedback/index.jsx b/website/src/components/UserFeedback/index.jsx
@@ -1,8 +1,15 @@
 import React from 'react';
 import styles from './styles.module.css';
+import CloseIcon from '@site/src/icons/close'
 
 const Component = ({ text }) => (
     <article className="user-feedback">
+        <div className="close-button-row">
+            <button className="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}>
             <p>
                 <span className="visually-hidden">
@@ -36,6 +43,7 @@ const Component = ({ text }) => (
                 <span aria-hidden="true">Very satisfied</span>
             </div>
             <div className="button-container">
+                <button className="button-secondary">Skip</button>
                 <button type="submit">Next</button>
             </div>
         </form>

diff --git a/website/src/components/UserFeedback/styles.module.css b/website/src/components/UserFeedback/styles.module.css
@@ -8,26 +8,39 @@
     padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
     text-align: center;
     --outline-style: 2px solid var(--ifm-color-primary);
+    --row-gap: 1rem;
+    --element-horizontal-gap: 1rem;
+}
+
+.user-feedback > * + * {
+    margin-top: var(--row-gap);
+}
+
+.user-feedback button {
+    border: none;
+    border-radius: var(--ifm-global-radius);
+    padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
 }
 
 .user-feedback > form {
     max-width: 850px;
-    margin: auto;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .user-feedback * {
         outline-offset: 4px;
 }
 
-.user-feedback *:focus {
+.user-feedback *:focus-visible {
     outline: var(--outline-style);
 }
 
 .satisfaction-input-container {
     display: flex;
     place-content: center;
     align-items: center;
-    gap: 1em;
+    gap: var(--element-horizontal-gap);
 }
 
 
@@ -56,8 +69,50 @@
 }
 
 .button-container {
+    margin-top: var(--row-gap);
     display: flex;
     justify-content: end;
+    gap: var(--element-horizontal-gap);
+}
+
+button.close-button {
+    background: none;
+    border: none;
+    border-radius: 50%;
+    padding: 0;
+    aspect-ratio: 1;
+    height: 1em;
+}
+
+.close-button:hover{
+    color: var(--ifm-color-primary);
 }
 
-.bah {}
+.close-button:active{
+    color: var(--ifm-color-primary-darker);
+}
+
+.close-button-row {
+    display: flex;
+    justify-content: end;
+}
+
+.user-feedback button[type=submit] {
+    background-color: var(--ifm-color-primary);
+    color: var(--ifm-color-primary-contrast-background);
+    padding-inline: calc(var(--ifm-spacing-horizontal) * 4);
+}
+
+.user-feedback button[type=submit]:active {
+    background-color: var(--ifm-color-primary-dark);
+}
+
+.button-secondary {
+    color: var(--ifm-color-primary);
+    background: none;
+}
+
+
+.button-secondary:active {
+    color: var(--ifm-color-primary-darker);
+}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -20,7 +20,7 @@ footer {
 }
 
 html[data-theme='light'] {
-    --ifm-color-primary: #39535b;
+    --ifm-color-primary: var(--unleash-color-purple);
     --ifm-color-primary-dark: #334b52;
     --ifm-color-primary-darker: #30474d;
     --ifm-color-primary-darkest: #283a40;

diff --git a/website/src/icons/close.jsx b/website/src/icons/close.jsx
@@ -0,0 +1,15 @@
+import './styles.css';
+
+const svg = () => (
+    <svg
+        className="icon"
+        viewBox="0 0 12 12"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path d="m6 5.293 4.789-4.79.707.708-4.79 4.79 4.79 4.789-.707.707-4.79-4.79-4.789 4.79-.707-.707L5.293 6 .502 1.211 1.21.504 6 5.294z" />
+    </svg>
+);
+
+const Icon = svg;
+
+export default Icon;
diff --git a/website/src/icons/styles.css b/website/src/icons/styles.css
@@ -0,0 +1,5 @@
+.icon {
+    fill: currentColor;
+    border-radius: 50%;
+    aspect-ratio: 1;
+}