improve the display of the buttons, including making the Imaging order button fit

Author: twrichards

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;

client/src/addToPinboardButton.tsx

@@ -2,15 +2,15 @@ import ReactDOM from "react-dom";
 import React, { ReactPortal, useContext } from "react";
 import { css } from "@emotion/react";
 import { buildPayloadAndType, PayloadAndType } from "./types/PayloadAndType";
-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 { ButtonInOtherTools } from "./buttonInOtherTools";
 import {
   IMAGINE_REQUEST_TYPES,
   IMAGING_REQUEST_ITEM_TYPE,
-} from "../../shared/octopusImaging";
+} from "shared/octopusImaging";
 
 export const ASSET_HANDLE_HTML_TAG = "asset-handle";
 
@@ -44,7 +44,7 @@ const AddToPinboardButton = (props: AddToPinboardButtonProps) => {
   return (
     <root.div
       css={css`
-        ${textSans.small()}
+        ${agateSans.small()}
       `}
     >
       <ButtonInOtherTools

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{" "}

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;
         `}