Stampy redesign article action buttons

app/components/Article/index.tsx

@@ -2,10 +2,9 @@ import {useState} from 'react'
 import KeepGoing from '~/components/Article/KeepGoing'
 import CopyIcon from '~/components/icons-generated/Copy'
 import EditIcon from '~/components/icons-generated/Pencil'
-import ThumbUpIcon from '~/components/icons-generated/ThumbUp'
-import ThumbDownIcon from '~/components/icons-generated/ThumbDown'
 import Button, {CompositeButton} from '~/components/Button'
-import type {Question, Glossary} from '~/server-utils/stampy'
+import {Action, ActionType} from '~/routes/questions.actions'
+import type {Glossary, Question} from '~/server-utils/stampy'
 import Contents from './Contents'
 import './article.css'
 
@@ -34,15 +33,9 @@ const ArticleFooter = (question: Question) => {
         </div>
         <span>Did this page help you?</span>
 
-        <CompositeButton>
-          <Button className="secondary" action={() => alert('Like')}>
-            <ThumbUpIcon />
-            <span className="teal-500">Yes</span>
-          </Button>
-          <Button className="secondary" action={() => alert('Dislike')}>
-            <ThumbDownIcon />
-            <span className="teal-500">No</span>
-          </Button>
+        <CompositeButton className="flex-container">
+          <Action pageid={question.pageid} showText={true} actionType={ActionType.HELPFUL} />
+          <Action pageid={question.pageid} showText={true} actionType={ActionType.UNHELPFUL} />
         </CompositeButton>
       </div>
     )

app/components/Button/button.css

@@ -55,6 +55,7 @@
   box-shadow: 0px 16px 40px rgba(175, 183, 194, 0.2);
 }
 
+.composite-button > form .button,
 .composite-button > .button {
   border-radius: 0;
   border-radius: 0;
@@ -63,13 +64,15 @@
   box-shadow: revert;
 }
 
+.composite-button > form:first-child .button,
 .composite-button > .button:first-child {
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
   border-left-width: 1px;
   border-right: 1px solid transparent;
 }
 
+.composite-button > form:last-child .button,
 .composite-button > .button:last-child {
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
@@ -78,10 +81,12 @@
 }
 
 /* Make sure the first button doesn't have a negative margin */
+.composite-button > form:first-child .button,
 .composite-button > .button:first-child {
   margin-left: 0;
 }
 
+.composite-button form .button:hover,
 .composite-button .button:hover {
   border-width: 1px;
 }

app/components/Button/index.tsx

@@ -26,8 +26,12 @@ const Button = ({children, action, tooltip, icon, className}: ButtonProps) => {
   )
 }
 
-export const CompositeButton = ({children}: {children: ReactNode}) => (
-  <div className="composite-button">{children}</div>
+export interface CompositeButtonProps {
+  children: ReactNode
+  className?: string
+}
+export const CompositeButton = ({children, className}: CompositeButtonProps) => (
+  <div className={`composite-button ${className || ''}`}>{children}</div>
 )
 
 export default Button

app/newRoot.css

@@ -412,3 +412,10 @@ a:not(:hover, :focus-visible) {
   justify-content: flex-start;
   gap: 10.9vw;
 }
+
+.icon-link path {
+  stroke: var(--colors-cool-grey-600);
+}
+.icon-link.focused path {
+  stroke: var(--colors-teal-600);
+}

app/routes/questions.actions.tsx

@@ -3,16 +3,10 @@ import type {ActionFunctionArgs} from '@remix-run/cloudflare'
 import {Form, useSearchParams} from '@remix-run/react'
 import {redirect, json} from '@remix-run/cloudflare'
 import {makeColumnIncrementer} from '~/server-utils/stampy'
-import {
-  DarkLight,
-  Edit,
-  Flag,
-  Followup,
-  Hide,
-  Like,
-  Search,
-  Dislike,
-} from '~/components/icons-generated'
+import ThumbUpIcon from '~/components/icons-generated/ThumbUp'
+import ThumbDownIcon from '~/components/icons-generated/ThumbDown'
+import Button from '~/components/Button'
+import {DarkLight, Edit, Flag, Followup, Hide, Like, Search} from '~/components/icons-generated'
 
 export enum ActionType {
   DARKLIGHT = 'darkLight',
@@ -56,13 +50,13 @@ const actions = {
     handler: makeColumnIncrementer('Request Count'),
   },
   helpful: {
-    Icon: Like,
-    title: 'Helpful',
+    Icon: ThumbUpIcon,
+    title: 'Yes',
     handler: makeColumnIncrementer('Helpful'),
   },
   unhelpful: {
-    Icon: Dislike,
-    title: 'Unhelpful',
+    Icon: ThumbDownIcon,
+    title: 'No',
     handler: makeColumnIncrementer('Unhelpful'),
   },
   hide: {
@@ -147,7 +141,7 @@ export const Action = ({pageid, actionType, showText = true, children, ...props}
     if (response.ok !== true) setActionTaken(!actionTaken)
   }
 
-  const className = 'icon-link' + (actionTaken ? ' focused' : '')
+  const className = 'secondary icon-link' + (actionTaken ? ' focused' : '')
 
   return (
     <Form
@@ -163,10 +157,10 @@ export const Action = ({pageid, actionType, showText = true, children, ...props}
       <input type="hidden" name="incBy" value={actionTaken ? -1 : 1} />
       <input type="hidden" name="stateString" value={stateString} />
       {children}
-      <button className={className} title={title} type="button">
+      <Button className={className}>
         <Icon />
-        {showText && title}
-      </button>
+        <span className={actionTaken ? 'teal-500' : 'grey'}> {showText && title}</span>
+      </Button>
     </Form>
   )
 }