feat(frontend): color unselected variant rows light grey

Author: rileyhgrant

frontend/src/components/VariantListPage/VariantsTable.tsx

@@ -724,6 +724,7 @@ const VariantsTable: FC<VariantsTableProps> = ({
   }) => {
     const rowData = data[dataRowIndex];
     const isNotIncluded = notIncludedVariants.has(rowData.id);
+    const isNotSelected = !selectedVariants.has(rowData.id);
 
     return (
       <Tr
@@ -735,7 +736,11 @@ const VariantsTable: FC<VariantsTableProps> = ({
           height: `${ROW_HEIGHT}px`,
           boxShadow:
             "inset -0.65em 0em 1em -1.25em rgba(0, 0, 0, 0.9), inset 0.65em 0em 1em -1.25em rgba(0, 0, 0, 0.9)",
-          backgroundColor: isNotIncluded ? "#f0f0f0" : "transparent",
+          backgroundColor: isNotIncluded
+            ? "#f0f0f0"
+            : isNotSelected
+            ? "#f8f8f8"
+            : "transparent",
         }}
         style={style}
       >

frontend/src/components/VariantListPage/__snapshots__/VariantsTable.spec.tsx.snap

@@ -264,7 +264,7 @@ exports[`Variant Table has no unexpected changes 1`] = `
       class="css-0"
     >
       <tr
-        class="css-11ta1vk"
+        class="css-12kmu23"
         role="row"
         style="position: absolute; left: 0px; top: 0px; height: 70px; width: 100%;"
       >
@@ -476,7 +476,7 @@ exports[`Variant Table has no unexpected changes 1`] = `
         </td>
       </tr>
       <tr
-        class="css-11ta1vk"
+        class="css-12kmu23"
         role="row"
         style="position: absolute; left: 0px; top: 70px; height: 70px; width: 100%;"
       >
@@ -688,7 +688,7 @@ exports[`Variant Table has no unexpected changes 1`] = `
         </td>
       </tr>
       <tr
-        class="css-11ta1vk"
+        class="css-12kmu23"
         role="row"
         style="position: absolute; left: 0px; top: 140px; height: 70px; width: 100%;"
       >