theme - modals, react select, tables

packages/web/src/utility/TableControl.js

@@ -2,6 +2,7 @@ import React from 'react';
 import _ from 'lodash';
 import styled from 'styled-components';
 import keycodes from './keycodes';
+import useTheme from '../theme/useTheme';
 
 const Table = styled.table`
   border-collapse: collapse;
@@ -17,15 +18,15 @@ const TableHeaderRow = styled.tr``;
 const TableBodyRow = styled.tr`
   background-color: ${(props) =>
     // @ts-ignore
-    props.isSelected ? '#ccccff' : ''};
+    props.isSelected ? props.theme.gridbody_background_blue[1] : props.theme.gridbody_background};
 `;
 const TableHeaderCell = styled.td`
-  border: 1px solid #e8eef4;
-  background-color: #e8eef4;
+  border: 1px solid ${(props) => props.theme.gridheader_background};
+  background-color: ${(props) => props.theme.gridheader_background};
   padding: 5px;
 `;
 const TableBodyCell = styled.td`
-  border: 1px solid #e8eef4;
+  border: 1px solid ${(props) => props.theme.gridbody_background2};
   padding: 5px;
 `;
 
@@ -55,6 +56,7 @@ export default function TableControl({
 
   const myTableRef = React.useRef(null);
   const currentTableRef = tableRef || myTableRef;
+  const theme = useTheme();
 
   React.useEffect(() => {
     if (focusOnCreate) {
@@ -62,15 +64,18 @@ export default function TableControl({
     }
   }, []);
 
-  const handleKeyDown = React.useCallback((event) => {
-    if (event.keyCode == keycodes.downArrow) {
-      setSelectedIndex((i) => Math.min(i + 1, rows.length - 1));
-    }
-    if (event.keyCode == keycodes.upArrow) {
-      setSelectedIndex((i) => Math.max(0, i - 1));
-    }
-    if (onKeyDown) onKeyDown(event);
-  }, [setSelectedIndex, rows]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (event.keyCode == keycodes.downArrow) {
+        setSelectedIndex((i) => Math.min(i + 1, rows.length - 1));
+      }
+      if (event.keyCode == keycodes.upArrow) {
+        setSelectedIndex((i) => Math.max(0, i - 1));
+      }
+      if (onKeyDown) onKeyDown(event);
+    },
+    [setSelectedIndex, rows]
+  );
 
   return (
     <Table
@@ -83,7 +88,9 @@ export default function TableControl({
       <TableHead>
         <TableHeaderRow>
           {columns.map((x) => (
-            <TableHeaderCell key={x.fieldName}>{x.header}</TableHeaderCell>
+            <TableHeaderCell key={x.fieldName} theme={theme}>
+              {x.header}
+            </TableHeaderCell>
           ))}
         </TableHeaderRow>
       </TableHead>
@@ -91,6 +98,7 @@ export default function TableControl({
         {rows.map((row, index) => (
           <TableBodyRow
             key={index}
+            theme={theme}
             // @ts-ignore
             isSelected={index == selectedIndex}
             onClick={
@@ -103,7 +111,7 @@ export default function TableControl({
             }
           >
             {columns.map((col) => (
-              <TableBodyCell key={col.fieldName}>{format(row, col)}</TableBodyCell>
+              <TableBodyCell key={col.fieldName} theme={theme}>{format(row, col)}</TableBodyCell>
             ))}
           </TableBodyRow>
         ))}

packages/web/src/utility/forms.js

@@ -15,6 +15,7 @@ import {
 import useSocket from './SocketProvider';
 import getAsArray from './getAsArray';
 import axios from './axios';
+import useTheme from '../theme/useTheme';
 
 export const FormRow = styled.div`
   display: flex;
@@ -115,9 +116,32 @@ export function FormRadioGroupItem({ name, text, value }) {
 
 export function FormReactSelect({ options, name, isMulti = false, Component = Select, ...other }) {
   const { setFieldValue, values } = useFormikContext();
+  const theme = useTheme();
 
   return (
     <Component
+      theme={(t) => ({
+        ...t,
+        colors: {
+          ...t.colors,
+          neutral0: theme.input_background,
+          neutral10: theme.input_background2,
+          neutral20: theme.input_background3,
+          neutral30: theme.input_background4,
+          neutral40: theme.input_font3,
+          neutral50: theme.input_font3,
+          neutral60: theme.input_font2,
+          neutral70: theme.input_font2,
+          neutral80: theme.input_font2,
+          neutral90: theme.input_font1,
+          primary: theme.input_background_blue[5],
+          primary75: theme.input_background_blue[3],
+          primary50: theme.input_background_blue[2],
+          primary25: theme.input_background_blue[0],
+          danger: theme.input_background_red[5],
+          dangerLight: theme.input_background_red[1],
+        },
+      })}
       options={options}
       value={
         isMulti