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) {

src/components/PageTextDisplay.js

@@ -171,25 +171,18 @@ class PageTextDisplay extends React.Component {
      * So we have to go against best practices and use user agent sniffing to determine dynamically
      * how to render lines and spans, sorry :-/ */
     const isGecko = runningInGecko();
+    // NOTE: Gecko really works best with a flattened bunch of text nodes. Wrapping the
+    //       lines in a <g>, e.g. breaks text selection in similar ways to the below
+    //       WebKit-specific note, for some reason ¯\_(ツ)_/¯
     // eslint-disable-next-line require-jsdoc
-    function LineWrapper({ children }) {
-      return <text style={textStyle}>{children}</text>;
-    }
+    const LineWrapper = isGecko ? (
+      <></>
+    ) : (
+      ({ children }) => <text style={textStyle}>{children}</text>
+    );
     // eslint-disable-next-line require-jsdoc
     function SpanElem(props) {
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      return <tspan {...props} />;
-    }
-    if (isGecko) {
-      // NOTE: Gecko really works best with a flattened bunch of text nodes. Wrapping the
-      //       lines in a <g>, e.g. breaks text selection in similar ways to the below
-      //       WebKit-specific note, for some reason ¯\_(ツ)_/¯
-      LineWrapper = React.Fragment;
-      // eslint-disable-next-line require-jsdoc
-      SpanElem = function (props) {
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        return <text style={textStyle} {...props} />;
-      };
+      return isGecko ? <text style={textStyle} {...props} /> : <tspan {...props} />;
     }
     return (
       <div ref={this.containerRef} style={containerStyle}>

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;
 }