refactor: use alpha() instead of fade

`fade()` was deprecated in favor of `alpha()` in a previous version of
`@material-ui/core/styles`.

site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx

@@ -1,5 +1,5 @@
 import DialogActions from "@material-ui/core/DialogActions"
-import { fade, makeStyles } from "@material-ui/core/styles"
+import { alpha, makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React, { ReactNode } from "react"
 import { Dialog, DialogActionButtons, DialogActionButtonsProps } from "../Dialog"
@@ -65,11 +65,11 @@ const useStyles = makeStyles((theme) => ({
     marginBottom: theme.spacing(3),
   },
   description: {
-    color: fade(theme.palette.text.secondary, 0.75),
+    color: alpha(theme.palette.text.secondary, 0.75),
     lineHeight: "160%",
 
     "& strong": {
-      color: fade(theme.palette.text.secondary, 0.95),
+      color: alpha(theme.palette.text.secondary, 0.95),
     },
   },
 }))

site/src/components/Dialogs/Dialog.tsx

@@ -1,6 +1,6 @@
 import MuiDialog, { DialogProps as MuiDialogProps } from "@material-ui/core/Dialog"
 import MuiDialogTitle from "@material-ui/core/DialogTitle"
-import { darken, fade, lighten, makeStyles } from "@material-ui/core/styles"
+import { alpha, darken, lighten, makeStyles } from "@material-ui/core/styles"
 import SvgIcon from "@material-ui/core/SvgIcon"
 import * as React from "react"
 import { combineClasses } from "../../util/combineClasses"
@@ -57,7 +57,7 @@ const useTitleStyles = makeStyles(
     icon: {
       height: 84,
       width: 84,
-      color: fade(theme.palette.action.disabled, 0.4),
+      color: alpha(theme.palette.action.disabled, 0.4),
     },
   }),
   { name: "CdrDialogTitle" },
@@ -155,27 +155,27 @@ const useButtonStyles = makeStyles((theme) => ({
     boxShadow: "none",
   },
   cancelButton: {
-    background: fade(theme.palette.primary.main, 0.1),
+    background: alpha(theme.palette.primary.main, 0.1),
     color: theme.palette.primary.main,
 
     "&:hover": {
-      background: fade(theme.palette.primary.main, 0.3),
+      background: alpha(theme.palette.primary.main, 0.3),
     },
   },
   confirmDialogCancelButton: (props: StyleProps) => {
     const color =
       props.type === "info" ? theme.palette.primary.contrastText : theme.palette.error.contrastText
     return {
-      background: fade(color, 0.15),
+      background: alpha(color, 0.15),
       color,
 
       "&:hover": {
-        background: fade(color, 0.3),
+        background: alpha(color, 0.3),
       },
 
       "&.Mui-disabled": {
-        background: fade(color, 0.15),
-        color: fade(color, 0.5),
+        background: alpha(color, 0.15),
+        color: alpha(color, 0.5),
       },
     }
   },
@@ -214,7 +214,7 @@ const useButtonStyles = makeStyles((theme) => ({
       },
       "&.Mui-disabled": {
         backgroundColor: theme.palette.action.disabledBackground,
-        color: fade(theme.palette.text.disabled, 0.5),
+        color: alpha(theme.palette.text.disabled, 0.5),
       },
     },
 
@@ -222,7 +222,7 @@ const useButtonStyles = makeStyles((theme) => ({
       color: theme.palette.error.main,
       borderColor: theme.palette.error.main,
       "&:hover": {
-        backgroundColor: fade(theme.palette.error.main, theme.palette.action.hoverOpacity),
+        backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
         "@media (hover: none)": {
           backgroundColor: "transparent",
         },
@@ -231,7 +231,7 @@ const useButtonStyles = makeStyles((theme) => ({
         },
       },
       "&.Mui-disabled": {
-        color: fade(theme.palette.text.disabled, 0.5),
+        color: alpha(theme.palette.text.disabled, 0.5),
         borderColor: theme.palette.action.disabled,
       },
     },
@@ -239,13 +239,13 @@ const useButtonStyles = makeStyles((theme) => ({
     "&.MuiButton-text": {
       color: theme.palette.error.main,
       "&:hover": {
-        backgroundColor: fade(theme.palette.error.main, theme.palette.action.hoverOpacity),
+        backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
         "@media (hover: none)": {
           backgroundColor: "transparent",
         },
       },
       "&.Mui-disabled": {
-        color: fade(theme.palette.text.disabled, 0.5),
+        color: alpha(theme.palette.text.disabled, 0.5),
       },
     },
   },
@@ -264,7 +264,7 @@ const useButtonStyles = makeStyles((theme) => ({
       },
       "&.Mui-disabled": {
         backgroundColor: theme.palette.action.disabledBackground,
-        color: fade(theme.palette.text.disabled, 0.5),
+        color: alpha(theme.palette.text.disabled, 0.5),
       },
     },
 
@@ -272,7 +272,7 @@ const useButtonStyles = makeStyles((theme) => ({
       color: theme.palette.success.main,
       borderColor: theme.palette.success.main,
       "&:hover": {
-        backgroundColor: fade(theme.palette.success.main, theme.palette.action.hoverOpacity),
+        backgroundColor: alpha(theme.palette.success.main, theme.palette.action.hoverOpacity),
         "@media (hover: none)": {
           backgroundColor: "transparent",
         },
@@ -281,7 +281,7 @@ const useButtonStyles = makeStyles((theme) => ({
         },
       },
       "&.Mui-disabled": {
-        color: fade(theme.palette.text.disabled, 0.5),
+        color: alpha(theme.palette.text.disabled, 0.5),
         borderColor: theme.palette.action.disabled,
       },
     },
@@ -289,13 +289,13 @@ const useButtonStyles = makeStyles((theme) => ({
     "&.MuiButton-text": {
       color: theme.palette.success.main,
       "&:hover": {
-        backgroundColor: fade(theme.palette.success.main, theme.palette.action.hoverOpacity),
+        backgroundColor: alpha(theme.palette.success.main, theme.palette.action.hoverOpacity),
         "@media (hover: none)": {
           backgroundColor: "transparent",
         },
       },
       "&.Mui-disabled": {
-        color: fade(theme.palette.text.disabled, 0.5),
+        color: alpha(theme.palette.text.disabled, 0.5),
       },
     },
   },

site/src/components/TabPanel/TabPanel.tsx

@@ -1,5 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
-import { fade } from "@material-ui/core/styles/colorManipulator"
+import { alpha } from "@material-ui/core/styles/colorManipulator"
 import { FC } from "react"
 import { TabSidebar, TabSidebarItem } from "../TabSidebar/TabSidebar"
 
@@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => ({
     position: "absolute",
     left: -50,
     top: 31,
-    color: fade(theme.palette.common.black, 0.1),
+    color: alpha(theme.palette.common.black, 0.1),
     transition: "transform 0.3s ease",
     zIndex: -1,
   },