Merge pull request #7906 from ethereum/feedback-v2

Update feedback components for Chakra

Author: pettinarip

src/@chakra-ui/gatsby-plugin/components/Button.ts

@@ -90,5 +90,17 @@ export const Button: ComponentStyleConfig = {
       color: "primary",
       borderColor: "primary",
     },
+    icon: {
+      appearance: "none",
+      background: "inherit",
+      padding: "initial",
+      border: 0,
+      color: "inherit",
+      boxShadow: "none",
+      _hover: {
+        color: "primary",
+        boxShadow: "none",
+      },
+    },
   },
 }

src/assets/feedback-glyph.svg

@@ -1,55 +1,25 @@
 // Library imports
 import React, { ReactNode, useState } from "react"
-import { Icon } from "@chakra-ui/react"
-import styled from "@emotion/styled"
+import { Flex, FlexProps, Heading, Icon } from "@chakra-ui/react"
 // Component imports
 import Button from "./Button"
 import Translation from "./Translation"
 // SVG imports
 import ThumbsUp from "../assets/feedback-thumbs-up.svg"
 // Utility imports
 import { trackCustomEvent } from "../utils/matomo"
+// Hook imports
 import { useSurvey } from "../hooks/useSurvey"
 
-const Card = styled.div`
-  border: 1px solid ${({ theme }) => theme.colors.border};
-  background: ${({ theme }) => theme.colors.feedbackGradient};
-  border-radius: 4px;
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1rem;
-  margin-top: 2rem;
-  width: 100%;
-`
-
-const Content = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-`
-
-const Title = styled.h3`
-  margin: 0 0 0.5rem;
-  font-size: 1.375rem;
-  font-weight: 700;
-`
-
-const ButtonContainer = styled.div`
-  display: flex;
-  gap: 1rem;
-`
-
-export interface IProps {
+export interface IProps extends FlexProps {
   prompt?: string
   isArticle?: boolean
-  className?: string
 }
 
 const FeedbackCard: React.FC<IProps> = ({
   prompt,
   isArticle = false,
-  className,
+  ...props
 }) => {
   const [feedbackSubmitted, setFeedbackSubmitted] = useState(false)
   const surveyUrl = useSurvey(feedbackSubmitted)
@@ -84,16 +54,29 @@ const FeedbackCard: React.FC<IProps> = ({
     window && surveyUrl && window.open(surveyUrl, "_blank")
   }
   return (
-    <Card className={className}>
-      <Content>
-        <Title>{getTitle(feedbackSubmitted)}</Title>
+    <Flex
+      border="1px"
+      borderColor="border"
+      bg="feedbackGradient"
+      borderRadius="base"
+      p={6}
+      direction="column"
+      mb={4}
+      mt={8}
+      w="full"
+      {...props}
+    >
+      <Flex direction="column" gap={4}>
+        <Heading as="h3" m={0} mb={2} fontSize="1.375rem" fontWeight="bold">
+          {getTitle(feedbackSubmitted)}
+        </Heading>
         {feedbackSubmitted && (
           <p>
             <Translation id="feedback-widget-thank-you-subtitle" />{" "}
             <Translation id="feedback-widget-thank-you-subtitle-ext" />
           </p>
         )}
-        <ButtonContainer>
+        <Flex gap={4}>
           {!feedbackSubmitted ? (
             <>
               <Button
@@ -118,9 +101,9 @@ const FeedbackCard: React.FC<IProps> = ({
               <Translation id="feedback-widget-thank-you-cta" />
             </Button>
           )}
-        </ButtonContainer>
-      </Content>
-    </Card>
+        </Flex>
+      </Flex>
+    </Flex>
   )
 }