Fix label color of feedback button (#2959)

* Fix label color of feedback button * update yarn.lock
grommet · Oct 10, 2022 · 7c72001 · 7c72001
1 parent ad86817
commit 7c72001
Show file tree

Hide file tree

Showing 3 changed files with 158 additions and 144 deletions.
diff --git a/aries-site/src/components/feedback/FeedbackButton.js b/aries-site/src/components/feedback/FeedbackButton.js
@@ -1,15 +1,32 @@
-import styled from 'styled-components';
+import { useContext } from 'react';
+import styled, { ThemeContext } from 'styled-components';
+import PropTypes from 'prop-types';
 import { Box, Button } from 'grommet';
 
 const PositionedBox = styled(Box)`
   position: fixed;
   bottom: 0px;
+  border-radius: 6px;
   right: 0px;
   z-index: 10;
 `;
 
-export const FeedbackButton = ({ elevation, margin, ...buttonProps }) => (
-  <PositionedBox elevation={elevation} margin={margin}>
-    <Button {...buttonProps} />
-  </PositionedBox>
-);
+// temp fix until this theme issue is resolved:
+// https://github.com/grommet/grommet-theme-hpe/issues/283
+const StyledButton = styled(Button)`
+  color: ${props => props.theme.global.colors['text-strong'].dark};
+`;
+
+export const FeedbackButton = ({ elevation, margin, ...buttonProps }) => {
+  const theme = useContext(ThemeContext);
+  return (
+    <PositionedBox elevation={elevation} margin={margin}>
+      <StyledButton theme={theme} {...buttonProps} />
+    </PositionedBox>
+  );
+};
+
+FeedbackButton.propTypes = {
+  elevation: PropTypes.string,
+  margin: PropTypes.shape({}),
+};
diff --git a/aries-site/src/layouts/main/Layout.js b/aries-site/src/layouts/main/Layout.js
@@ -78,34 +78,37 @@ export const Layout = ({
     }, 2000);
   };
 
-  const onSubmit = useCallback(value => {
-    const data = {
-      values: {
-        fullURL: `https://design-system.hpe.design${router.route}`,
-        deviceType: 'desktop',
-        QID1: parseInt(value.value['like-rating']),
-        QID2_TEXT: value.value['text-area'],
-      },
-    };
-    // using next js env variables for url & api token
-    // https://nextjs.org/docs/basic-features/environment-variables
-    fetch(`${process.env.NEXT_PUBLIC_FEEDBACK_API_POST}`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Accept: 'application/json',
-        'X-API-TOKEN': process.env.NEXT_PUBLIC_FEEDBACK_APP_API_TOKEN,
-      },
-      body: JSON.stringify(data),
-    })
-      .then(response => response.json())
-      .then(result => {
-        closeFeedbackModal();
+  const onSubmit = useCallback(
+    value => {
+      const data = {
+        values: {
+          fullURL: `https://design-system.hpe.design${router.route}`,
+          deviceType: 'desktop',
+          QID1: parseInt(value.value['like-rating'], 10),
+          QID2_TEXT: value.value['text-area'],
+        },
+      };
+      // using next js env variables for url & api token
+      // https://nextjs.org/docs/basic-features/environment-variables
+      fetch(`${process.env.NEXT_PUBLIC_FEEDBACK_API_POST}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+          'X-API-TOKEN': process.env.NEXT_PUBLIC_FEEDBACK_APP_API_TOKEN,
+        },
+        body: JSON.stringify(data),
       })
-      .catch(error => {
-        console.error('Error:', error);
-      });
-  }, []);
+        .then(response => response.json())
+        .then(() => {
+          closeFeedbackModal();
+        })
+        .catch(error => {
+          console.error('Error:', error);
+        });
+    },
+    [router.route],
+  );
 
   const match = siteContents.find(item =>
     item?.name === 'Index'
@@ -204,7 +207,7 @@ export const Layout = ({
               color="purple!"
               label="Feedback"
               primary
-              a11yTitle={`This button launches a modal to give feedback.`}
+              a11yTitle="This button launches a modal to give feedback."
             />
             <Feedback
               show={open}
@@ -228,7 +231,8 @@ export const Layout = ({
                 kind="textArea"
                 label="Any additional comments?"
                 formProps={{
-                  help: `Here's your chance to tell us your thoughts about this page.`,
+                  help: `Here's your chance to tell us your thoughts 
+                  about this page.`,
                 }}
               />
             </Feedback>