Standardise testsuite icons and make them more accessible for color-b…

…lindness (#7530) * Iteration one of getting better icons for accessibility * Hover effect * Additional color tweaks * Final tweaks to colors
replayio · Aug 12, 2022 · 048e1b2 · 048e1b2
1 parent ba92291
commit 048e1b2
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -71,6 +71,9 @@ module.exports = {
       cursor: {
         "ew-resize": "ew-resize",
       },
+      borderWidth: {
+        '3': '2.5px',
+      }
     },
   },
   plugins: [require("@tailwindcss/forms")],