move the explainer note for Imaging Orders to be more prominent

Author: twrichards

client/src/grid/octopusImagingOrderDisplay.tsx

@@ -5,7 +5,7 @@ import {
   IMAGINE_REQUEST_TYPES,
   IMAGING_REQUEST_ITEM_TYPE,
   ImagingRequestType,
-} from "../../../shared/octopusImaging";
+} from "shared/octopusImaging";
 import { agateSans } from "../../fontNormaliser";
 import { useGlobalStateContext } from "../globalState";
 import { space } from "@guardian/source-foundations";
@@ -22,39 +22,19 @@ export const OctopusImagingOrderDisplay = ({
   return (
     <div
       css={css`
-        ${agateSans.xxsmall()}
+        display: flex;
+        flex-direction: column;
+        gap: ${space[1]}px;
+        ${agateSans.xxsmall()};
       `}
     >
       <h3
         css={css`
-          margin: 0 0 ${space[1]}px;
+          margin: 0;
         `}
       >
         Imaging Order
       </h3>
-      {isEditable && (
-        <div
-          css={css`
-            padding-right: 25px;
-          `}
-        >
-          <em>
-            {
-              "Don't forget to provide some notes to help Imaging team to understand your request"
-            }
-          </em>
-        </div>
-      )}
-      <img
-        src={payload.thumbnail}
-        css={css`
-          object-fit: contain;
-          width: 100%;
-          height: 100%;
-        `}
-        draggable={false}
-        // TODO: hover for larger thumbnail
-      />
       <div>
         <strong>Request Type: </strong>
         {isEditable ? (
@@ -78,6 +58,16 @@ export const OctopusImagingOrderDisplay = ({
           payload.requestType
         )}
       </div>
+      <img
+        src={payload.thumbnail}
+        css={css`
+          object-fit: contain;
+          width: 100%;
+          height: 100%;
+        `}
+        draggable={false}
+        // TODO: hover for larger thumbnail
+      />
     </div>
   );
 };

client/src/itemInputBox.tsx

@@ -8,7 +8,7 @@ import { Group, User } from "shared/graphql/graphql";
 import { AvatarRoundel } from "./avatarRoundel";
 import { agateSans } from "../fontNormaliser";
 import { scrollbarsCss } from "./styling";
-import { composer } from "../colours";
+import { composer, pinMetal } from "../colours";
 import { LazyQueryHookOptions, useApolloClient } from "@apollo/client";
 import { gqlSearchMentionableUsers } from "../gql";
 import { SvgSpinner } from "@guardian/source-react-components";
@@ -254,53 +254,72 @@ export const ItemInputBox = ({
     <div
       css={css`
         flex-grow: 1;
-        background-color: white;
-        border-radius: ${space[1]}px;
-        padding-bottom: 0.1px;
-        ${rtaStyles}
       `}
     >
-      {maybeReplyingToElement}
-      <ReactTextareaAutocomplete<User | Group>
-        innerRef={(element) => (textAreaRef.current = element)}
-        disabled={isSending}
-        trigger={{
-          "@": {
-            dataProvider: addUnverifiedMention
-              ? mentionsDataProvider
-              : () => [],
-            component: Suggestion,
-            output: (userOrGroup) => ({
-              key: isGroup(userOrGroup)
-                ? userOrGroup.shorthand
-                : userOrGroup.email,
-              text: isGroup(userOrGroup)
-                ? groupToMentionHandle(userOrGroup)
-                : userToMentionHandle(userOrGroup),
-              caretPosition: "next",
-            }),
-            allowWhitespace: true,
-          },
-        }}
-        minChar={0}
-        loadingComponent={LoadingSuggestions}
-        placeholder="enter message here..."
-        value={message}
-        onFocus={({ target }) => resizeTextArea(target)}
-        onChange={(event) => {
-          resizeTextArea(event.target);
-          setMessage(event.target.value);
-        }}
-        onKeyPress={
-          sendItem &&
-          ((event) => {
-            event.stopPropagation();
-            if (isHardReturn(event)) {
-              const hasSomethingToSend =
-                payloadToBeSent?.type === IMAGING_REQUEST_ITEM_TYPE
-                  ? message
-                  : message?.trim() || payloadToBeSent;
-              if (!isAsGridPayloadLoading && hasSomethingToSend) {
+      {payloadToBeSent?.type === IMAGING_REQUEST_ITEM_TYPE && (
+        <div
+          css={css`
+            ${agateSans.xxsmall()};
+            margin-bottom: ${space[1]}px;
+            color: ${message ? pinMetal : composer.warning["100"]};
+          `}
+        >
+          <em>
+            You must provide some notes to help Imaging team to understand your
+            request
+          </em>
+        </div>
+      )}
+      <div
+        css={css`
+          background-color: white;
+          border-radius: ${space[1]}px;
+          padding-bottom: 0.1px;
+          ${rtaStyles}
+        `}
+      >
+        {maybeReplyingToElement}
+        <ReactTextareaAutocomplete<User | Group>
+          innerRef={(element) => (textAreaRef.current = element)}
+          disabled={isSending}
+          trigger={{
+            "@": {
+              dataProvider: addUnverifiedMention
+                ? mentionsDataProvider
+                : () => [],
+              component: Suggestion,
+              output: (userOrGroup) => ({
+                key: isGroup(userOrGroup)
+                  ? userOrGroup.shorthand
+                  : userOrGroup.email,
+                text: isGroup(userOrGroup)
+                  ? groupToMentionHandle(userOrGroup)
+                  : userToMentionHandle(userOrGroup),
+                caretPosition: "next",
+              }),
+              allowWhitespace: true,
+            },
+          }}
+          minChar={0}
+          loadingComponent={LoadingSuggestions}
+          placeholder="enter message here..."
+          value={message}
+          onFocus={({ target }) => resizeTextArea(target)}
+          onChange={(event) => {
+            resizeTextArea(event.target);
+            setMessage(event.target.value);
+          }}
+          onKeyPress={
+            sendItem &&
+            ((event) => {
+              event.stopPropagation();
+              if (isHardReturn(event)) {
+                const hasSomethingToSend =
+                  payloadToBeSent?.type === IMAGING_REQUEST_ITEM_TYPE
+                    ? message
+                    : message?.trim() || payloadToBeSent;
+                if (!isAsGridPayloadLoading && hasSomethingToSend
+                ) {
                 sendItem();
               }
               event.preventDefault();
@@ -320,39 +339,40 @@ export const ItemInputBox = ({
           }
           /* Firefox needs this hint to get the correct initial height.
            Chrome will sometimes show a scrollbar at 21px, so give it a .1px extra as a nudge not to add one */
-          height: 21.1px;
-          ${addUnverifiedMention ? "max-height: 74px;" : ""}
-          ${agateSans.small({ lineHeight: "tight" })};
-          resize: none;
-          ${scrollbarsCss(palette.neutral[86])}
-        `}
-        boundariesElement={panelElement || undefined}
-      />
-      {isAsGridPayloadLoading && (
-        <div
-          css={css`
-            display: flex;
-            align-items: center;
-            padding: 5px;
-            ${agateSans.small({ fontStyle: "italic" })};
-          `}
-        >
-          <SvgSpinner size="small" />
-          &nbsp;please wait a moment
-        </div>
-      )}
-      {payloadToBeSent && (
-        <div
-          css={css`
-            margin: 0 ${space[1]}px;
+            height: 21.1px;
+            ${addUnverifiedMention ? "max-height: 74px;" : ""}
+            ${agateSans.small({ lineHeight: "tight" })};
+            resize: none;
+            ${scrollbarsCss(palette.neutral[86])}
           `}
-        >
-          <PayloadDisplay
-            payloadAndType={payloadToBeSent}
-            clearPayloadToBeSent={clearPayloadToBeSent}
-          />
-        </div>
-      )}
+          boundariesElement={panelElement || undefined}
+        />
+        {isAsGridPayloadLoading && (
+          <div
+            css={css`
+              display: flex;
+              align-items: center;
+              padding: 5px;
+              ${agateSans.small({ fontStyle: "italic" })};
+            `}
+          >
+            <SvgSpinner size="small" />
+            &nbsp;please wait a moment
+          </div>
+        )}
+        {payloadToBeSent && (
+          <div
+            css={css`
+              margin: 0 ${space[1]}px;
+            `}
+          >
+            <PayloadDisplay
+              payloadAndType={payloadToBeSent}
+              clearPayloadToBeSent={clearPayloadToBeSent}
+            />
+          </div>
+        )}
+      </div>
     </div>
   );
 };