improve the display of the buttons, including making the `Imaging ord…

…er` button fit
guardian · Jun 4, 2024 · 4021a98 · 4021a98
1 parent 84d405d
commit 4021a98
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 53 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
         `}