Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 72bcd1c

Browse files
jsjoeiojsjoeio
committed
refactor: use alpha() instead of fade
`fade()` was deprecated in favor of `alpha()` in a previous version of `@material-ui/core/styles`.
1 parent a6ccbfc commit 72bcd1c

File tree

3 files changed

+23
-23
lines changed

3 files changed

+23
-23
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import DialogActions from "@material-ui/core/DialogActions"
2-
import { fade, makeStyles } from "@material-ui/core/styles"
2+
import { alpha, makeStyles } from "@material-ui/core/styles"
33
import Typography from "@material-ui/core/Typography"
44
import React, { ReactNode } from "react"
55
import { Dialog, DialogActionButtons, DialogActionButtonsProps } from "../Dialog"
@@ -65,11 +65,11 @@ const useStyles = makeStyles((theme) => ({
6565
marginBottom: theme.spacing(3),
6666
},
6767
description: {
68-
color: fade(theme.palette.text.secondary, 0.75),
68+
color: alpha(theme.palette.text.secondary, 0.75),
6969
lineHeight: "160%",
7070

7171
"& strong": {
72-
color: fade(theme.palette.text.secondary, 0.95),
72+
color: alpha(theme.palette.text.secondary, 0.95),
7373
},
7474
},
7575
}))

‎site/src/components/Dialogs/Dialog.tsx

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import MuiDialog, { DialogProps as MuiDialogProps } from "@material-ui/core/Dialog"
22
import MuiDialogTitle from "@material-ui/core/DialogTitle"
3-
import { darken, fade, lighten, makeStyles } from "@material-ui/core/styles"
3+
import { alpha, darken, lighten, makeStyles } from "@material-ui/core/styles"
44
import SvgIcon from "@material-ui/core/SvgIcon"
55
import * as React from "react"
66
import { combineClasses } from "../../util/combineClasses"
@@ -57,7 +57,7 @@ const useTitleStyles = makeStyles(
5757
icon: {
5858
height: 84,
5959
width: 84,
60-
color: fade(theme.palette.action.disabled, 0.4),
60+
color: alpha(theme.palette.action.disabled, 0.4),
6161
},
6262
}),
6363
{ name: "CdrDialogTitle" },
@@ -155,27 +155,27 @@ const useButtonStyles = makeStyles((theme) => ({
155155
boxShadow: "none",
156156
},
157157
cancelButton: {
158-
background: fade(theme.palette.primary.main, 0.1),
158+
background: alpha(theme.palette.primary.main, 0.1),
159159
color: theme.palette.primary.main,
160160

161161
"&:hover": {
162-
background: fade(theme.palette.primary.main, 0.3),
162+
background: alpha(theme.palette.primary.main, 0.3),
163163
},
164164
},
165165
confirmDialogCancelButton: (props: StyleProps) => {
166166
const color =
167167
props.type === "info" ? theme.palette.primary.contrastText : theme.palette.error.contrastText
168168
return {
169-
background: fade(color, 0.15),
169+
background: alpha(color, 0.15),
170170
color,
171171

172172
"&:hover": {
173-
background: fade(color, 0.3),
173+
background: alpha(color, 0.3),
174174
},
175175

176176
"&.Mui-disabled": {
177-
background: fade(color, 0.15),
178-
color: fade(color, 0.5),
177+
background: alpha(color, 0.15),
178+
color: alpha(color, 0.5),
179179
},
180180
}
181181
},
@@ -214,15 +214,15 @@ const useButtonStyles = makeStyles((theme) => ({
214214
},
215215
"&.Mui-disabled": {
216216
backgroundColor: theme.palette.action.disabledBackground,
217-
color: fade(theme.palette.text.disabled, 0.5),
217+
color: alpha(theme.palette.text.disabled, 0.5),
218218
},
219219
},
220220

221221
"&.MuiButton-outlined": {
222222
color: theme.palette.error.main,
223223
borderColor: theme.palette.error.main,
224224
"&:hover": {
225-
backgroundColor: fade(theme.palette.error.main, theme.palette.action.hoverOpacity),
225+
backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
226226
"@media (hover: none)": {
227227
backgroundColor: "transparent",
228228
},
@@ -231,21 +231,21 @@ const useButtonStyles = makeStyles((theme) => ({
231231
},
232232
},
233233
"&.Mui-disabled": {
234-
color: fade(theme.palette.text.disabled, 0.5),
234+
color: alpha(theme.palette.text.disabled, 0.5),
235235
borderColor: theme.palette.action.disabled,
236236
},
237237
},
238238

239239
"&.MuiButton-text": {
240240
color: theme.palette.error.main,
241241
"&:hover": {
242-
backgroundColor: fade(theme.palette.error.main, theme.palette.action.hoverOpacity),
242+
backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
243243
"@media (hover: none)": {
244244
backgroundColor: "transparent",
245245
},
246246
},
247247
"&.Mui-disabled": {
248-
color: fade(theme.palette.text.disabled, 0.5),
248+
color: alpha(theme.palette.text.disabled, 0.5),
249249
},
250250
},
251251
},
@@ -264,15 +264,15 @@ const useButtonStyles = makeStyles((theme) => ({
264264
},
265265
"&.Mui-disabled": {
266266
backgroundColor: theme.palette.action.disabledBackground,
267-
color: fade(theme.palette.text.disabled, 0.5),
267+
color: alpha(theme.palette.text.disabled, 0.5),
268268
},
269269
},
270270

271271
"&.MuiButton-outlined": {
272272
color: theme.palette.success.main,
273273
borderColor: theme.palette.success.main,
274274
"&:hover": {
275-
backgroundColor: fade(theme.palette.success.main, theme.palette.action.hoverOpacity),
275+
backgroundColor: alpha(theme.palette.success.main, theme.palette.action.hoverOpacity),
276276
"@media (hover: none)": {
277277
backgroundColor: "transparent",
278278
},
@@ -281,21 +281,21 @@ const useButtonStyles = makeStyles((theme) => ({
281281
},
282282
},
283283
"&.Mui-disabled": {
284-
color: fade(theme.palette.text.disabled, 0.5),
284+
color: alpha(theme.palette.text.disabled, 0.5),
285285
borderColor: theme.palette.action.disabled,
286286
},
287287
},
288288

289289
"&.MuiButton-text": {
290290
color: theme.palette.success.main,
291291
"&:hover": {
292-
backgroundColor: fade(theme.palette.success.main, theme.palette.action.hoverOpacity),
292+
backgroundColor: alpha(theme.palette.success.main, theme.palette.action.hoverOpacity),
293293
"@media (hover: none)": {
294294
backgroundColor: "transparent",
295295
},
296296
},
297297
"&.Mui-disabled": {
298-
color: fade(theme.palette.text.disabled, 0.5),
298+
color: alpha(theme.palette.text.disabled, 0.5),
299299
},
300300
},
301301
},

‎site/src/components/TabPanel/TabPanel.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { makeStyles } from "@material-ui/core/styles"
2-
import { fade } from "@material-ui/core/styles/colorManipulator"
2+
import { alpha } from "@material-ui/core/styles/colorManipulator"
33
import { FC } from "react"
44
import { TabSidebar, TabSidebarItem } from "../TabSidebar/TabSidebar"
55

@@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => ({
5353
position: "absolute",
5454
left: -50,
5555
top: 31,
56-
color: fade(theme.palette.common.black, 0.1),
56+
color: alpha(theme.palette.common.black, 0.1),
5757
transition: "transform 0.3s ease",
5858
zIndex: -1,
5959
},

0 commit comments

Comments
 (0)