Replace deprecated function

dbmdz · Jul 30, 2024 · 73662c3 · 73662c3
1 parent 36cb13b
commit 73662c3
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 20 deletions.
diff --git a/src/components/PageTextDisplay.js b/src/components/PageTextDisplay.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles';
 import withStyles from '@material-ui/core/styles/withStyles';
 
 /** Styles for the overlay SVG */
@@ -98,10 +98,10 @@ class PageTextDisplay extends React.Component {
     // one of the containers, since otherwise the user's selection highlight would
     // become transparent as well or disappear entirely.
     for (const rect of this.boxContainerRef.current.querySelectorAll('rect')) {
-      rect.style.fill = fade(bgColor, opacity);
+      rect.style.fill = alpha(bgColor, opacity);
     }
     for (const text of this.textContainerRef.current.querySelectorAll('text')) {
-      text.style.fill = fade(textColor, opacity);
+      text.style.fill = alpha(textColor, opacity);
     }
   }
 
@@ -155,9 +155,9 @@ class PageTextDisplay extends React.Component {
     }
 
     const renderOpacity = !visible && selectable ? 0 : opacity;
-    const boxStyle = { fill: fade(bg, renderOpacity) };
+    const boxStyle = { fill: alpha(bg, renderOpacity) };
     const textStyle = {
-      fill: fade(fg, renderOpacity),
+      fill: alpha(fg, renderOpacity),
     };
     const renderLines = lines.filter((l) => l.width > 0 && l.height > 0);
 

diff --git a/src/components/settings/ButtonContainer.js b/src/components/settings/ButtonContainer.js
@@ -1,31 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import makeStyles from '@material-ui/core/styles/makeStyles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(({ palette, breakpoints }) => {
   const bubbleBg = palette.shades.main;
   const bubbleFg = palette.getContrastText(bubbleBg);
   const borderImgRight =
     'linear-gradient(' +
-    `to bottom, ${fade(bubbleFg, 0)} 20%, ` +
-    `${fade(bubbleFg, 0.2)} 20% 80%, ` +
-    `${fade(bubbleFg, 0)} 80%)`;
+    `to bottom, ${alpha(bubbleFg, 0)} 20%, ` +
+    `${alpha(bubbleFg, 0.2)} 20% 80%, ` +
+    `${alpha(bubbleFg, 0)} 80%)`;
   const borderImgBottom = borderImgRight.replace('to bottom', 'to right');
 
   return {
     root: {
       display: 'flex',
       padding: ({ paddingPrev, paddingNext }) => [[0, paddingNext ?? 0, 0, paddingPrev ?? 0]],
-      borderRight: ({ withBorder }) => (withBorder ? `1px solid ${fade(bubbleFg, 0.2)}` : 'none'),
+      borderRight: ({ withBorder }) => (withBorder ? `1px solid ${alpha(bubbleFg, 0.2)}` : 'none'),
       borderImageSlice: ({ withBorder }) => (withBorder ? 1 : 'unset'),
       borderImageSource: borderImgRight,
       flexDirection: 'column',
       [breakpoints.down('sm')]: {
         flexDirection: 'row',
         borderRight: (props) => 'none', // FIXME: Needs to be a func for some reason
         borderBottom: ({ withBorder }) =>
-          withBorder ? `1px solid ${fade(bubbleFg, 0.2)}` : 'none',
+          withBorder ? `1px solid ${alpha(bubbleFg, 0.2)}` : 'none',
         borderImageSource: borderImgBottom,
         padding: ({ paddingPrev, paddingNext }) => [[paddingPrev ?? 0, 0, paddingNext ?? 0, 0]],
       },

diff --git a/src/components/settings/ColorWidget.js b/src/components/settings/ColorWidget.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { MiradorMenuButton } from 'mirador/dist/es/src/components/MiradorMenuButton';
 import ResetColorsIcon from '@material-ui/icons/SettingsBackupRestore';
 import makeStyles from '@material-ui/core/styles/makeStyles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles';
 
 import ColorInput from './ColorInput';
 import { toHexRgb } from '../../lib/color';
@@ -18,7 +18,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => {
       top: 48,
       zIndex: 100,
       borderRadius: [[0, 0, 25, 25]],
-      backgroundColor: fade(bubbleBg, 0.8),
+      backgroundColor: alpha(bubbleBg, 0.8),
       [breakpoints.down('sm')]: {
         flexDirection: 'row',
         right: 48,

diff --git a/src/components/settings/OpacityWidget.js b/src/components/settings/OpacityWidget.js
@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import Slider from '@material-ui/core/Slider';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles';
 import { useTheme } from '@material-ui/core';
 
 const useStyles = makeStyles(({ palette, breakpoints }) => {
   const bubbleBg = palette.shades.main;
   return {
     root: {
-      backgroundColor: fade(bubbleBg, 0.8),
+      backgroundColor: alpha(bubbleBg, 0.8),
       borderRadius: [[0, 0, 25, 25]],
       height: 150,
       padding: [[16, 8, 8, 8]],

diff --git a/src/components/settings/OverlaySettings.js b/src/components/settings/OverlaySettings.js
@@ -11,7 +11,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import useTheme from '@material-ui/core/styles/useTheme';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles';
 
 import TextSelectIcon from '../TextSelectIcon';
 import ButtonContainer from './ButtonContainer';
@@ -25,7 +25,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => {
     bubbleContainer: {
       display: 'flex',
       flexDirection: 'row',
-      backgroundColor: fade(bubbleBg, 0.8),
+      backgroundColor: alpha(bubbleBg, 0.8),
       borderRadius: (props) => [[25, 25, 25, 25]],
       position: 'absolute',
       right: 8,
@@ -74,7 +74,7 @@ const OverlaySettings = ({
   const { palette } = useTheme();
   const bubbleBg = palette.shades.main;
   const bubbleFg = palette.getContrastText(bubbleBg);
-  const toggledBubbleBg = fade(bubbleFg, 0.25);
+  const toggledBubbleBg = alpha(bubbleFg, 0.25);
   const classes = useStyles({
     imageToolsEnabled,
     open,
@@ -163,7 +163,7 @@ const OverlaySettings = ({
               aria-expanded={showOpacitySlider}
               onClick={() => setShowOpacitySlider(!showOpacitySlider)}
               style={{
-                backgroundColor: showOpacitySlider && fade(bubbleFg, 0.1),
+                backgroundColor: showOpacitySlider && alpha(bubbleFg, 0.1),
               }}
             >
               <OpacityIcon />
@@ -191,7 +191,7 @@ const OverlaySettings = ({
               aria-expanded={showColorPicker}
               onClick={() => setShowColorPicker(!showColorPicker)}
               style={{
-                backgroundColor: showColorPicker && fade(bubbleFg, 0.1),
+                backgroundColor: showColorPicker && alpha(bubbleFg, 0.1),
               }}
             >
               <PaletteIcon />