From 048e1b2f571b98a54a49e7bff14c5ab83c04ca39 Mon Sep 17 00:00:00 2001
From: Jon Bell <github@lot23.com>
Date: Fri, 12 Aug 2022 15:53:37 +1200
Subject: [PATCH] Standardise testsuite icons and make them more accessible for
 color-blindness (#7530)

* Iteration one of getting better icons for accessibility

* Hover effect

* Additional color tweaks

* Final tweaks to colors
---
 src/ui/components/Account/index.tsx           |  2 +-
 .../Team/View/TestResults/TestResultRow.tsx   |  6 ++--
 .../TestRuns/Overview/TestResultListItem.tsx  | 31 ++++++++++++-------
 .../Library/Team/View/TestRuns/RunStats.tsx   |  4 +--
 .../Team/View/TestRuns/TestRunListItem.tsx    |  2 +-
 tailwind.config.js                            |  3 ++
 6 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/ui/components/Account/index.tsx b/src/ui/components/Account/index.tsx
index 7ef23d42c5d..93d3aa55258 100644
--- a/src/ui/components/Account/index.tsx
+++ b/src/ui/components/Account/index.tsx
@@ -29,5 +29,5 @@ export default function Account() {
     return <Login returnToPath={window.location.pathname + window.location.search} />;
   }
 
-  return <LoadingScreen fallbackMessage="Loading accounts details..." />;
+  return <LoadingScreen fallbackMessage="Loading account details..." />;
 }
diff --git a/src/ui/components/Library/Team/View/TestResults/TestResultRow.tsx b/src/ui/components/Library/Team/View/TestResults/TestResultRow.tsx
index db3ea94887c..dfcd936d354 100644
--- a/src/ui/components/Library/Team/View/TestResults/TestResultRow.tsx
+++ b/src/ui/components/Library/Team/View/TestResults/TestResultRow.tsx
@@ -23,11 +23,11 @@ function Status({ test }: { test: TestMetadata }) {
       outlined
       className={
         test.result === "passed"
-          ? "text-green-500 group-hover:text-green-700"
+          ? "text-green-500 group-hover:text-green-400"
           : "text-red-500 group-hover:text-red-700"
       }
     >
-      play_circle
+      {test.result === "passed" ? "play_circle_filled" : "play_circle" } 
     </MaterialIcon>
   );
 }
@@ -71,7 +71,7 @@ export default function TestResultRow({ recording }: { recording: Recording }) {
       target="_blank"
     >
       <div
-        className={`flex flex-row items-center px-3 py-3 space-x-3 border-b overflow-hidden rounded-sm cursor-pointer ${styles.libraryRow}`}
+        className={`flex flex-row items-center px-3 py-3 space-x-3 border-b border-b-chrome overflow-hidden rounded-sm cursor-pointer ${styles.libraryRow}`}
       >
         <Status test={recording.metadata.test} />
         <div className="flex flex-col flex-grow space-y-2">
diff --git a/src/ui/components/Library/Team/View/TestRuns/Overview/TestResultListItem.tsx b/src/ui/components/Library/Team/View/TestRuns/Overview/TestResultListItem.tsx
index acc4d7f5e97..372afe081ce 100644
--- a/src/ui/components/Library/Team/View/TestRuns/Overview/TestResultListItem.tsx
+++ b/src/ui/components/Library/Team/View/TestRuns/Overview/TestResultListItem.tsx
@@ -7,23 +7,30 @@ import styles from "../../../../Library.module.css";
 
 function ViewReplay({ passed }: { passed: boolean }) {
   return (
-    <MaterialIcon
-      iconSize="2xl"
-      outlined
-      className={
-        passed
-          ? "text-green-500 group-hover:text-green-700"
-          : "text-red-500 group-hover:text-red-700"
-      }
-    >
-      play_circle
-    </MaterialIcon>
+    <Link href={`/recording/${recordingId}`}>
+      <a
+        className="flex items-center justify-center p-2 transition cursor-pointer group"
+        onClick={e => e.stopPropagation()}
+      >
+        <MaterialIcon
+          iconSize="2xl"
+          outlined
+          className={
+            passed
+              ? "text-green-500 group-hover:text-green-400"
+              : "text-red-500 group-hover:text-red-400"
+          }
+        >
+          {passed ? "play_circle_filled" : "play_circle" }          
+        </MaterialIcon>
+      </a>
+    </Link>
   );
 }
 
 function Title({ recording }: { recording: Recording }) {
   return (
-    <div className="flex flex-row items-center flex-grow space-x-2 overflow-hidden">
+    <div className="flex flex-row items-center flex-grow space-x-2 overflow-hidden hover:cursor-pointer">
       <div className="flex flex-col flex-grow py-2 overflow-hidden">
         {recording.metadata?.test?.title}
         <div className="text-xs text-gray-500">{recording.metadata?.test?.file}</div>
diff --git a/src/ui/components/Library/Team/View/TestRuns/RunStats.tsx b/src/ui/components/Library/Team/View/TestRuns/RunStats.tsx
index 7788b2a185a..d89dfac4210 100644
--- a/src/ui/components/Library/Team/View/TestRuns/RunStats.tsx
+++ b/src/ui/components/Library/Team/View/TestRuns/RunStats.tsx
@@ -19,8 +19,8 @@ export function RunStats({ testRun }: { testRun: TestRun }) {
 
   return (
     <div className="flex space-x-2 shrink">
-      {failed > 0 && <Pill styles="text-red-50 bg-red-500" value={failed} />}
-      {failed == 0 && passed > 0 && <Pill styles="bg-green-500 text-green-50" value={passed} />}
+      {failed > 0 && <Pill styles="text-red-500 border border-red-500 border-3" value={failed} />}
+      {failed == 0 && passed > 0 && <Pill styles="bg-green-500 text-chrome" value={passed} />}
     </div>
   );
 }
diff --git a/src/ui/components/Library/Team/View/TestRuns/TestRunListItem.tsx b/src/ui/components/Library/Team/View/TestRuns/TestRunListItem.tsx
index bc0b958e7f6..d42dc7ea734 100644
--- a/src/ui/components/Library/Team/View/TestRuns/TestRunListItem.tsx
+++ b/src/ui/components/Library/Team/View/TestRuns/TestRunListItem.tsx
@@ -45,7 +45,7 @@ function Attributes({ testRun }: { testRun: TestRun }) {
 function Status({ failCount }: { failCount: number }) {
   return (
     <div className={`flex items-center  ${failCount > 0 ? "text-red-500" : "text-green-500"} `}>
-      <MaterialIcon iconSize="2xl">{`${failCount > 0 ? "cancel" : "check"} `}</MaterialIcon>
+      <MaterialIcon iconSize="2xl">{`${failCount > 0 ? "highlight_off" : "check_circle"} `}</MaterialIcon>
     </div>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index a394eafe2d2..6dfb6992842 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -71,6 +71,9 @@ module.exports = {
       cursor: {
         "ew-resize": "ew-resize",
       },
+      borderWidth: {
+        '3': '2.5px',
+      }
     },
   },
   plugins: [require("@tailwindcss/forms")],