Merge pull request #13629 from ethereum/shadcn-feedback-card

Shadcn migration - feedback card

src/components/FeedbackCard.tsx

@@ -1,21 +1,21 @@
 import { type ReactNode, useState } from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
-import { Flex, type FlexProps, Heading } from "@chakra-ui/react"
 
 import type { Lang } from "@/lib/types"
 
-import { Button } from "@/components/Buttons"
 import { FeedbackThumbsUpIcon } from "@/components/icons"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import { isLangRightToLeft } from "@/lib/utils/translations"
 
+import { Button } from "../../tailwind/ui/buttons/Button"
+
 import Translation from "./Translation"
 
 import { useSurvey } from "@/hooks/useSurvey"
 
-type FeedbackCardProps = FlexProps & {
+type FeedbackCardProps = {
   prompt?: string
   isArticle?: boolean
 }
@@ -60,44 +60,34 @@ const FeedbackCard = ({ prompt, isArticle, ...props }: FeedbackCardProps) => {
   }
 
   return (
-    <Flex
-      border="1px"
-      borderColor="border"
-      bg="feedbackGradient"
-      borderRadius="base"
-      p="6"
-      direction="column"
-      mb="4"
-      mt="8"
-      w="full"
+    <div
+      className="mb-4 mt-8 flex w-full flex-col rounded border border-body-light bg-feedback-gradient p-6"
       {...props}
       dir={dir}
     >
-      <Flex direction="column" gap="4">
-        <Heading as="h3" m="0" mb="2" fontSize="1.375rem" fontWeight="bold">
-          {getTitle(feedbackSubmitted)}
-        </Heading>
+      <div className="flex flex-col gap-4">
+        <h4 className="mb-2">{getTitle(feedbackSubmitted)}</h4>
         {feedbackSubmitted && (
           <p>
             {t("feedback-widget-thank-you-subtitle")}{" "}
             <Translation id="feedback-widget-thank-you-subtitle-ext" />
           </p>
         )}
-        <Flex gap="4">
+        <div className="flex gap-4">
           {!feedbackSubmitted ? (
             <>
               <Button
                 variant="outline-color"
-                leftIcon={<FeedbackThumbsUpIcon />}
                 onClick={() => handleSubmit(true)}
               >
+                <FeedbackThumbsUpIcon className="h-6 w-6" />
                 {t("yes")}
               </Button>
               <Button
                 variant="outline-color"
-                leftIcon={<FeedbackThumbsUpIcon transform="scaleY(-1)" />}
                 onClick={() => handleSubmit(false)}
               >
+                <FeedbackThumbsUpIcon className="-scale-y-100" />
                 {t("no")}
               </Button>
             </>
@@ -106,9 +96,9 @@ const FeedbackCard = ({ prompt, isArticle, ...props }: FeedbackCardProps) => {
               {t("feedback-widget-thank-you-cta")}
             </Button>
           )}
-        </Flex>
-      </Flex>
-    </Flex>
+        </div>
+      </div>
+    </div>
   )
 }
 

src/components/MeetupList.tsx

@@ -9,7 +9,6 @@ import {
   LinkOverlay,
   List,
   ListItem,
-  useColorModeValue,
   useToken,
   VisuallyHidden,
 } from "@chakra-ui/react"

src/components/icons/Icons.stories.tsx

@@ -3,7 +3,7 @@ import { Center, Flex, Icon, SimpleGrid } from "@chakra-ui/react"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { EthHomeIcon } from "./EthHomeIcon"
-import { FeedbackThumbsUpIcon } from "./FeedbackThumbsUpIcon"
+import FeedbackThumbsUpIcon from "./feedback-thumbs-up-icon.svg"
 import { HighlightDarkIcon } from "./HighlightDarkIcon"
 import { HighlightIcon } from "./HighlightIcon"
 import {

src/components/icons/index.ts

@@ -1,7 +1,7 @@
 // General Icons
 import { EthHomeIcon } from "./EthHomeIcon"
 import FeedbackGlyphIcon from "./feedback-glyph-icon.svg"
-import { FeedbackThumbsUpIcon } from "./FeedbackThumbsUpIcon"
+import FeedbackThumbsUpIcon from "./feedback-thumbs-up-icon.svg"
 import { HighlightDarkIcon } from "./HighlightDarkIcon"
 import { HighlightIcon } from "./HighlightIcon"
 

src/components/ui/buttons/Button.tsx

@@ -16,6 +16,8 @@ const buttonVariants = cva(
         solid:
           "text-background bg-primary border-transparent disabled:bg-disabled disabled:text-background hover:text-background hover:bg-primary-hover hover:shadow-button-hover active:shadow-none",
         outline: "hover:shadow-button-hover active:shadow-none",
+        "outline-color":
+          "hover:shadow-button-hover active:shadow-none border-primary",
         ghost: "border-transparent",
         link: "border-transparent font-bold underline py-0 px-1 active:text-primary",
       },

src/styles/global.css

@@ -106,12 +106,13 @@
     --tooltip-shadow: rgba(0, 0, 0, 0.24);
     --switch-background: var(--gray-300);
     --hub-hero-content-bg: rgba(255, 255, 255, 0.8);
-    --bg-main-gradient: linear-gradient(
+    --main-gradient: linear-gradient(
       102.7deg,
       rgba(185, 185, 241, 0.2) 0%,
       rgba(84, 132, 234, 0.2) 51.56%,
       rgba(58, 142, 137, 0.2) 100%
     );
+    --feedback-gradient: var(--main-gradient);
     --table-box-shadow: 0 14px 66px rgba(0, 0, 0, 0.07),
       0 10px 17px rgba(0, 0, 0, 0.03), 0 4px 7px rgba(0, 0, 0, 0.05);
     --table-item-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
@@ -160,12 +161,18 @@
     --tooltip-shadow: rgba(255, 255, 255, 0.24);
     --switch-background: rgba(255, 255, 255, 0.24);
     --hub-hero-content-bg: rgba(34, 34, 34, 0.8);
-    --bg-main-gradient: linear-gradient(
+    --main-gradient: linear-gradient(
       102.7deg,
       rgba(185, 185, 241, 0.2) 0%,
       rgba(84, 132, 234, 0.2) 51.56%,
       rgba(58, 142, 137, 0.2) 100%
     );
+    --feedback-gradient: linear-gradient(
+      83.46deg,
+      #2c2c32 7.03%,
+      #44404d 52.42%,
+      #303038 98.77%
+    );
     --table-box-shadow: 0 14px 66px hsla(0, 0%, 96.1%, 0.07),
       0 10px 17px hsla(0, 0%, 96.1%, 0.03), 0 4px 7px hsla(0, 0%, 96.1%, 0.05);
     --table-item-box-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.1);

tailwind.config.ts

@@ -146,7 +146,8 @@ const config = {
         },
       },
       backgroundImage: {
-        "main-gradient": "var(--bg-main-gradient)",
+        "main-gradient": "var(--main-gradient)",
+        "feedback-gradient": "var(--feedback-gradient)",
       },
       boxShadow: {
         "table-box": "var(--table-box-shadow)",