From db55f7b8ab636e6ef39a9448076dbc64c85fedc8 Mon Sep 17 00:00:00 2001
From: Buddy-web3 <0buddy.ne@gmail.com>
Date: Tue, 13 Feb 2024 13:42:26 +0200
Subject: [PATCH 1/5] feat: connecting article action buttons

---
 app/components/Article/index.tsx | 57 +++++++++++++++++++++++++++++---
 app/components/Button/button.css |  1 +
 2 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/app/components/Article/index.tsx b/app/components/Article/index.tsx
index a96dca06..ae0d3c6f 100644
--- a/app/components/Article/index.tsx
+++ b/app/components/Article/index.tsx
@@ -1,11 +1,14 @@
-import {useRef, useState, useEffect} from 'react'
+import {MouseEvent, useCallback, useEffect, useRef, useState} from 'react'
 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, PageId, GlossaryEntry} from '~/server-utils/stampy'
+import type {Glossary, GlossaryEntry, PageId, Question} from '~/server-utils/stampy'
 import './article.css'
+import {forEach} from "lodash";
+import {Simulate} from "react-dom/test-utils";
+import keyUp = Simulate.keyUp;
 
 const footnoteHTML = (el: HTMLDivElement, e: HTMLAnchorElement): string | null => {
   const id = e.getAttribute('href') || ''
@@ -148,6 +151,52 @@ const ArticleFooter = (question: Question) => {
       month: 'short',
     })
 
