- + setFeedbackIsOpen(false)} + className={styles['close-button']} + > close feedback popup @@ -292,9 +295,21 @@ export const FeedbackWrapper = ({ seedData }) => { )} + ) : ( + setFeedbackIsOpen(true)} /> ); }; const OpenFeedbackButton = ({ openFeedback }) => { - return Feedback; + return ( + + Feedback + + ); }; diff --git a/website/src/components/UserFeedback/styles.module.css b/website/src/components/UserFeedback/styles.module.css index 11a4c2abb6..c3bb5fa4f4 100644 --- a/website/src/components/UserFeedback/styles.module.css +++ b/website/src/components/UserFeedback/styles.module.css @@ -132,6 +132,7 @@ button.close-button { fill: currentColor; } +.primary-button, .user-feedback button[type='submit'] { background-color: var(--ifm-color-primary); color: var(--ifm-background-color); @@ -176,3 +177,15 @@ button.close-button { gap: var(--ifm-spacing-horizontal); accent-color: var(--ifm-color-primary); } + +.open-feedback-button { + opacity: 0.55; + padding-top: var(--ifm-spacing-vertical); + padding-bottom: calc(var(--ifm-spacing-vertical) * 2); + border-radius: var(--ifm-global-radius) var(--ifm-global-radius) 0 0; + border: none; + position: absolute; + right: calc(var(--ifm-spacing-vertical) * -1); + bottom: 25vh; + transform: rotate(270deg); +}