Updates

Author: lukewarlow

site/src/components/component-name-matrix.css

@@ -18,8 +18,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    background: white;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+    background: Canvas;
+    border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
 }
 
 .component-name-matrix .cell {
@@ -30,16 +30,16 @@
     overflow: hidden;
     height: 2rem;
     line-height: 1.2;
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-right: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+    border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
 }
 .component-name-matrix .cell.found {
     background: rgba(0, 255, 0, 0.1);
-    color: rgb(0, 64, 0);
+    color: light-dark(rgb(0, 64, 0), rgb(0, 191, 0));
 }
 .component-name-matrix .cell.not-found {
     background: rgba(255, 0, 0, 0.1);
-    color: rgb(64, 0, 0);
+    color: light-dark(rgb(64, 0, 0), rgb(191, 0, 0));
 
 }
 .component-name-matrix a.cell {

site/src/components/component-name-matrix.jsx

@@ -11,8 +11,9 @@ const SORT_NEXT = {
   MATCH_COUNT: SORT_OPTIONS.COMPONENT_NAME,
 }
 
-const ComponentNameMatrix = (props) => {
-  const [sort, setSort] = useState(SORT_OPTIONS.COMPONENT_NAME)
+function ComponentNameMatrix() {
+  // const [sort, setSort] = useState(SORT_OPTIONS.COMPONENT_NAME)
+  const [sort, setSort] = [SORT_OPTIONS.COMPONENT_NAME, () => {}]
 
   const getMatchName = (name) =>
     name

site/src/components/specimens.css

@@ -28,7 +28,6 @@
   position: relative;
   padding: 4px 8px;
   min-width: 120px;
-  color: rgba(0, 0, 0, 0.5);
   border-top: 1px solid #ccc;
   font-size: 0.8rem;
 }

site/src/styles/research.css

@@ -5,14 +5,17 @@
 
 .true {
   background: #a3edac;
+  color: black;
 }
 
 table.research td:not(.true):not(.false) {
   background: #ffffca;
+  color: black;
 }
 
 table.nowrap-first-column td:nth-child(1):not(.false):not(.true) {
   background: initial;
+  color: initial;
 }
 
 /* Should be applied to a td/th 

site/src/styles/spec.css

@@ -14,6 +14,7 @@ dd + dt {
 
 .question {
   background: #f7f781;
+  color: black;
   position: relative;
   display: flex;
   padding: 0.5em;