Revert some unwanted changes

__tests__/components/OverlaySettings.test.js

@@ -22,24 +22,20 @@ const mockTheme = {
 
 // Mocked MUI slider for easier testing, taken from
 // https://stackoverflow.com/a/61628815 (CC BY-SA 4.0)
-jest.mock(
-  '@material-ui/core/Slider',
-  () =>
-    function (props) {
-      const { id, name, min, max, onChange } = props;
-      return (
-        <input
-          data-testid="opacity-slider"
-          type="range"
-          id={id}
-          name={name}
-          min={min}
-          max={max}
-          onChange={(event) => onChange(event, event.target.value)}
-        />
-      );
-    },
-);
+jest.mock('@material-ui/core/Slider', () => (props) => {
+  const { id, name, min, max, onChange } = props;
+  return (
+    <input
+      data-testid="opacity-slider"
+      type="range"
+      id={id}
+      name={name}
+      min={min}
+      max={max}
+      onChange={(event) => onChange(event, event.target.value)}
+    />
+  );
+});
 
 /** Render a bubble to the testing screen */
 function renderSettings(props = {}, renderFn = render) {

__tests__/lib/ocrFormats.test.js

@@ -11,7 +11,7 @@ import contentAsTextAnnos from '../../__fixtures__/anno_iifv2.json';
  * https://stackoverflow.com/a/53464807 (CC-BY-SA)
  */
 const closeTo = (expected, precision = 1) => ({
-  asymmetricMatch: (actual) => Math.abs(expected - actual) < 10 ** -precision / 2,
+  asymmetricMatch: (actual) => Math.abs(expected - actual) < Math.pow(10, -precision) -precision / 2,
 });
 
 describe('parsing ALTO', () => {

src/components/settings/ButtonContainer.js

@@ -34,7 +34,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => {
 });
 
 /** Container for a settings button */
-function ButtonContainer({ children, withBorder, paddingPrev, paddingNext }) {
+const ButtonContainer = ({ children, withBorder, paddingPrev, paddingNext }) => {
   const classes = useStyles({ withBorder, paddingPrev, paddingNext });
   return <div className={classes.root}>{children}</div>;
 }

src/components/settings/ColorInput.js

@@ -37,7 +37,7 @@ const useStyles = makeStyles({
 });
 
 /** Input to select a color */
-function ColorInput({ color, onChange, title, autoColors, className }) {
+const ColorInput = ({ color, onChange, title, autoColors, className }) => {
   const classes = useStyles({ color, autoColors });
   // We rely on the browser behavior that clicking on an input's label is equivalent
   // to clicking the input to show a custom color picker button.

src/components/settings/ColorWidget.js

@@ -57,7 +57,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => {
 });
 
 /** Widget to update text and background color */
-function ColorWidget({ textColor, bgColor, onChange, t, pageColors, useAutoColors, containerId }) {
+const ColorWidget = ({ textColor, bgColor, onChange, t, pageColors, useAutoColors, containerId }) => {
   const showResetButton =
     !useAutoColors && pageColors && pageColors.some((c) => c && (c.textColor || c.bgColor));
   const classes = useStyles({ showResetButton });

src/components/settings/OverlaySettings.js

@@ -46,7 +46,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => {
 });
 
 /** Control text overlay settings  */
-function OverlaySettings({
+const OverlaySettings = ({
   windowTextOverlayOptions,
   imageToolsEnabled,
   textsAvailable,
@@ -55,7 +55,7 @@ function OverlaySettings({
   t,
   pageColors,
   containerId,
-}) {
+}) => {
   const {
     enabled,
     visible,

src/lib/color.js

@@ -35,7 +35,7 @@ function luminance([r, g, b]) {
     if (vSrgb <= 0.03928) {
       return vSrgb / 12.92;
     }
-    return ((vSrgb + 0.055) / 1.055) ** 2.4;
+    return Math.pow((vSrgb + 0.055) / 1.055, 2.4);
   });
   return colors[0] * 0.2126 + colors[1] * 0.7152 + colors[2] * 0.0722;
 }