+  const actionIds = {helpful:false, unhelpful:false};
+
+  const loadActionTaken = () => {
+    forEach(actionIds, (value, key) => {
+        try {
+            actionIds[key]= localStorage.getItem(`${question.pageid}-${key}`) === 'true';
+        } catch (e) {
+            // This will happen when local storage is disabled
+            actionIds[key]= false;
+        }
+    })
+  }
+
+  const actionParams = (actionType) => {
+    return new URLSearchParams({
+      pageid:question.pageid,
+      actionTaken: actionIds[actionType].toString(),
+      action: actionType,
+    })
+  }
+  const switchAction = (actionType) => {
+    if(actionIds[actionType]) {
+      actionIds[actionType==="helpful"?'unhelpful':'helpful'] = false;
+    }
+  }
+  const handleAction = async (actionTaken) => {
+    actionIds[actionTaken] = !actionIds[actionTaken];
+    switchAction(actionTaken);
+    const searchParams = actionParams(actionTaken);
+    const response = await fetch('/questions/actions', {method: 'POST', body: searchParams});
+
+    if (response.ok !== true){
+      actionIds[actionTaken] = !actionIds[actionTaken];
+      switchAction(actionTaken);
+      return
+    }
+    try {
+      forEach(actionIds, (value, key) => {
+        localStorage.setItem(`${question.pageid}-${key}`, actionIds[key].toString());
+      })
+    } catch (e) {
+    }
+  }
+
+  loadActionTaken()
+
   return (
     <div className="footer-comtainer">
       {date && <div className="grey"> {`Updated ${date}`}</div>}
@@ -159,11 +208,11 @@ const ArticleFooter = (question: Question) => {
       <span>Did this page help you?</span>
 
       <CompositeButton>
-        <Button className="secondary" action={() => alert('Like')}>
+        <Button className={["secondary", actionIds["helpful"]?'focused':''].join(' ')} action={() => handleAction("helpful")}>
           <ThumbUpIcon />
           <span className="teal-500">Yes</span>
         </Button>
-        <Button className="secondary" action={() => alert('Dislike')}>
+        <Button className={["secondary", actionIds["unhelpful"]?'focused':''].join(' ')} action={() => handleAction("unhelpful")}>
           <ThumbDownIcon />
           <span className="teal-500">No</span>
         </Button>
diff --git a/app/components/Button/button.css b/app/components/Button/button.css
index ef2b067d..e833f107 100644
--- a/app/components/Button/button.css
+++ b/app/components/Button/button.css
@@ -36,6 +36,7 @@
   background: var(--colors-white, #fff);
 }
 
+.secondary.focused,
 .secondary:hover {
   border: 1px solid var(--colors-teal-200, #a6d9d7) !important;
 }

From e65fe0af34a1265dcaf5726dc5c4b5aee982eaa3 Mon Sep 17 00:00:00 2001
From: Buddy-web3 <0buddy.ne@gmail.com>
Date: Tue, 13 Feb 2024 13:42:41 +0200
Subject: [PATCH 2/5] feat: connecting article action buttons

---
 app/components/Article/index.tsx | 57 +++++++++++++++++---------------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/app/components/Article/index.tsx b/app/components/Article/index.tsx
index ae0d3c6f..341b97ea 100644
--- a/app/components/Article/index.tsx
+++ b/app/components/Article/index.tsx
@@ -6,9 +6,9 @@ import ThumbDownIcon from '~/components/icons-generated/ThumbDown'
 import Button, {CompositeButton} from '~/components/Button'
 import type {Glossary, GlossaryEntry, PageId, Question} from '~/server-utils/stampy'
 import './article.css'
-import {forEach} from "lodash";
-import {Simulate} from "react-dom/test-utils";
-import keyUp = Simulate.keyUp;
+import {forEach} from 'lodash'
+import {Simulate} from 'react-dom/test-utils'
+import keyUp = Simulate.keyUp
 
 const footnoteHTML = (el: HTMLDivElement, e: HTMLAnchorElement): string | null => {
   const id = e.getAttribute('href') || ''
@@ -151,48 +151,47 @@ const ArticleFooter = (question: Question) => {
       month: 'short',
     })
 
-  const actionIds = {helpful:false, unhelpful:false};
+  const actionIds = {helpful: false, unhelpful: false}
 
   const loadActionTaken = () => {
     forEach(actionIds, (value, key) => {
-        try {
-            actionIds[key]= localStorage.getItem(`${question.pageid}-${key}`) === 'true';
-        } catch (e) {
-            // This will happen when local storage is disabled
-            actionIds[key]= false;
-        }
+      try {
+        actionIds[key] = localStorage.getItem(`${question.pageid}-${key}`) === 'true'
+      } catch (e) {
+        // This will happen when local storage is disabled
+        actionIds[key] = false
+      }
     })
   }
 
   const actionParams = (actionType) => {
     return new URLSearchParams({
-      pageid:question.pageid,
+      pageid: question.pageid,
       actionTaken: actionIds[actionType].toString(),
       action: actionType,
     })
   }
   const switchAction = (actionType) => {
-    if(actionIds[actionType]) {
-      actionIds[actionType==="helpful"?'unhelpful':'helpful'] = false;
+    if (actionIds[actionType]) {
+      actionIds[actionType === 'helpful' ? 'unhelpful' : 'helpful'] = false
     }
   }
   const handleAction = async (actionTaken) => {
-    actionIds[actionTaken] = !actionIds[actionTaken];
-    switchAction(actionTaken);
-    const searchParams = actionParams(actionTaken);
-    const response = await fetch('/questions/actions', {method: 'POST', body: searchParams});
-
-    if (response.ok !== true){
-      actionIds[actionTaken] = !actionIds[actionTaken];
-      switchAction(actionTaken);
+    actionIds[actionTaken] = !actionIds[actionTaken]
+    switchAction(actionTaken)
+    const searchParams = actionParams(actionTaken)
+    const response = await fetch('/questions/actions', {method: 'POST', body: searchParams})
+
+    if (response.ok !== true) {
+      actionIds[actionTaken] = !actionIds[actionTaken]
+      switchAction(actionTaken)
       return
     }
     try {
       forEach(actionIds, (value, key) => {
-        localStorage.setItem(`${question.pageid}-${key}`, actionIds[key].toString());
+        localStorage.setItem(`${question.pageid}-${key}`, actionIds[key].toString())
       })
-    } catch (e) {
-    }
+    } catch (e) {}
   }
 
   loadActionTaken()
@@ -208,11 +207,17 @@ const ArticleFooter = (question: Question) => {
       <span>Did this page help you?</span>
 
       <CompositeButton>
-        <Button className={["secondary", actionIds["helpful"]?'focused':''].join(' ')} action={() => handleAction("helpful")}>
+        <Button
+          className={['secondary', actionIds['helpful'] ? 'focused' : ''].join(' ')}
+          action={() => handleAction('helpful')}
+        >
           <ThumbUpIcon />
           <span className="teal-500">Yes</span>
         </Button>
-        <Button className={["secondary", actionIds["unhelpful"]?'focused':''].join(' ')} action={() => handleAction("unhelpful")}>
+        <Button
+          className={['secondary', actionIds['unhelpful'] ? 'focused' : ''].join(' ')}
+          action={() => handleAction('unhelpful')}
+        >
           <ThumbDownIcon />
           <span className="teal-500">No</span>
         </Button>

From 16931ea365e943e5ef2efcc6065b9bac23ca8a07 Mon Sep 17 00:00:00 2001
From: Buddy-web3 <0buddy.ne@gmail.com>
Date: Wed, 14 Feb 2024 09:10:14 +0200
Subject: [PATCH 3/5] feat: connecting article action buttons

---
 app/components/Article/index.tsx | 78 ++++++++------------------------
 app/components/Button/button.css |  6 ++-
 app/components/Button/index.tsx  | 12 +++--
 app/newRoot.css                  |  7 +++
 app/routes/questions.actions.tsx | 23 ++++++----
 5 files changed, 54 insertions(+), 72 deletions(-)

diff --git a/app/components/Article/index.tsx b/app/components/Article/index.tsx
index 341b97ea..1545e96d 100644
--- a/app/components/Article/index.tsx
+++ b/app/components/Article/index.tsx
@@ -4,6 +4,7 @@ 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 {Action, ActionType} from '~/routes/questions.actions'
 import type {Glossary, GlossaryEntry, PageId, Question} from '~/server-utils/stampy'
 import './article.css'
 import {forEach} from 'lodash'
@@ -151,51 +152,6 @@ const ArticleFooter = (question: Question) => {
       month: 'short',
     })
 
-  const actionIds = {helpful: false, unhelpful: false}
-
-  const loadActionTaken = () => {
-    forEach(actionIds, (value, key) => {
-      try {
-        actionIds[key] = localStorage.getItem(`${question.pageid}-${key}`) === 'true'
-      } catch (e) {
-        // This will happen when local storage is disabled
-        actionIds[key] = false
-      }
-    })
-  }
-
-  const actionParams = (actionType) => {
-    return new URLSearchParams({
-      pageid: question.pageid,
-      actionTaken: actionIds[actionType].toString(),
-      action: actionType,
-    })
-  }
-  const switchAction = (actionType) => {
-    if (actionIds[actionType]) {
-      actionIds[actionType === 'helpful' ? 'unhelpful' : 'helpful'] = false
-    }
-  }
-  const handleAction = async (actionTaken) => {
-    actionIds[actionTaken] = !actionIds[actionTaken]
-    switchAction(actionTaken)
-    const searchParams = actionParams(actionTaken)
-    const response = await fetch('/questions/actions', {method: 'POST', body: searchParams})
-
-    if (response.ok !== true) {
-      actionIds[actionTaken] = !actionIds[actionTaken]
-      switchAction(actionTaken)
-      return
-    }
-    try {
-      forEach(actionIds, (value, key) => {
-        localStorage.setItem(`${question.pageid}-${key}`, actionIds[key].toString())
-      })
-    } catch (e) {}
-  }
-
-  loadActionTaken()
-
   return (
     <div className="footer-comtainer">
       {date && <div className="grey"> {`Updated ${date}`}</div>}
@@ -206,21 +162,23 @@ const ArticleFooter = (question: Question) => {
       </div>
       <span>Did this page help you?</span>
 
-      <CompositeButton>
-        <Button
-          className={['secondary', actionIds['helpful'] ? 'focused' : ''].join(' ')}
-          action={() => handleAction('helpful')}
-        >
-          <ThumbUpIcon />
-          <span className="teal-500">Yes</span>
-        </Button>
-        <Button
-          className={['secondary', actionIds['unhelpful'] ? 'focused' : ''].join(' ')}
-          action={() => handleAction('unhelpful')}
-        >
-          <ThumbDownIcon />
-          <span className="teal-500">No</span>
-        </Button>
+      <CompositeButton style={{display: 'flex'}}>
+        <Action pageid={question.pageid} showText={true} actionType={ActionType.HELPFUL} />
+        <Action pageid={question.pageid} showText={true} actionType={ActionType.UNHELPFUL} />
+        {/*<Button*/}
+        {/*  className={'secondary'}*/}
+        {/*  action={() => alert('helpful')}*/}
+        {/*>*/}
+        {/*  <ThumbUpIcon />*/}
+        {/*  <span className="teal-500">Yes</span>*/}
+        {/*</Button>*/}
+        {/*<Button*/}
+        {/*  className={'secondary'}*/}
+        {/*  action={() => alert('unhelpful')}*/}
+        {/*>*/}
+        {/*  <ThumbDownIcon />*/}
+        {/*  <span className="teal-500">No</span>*/}
+        {/*</Button>*/}
       </CompositeButton>
     </div>
   )
diff --git a/app/components/Button/button.css b/app/components/Button/button.css
index e833f107..708edab4 100644
--- a/app/components/Button/button.css
+++ b/app/components/Button/button.css
@@ -36,7 +36,6 @@
   background: var(--colors-white, #fff);
 }
 
-.secondary.focused,
 .secondary:hover {
   border: 1px solid var(--colors-teal-200, #a6d9d7) !important;
 }
@@ -56,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;
@@ -64,6 +64,7 @@
   box-shadow: revert;
 }
 
+.composite-button > form:first-child .button,
 .composite-button > .button:first-child {
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
@@ -71,6 +72,7 @@
   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;
@@ -79,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;
 }
diff --git a/app/components/Button/index.tsx b/app/components/Button/index.tsx
index d051d7ef..b6e618e5 100644
--- a/app/components/Button/index.tsx
+++ b/app/components/Button/index.tsx
@@ -1,4 +1,4 @@
-import {ReactNode} from 'react'
+import {CSSProperties, ReactNode} from 'react'
 import {Link} from '@remix-run/react'
 import './button.css'
 
@@ -26,8 +26,14 @@ 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
+  style?: CSSProperties
+}
+export const CompositeButton = ({children, style}: CompositeButtonProps) => (
+  <div className="composite-button" style={style}>
+    {children}
+  </div>
 )
 
 export default Button
diff --git a/app/newRoot.css b/app/newRoot.css
index 347d0286..29929840 100644
--- a/app/newRoot.css
+++ b/app/newRoot.css
@@ -411,3 +411,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);
+}
diff --git a/app/routes/questions.actions.tsx b/app/routes/questions.actions.tsx
index 57c7b8ae..c92fbcc4 100644
--- a/app/routes/questions.actions.tsx
+++ b/app/routes/questions.actions.tsx
@@ -3,6 +3,9 @@ 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 ThumbUpIcon from '~/components/icons-generated/ThumbUp'
+import ThumbDownIcon from '~/components/icons-generated/ThumbDown'
+import Button, {CompositeButton} from '~/components/Button'
 import {
   DarkLight,
   Edit,
@@ -56,13 +59,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: {
@@ -163,10 +166,14 @@ 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">
-        <Icon />
-        {showText && title}
-      </button>
+      <Button className={'secondary'} action={() => alert('helpful')}>
+        <Icon className={className} />
+        <span className="teal-500"> {showText && title}</span>
+      </Button>
+      {/*<button className={className} title={title} type="button">*/}
+      {/*  <Icon />*/}
+      {/*  {showText && title}*/}
+      {/*</button>*/}
     </Form>
   )
 }

From f2ec7ea0f31aab7543542260285de145b9284619 Mon Sep 17 00:00:00 2001
From: Buddy-web3 <0buddy.ne@gmail.com>
Date: Wed, 14 Feb 2024 09:11:01 +0200
Subject: [PATCH 4/5] feat: connecting article action buttons

---
 app/components/Article/index.tsx | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/app/components/Article/index.tsx b/app/components/Article/index.tsx
index 1545e96d..0516ef7d 100644
--- a/app/components/Article/index.tsx
+++ b/app/components/Article/index.tsx
@@ -165,20 +165,6 @@ const ArticleFooter = (question: Question) => {
       <CompositeButton style={{display: 'flex'}}>
         <Action pageid={question.pageid} showText={true} actionType={ActionType.HELPFUL} />
         <Action pageid={question.pageid} showText={true} actionType={ActionType.UNHELPFUL} />
-        {/*<Button*/}
-        {/*  className={'secondary'}*/}
-        {/*  action={() => alert('helpful')}*/}
-        {/*>*/}
-        {/*  <ThumbUpIcon />*/}
-        {/*  <span className="teal-500">Yes</span>*/}
-        {/*</Button>*/}
-        {/*<Button*/}
-        {/*  className={'secondary'}*/}
-        {/*  action={() => alert('unhelpful')}*/}
-        {/*>*/}
-        {/*  <ThumbDownIcon />*/}
-        {/*  <span className="teal-500">No</span>*/}
-        {/*</Button>*/}
       </CompositeButton>
     </div>
   )

From 381ec2ea571200323334742d02b2b874ac769d71 Mon Sep 17 00:00:00 2001
From: Daniel O'Connell <github@ahiru.pl>
Date: Wed, 14 Feb 2024 11:25:06 +0100
Subject: [PATCH 5/5] fix linting errors

---
 app/components/Article/index.tsx | 20 ++++++++------------
 app/components/Button/index.tsx  | 10 ++++------
 app/routes/questions.actions.tsx | 25 ++++++-------------------
 3 files changed, 18 insertions(+), 37 deletions(-)

diff --git a/app/components/Article/index.tsx b/app/components/Article/index.tsx
index 5f84d973..f69ff218 100644
--- a/app/components/Article/index.tsx
+++ b/app/components/Article/index.tsx
@@ -1,17 +1,12 @@
-import {MouseEvent, useCallback, useEffect, useRef, useState} from 'react'
+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 {Action, ActionType} from '~/routes/questions.actions'
-import type {Glossary, GlossaryEntry, PageId, Question} from '~/server-utils/stampy'
+import type {Glossary, Question} from '~/server-utils/stampy'
 import Contents from './Contents'
 import './article.css'
-import {forEach} from 'lodash'
-import {Simulate} from 'react-dom/test-utils'
-import keyUp = Simulate.keyUp
 
 const isLoading = ({text}: Question) => !text || text === 'Loading...'
 
@@ -38,11 +33,12 @@ const ArticleFooter = (question: Question) => {
         </div>
         <span>Did this page help you?</span>
 
-      <CompositeButton style={{display: 'flex'}}>
-        <Action pageid={question.pageid} showText={true} actionType={ActionType.HELPFUL} />
-        <Action pageid={question.pageid} showText={true} actionType={ActionType.UNHELPFUL} />
-      </CompositeButton>
-    </div>
+        <CompositeButton className="flex-container">
+          <Action pageid={question.pageid} showText={true} actionType={ActionType.HELPFUL} />
+          <Action pageid={question.pageid} showText={true} actionType={ActionType.UNHELPFUL} />
+        </CompositeButton>
+      </div>
+    )
   )
 }
 
