WIP Modal hover check on starred messages

Co-Authored-By: Tom Richards <[email protected]>

client/src/itemDisplay.tsx

@@ -156,7 +156,7 @@ export const ItemDisplay = ({
             margin-left: 2px;
           `}
         >
-          <StarredControl itemId={item.id} isStarred={item.isStarred} />
+          <StarredControl item={item} />
         </div>
       )}
       <div

client/src/modal.tsx

@@ -79,7 +79,7 @@ export const useConfirmModal = (
       <ModalBackground />
       <div
         css={css`
-          position: absolute;
+          position: fixed;
           left: ${space[2]}px;
           right: ${space[2]}px;
           bottom: 30px;

client/src/starred/starredControl.tsx

@@ -1,42 +1,71 @@
 import { useMutation } from "@apollo/client";
 import { css } from "@emotion/react";
-import { neutral } from "@guardian/source-foundations";
+import { neutral, space } from "@guardian/source-foundations";
 import { SvgStar, SvgStarOutline } from "@guardian/source-react-components";
 import React from "react";
+import { Item } from "shared/graphql/graphql";
+import { composer } from "../../colours";
 import { gqlSetIsStarred } from "../../gql";
+import { useConfirmModal } from "../modal";
+import { scrollbarsCss } from "../styling";
 
 export const STARRED_CONTROL_CLASS_NAME = "starred-control";
 
 interface StarredControlProps {
-  itemId: string;
-  isStarred: boolean;
+  item: Item;
 }
 
-export const StarredControl = ({ itemId, isStarred }: StarredControlProps) => {
+export const StarredControl = ({
+  item: { id, isStarred, message },
+}: StarredControlProps) => {
   const [setIsStarred] = useMutation(gqlSetIsStarred);
+  const [confirmModalElement, confirm] = useConfirmModal(
+    <React.Fragment>
+      <div>
+        Are you sure you want
+        <br /> to <strong>{isStarred ? "unstar" : "star"}</strong> this item?
+      </div>
+      <div
+        css={css`
+          padding: ${space[2]}px;
+          font-style: italic;
+          max-height: 55px;
+          overflow-y: auto;
+          ${scrollbarsCss(composer.primary["100"])}
+        `}
+      >
+        {message}
+      </div>
+    </React.Fragment>
+  );
   const toggleIsStarred = () => {
-    //TODO consider modal here to confirm (in both directions)
-    setIsStarred({ variables: { itemId, isStarred: !isStarred } });
+    confirm().then((isConfirmed) => {
+      isConfirmed &&
+        setIsStarred({ variables: { itemId: id, isStarred: !isStarred } });
+    });
   };
   return (
-    <button
-      onClick={toggleIsStarred}
-      title={isStarred ? "Unstar" : "Star"}
-      className={STARRED_CONTROL_CLASS_NAME}
-      css={css`
-        // :hover in ItemDisplay controls display
-        border-radius: 50%;
-        border: none;
-        width: 24px;
-        height: 24px;
-        padding: 2px;
-        cursor: pointer;
-        &:hover {
-          background-color: ${neutral[86]};
-        }
-      `}
-    >
-      {isStarred ? <SvgStar /> : <SvgStarOutline />}
-    </button>
+    <div>
+      {confirmModalElement}
+      <button
+        onClick={toggleIsStarred}
+        title={isStarred ? "Unstar" : "Star"}
+        className={STARRED_CONTROL_CLASS_NAME}
+        css={css`
+          // :hover in ItemDisplay controls display
+          border-radius: 50%;
+          border: none;
+          width: 24px;
+          height: 24px;
+          padding: 2px;
+          cursor: pointer;
+          &:hover {
+            background-color: ${neutral[86]};
+          }
+        `}
+      >
+        {isStarred ? <SvgStar /> : <SvgStarOutline />}
+      </button>
+    </div>
   );
 };

client/src/starred/starredMessages.tsx

@@ -24,14 +24,11 @@ const StarredItemDisplay = ({
 }) => {
   const user = userLookup?.[item.userEmail];
   const userDisplayName = user
-    ? `${user.firstName} ${user.lastName}`
+    ? `${user.firstName} ${user.lastName}` // TODO: Non-breaking space
     : item.userEmail;
   return (
     <div
       css={css`
-        display: flex;
-        align-items: flex-end;
-        gap: ${space[1]}px;
         color: ${neutral[20]};
         cursor: ${maybeScrollToItem ? "pointer" : "initial"};
         position: relative;
@@ -54,6 +51,7 @@ const StarredItemDisplay = ({
         css={css`
           color: ${neutral[0]};
           ${agateSans.medium()};
+          white-space: pre-line;
         `}
       >
         {item.message}
@@ -87,6 +85,9 @@ const StarredMessages = ({
           border-radius: 6px;
           background-color: ${pinboard[800]};
           margin-bottom: 20px;
+          display: flex;
+          flex-direction: column;
+          gap: ${space[3]}px;
         `}
       >
         {maybeStarredMessages.length === 0 && (
@@ -102,8 +103,9 @@ const StarredMessages = ({
             </strong>
             <br />
             Click here to open Pinboard, then simply send a message and then
-            click the <SvgStar size="xsmall" /> to the left of your message. You
-            can also star other&apos;s messages if you think they&apos;re
+            click the <SvgStar size="xsmall" /> to the left of your message.
+            <br />
+            You can also star other&apos;s messages if you think they&apos;re
             important.
           </span>
         )}