Change action buttons to show grayscale normally, and unfiltered when the matching popup is up.

src/components/logs.tsx

@@ -79,8 +79,6 @@ function Message(props: MessageProps) {
 
   return (
     <div key={message.id} className="lavender">
-      <ReviewCommentPopover turnNumber={-1} />
-      &nbsp;
       <Trans i18nKey="message">
         <Txt size={TxtSize.SMALL} value={player.name} />
         <Txt className="white" size={TxtSize.SMALL} value={message.content} />

src/components/playerGame.tsx

@@ -169,134 +169,138 @@ export default function PlayerGame(props: Props) {
         {...attributes}
       >
         <div className="flex items-center">
-          <div className="flex flex-column">
-            {player === selfPlayer && player === currentPlayer && (
-              <Tutorial placement="right" step={ITutorialStep.YOUR_TURN}>
-                <Txt
-                  className="yellow nt1"
-                  id="your-turn"
-                  size={TxtSize.XSMALL}
-                  value={game.status === IGameStatus.LOBBY ? t("youWillStart") : t("yourTurn")}
-                />
-              </Tutorial>
-            )}
-            <div className={classnames("flex items-center")}>
-              {player === currentPlayer && <Txt className="yellow mr2" size={TxtSize.SMALL} value="➤" />}
-              <PlayerName className="mr2" explicit={true} player={player} size={PlayerNameSize.MEDIUM} />
+          <div className="flex flex-wrap flex-row">
+            <div className="flex flex-column">
+              {player === selfPlayer && player === currentPlayer && (
+                <Tutorial placement="right" step={ITutorialStep.YOUR_TURN}>
+                  <Txt
+                    className="yellow nt1"
+                    id="your-turn"
+                    size={TxtSize.XSMALL}
+                    value={game.status === IGameStatus.LOBBY ? t("youWillStart") : t("yourTurn")}
+                  />
+                </Tutorial>
+              )}
+              <div className={classnames("flex items-center")}>
+                {player === currentPlayer && <Txt className="yellow mr2" size={TxtSize.SMALL} value="➤" />}
+                <PlayerName className="mr2" explicit={true} player={player} size={PlayerNameSize.MEDIUM} />
+              </div>
             </div>
-          </div>
-
-          {!self && player.reaction && (
-            <Txt
-              style={{
-                animation: "FontPulse 600ms 5",
-              }}
-              value={player.reaction}
-            />
-          )}
 
-          {self && !replay.cursor && (
-            <Popover
-              containerClassName="z-999"
-              content={({ position, childRect, popoverRect }) => {
-                return (
-                  <ArrowContainer
-                    arrowColor={POPOVER_ARROW_COLOR} // determined from .b--yellow
-                    arrowSize={10}
-                    arrowStyle={{ opacity: 1 }}
-                    childRect={childRect}
-                    popoverRect={popoverRect}
-                    position={position}
-                  >
-                    <ReactionsPopover
-                      style={POPOVER_CONTENT_STYLE}
-                      onClose={() => setReactionsOpen(false)}
-                      onReaction={onReaction}
+            {!self && player.reaction && (
+              <Txt
+                style={{
+                  animation: "FontPulse 600ms 5",
+                }}
+                value={player.reaction}
+              />
+            )}
+          </div>
+          <div>
+            {self && !replay.cursor && (
+              <Popover
+                containerClassName="z-999"
+                content={({ position, childRect, popoverRect }) => {
+                  return (
+                    <ArrowContainer
+                      arrowColor={POPOVER_ARROW_COLOR} // determined from .b--yellow
+                      arrowSize={10}
+                      arrowStyle={{ opacity: 1 }}
+                      childRect={childRect}
+                      popoverRect={popoverRect}
+                      position={position}
+                    >
+                      <ReactionsPopover
+                        style={POPOVER_CONTENT_STYLE}
+                        onClose={() => setReactionsOpen(false)}
+                        onReaction={onReaction}
+                      />
+                    </ArrowContainer>
+                  );
+                }}
+                isOpen={reactionsOpen}
+                padding={5}
+                onClickOutside={() => setReactionsOpen(false)}
+              >
+                <a
+                  className="pointer grow"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setReactionsOpen(!reactionsOpen);
+                    setChatOpen(false);
+                  }}
+                >
+                  {player.reaction && (
+                    <Txt
+                      style={{
+                        animation: "FontPulse 600ms 5",
+                      }}
+                      value={player.reaction}
                     />
-                  </ArrowContainer>
-                );
-              }}
-              isOpen={reactionsOpen}
-              padding={5}
-              onClickOutside={() => setReactionsOpen(false)}
-            >
-              <a
-                className="pointer grow"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setReactionsOpen(!reactionsOpen);
-                  setChatOpen(false);
+                  )}
+                  {!player.reaction && <Txt style={{ filter: "grayscale(100%)" }} value="︎︎︎︎😊" />}
+                </a>
+              </Popover>
+            )}
+
+            {self && !replay.cursor && game.status !== IGameStatus.LOBBY && (
+              <Popover
+                containerClassName="z-999"
+                content={({ position, childRect, popoverRect }) => {
+                  return (
+                    <ArrowContainer
+                      arrowColor={POPOVER_ARROW_COLOR} // determined from .b--yellow
+                      arrowSize={10}
+                      arrowStyle={{ opacity: 1 }}
+                      childRect={childRect}
+                      popoverRect={popoverRect}
+                      position={position}
+                    >
+                      {<ChatPopover style={POPOVER_CONTENT_STYLE} onClose={() => setChatOpen(false)} />}
+                    </ArrowContainer>
+                  );
                 }}
+                isOpen={chatOpen}
+                padding={5}
+                onClickOutside={() => setChatOpen(false)}
               >
-                {player.reaction && (
-                  <Txt
-                    style={{
-                      animation: "FontPulse 600ms 5",
-                    }}
-                    value={player.reaction}
-                  />
-                )}
-                {!player.reaction && <Txt style={{ filter: "grayscale(100%)" }} value="︎︎︎︎😊" />}
-              </a>
-            </Popover>
-          )}
+                <a
+                  className="pointer grow"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setChatOpen(!chatOpen);
+                    setReactionsOpen(false);
+                  }}
+                >
+                  <span className={classnames({ grayscale: !chatOpen })}>
+                    &nbsp;
+                    <Txt value="💬" />
+                  </span>
+                </a>
+              </Popover>
+            )}
 
