From 4021a984743dfa08184c60828d30b3c42fd2a3b5 Mon Sep 17 00:00:00 2001
From: Tom Richards <tom.richards@guardian.co.uk>
Date: Tue, 4 Jun 2024 22:02:40 +0100
Subject: [PATCH] improve the display of the buttons, including making the
 `Imaging order` button fit

---
 client/fontNormaliser.ts                     |  1 -
 client/src/addToPinboardButton.tsx           | 80 +++++++++-----------
 client/src/grid/gridDynamicSearchDisplay.tsx |  8 +-
 client/src/itemInputBox.tsx                  |  4 +-
 4 files changed, 40 insertions(+), 53 deletions(-)

diff --git a/client/fontNormaliser.ts b/client/fontNormaliser.ts
index 26b3451c..6975b352 100644
--- a/client/fontNormaliser.ts
+++ b/client/fontNormaliser.ts
@@ -54,7 +54,6 @@ const pixelSizedFont = applyFontOverride(defaultToPx);
 export const agateSans = agateSansFont(
   pixelSizedFont(sourceFoundations.textSans)
 );
-export const textSans = pixelSizedFont(sourceFoundations.textSans);
 
 const isAgateLoaded = () => {
   let foundAgate = false;
diff --git a/client/src/addToPinboardButton.tsx b/client/src/addToPinboardButton.tsx
index 505506a1..85900feb 100644
--- a/client/src/addToPinboardButton.tsx
+++ b/client/src/addToPinboardButton.tsx
@@ -5,17 +5,43 @@ import { css } from "@emotion/react";
 import { pinboard, pinMetal } from "../colours";
 import { buildPayloadAndType, PayloadAndType } from "./types/PayloadAndType";
 import { space } from "@guardian/source-foundations";
-import { textSans } from "../fontNormaliser";
+import { agateSans } from "../fontNormaliser";
 import root from "react-shadow/emotion";
 import * as Sentry from "@sentry/react";
 import { TelemetryContext, PINBOARD_TELEMETRY_TYPE } from "./types/Telemetry";
 import {
   IMAGINE_REQUEST_TYPES,
   IMAGING_REQUEST_ITEM_TYPE,
-} from "../../shared/octopusImaging";
+} from "shared/octopusImaging";
 
 export const ASSET_HANDLE_HTML_TAG = "asset-handle";
 
+const buttonCss = css`
+  display: flex;
+  align-items: center;
+  background-color: ${pinboard[500]};
+  ${agateSans.xxsmall({ fontWeight: "bold" })};
+  border: none;
+  border-radius: 100px;
+  padding: 0 6px 0 10px;
+  line-height: 2;
+  cursor: pointer;
+  color: ${pinMetal};
+`;
+
+const pinIcon = (
+  <PinIcon
+    css={css`
+      height: 14px;
+      margin-left: 2px;
+      path {
+        stroke: ${pinMetal};
+        stroke-width: 1px;
+      }
+    `}
+  />
+);
+
 interface AddToPinboardButtonProps {
   dataAttributes: DOMStringMap;
   setPayloadToBeSent: (payload: PayloadAndType | null) => void;
@@ -46,7 +72,7 @@ const AddToPinboardButton = (props: AddToPinboardButtonProps) => {
   return (
     <root.div
       css={css`
-        ${textSans.small()}
+        ${agateSans.small()}
       `}
     >
       <button
@@ -57,32 +83,12 @@ const AddToPinboardButton = (props: AddToPinboardButtonProps) => {
             assetType: payloadToBeSent.type,
           });
         }}
-        css={css`
-          display: flex;
-          align-items: center;
-          background-color: ${pinboard[500]};
-          ${textSans.xsmall()};
-          border: none;
-          border-radius: 100px;
-          padding: 0 ${space[2]}px 0 ${space[3]}px;
-          line-height: 2;
-          cursor: pointer;
-          color: ${pinMetal};
-        `}
+        css={buttonCss}
       >
         {payloadToBeSent.type === "grid-search"
           ? "Add this search to"
           : "Add to"}
