From fcdff8bc9b56bc04bf5b5ce831e54bf2bf370636 Mon Sep 17 00:00:00 2001
From: syao1226 <146495172+syao1226@users.noreply.github.com>
Date: Fri, 23 Aug 2024 10:57:52 -0400
Subject: [PATCH] fix(app): fix highlighted style and text overlapping issues
 (#16097)

fix RQA-2960 and RQA-3082

<!--
Thanks for taking the time to open a Pull Request (PR)! Please make sure
you've read the "Opening Pull Requests" section of our Contributing
Guide:


https://github.com/Opentrons/opentrons/blob/edge/CONTRIBUTING.md#opening-pull-requests

GitHub provides robust markdown to format your PR. Links, diagrams,
pictures, and videos along with text formatting make it possible to
create a rich and informative PR. For more information on GitHub
markdown, see:


https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

To ensure your code is reviewed quickly and thoroughly, please fill out
the sections below to the best of your ability!
-->

# Overview

<!--
Describe your PR at a high level. State acceptance criteria and how this
PR fits into other work. Link issues, PRs, and other relevant resources.
-->

Fixed the highlighted blue when not hovered over the upload file box on
desktop app. Also, fixed the texts overlapping issue happened when last
run is "less than a minute ago" on ODD.

## Test Plan and Hands on Testing

<!--
Describe your testing of the PR. Emphasize testing not reflected in the
code. Attach protocols, logs, screenshots and any other assets that
support your testing.
-->
Highlighted style issue:
- Click into the drag and drop box for importing a protocol file then
exit the OS file browser.
- View drag and drop box.
- Dashed box would be set to unselected gray instead of highlighted
blue.

Text wrapping issue:
- Run a protocol on ODD and then cancel the run.
- Return to Protocol screen to ensure that the text "less than a minute
ago" for last run is wrapped downward.

## Changelog

<!--
List changes introduced by this PR considering future developers and the
end user. Give careful thought and clear documentation to breaking
changes.
-->
- Removed the `focus-within` CSS psuedo class under CSS const
`StyleLabel`.
- Added a condition to display between 'normal' and 'nowrap' whiteSpace
CSS property.

## Review requests

<!--
- What do you need from reviewers to feel confident this PR is ready to
merge?
- Ask questions.
-->

## Risk assessment

<!--
- Indicate the level of attention this PR needs.
- Provide context to guide reviewers.
- Discuss trade-offs, coupling, and side effects.
- Look for the possibility, even if you think it's small, that your
change may affect some other part of the system.
- For instance, changing return tip behavior may also change the
behavior of labware calibration.
- How do your unit tests and on hands on testing mitigate this PR's
risks and the risk of future regressions?
- Especially in high risk PRs, explain how you know your testing is
enough.
-->

---------

Co-authored-by: shiyaochen <shiyaochen@admins-MacBook-Pro.local>
---
 app/src/molecules/UploadInput/index.tsx          |  3 +--
 app/src/pages/ProtocolDashboard/ProtocolCard.tsx | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/src/molecules/UploadInput/index.tsx b/app/src/molecules/UploadInput/index.tsx
index 62a6cccfe0e..9802f6d28b5 100644
--- a/app/src/molecules/UploadInput/index.tsx
+++ b/app/src/molecules/UploadInput/index.tsx
@@ -29,8 +29,7 @@ const StyledLabel = styled.label`
   text-align: ${TYPOGRAPHY.textAlignCenter};
   background-color: ${COLORS.white};
 
-  &:hover,
-  &:focus-within {
+  &:hover {
     border: 2px dashed ${COLORS.blue50};
   }
 `
diff --git a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx
index ed29d904895..4016eae71ef 100644
--- a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx
+++ b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx
@@ -194,6 +194,15 @@ export function ProtocolCard(props: ProtocolCardProps): JSX.Element {
   if (isFailedAnalysis) protocolCardBackgroundColor = COLORS.red35
   if (isRequiredCSV) protocolCardBackgroundColor = COLORS.yellow35
 
+  const textWrap = (lastRun?: string): string => {
+    if (lastRun != null) {
+      lastRun = formatDistance(new Date(lastRun), new Date(), {
+        addSuffix: true,
+      }).replace('about ', '')
+    }
+    return lastRun === 'less than a minute ago' ? 'normal' : 'nowrap'
+  }
+
   return (
     <Flex
       alignItems={isFailedAnalysis || isRequiredCSV ? ALIGN_END : ALIGN_CENTER}
@@ -244,7 +253,11 @@ export function ProtocolCard(props: ProtocolCardProps): JSX.Element {
         </LegacyStyledText>
       </Flex>
       <Flex width="9.25rem">
-        <LegacyStyledText as="p" color={COLORS.grey60} whiteSpace="nowrap">
+        <LegacyStyledText
+          as="p"
+          color={COLORS.grey60}
+          whiteSpace={textWrap(lastRun)}
+        >
           {lastRun != null
             ? formatDistance(new Date(lastRun), new Date(), {
                 addSuffix: true,