Added UI optimization controls

public/build_number

@@ -1 +1 @@
-282-053ec01
+283-d700bdd

src/components/translatable/RowHeader.js

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { Typography } from '@material-ui/core';
 import { Waypoint } from 'react-waypoint';
 import { Skeleton } from '@material-ui/lab';
-
 import { useDeepCompareMemo } from 'use-deep-compare';
 
+import { AppContext } from '../../App.context';
 import ScriptureHeader from './ScriptureHeader';
 import { 
   columnIndexOfColumnNameFromColumnNames,
@@ -35,7 +35,10 @@ export default function RowHeader({
   bookId,
   open,
 }) {
-  const [viewed, setViewed] = useState(false);
+  const [_viewed, setViewed] = useState(false);
+  const { state: { scriptureOptimization = true } } = useContext(AppContext);
+
+  const viewed = scriptureOptimization ? _viewed : true;
 
   const onVisibility = (isVisible) => {
     setViewed(isVisible);

src/components/translatable/TranslatableTSV.js

@@ -34,6 +34,7 @@ import { getReferenceFilterOptions } from './referenceFilterOptions';
 import { useContentUpdateProps } from '../../hooks/useContentUpdateProps';
 import { UpdateBranchButton } from '../branch-merger/components/UpdateBranchButton';
 import ErrorDialog from '../dialogs/ErrorDialog';
+import { ToggleStickyHeadersButton } from './ToggleStickyHeadersButton';
 
 const delimiters = { row: '\n', cell: '\t' };
 
@@ -156,9 +157,10 @@ export default function TranslatableTSV({
 
   const onRenderToolbar = ({ items }) => 
   <>
+    <ToggleStickyHeadersButton />
     {items}
     <UpdateBranchButton {...updateButtonProps} isLoading={isLoading | isSaving}/>
-      <ErrorDialog title={dialogTitle} content={dialogMessage} open={isErrorDialogOpen} onClose={onCloseErrorDialog} isLoading={isLoading | isSaving } link={dialogLink} linkTooltip={dialogLinkTooltip} />
+      <ErrorDialog title={dialogTitle} content={dialogMessage} open={isErrorDialogOpen} onClose={onCloseErrorDialog} isLoading={isLoading | isSaving} link={dialogLink} linkTooltip={dialogLinkTooltip} />
   </>
 
   const columnsMap = {

src/index.css

@@ -19,4 +19,44 @@ code {
 
 h1, h2, h3, h6 {
   margin: 0.2%;
+}
+
+
+#translatableComponent [class^='MuiToolbar'] {
+  border-bottom: 1px solid #d5d5d5;
+  background: #f8f8f8;
+}
+
+
+#translatableComponent [id^='MUIDataTableBodyRow']:nth-child(2n-1) {
+  background: #ffffff;
+}
+
+#translatableComponent [id^='MUIDataTableBodyRow']:nth-child(n+2) {
+  border: 3px dashed transparent;
+  border-top-color: #bcbcbc;
+  padding-bottom: 2em !important;
+}
+
+
+#translatableComponent [id^='MUIDataTableBodyRow']:focus-within {
+border: 3px solid #31ade3;
+background: rgba(0,0,0,0.01);
+box-shadow: grey 0px 0px 5px inset;
+}
+
+.header-row > * {
+  padding: 0!important;
+  padding-top: 1em!important;
+}
+
+
+
+.header-row h6 {
+  font-weight: bolder
+}
+
+
+.MuiTableCell-root-212:nth-child(1) {
+  background: #fff;
 }