feat: only allow thumbs where it makes sense

src/components/Thumbs.jsx

@@ -8,9 +8,10 @@ const Thumbs = ({ likes, dislikes, myVote, onLike, onDislike, readOnly }) => {
         <button
           className={classNames("flex items-center space-x-1", {
             "cursor-pointer": !readOnly,
-            "cursor-default": readOnly,
+            "cursor-not-allowed": readOnly,
             "text-blue-300": myVote === "like",
-            "text-grey-200 hover:text-blue-300": myVote !== "like",
+            "text-grey-200 ": myVote !== "like",
+            "hover:text-blue-300": myVote !== "like" && !readOnly,
           })}
           disabled={readOnly}
           onClick={onLike}
@@ -21,9 +22,10 @@ const Thumbs = ({ likes, dislikes, myVote, onLike, onDislike, readOnly }) => {
         <button
           className={classNames("flex items-center space-x-1", {
             "cursor-pointer": !readOnly,
-            "cursor-default": readOnly,
+            "cursor-not-allowed": readOnly,
             "text-red-600": myVote === "dislike",
-            "text-grey-200 hover:text-red-600": myVote !== "dislike",
+            "text-grey-200": myVote !== "dislike",
+            "hover:text-red-600": myVote !== "dislike" && !readOnly,
           })}
           disabled={readOnly}
           onClick={onDislike}

src/components/posts/Post.jsx

@@ -159,6 +159,9 @@ const Post = ({
     __html: content,
   };
 
+  const thumbsEnabled =
+    canThumb && !archived && (type === "post" || state === "announced");
+
   return (
     <div className={wrapperClassName} ref={ref}>
       <img
@@ -196,7 +199,7 @@ const Post = ({
               <Thumbs
                 likes={ranking.likes}
                 dislikes={ranking.dislikes}
-                readOnly={!canThumb}
+                readOnly={!thumbsEnabled}
                 onLike={onLike}
                 onDislike={onDislike}
                 myVote={ranking.myVote}