fix(protocol-designer): replace text link style (#17163)

* fix(protocol-designer): replace text link style
Opentrons · Dec 20, 2024 · d36b284 · d36b284
1 parent 20a23ef
commit d36b284
Show file tree

Hide file tree

Showing 20 changed files with 45 additions and 52 deletions.
diff --git a/protocol-designer/src/atoms/constants.ts b/protocol-designer/src/atoms/constants.ts
@@ -6,13 +6,6 @@ import {
 } from '@opentrons/components'
 import type { FlattenSimpleInterpolation } from 'styled-components'
 
-export const BUTTON_LINK_STYLE = css`
-  color: ${COLORS.grey60};
-  &:hover {
-    color: ${COLORS.grey40};
-  }
-`
-
 export const LINK_BUTTON_STYLE = css`
   color: ${COLORS.black90};
 

diff --git a/protocol-designer/src/organisms/Alerts/ErrorContents.tsx b/protocol-designer/src/organisms/Alerts/ErrorContents.tsx
@@ -7,7 +7,7 @@ import {
   SPACING,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { selectDesignerTab } from '../../file-data/actions'
 
 import type { AlertLevel } from './types'
@@ -38,7 +38,7 @@ export const ErrorContents = (
             <Btn
               width="7.25rem"
               textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              css={BUTTON_LINK_STYLE}
+              css={LINK_BUTTON_STYLE}
               onClick={() => {
                 dispatch(selectDesignerTab({ tab: 'startingDeck' }))
               }}
@@ -58,7 +58,7 @@ export const ErrorContents = (
             <Btn
               width="7.25rem"
               textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              css={BUTTON_LINK_STYLE}
+              css={LINK_BUTTON_STYLE}
               onClick={() => {
                 dispatch(selectDesignerTab({ tab: 'startingDeck' }))
               }}

diff --git a/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx b/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx
@@ -64,7 +64,7 @@ import { setFeatureFlags } from '../../feature-flags/actions'
 import { createCustomTiprackDef } from '../../labware-defs/actions'
 import { deleteContainer } from '../../labware-ingred/actions'
 import { selectors as stepFormSelectors } from '../../step-forms'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { getMainPagePortalEl } from '../Portal'
 import {
   getSectionsFromPipetteName,
@@ -236,7 +236,7 @@ export function EditInstrumentsModal(
                 {has96Channel ||
                 (leftPipette == null && rightPipette == null) ? null : (
                   <Btn
-                    css={BUTTON_LINK_STYLE}
+                    css={LINK_BUTTON_STYLE}
                     onClick={() =>
                       dispatch(
                         changeSavedStepForm({
@@ -354,7 +354,7 @@ export function EditInstrumentsModal(
                           </StyledText>
                         </Flex>
                         <Btn
-                          css={BUTTON_LINK_STYLE}
+                          css={LINK_BUTTON_STYLE}
                           textDecoration={TYPOGRAPHY.textDecorationUnderline}
                           padding={SPACING.spacing4}
                           id="hello"

diff --git a/protocol-designer/src/organisms/PipetteInfoItem/index.tsx b/protocol-designer/src/organisms/PipetteInfoItem/index.tsx
@@ -12,7 +12,7 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { getPipetteSpecsV2 } from '@opentrons/shared-data'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { getLabwareDefsByURI } from '../../labware-defs/selectors'
 import type { PipetteMount, PipetteName } from '@opentrons/shared-data'
 
@@ -68,7 +68,7 @@ export function PipetteInfoItem(props: PipetteInfoItemProps): JSX.Element {
           <Btn
             onClick={editClick}
             textDecoration={TYPOGRAPHY.textDecorationUnderline}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
             padding={SPACING.spacing4}
           >
             <StyledText desktopStyle="bodyDefaultRegular">
@@ -80,7 +80,7 @@ export function PipetteInfoItem(props: PipetteInfoItemProps): JSX.Element {
               cleanForm()
             }}
             textDecoration={TYPOGRAPHY.textDecorationUnderline}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
             padding={SPACING.spacing4}
           >
             <StyledText desktopStyle="bodyDefaultRegular">

diff --git a/protocol-designer/src/organisms/TipPositionModal/ZTipPositionModal.tsx b/protocol-designer/src/organisms/TipPositionModal/ZTipPositionModal.tsx
@@ -17,7 +17,7 @@ import {
 } from '@opentrons/components'
 import { DEFAULT_MM_BLOWOUT_OFFSET_FROM_TOP } from '../../constants'
 import { getIsTouchTipField } from '../../form-types'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { getMainPagePortalEl } from '../Portal'
 import * as utils from './utils'
 import { TOO_MANY_DECIMALS } from './constants'
@@ -156,7 +156,7 @@ export function ZTipPositionModal(props: ZTipPositionModalProps): JSX.Element {
             onClick={() => {
               setValue(utils.roundValue(defaultMm, 'up').toString())
             }}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
           >
             {t('shared:reset_to_default')}
           </Btn>

diff --git a/protocol-designer/src/organisms/TipPositionModal/index.tsx b/protocol-designer/src/organisms/TipPositionModal/index.tsx
@@ -18,7 +18,7 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { getIsTouchTipField } from '../../form-types'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { getMainPagePortalEl } from '../Portal'
 import { TOO_MANY_DECIMALS, PERCENT_RANGE_TO_SHOW_WARNING } from './constants'
 import * as utils from './utils'
@@ -257,7 +257,7 @@ export function TipPositionModal(
               setYValue('0')
               setZValue('1')
             }}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
           >
             {t('shared:reset_to_default')}
           </Btn>
@@ -331,7 +331,7 @@ export function TipPositionModal(
               </StyledText>
               <Btn
                 fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-                css={BUTTON_LINK_STYLE}
+                css={LINK_BUTTON_STYLE}
                 onClick={() => {
                   setView(view === 'side' ? 'top' : 'side')
                 }}

diff --git a/protocol-designer/src/organisms/WellOrderModal/index.tsx b/protocol-designer/src/organisms/WellOrderModal/index.tsx
@@ -14,7 +14,7 @@ import {
   DropdownMenu,
   ALIGN_CENTER,
 } from '@opentrons/components'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { getMainPagePortalEl } from '../Portal'
 import { WellOrderVisualization } from './WellOrderVisualization'
 import type { WellOrderOption } from '../../form-types'
@@ -164,7 +164,7 @@ export function WellOrderModal(props: WellOrderModalProps): JSX.Element | null {
           padding={`0 ${SPACING.spacing24} ${SPACING.spacing24}`}
           alignItems={ALIGN_CENTER}
         >
-          <Btn onClick={handleReset} css={BUTTON_LINK_STYLE}>
+          <Btn onClick={handleReset} css={LINK_BUTTON_STYLE}>
             {t('shared:reset_to_default')}
           </Btn>
           <Flex gridGap={SPACING.spacing8}>

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx
@@ -38,7 +38,7 @@ import { setFeatureFlags } from '../../feature-flags/actions'
 import { createCustomTiprackDef } from '../../labware-defs/actions'
 import { useKitchen } from '../../organisms/Kitchen/hooks'
 import { IncompatibleTipsModal, PipetteInfoItem } from '../../organisms'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { WizardBody } from './WizardBody'
 import { PIPETTE_GENS, PIPETTE_TYPES, PIPETTE_VOLUMES } from './constants'
 import { getTiprackOptions } from './utils'
@@ -450,7 +450,7 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
                 (pipettesByMount.left.tiprackDefURI == null &&
                   pipettesByMount.right.tiprackDefURI == null) ? null : (
                   <Btn
-                    css={BUTTON_LINK_STYLE}
+                    css={LINK_BUTTON_STYLE}
                     onClick={() => {
                       const leftPipetteName = pipettesByMount.left.pipetteName
                       const rightPipetteName = pipettesByMount.right.pipetteName

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx
@@ -25,7 +25,7 @@ import three from '../../assets/images/onboarding_animation_3.webm'
 import four from '../../assets/images/onboarding_animation_4.webm'
 import five from '../../assets/images/onboarding_animation_5.webm'
 import six from '../../assets/images/onboarding_animation_6.webm'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import type { RobotType } from '@opentrons/shared-data'
 
 interface WizardBodyProps {
@@ -144,7 +144,7 @@ export function WizardBody(props: WizardBodyProps): JSX.Element {
           alignItems={ALIGN_CENTER}
         >
           {goBack != null ? (
-            <Btn onClick={goBack} css={BUTTON_LINK_STYLE} height="1.5rem">
+            <Btn onClick={goBack} css={LINK_BUTTON_STYLE} height="1.5rem">
               <StyledText desktopStyle="bodyLargeSemiBold">
                 {t('go_back')}
               </StyledText>

diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx
@@ -55,7 +55,7 @@ import { selectors } from '../../../labware-ingred/selectors'
 import { useKitchen } from '../../../organisms/Kitchen/hooks'
 import { getDismissedHints } from '../../../tutorial/selectors'
 import { createContainerAboveModule } from '../../../step-forms/actions/thunks'
-import { BUTTON_LINK_STYLE, NAV_BAR_HEIGHT_REM } from '../../../atoms'
+import { LINK_BUTTON_STYLE, NAV_BAR_HEIGHT_REM } from '../../../atoms'
 import { ConfirmDeleteStagingAreaModal } from '../../../organisms'
 import { getSlotInformation } from '../utils'
 import { ALL_ORDERED_CATEGORIES, FIXTURES, MOAM_MODELS } from './constants'
@@ -438,7 +438,7 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
                 handleResetToolbox()
               }
             }}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
             textDecoration={TYPOGRAPHY.textDecorationUnderline}
           >
             <StyledText desktopStyle="bodyDefaultRegular">

diff --git a/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx b/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx
@@ -32,7 +32,7 @@ import {
   getModuleType,
 } from '@opentrons/shared-data'
 
-import { BUTTON_LINK_STYLE } from '../../../atoms'
+import { LINK_BUTTON_STYLE } from '../../../atoms'
 import { selectors as stepFormSelectors } from '../../../step-forms'
 import { getOnlyLatestDefs } from '../../../labware-defs'
 import {
@@ -491,7 +491,7 @@ export function LabwareTools(props: LabwareToolsProps): JSX.Element {
         alignItems={ALIGN_CENTER}
         justifyContent={JUSTIFY_CENTER}
       >
-        <StyledLabel css={BUTTON_LINK_STYLE}>
+        <StyledLabel css={LINK_BUTTON_STYLE}>
           <StyledText desktopStyle="bodyDefaultRegular">
             {t('upload_custom_labware')}
           </StyledText>

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -18,7 +18,7 @@ import {
 } from '@opentrons/components'
 import { stepIconsByType } from '../../../../form-types'
 import {
-  BUTTON_LINK_STYLE,
+  LINK_BUTTON_STYLE,
   LINE_CLAMP_TEXT_STYLE,
   NAV_BAR_HEIGHT_REM,
 } from '../../../../atoms'
@@ -299,7 +299,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
             onClick={() => {
               setIsRename(true)
             }}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
             textDecoration={TYPOGRAPHY.textDecorationUnderline}
           >
             <StyledText desktopStyle="bodyDefaultRegular">

diff --git a/...c/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx b/...c/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx
@@ -20,7 +20,7 @@ import {
   StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { BUTTON_LINK_STYLE } from '../../../../../../atoms'
+import { LINK_BUTTON_STYLE } from '../../../../../../atoms'
 import {
   isTimeFormatMinutesSeconds,
   temperatureRangeFieldValue,
@@ -262,7 +262,7 @@ export function ThermocyclerCycle(props: ThermocyclerCycleProps): JSX.Element {
           whiteSpace={NO_WRAP}
           textDecoration={TYPOGRAPHY.textDecorationUnderline}
           padding={SPACING.spacing4}
-          css={BUTTON_LINK_STYLE}
+          css={LINK_BUTTON_STYLE}
         >
           <StyledText desktopStyle="bodyDefaultRegular">
             {i18n.format(
@@ -329,7 +329,7 @@ export function ThermocyclerCycle(props: ThermocyclerCycleProps): JSX.Element {
           }}
           padding={SPACING.spacing4}
           css={[
-            BUTTON_LINK_STYLE,
+            LINK_BUTTON_STYLE,
             css`
               visibility: ${hover ? 'visible' : 'hidden'};
               opacity: ${hover ? 1 : 0};
@@ -527,7 +527,7 @@ export function ThermocyclerCycle(props: ThermocyclerCycleProps): JSX.Element {
             whiteSpace={NO_WRAP}
             textDecoration={TYPOGRAPHY.textDecorationUnderline}
             padding={SPACING.spacing4}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
           >
             <StyledText desktopStyle="bodyDefaultRegular">
               {i18n.format(

diff --git a/...rc/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx b/...rc/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx
@@ -18,7 +18,7 @@ import {
   StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { BUTTON_LINK_STYLE } from '../../../../../../atoms'
+import { LINK_BUTTON_STYLE } from '../../../../../../atoms'
 import {
   temperatureRangeFieldValue,
   isTimeFormatMinutesSeconds,
@@ -160,7 +160,7 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
           whiteSpace={NO_WRAP}
           textDecoration={TYPOGRAPHY.textDecorationUnderline}
           padding={SPACING.spacing4}
-          css={BUTTON_LINK_STYLE}
+          css={LINK_BUTTON_STYLE}
         >
           <StyledText desktopStyle="bodyDefaultRegular">
             {i18n.format(
@@ -221,7 +221,7 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
           }}
           padding={SPACING.spacing4}
           css={[
-            BUTTON_LINK_STYLE,
+            LINK_BUTTON_STYLE,
             css`
               visibility: ${hover ? 'visible' : 'hidden'};
               opacity: ${hover ? 1 : 0};

diff --git a/protocol-designer/src/pages/Landing/index.tsx b/protocol-designer/src/pages/Landing/index.tsx
@@ -17,7 +17,7 @@ import {
   StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { AnnouncementModal } from '../../organisms'
 import { actions as loadFileActions } from '../../load-file'
 import { getFileMetadata } from '../../file-data/selectors'
@@ -137,7 +137,7 @@ export function Landing(): JSX.Element {
           />
         </StyledNavLink>
         <StyledLabel>
-          <Flex css={BUTTON_LINK_STYLE}>
+          <Flex css={LINK_BUTTON_STYLE}>
             <StyledText desktopStyle="bodyLargeRegular">
               {t('edit_existing')}
             </StyledText>

diff --git a/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx b/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx
@@ -14,7 +14,7 @@ import {
 } from '@opentrons/components'
 import { getPipetteSpecsV2, FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 
 import type { PipetteName, RobotType } from '@opentrons/shared-data'
 import type { AdditionalEquipmentEntities } from '@opentrons/step-generation'
@@ -87,7 +87,7 @@ export function InstrumentsInfo({
             onClick={() => {
               setShowEditInstrumentsModal(true)
             }}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
           >
             <StyledText desktopStyle="bodyDefaultRegular">
               {t('edit')}

diff --git a/protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx b/protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx
@@ -12,7 +12,7 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import { BUTTON_LINK_STYLE, LINE_CLAMP_TEXT_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE, LINE_CLAMP_TEXT_STYLE } from '../../atoms'
 
 const REQUIRED_APP_VERSION = '8.2.0'
 
@@ -46,7 +46,7 @@ export function ProtocolMetadata({
             onClick={() => {
               setShowEditMetadataModal(true)
             }}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
             data-testid="ProtocolOverview_MetadataEditButton"
           >
             <StyledText desktopStyle="bodyDefaultRegular">

diff --git a/protocol-designer/src/pages/ProtocolOverview/StartingDeck.tsx b/protocol-designer/src/pages/ProtocolOverview/StartingDeck.tsx
@@ -15,7 +15,7 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { SlotDetailsContainer } from '../../organisms'
 import { getInitialDeckSetup } from '../../step-forms/selectors'
 import { DeckThumbnail } from './DeckThumbnail'
@@ -72,7 +72,7 @@ function StartingDeckHeader(props: StartingDeckHeaderProps): JSX.Element {
             onClick={() => {
               setShowMaterialsListModal(true)
             }}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
           >
             <StyledText desktopStyle="bodyDefaultRegular">
               {t('protocol_overview:materials_list')}