-        <PinIcon
-          css={css`
-            height: 18px;
-            margin-left: ${space[1]}px;
-            path {
-              stroke: ${pinMetal};
-              stroke-width: 1px;
-            }
-          `}
-        />{" "}
+        {pinIcon}
       </button>
       {payloadToBeSent.type === "grid-original" && (
         <button
@@ -103,31 +109,13 @@ const AddToPinboardButton = (props: AddToPinboardButtonProps) => {
             );
           }}
           css={css`
-            display: flex;
-            align-items: center;
+            ${buttonCss};
+            white-space: nowrap;
             margin-top: ${space[1]}px;
-            background-color: ${pinboard[500]};
-            ${textSans.xsmall()};
-            border: none;
-            border-radius: 100px;
-            padding: 0 ${space[2]}px 0 ${space[3]}px;
-            line-height: 2;
-            cursor: pointer;
-            color: ${pinMetal};
-            white-space: nowrap; // TODO this is a hack to stop the button from wrapping, but we should think of wording that fits better
           `}
         >
           Imaging order
-          <PinIcon
-            css={css`
-              height: 18px;
-              margin-left: ${space[1]}px;
-              path {
-                stroke: ${pinMetal};
-                stroke-width: 1px;
-              }
-            `}
-          />{" "}
+          {pinIcon}
         </button>
       )}
     </root.div>
diff --git a/client/src/grid/gridDynamicSearchDisplay.tsx b/client/src/grid/gridDynamicSearchDisplay.tsx
index 07b8b3c6..acf301e5 100644
--- a/client/src/grid/gridDynamicSearchDisplay.tsx
+++ b/client/src/grid/gridDynamicSearchDisplay.tsx
@@ -99,7 +99,7 @@ export const GridDynamicSearchDisplay = ({
       {!getGridSearchSummaryQuery.loading && maybeQueryBreakdown && (
         <div
           css={css`
-            font-family: ${agateSans.xsmall({ fontWeight: "bold" })};
+            ${agateSans.xsmall({ fontWeight: "bold" })};
             display: flex;
             flex-wrap: wrap;
             gap: ${space["1"]}px;
@@ -116,7 +116,7 @@ export const GridDynamicSearchDisplay = ({
 
       <span
         css={css`
-          font-family: ${agateSans.xxsmall({ fontWeight: "bold" })};
+          ${agateSans.xxsmall({ fontWeight: "bold" })};
           line-height: 36px;
           margin-bottom: 6px;
         `}
@@ -126,7 +126,7 @@ export const GridDynamicSearchDisplay = ({
 
       <span
         css={css`
-          font-family: ${agateSans.xxsmall({ fontWeight: "bold" })};
+          ${agateSans.xxsmall({ fontWeight: "bold" })};
         `}
       >
         {!getGridSearchSummaryQuery.loading &&
@@ -140,7 +140,7 @@ export const GridDynamicSearchDisplay = ({
           <div>
             <span
               css={css`
-                font-family: ${agateSans.xxsmall()};
+                ${agateSans.xxsmall()};
               `}
             >
               Last checked{" "}
diff --git a/client/src/itemInputBox.tsx b/client/src/itemInputBox.tsx
index b367aa9c..620c9840 100644
--- a/client/src/itemInputBox.tsx
+++ b/client/src/itemInputBox.tsx
@@ -32,7 +32,7 @@ const LoadingSuggestions = () => (
       gap: ${space["2"]}px;
       background: ${palette.neutral["100"]};
       padding: ${space["2"]}px;
-      font-family: ${agateSans.small({ lineHeight: "tight" })};
+      ${agateSans.small({ lineHeight: "tight" })};
     `}
   >
     <SvgSpinner size="xsmall" />
@@ -50,7 +50,7 @@ const Suggestion = ({
           cursor: default;
           padding: ${space[1]}px;
           background: ${palette.neutral["93"]};
-          font-family: ${agateSans.xxsmall({ fontWeight: "bold" })};
+          ${agateSans.xxsmall({ fontWeight: "bold" })};
           color: ${palette.neutral["46"]};
           user-select: none;
         `}