diff --git a/app/components/Button/index.tsx b/app/components/Button/index.tsx
index b6e618e5..cf763c79 100644
--- a/app/components/Button/index.tsx
+++ b/app/components/Button/index.tsx
@@ -1,4 +1,4 @@
-import {CSSProperties, ReactNode} from 'react'
+import {ReactNode} from 'react'
 import {Link} from '@remix-run/react'
 import './button.css'
 
@@ -28,12 +28,10 @@ const Button = ({children, action, tooltip, icon, className}: ButtonProps) => {
 
 export interface CompositeButtonProps {
   children: ReactNode
-  style?: CSSProperties
+  className?: string
 }
-export const CompositeButton = ({children, style}: CompositeButtonProps) => (
-  <div className="composite-button" style={style}>
-    {children}
-  </div>
+export const CompositeButton = ({children, className}: CompositeButtonProps) => (
+  <div className={`composite-button ${className || ''}`}>{children}</div>
 )
 
 export default Button
diff --git a/app/routes/questions.actions.tsx b/app/routes/questions.actions.tsx
index c92fbcc4..79a46e8d 100644
--- a/app/routes/questions.actions.tsx
+++ b/app/routes/questions.actions.tsx
@@ -5,17 +5,8 @@ import {redirect, json} from '@remix-run/cloudflare'
 import {makeColumnIncrementer} from '~/server-utils/stampy'
 import ThumbUpIcon from '~/components/icons-generated/ThumbUp'
 import ThumbDownIcon from '~/components/icons-generated/ThumbDown'
-import Button, {CompositeButton} from '~/components/Button'
-import {
-  DarkLight,
-  Edit,
-  Flag,
-  Followup,
-  Hide,
-  Like,
-  Search,
-  Dislike,
-} from '~/components/icons-generated'
+import Button from '~/components/Button'
+import {DarkLight, Edit, Flag, Followup, Hide, Like, Search} from '~/components/icons-generated'
 
 export enum ActionType {
   DARKLIGHT = 'darkLight',
@@ -150,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
@@ -166,14 +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={'secondary'} action={() => alert('helpful')}>
-        <Icon className={className} />
-        <span className="teal-500"> {showText && title}</span>
+      <Button className={className}>
+        <Icon />
+        <span className={actionTaken ? 'teal-500' : 'grey'}> {showText && title}</span>
       </Button>
-      {/*<button className={className} title={title} type="button">*/}
-      {/*  <Icon />*/}
-      {/*  {showText && title}*/}
-      {/*</button>*/}
     </Form>
   )
 }