From 8b67900bf992f07fd80fa12fc14e9f6c79743444 Mon Sep 17 00:00:00 2001
From: buddy <0buddy.ne@gmail.com>
Date: Wed, 27 Mar 2024 08:48:07 +0200
Subject: [PATCH] QA requests #556

---
 app/components/Article/FeedbackForm/feedbackForm.css |  4 ++--
 app/components/Article/index.tsx                     |  2 +-
 app/newRoot.css                                      |  1 +
 app/routes/questions.actions.tsx                     | 11 +++++++++--
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/components/Article/FeedbackForm/feedbackForm.css b/app/components/Article/FeedbackForm/feedbackForm.css
index 8be0802c..1b8a356a 100644
--- a/app/components/Article/FeedbackForm/feedbackForm.css
+++ b/app/components/Article/FeedbackForm/feedbackForm.css
@@ -1,4 +1,5 @@
 .feedback-container {
+  max-width: 384px;
   padding: var(--spacing-32);
 }
 .select-option {
@@ -13,7 +14,6 @@
 }
 
 .feedback-form {
-  width: 100%;
   position: relative;
   color: var(--colors-cool-grey-600);
   z-index: 2;
@@ -50,7 +50,7 @@
 .composite-button > .feedback-form {
   position: absolute;
   display: none;
-  transform: translate(-11vw, var(--spacing-56));
+  transform: translate(-9vw, var(--spacing-56));
   margin: var(--spacing-24);
 }
 .composite-button > .feedback-form.show {
diff --git a/app/components/Article/index.tsx b/app/components/Article/index.tsx
index 2a3a7a97..d16abd14 100644
--- a/app/components/Article/index.tsx
+++ b/app/components/Article/index.tsx
@@ -68,7 +68,7 @@ const ArticleFooter = (question: Question) => {
             pageid={question.pageid}
             showText={true}
             actionType={ActionType.UNHELPFUL}
-            onSuccess={() => setShowFeedbackForm(true)}
+            onClick={() => setShowFeedbackForm(true)}
           />
           <div className={['action-feedback-text', showFeedback ? 'show' : ''].join(' ')}>
             Thanks for your feedback!
diff --git a/app/newRoot.css b/app/newRoot.css
index 3261bbb3..c869ad7c 100644
--- a/app/newRoot.css
+++ b/app/newRoot.css
@@ -530,6 +530,7 @@ ol {
   }
 } /* end mobile */
 p,
+textarea,
 button {
   font-family: Poppins;
 }
diff --git a/app/routes/questions.actions.tsx b/app/routes/questions.actions.tsx
index 7d9bc1c3..d28b0068 100644
--- a/app/routes/questions.actions.tsx
+++ b/app/routes/questions.actions.tsx
@@ -93,6 +93,7 @@ type Props = {
   children?: ReactNode | ReactNode[]
   [k: string]: unknown
   onSuccess?: () => void
+  onClick?: () => void
 }
 export const Action = ({
   pageid,
@@ -100,6 +101,7 @@ export const Action = ({
   showText = true,
   children,
   onSuccess,
+  onClick,
   ...props
 }: Props) => {
   const [remixSearchParams] = useSearchParams()
@@ -131,7 +133,9 @@ export const Action = ({
 
   const handleAction = async (e: MouseEvent<HTMLElement>) => {
     e.preventDefault()
-
+    if (onClick) {
+      onClick()
+    }
     setActionTaken(!actionTaken)
 
     // This sort of cheats - if more than 1 request is sent per second (or some other such time
@@ -169,7 +173,10 @@ export const Action = ({
       {children}
       <Button className={className}>
         <Icon />
-        <span className={actionTaken ? 'teal-500' : 'grey'}> {showText && title}</span>
+        <p className={[actionTaken ? 'teal-500' : 'grey', 'small'].join(' ')}>
+          {' '}
+          {showText && title}
+        </p>
       </Button>
     </Form>
   )