Merge branch 'stampy-redesign' into stampy-redesign-594

StampyAI · May 3, 2024 · e2816f1 · e2816f1
2 parents 6fc2348 + 66fde9a
commit e2816f1
Show file tree

Hide file tree

Showing 22 changed files with 600 additions and 293 deletions.
diff --git a/app/assets/icons/link-out.svg b/app/assets/icons/link-out.svg
diff --git a/app/assets/icons/stampy.svg b/app/assets/icons/stampy.svg
diff --git a/app/components/Article/FeedbackForm/index.tsx b/app/components/Article/FeedbackForm/index.tsx
diff --git a/app/components/Article/index.tsx b/app/components/Article/index.tsx
@@ -1,46 +1,25 @@
-import React, {useState} from 'react'
+import {useState} from 'react'
 import {Link} from '@remix-run/react'
 import KeepGoing from '~/components/Article/KeepGoing'
 import CopyIcon from '~/components/icons-generated/Copy'
 import EditIcon from '~/components/icons-generated/Pencil'
 import Button, {CompositeButton} from '~/components/Button'
-import {Action, ActionType} from '~/routes/questions.actions'
+import Feedback from '~/components/Feedback'
 import type {Glossary, Question} from '~/server-utils/stampy'
 import {tagUrl} from '~/routesMapper'
 import Contents from './Contents'
 import './article.css'
-import FeedbackForm from '~/components/Article/FeedbackForm'
 
 const isLoading = ({text}: Question) => !text || text === 'Loading...'
 
 const ArticleFooter = (question: Question) => {
-  const [showFeedback, setShowFeedback] = useState(false)
-  const [showFeedbackForm, setShowFeedbackForm] = useState(false)
-  const [isFormFocused, setIsFormFocused] = useState(false)
   const date =
     question.updatedAt &&
     new Date(question.updatedAt).toLocaleDateString('en-GB', {
       year: 'numeric',
       month: 'short',
     })
 
-  React.useEffect(() => {
-    // Hide the form after 10 seconds if the user hasn't interacted with it
-    const timeoutId = setInterval(() => {
-      if (!isFormFocused) {
-        setShowFeedbackForm(false)
-      }
-    }, 10000)
-
-    // Clear the timeout to prevent it from running if the component unmounts
-    return () => clearInterval(timeoutId)
-  }, [showFeedbackForm, isFormFocused])
-
-  React.useEffect(() => {
-    const timeout = setInterval(() => setShowFeedback(false), 6000)
-    return () => clearInterval(timeout)
-  }, [showFeedback])
-
   return (
     !isLoading(question) && (
       <div className="footer-comtainer padding-bottom-40">
@@ -57,34 +36,7 @@ const ArticleFooter = (question: Question) => {
         </div>
         <span>Was this page helpful?</span>
 
-        <CompositeButton className="flex-container relative">
-          <Action
-            pageid={question.pageid}
-            showText={true}
-            actionType={ActionType.HELPFUL}
-            onSuccess={() => setShowFeedback(true)}
-          />
-          <Action
-            pageid={question.pageid}
-            showText={true}
-            actionType={ActionType.UNHELPFUL}
-            onClick={() => setShowFeedbackForm(true)}
-          />
-          <div className={['action-feedback-text', showFeedback ? 'show' : ''].join(' ')}>
-            Thanks for your feedback!
-          </div>
-          <FeedbackForm
-            pageid={question.pageid}
-            className={['feedback-form', showFeedbackForm ? 'show' : ''].join(' ')}
-            onClose={() => {
-              setShowFeedback(true)
-              setShowFeedbackForm(false)
-            }}
-            onBlur={() => setIsFormFocused(false)}
-            onFocus={() => setIsFormFocused(true)}
-            hasOptions={false}
-          />
-        </CompositeButton>
+        <Feedback pageid={question.pageid} labels />
       </div>
     )
   )

diff --git a/app/components/Button/button.css b/app/components/Button/button.css
@@ -10,54 +10,140 @@
   border-radius: var(--border-radius);
   box-sizing: border-box;
 
+  background: var(--colors-white, #ffffff);
+  border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
+
   font-size: 16px;
+  font-style: normal;
   font-weight: 300;
   line-height: 170%; /* 27.2px */
   letter-spacing: -0.16px;
-
-  background: var(--colors-white, #ffffff);
-  border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
 }
 
+/* style */
+
 .primary {
   background: var(--colors-teal-500, #1d9089);
   font-weight: 500;
   color: var(--colors-white, #ffffff);
-}
 
-.primary:hover {
-  background: var(--colors-teal-700, #17736e);
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 170%; /* 27.2px */
+  letter-spacing: -0.16px;
 }
 
 .primary-alt {
   background: var(--colors-white, #ffffff);
   color: var(--colors-teal-500, #1d9089);
-}
 
-.primary-alt:hover {
-  color: var(--colors-teal-800, #146560);
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 170%; /* 27.2px */
+  letter-spacing: -0.16px;
 }
 
 .secondary {
   color: var(--colors-cool-grey-600, #788492) !important;
   border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
   background: var(--colors-white, #fff);
-}
 
-.secondary:hover {
-  border: 1px solid var(--colors-teal-200, #a6d9d7) !important;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 170%; /* 27.2px */
+  letter-spacing: -0.16px;
 }
 
 .secondary-selected {
   background: var(--colors-white, #ffffff);
   color: var(--colors-teal-500, #1d9089);
   border: 1px solid var(--colors-teal-500, #1d9089);
+
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 170%; /* 27.2px */
+  letter-spacing: -0.16px;
 }
 
 .secondary-alt {
   color: var(--colors-teal-500, #1d9089);
   border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
   background: var(--colors-white, #fff);
+
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 170%; /* 27.2px */
+  letter-spacing: -0.16px;
+}
+
+/* large */
+
+.primary-large {
+  background: var(--colors-teal-500, #1d9089);
+  font-weight: 500;
+  color: var(--colors-white, #ffffff);
+
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 170%; /* 30.6px */
+  letter-spacing: -0.18px;
+}
+
+.primary-alt-large {
+  background: var(--colors-white, #ffffff);
+  color: var(--colors-teal-500, #1d9089);
+
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 170%; /* 30.6px */
+  letter-spacing: -0.18px;
+}
+
+.secondary-large {
+  color: var(--colors-cool-grey-600, #788492) !important;
+  border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
+  background: var(--colors-white, #fff);
+
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 170%; /* 30.6px */
+  letter-spacing: -0.18px;
+}
+
+.secondary-selected-large {
+  background: var(--colors-white, #ffffff);
+  color: var(--colors-teal-500, #1d9089);
+  border: 1px solid var(--colors-teal-500, #1d9089);
+
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 170%; /* 30.6px */
+  letter-spacing: -0.18px;
+}
+
+.secondary-alt-large {
+  color: var(--colors-teal-500, #1d9089);
+  border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
+  background: var(--colors-white, #fff);
+
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 170%; /* 30.6px */
+  letter-spacing: -0.18px;
+}
+
+/* state */
+
+.primary:hover {
+  background: var(--colors-teal-700, #17736e);
+}
+
+.primary-alt:hover {
+  color: var(--colors-teal-800, #146560);
+}
+
+.secondary:hover {
+  border: 1px solid var(--colors-teal-200, #a6d9d7) !important;
 }
 
 .secondary-alt:hover {