-          {self && !replay.cursor && game.status !== IGameStatus.LOBBY && (
-            <Popover
-              containerClassName="z-999"
-              content={({ position, childRect, popoverRect }) => {
-                return (
-                  <ArrowContainer
-                    arrowColor={POPOVER_ARROW_COLOR} // determined from .b--yellow
-                    arrowSize={10}
-                    arrowStyle={{ opacity: 1 }}
-                    childRect={childRect}
-                    popoverRect={popoverRect}
-                    position={position}
-                  >
-                    {<ChatPopover style={POPOVER_CONTENT_STYLE} onClose={() => setChatOpen(false)} />}
-                  </ArrowContainer>
-                );
-              }}
-              isOpen={chatOpen}
-              padding={5}
-              onClickOutside={() => setChatOpen(false)}
-            >
+            {showReviewCommentPopover && (
+              <ReviewCommentPopover
+                handleKeyEvent={nothingInvoked() ? "c" : undefined}
+                initiallyGray={true}
+                showAlways={true}
+                turnNumber={game.turnsHistory.length}
+              />
+            )}
+
+            {active && selfPlayer && !self && !player.notified && !player.bot && (
               <a
-                className="pointer grow"
+                className="ml1 ml4-l pointer"
                 onClick={(e) => {
                   e.stopPropagation();
-                  setChatOpen(!chatOpen);
-                  setReactionsOpen(false);
+                  onNotifyPlayer(player);
                 }}
               >
-                <span>
-                  &nbsp;
-                  <Txt value="💬" />
-                </span>
+                <Txt value="🔔" />
               </a>
-            </Popover>
-          )}
-
-          {showReviewCommentPopover && (
-            <ReviewCommentPopover
-              handleKeyEvent={nothingInvoked() ? "c" : undefined}
-              showAlways={true}
-              turnNumber={game.turnsHistory.length}
-            />
-          )}
-
-          {active && selfPlayer && !self && !player.notified && !player.bot && (
-            <a
-              className="ml1 ml4-l pointer"
-              onClick={(e) => {
-                e.stopPropagation();
-                onNotifyPlayer(player);
-              }}
-            >
-              <Txt value="🔔" />
-            </a>
-          )}
+            )}
+          </div>
 
           {selected && (
             <a className="absolute top-0 right-0 mt2 mr3 pr6.5-m" onClick={() => onCloseArea()}>

src/components/replayViewer.tsx

@@ -1,14 +1,12 @@
 import Slider from "rc-slider";
 import { MarkObj } from "rc-slider/lib/Marks";
-import React, { useCallback, useState } from "react";
 import { ReadOnlyCommentMarker, ReviewCommentPopover, StaticReviewComment } from "~/components/reviewComments";
 import Button, { ButtonSize } from "~/components/ui/button";
 import Txt, { TxtSize } from "~/components/ui/txt";
 import { useGame, useSelfPlayer } from "~/hooks/game";
 import { useReplay } from "~/hooks/replay";
 import { isGameFinished } from "~/lib/game";
 import { findComment } from "~/lib/reviewComments";
-import { IReviewComment } from "~/lib/state";
 
 function Empty() {
   return <div className={"dn"} />;
@@ -115,7 +113,7 @@ export default function ReplayViewer(props: Props) {
             {isGameFinished(game) ? (
               <ReadOnlyCommentMarker size={15} />
             ) : (
-              <ReviewCommentPopover showAlways={true} turnNumber={replay.cursor} />
+              <ReviewCommentPopover position={"right"} showAlways={true} turnNumber={replay.cursor} />
             )}
           </div>
           <StaticReviewComment comment={comment} />

src/components/reviewComments.tsx

@@ -1,25 +1,15 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Popover, ArrowContainer } from "react-tiny-popover";
+import { Popover, ArrowContainer, PopoverPosition } from "react-tiny-popover";
 import TextFieldDialog from "~/components/textFieldDialog";
 import Txt from "~/components/ui/txt";
 import { useGame, useSelfPlayer } from "~/hooks/game";
 import { updateGame } from "~/lib/firebase";
 import { isGameFinished } from "~/lib/game";
 import { addOrReplaceReviewComment, findComment } from "~/lib/reviewComments";
 import { IGameStatus, IReviewComment } from "~/lib/state";
-import { SvgImage } from "~/components/ui/svgImage";
-
-import Pencil from "~/images/YellowPencil.svg";
-import Clear from "~/images/Clear.svg";
 import { POPOVER_ARROW_COLOR } from "~/components/popoverAppearance";
-
-export function ReviewCommentIcon(props: { size: number; placeholder?: boolean }) {
-  if (props.placeholder) {
-    return <SvgImage height={props.size} svg={Clear} width={props.size} />;
-  }
-  return <SvgImage height={props.size} svg={Pencil} width={props.size} />;
-}
+import classnames from "classnames";
 
 export function ReadOnlyCommentMarker(props: { size: number }) {
   const style = {
@@ -64,7 +54,7 @@ function EnterReviewComment(props: {
       onClose={(msg) => props.onClose(msg, props.afterTurnNumber)}
     >
       <div className={"tl"}>
-        {t("turn")} # {props.afterTurnNumber}
+        {t("turn")} #{props.afterTurnNumber}
       </div>
     </TextFieldDialog>
   );
@@ -76,18 +66,23 @@ export function StaticReviewComment(props: { comment: IReviewComment }) {
 
 export function ReviewCommentPopover({
   showAlways = false,
+  initiallyGray = false,
   turnNumber,
   handleKeyEvent,
+  position = "bottom",
 }: {
+  initiallyGray?: boolean;
   turnNumber: number;
   showAlways?: boolean;
   handleKeyEvent?: string;
+  position?: PopoverPosition;
 }) {
   const game = useGame();
   const selfPlayer = useSelfPlayer(game);
   const [reviewCommentOpenForTurn, setReviewCommentOpenForTurn] = useState<number | undefined>(undefined);
   const comment = findComment(game, selfPlayer?.id, turnNumber);
   const showIcon = showAlways || comment;
+  const showGrayIcon = initiallyGray && reviewCommentOpenForTurn === undefined;
   useEffect(() => {
     function checkKey(event: KeyboardEvent) {
       if (event.key === handleKeyEvent && game.status === IGameStatus.ONGOING) {
@@ -103,7 +98,11 @@ export function ReviewCommentPopover({
     }
   }, [game.status, turnNumber, handleKeyEvent, reviewCommentOpenForTurn]);
   const commentIsEditable = !isGameFinished(game);
+  if (!showIcon) {
+    return null;
+  }
 
+  console.debug(`Position: ${position}`);
   return (
     <Popover
       containerClassName="z-999"
@@ -139,7 +138,7 @@ export function ReviewCommentPopover({
         );
       }}
       isOpen={reviewCommentOpenForTurn !== undefined}
-      positions={"bottom"}
+      positions={position}
       onClickOutside={() => setReviewCommentOpenForTurn(undefined)}
     >
       <a
@@ -154,7 +153,7 @@ export function ReviewCommentPopover({
         }}
       >
         {!showIcon || commentIsEditable ? (
-          <ReviewCommentIcon placeholder={!showIcon} size={15} />
+          <Txt className={classnames("mirror", { grayscale: showGrayIcon })} value={"✏️"} />
         ) : (
           <ReadOnlyCommentMarker size={15} />
         )}

src/components/turn.tsx

@@ -139,12 +139,12 @@ export default function Turn(props: Props) {
 
   return (
     <div className="dib">
-      <ReviewCommentPopover showAlways={false} turnNumber={props.turnNumber} />
-      &nbsp;
-      {props.turnNumber ? <Txt className={classnames("di gray")}>{props.turnNumber}</Txt> : ""}
+      {props.turnNumber ? <Txt className={classnames("di gray", "turnNumber")}>{props.turnNumber}</Txt> : ""}
       <span>&nbsp;</span>
       <Txt className="di">
         {/* The player action and the card they have drawn, if applicable */}
+        <ReviewCommentPopover showAlways={false} turnNumber={props.turnNumber} />
+        &nbsp;
         {textualTurn}
         {drawnTurn}
       </Txt>