diff --git a/src/components/ChainSelector/ChainSelector.stories.tsx b/src/components/ChainSelector/ChainSelector.stories.tsx new file mode 100644 index 0000000..8743dec --- /dev/null +++ b/src/components/ChainSelector/ChainSelector.stories.tsx @@ -0,0 +1,55 @@ +import { ChainId } from "@dcl/schemas" +import { ChainSelector } from "./ChainSelector" +import { ChainSelectorProps } from "./ChainSelector.types" +import type { Meta, StoryObj } from "@storybook/react" + +const meta: Meta = { + component: ChainSelector, + title: "Decentraland UI/Chain Selector", + argTypes: { + chains: { + table: { + disable: true, + }, + }, + i18n: { + description: "Internationalization", + control: "object", + }, + }, + render: (args) => ( + console.log(chain)} + selectedChain={ChainId.ETHEREUM_MAINNET} + chains={[ + ChainId.ETHEREUM_MAINNET, + ChainId.MATIC_MAINNET, + ChainId.ARBITRUM_MAINNET, + ChainId.OPTIMISM_MAINNET, + ChainId.BSC_MAINNET, + ChainId.FANTOM_MAINNET, + ChainId.AVALANCHE_MAINNET, + ]} + i18n={{ + title: "Select Network", + connected: "Connected", + confirmInWallet: "Confirm in wallet", + }} + {...args} + /> + ), +} + +type Story = StoryObj + +const Simple: Story = {} +const Confirmed: Story = { + name: "With chain being confirmed", + args: { + chainBeingConfirmed: ChainId.MATIC_MAINNET, + }, +} + +// eslint-disable-next-line import/no-default-export +export default meta +export { Simple, Confirmed } diff --git a/src/components/ChainSelector/ChainSelector.styled.tsx b/src/components/ChainSelector/ChainSelector.styled.tsx new file mode 100644 index 0000000..4f3103d --- /dev/null +++ b/src/components/ChainSelector/ChainSelector.styled.tsx @@ -0,0 +1,187 @@ +import styled from "@emotion/styled" +import { + Box, + Button, + IconButton, + Paper, + Typography, + useTheme, +} from "@mui/material" +import { neutral, rarity, textOnNeutral } from "../../theme/colors" +import { Modal } from "../Modal/Modal" + +const CommonButtonStyle = styled(Button)(() => { + return { + display: "flex", + alignItems: "center", + borderRadius: "14px", + padding: "8px 10px", + color: "green", + "&.MuiButton-sizeMedium.MuiButton-containedSecondary": { + opacity: "1", + "&:not(.Mui-disabled):not(.Mui-focusVisible):not(:hover)": { + color: textOnNeutral.gray1, + background: neutral.gray1, + boxShadow: "none", + }, + "&:not(.Mui-disabled):not(.Mui-focusVisible):hover": { + color: textOnNeutral.gray0, + background: neutral.gray0, + }, + }, + "& span.MuiButton-icon.MuiButton-startIcon.MuiButton-iconSizeMedium": { + "& svg": { + fontSize: "28px", + }, + }, + } +}) + +const SelectorButton = styled(CommonButtonStyle)(() => { + return { + "@media (max-width: 991px)": { + "&.MuiButton-sizeMedium.MuiButton-containedSecondary": { + paddingLeft: "0", + paddingRight: "0", + minWidth: "50px", + }, + "& span": { + marginLeft: "0", + marginRight: "0", + }, + }, + } +}) + +const ChainButton = styled(CommonButtonStyle)((props: { + isSelected: boolean +}) => { + const { isSelected } = props + const theme = useTheme() + + let background = "transparent" + + if (isSelected) { + background = theme.palette.action.hover + } + + return { + alignItems: "flex-start", + justifyContent: "flex-start", + marginBottom: "8px", + "&.MuiButton-sizeMedium.MuiButton-textSecondary:not(.Mui-disabled):not(.Mui-focusVisible):not(:hover)": + { + color: theme.palette.text.primary, + fontSize: "17px", + textTransform: "capitalize" as const, + backgroundColor: background, + }, + "&.MuiButton-sizeMedium.MuiButton-textSecondary:not(.Mui-disabled):not(.Mui-focusVisible):hover": + { + color: theme.palette.text.primary, + fontSize: "17px", + textTransform: "capitalize" as const, + }, + } +}) + +const ConnectedLabel = styled(Typography)(() => { + const theme = useTheme() + + return { + position: "absolute" as const, + right: "8px", + paddingRight: "16px", + fontSize: "14px", + color: theme.palette.text.primary, + "&:after": { + content: '""', + width: "8px", + height: "8px", + position: "absolute" as const, + right: "0", + top: "calc(50% - 4px)", + borderRadius: "50%", + backgroundColor: rarity.rare, + }, + } +}) + +const ConfirmLabel = styled(ConnectedLabel)({ + "&:after": { + backgroundColor: rarity.unique, + }, +}) + +const ChainSelectorModal = styled(Modal)({ + "&.MuiModal-root .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation24": + { + width: "100px", + }, + " .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation24": { + width: "150px", + }, + "& .MuiPaper-root": { + width: "170px", + }, + MuiPaper: { + root: { + width: "180px", + }, + }, +}) + +const ChainSelectorContainer = styled(Paper)(() => { + return { + position: "absolute" as const, + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: "360px", + borderRadius: "12px", + "@media (max-width: 700px)": { + minWidth: "100vw", + maxWidth: "100vw", + minHeight: "100vh", + borderRadius: "0px", + margin: "0", + padding: "0", + top: "0", + left: "0", + transform: "translate(0, 0)", + }, + } +}) + +const ChainSelectorWrapper = styled(Box)({ + display: "flex", + flexDirection: "column", + margin: "16px", + "@media (max-width: 991px)": { + padding: "5px", + }, +}) + +const ChainSelectorModalTitleContainer = styled(Box)({ + display: "flex", + justifyContent: "center", + paddingTop: "24px", +}) + +const ChainSelectorCloseButton = styled(IconButton)({ + marginTop: "-12px", + position: "absolute", + right: 12, +}) + +export { + SelectorButton, + ChainButton, + ConnectedLabel, + ConfirmLabel, + ChainSelectorModal, + ChainSelectorContainer, + ChainSelectorWrapper, + ChainSelectorModalTitleContainer, + ChainSelectorCloseButton, +} diff --git a/src/components/ChainSelector/ChainSelector.tsx b/src/components/ChainSelector/ChainSelector.tsx new file mode 100644 index 0000000..eee842c --- /dev/null +++ b/src/components/ChainSelector/ChainSelector.tsx @@ -0,0 +1,109 @@ +import { useCallback, useEffect, useRef, useState } from "react" +import { ChainId, getChainName } from "@dcl/schemas" +import ClearRoundedIcon from "@mui/icons-material/ClearRounded" +import { Modal, Typography } from "@mui/material" +import { IconChain } from "../IconChain/IconChain" +import { useTabletAndBelowMediaQuery } from "../Media" +import { + ChainNameIconMap, + type ChainSelectorProps, +} from "./ChainSelector.types" +import { + ChainButton, + ChainSelectorCloseButton, + ChainSelectorContainer, + ChainSelectorModalTitleContainer, + ChainSelectorWrapper, + ConfirmLabel, + ConnectedLabel, + SelectorButton, +} from "./ChainSelector.styled" + +export const ChainSelector = (props: ChainSelectorProps) => { + const { chains, selectedChain, chainBeingConfirmed, i18n, onSelectChain } = + props + + const chainBeingConfirmedRef = useRef(chainBeingConfirmed) + const isMobileOrTablet = useTabletAndBelowMediaQuery() + + // This effect is used to close the modal when the chain being confirmed changes + useEffect(() => { + if (selectedChain && selectedChain === chainBeingConfirmedRef.current) { + chainBeingConfirmedRef.current = undefined + setShowModal(false) + } + }, [selectedChain]) + + const [showModal, setShowModal] = useState(false) + + const title = i18n?.title || "Select Network" + + const onButtonClick = useCallback(() => { + setShowModal(!showModal) + }, []) + + const onSelectChainHandler = useCallback((chainId: ChainId) => { + onSelectChain(chainId) + chainBeingConfirmedRef.current = chainId + }, []) + + return ( + <> + } + onClick={onButtonClick} + > + {!isMobileOrTablet + ? selectedChain === ChainId.ETHEREUM_MAINNET + ? "Ethereum" + : getChainName(selectedChain) + : null} + + setShowModal(false)}> + + + {title && {title}} + + setShowModal(false)} + > + + + + + + {chains.map((chain) => { + const chainName = + chain === ChainId.ETHEREUM_MAINNET + ? "Ethereum" + : getChainName(chain) + + return ( + } + onClick={() => onSelectChainHandler(chain)} + isSelected={selectedChain === chain} + > + {chainName} + + {selectedChain === chain ? ( + {i18n.connected} + ) : chainBeingConfirmed && chain === chainBeingConfirmed ? ( + {i18n.confirmInWallet} + ) : null} + + ) + })} + + + + + ) +} diff --git a/src/components/ChainSelector/ChainSelector.types.ts b/src/components/ChainSelector/ChainSelector.types.ts new file mode 100644 index 0000000..7fad884 --- /dev/null +++ b/src/components/ChainSelector/ChainSelector.types.ts @@ -0,0 +1,31 @@ +import { ChainId } from "@dcl/schemas" + +type ChainSelectori18n = { + title: string + connected: React.ReactNode + confirmInWallet: React.ReactNode +} + +type ChainSelectorProps = { + selectedChain: ChainId + chainBeingConfirmed?: ChainId + chains: ChainId[] + onSelectChain: (chain: ChainId) => void + i18n: ChainSelectori18n +} + +const ChainNameIconMap = { + [ChainId.ETHEREUM_MAINNET]: "ethereum", + [ChainId.ETHEREUM_SEPOLIA]: "ethereum", + [ChainId.MATIC_MAINNET]: "polygon", + [ChainId.MATIC_MUMBAI]: "polygon", + [ChainId.MATIC_AMOY]: "polygon", + [ChainId.ARBITRUM_MAINNET]: "arbitrum", + [ChainId.OPTIMISM_MAINNET]: "optimism", + [ChainId.FANTOM_MAINNET]: "fantom", + [ChainId.BSC_MAINNET]: "bsc", + [ChainId.AVALANCHE_MAINNET]: "avalanche", +} + +export { ChainNameIconMap } +export type { ChainSelectori18n, ChainSelectorProps } diff --git a/src/components/Icon/Chains/ArbitrumIcon.tsx b/src/components/Icon/Chains/ArbitrumIcon.tsx new file mode 100644 index 0000000..b0031c5 --- /dev/null +++ b/src/components/Icon/Chains/ArbitrumIcon.tsx @@ -0,0 +1,50 @@ +import React from "react" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" + +const ArbitrumIcon = React.memo((props: SvgIconProps) => { + return ( + + + + + + + + + + + + + + + + + ) +}) + +export { ArbitrumIcon } diff --git a/src/components/Icon/Chains/AvalancheIcon.tsx b/src/components/Icon/Chains/AvalancheIcon.tsx new file mode 100644 index 0000000..82d8179 --- /dev/null +++ b/src/components/Icon/Chains/AvalancheIcon.tsx @@ -0,0 +1,34 @@ +import React from "react" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" + +const AvalancheIcon = React.memo((props: SvgIconProps) => { + return ( + + + + + + + + + + + + + + ) +}) + +export { AvalancheIcon } diff --git a/src/components/Icon/Chains/BinanceIcon.tsx b/src/components/Icon/Chains/BinanceIcon.tsx new file mode 100644 index 0000000..06ab215 --- /dev/null +++ b/src/components/Icon/Chains/BinanceIcon.tsx @@ -0,0 +1,61 @@ +import React from "react" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" + +const BinanceIcon = React.memo((props: SvgIconProps) => { + return ( + + + + + + + + + + + + + + + + + + + + + + ) +}) + +export { BinanceIcon } diff --git a/src/components/Icon/Chains/EthereumIcon.tsx b/src/components/Icon/Chains/EthereumIcon.tsx new file mode 100644 index 0000000..7c45ebc --- /dev/null +++ b/src/components/Icon/Chains/EthereumIcon.tsx @@ -0,0 +1,69 @@ +import React from "react" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" + +const EthereumIcon = React.memo((props: SvgIconProps) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ) +}) + +export { EthereumIcon } diff --git a/src/components/Icon/Chains/FantomIcon.tsx b/src/components/Icon/Chains/FantomIcon.tsx new file mode 100644 index 0000000..989e79c --- /dev/null +++ b/src/components/Icon/Chains/FantomIcon.tsx @@ -0,0 +1,36 @@ +import React from "react" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" + +const FantomIcon = React.memo((props: SvgIconProps) => { + return ( + + + + + + + + + + + + + + ) +}) + +export { FantomIcon } diff --git a/src/components/Icon/Chains/OptimismIcon.tsx b/src/components/Icon/Chains/OptimismIcon.tsx new file mode 100644 index 0000000..74b146d --- /dev/null +++ b/src/components/Icon/Chains/OptimismIcon.tsx @@ -0,0 +1,50 @@ +import React from "react" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" + +const OptimismIcon = React.memo((props: SvgIconProps) => { + return ( + + + + + + + + + + + + + + + + + + + ) +}) + +export { OptimismIcon } diff --git a/src/components/Icon/Chains/PolygonIcon.tsx b/src/components/Icon/Chains/PolygonIcon.tsx new file mode 100644 index 0000000..2f80036 --- /dev/null +++ b/src/components/Icon/Chains/PolygonIcon.tsx @@ -0,0 +1,42 @@ +import React from "react" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" + +const PolygonIcon = React.memo((props: SvgIconProps) => { + return ( + + + + + + + + + + + + + + + + + + ) +}) + +export { PolygonIcon } diff --git a/src/components/IconChain/IconChain.tsx b/src/components/IconChain/IconChain.tsx new file mode 100644 index 0000000..ef23995 --- /dev/null +++ b/src/components/IconChain/IconChain.tsx @@ -0,0 +1,38 @@ +import React from "react" +import { SvgIconOwnProps } from "@mui/material" +import { ArbitrumIcon } from "../Icon/Chains/ArbitrumIcon" +import { AvalancheIcon } from "../Icon/Chains/AvalancheIcon" +import { BinanceIcon } from "../Icon/Chains/BinanceIcon" +import { EthereumIcon } from "../Icon/Chains/EthereumIcon" +import { FantomIcon } from "../Icon/Chains/FantomIcon" +import { OptimismIcon } from "../Icon/Chains/OptimismIcon" +import { PolygonIcon } from "../Icon/Chains/PolygonIcon" +import { ChainIconOption, IconChainProps } from "./IconChain.types" + +const IconChain = React.memo((props: IconChainProps) => { + const { icon } = props + const commonProps: Pick = { + fontSize: "small", + color: "inherit", + } + switch (icon) { + case ChainIconOption.ARBITRUM: + return + case ChainIconOption.AVALANCHE: + return + case ChainIconOption.BSC: + return + case ChainIconOption.ETHEREUM: + return + case ChainIconOption.FANTOM: + return + case ChainIconOption.OPTIMISM: + return + case ChainIconOption.POLYGON: + return + default: + return <> + } +}) + +export { IconChain } diff --git a/src/components/IconChain/IconChain.types.tsx b/src/components/IconChain/IconChain.types.tsx new file mode 100644 index 0000000..4efb6a3 --- /dev/null +++ b/src/components/IconChain/IconChain.types.tsx @@ -0,0 +1,15 @@ +enum ChainIconOption { + ETHEREUM = "ethereum", + POLYGON = "polygon", + ARBITRUM = "arbitrum", + OPTIMISM = "optimism", + FANTOM = "fantom", + BSC = "bsc", + AVALANCHE = "avalanche", +} + +type IconChainProps = { + icon?: ChainIconOption +} + +export { ChainIconOption, IconChainProps } diff --git a/src/theme/colorSchemes.ts b/src/theme/colorSchemes.ts index 9e0ee20..6d6e313 100644 --- a/src/theme/colorSchemes.ts +++ b/src/theme/colorSchemes.ts @@ -95,7 +95,7 @@ const colorSchemas = { }, common: { black_states: { - main: "#161518", + main: neutral.softBlack1, hover: "rgba(22, 21, 24, 0.04)", selected: "rgba(22, 21, 24, 0.08)", focus: "rgba(22, 21, 24, 0.12)", @@ -118,7 +118,7 @@ const colorSchemas = { input: { standard: { enabledBorder: "rgba(22, 21, 24, 0.42)", - hoverBorder: "#161518", + hoverBorder: neutral.softBlack1, }, filled: { enabledFill: "rgba(22, 21, 24, 0.06)", @@ -126,12 +126,12 @@ const colorSchemas = { }, outlined: { enabledBorder: "rgba(22, 21, 24, 0.23)", - hoverBorder: "#161518", + hoverBorder: neutral.softBlack1, }, }, switch: { knobFillEnabled: "#FFFFFF", - slideFill: "#161518", + slideFill: neutral.softBlack1, knowFillDisabled: "#ECEBED", }, rating: { @@ -142,7 +142,7 @@ const colorSchemas = { fill: "#43404A", }, chip: { - defaultCloseFill: "#161518", + defaultCloseFill: neutral.softBlack1, defaultHoverFill: "rgba(22, 21, 24, 0.12)", defaultEnabledBorder: "#A09BA8", defaultFocusFill: "rgba(22, 21, 24, 0.2)", @@ -270,7 +270,7 @@ const colorSchemas = { }, common: { black_states: { - main: "#161518", + main: neutral.softBlack1, hover: "rgba(22, 21, 24, 0.08)", selected: "rgba(22, 21, 24, 0.16)", focus: "rgba(22, 21, 24, 0.12)", @@ -284,32 +284,8 @@ const colorSchemas = { }, }, background: { - default: "#161518", - "paper-elevation-0": "#1D1C20", - "paper-elevation-1": "#201F24", - "paper-elevation-2": "#242227", - "paper-elevation-3": "#27262B", - "paper-elevation-4": "#2B292F", - "paper-elevation-5": "#2E2C33", - "paper-elevation-6": "#322F37", - "paper-elevation-7": "#322F37", - "paper-elevation-8": "#35333B", - "paper-elevation-9": "#35333B", - "paper-elevation-10": "#39363E", - "paper-elevation-11": "#39363E", - "paper-elevation-12": "#3C3942", - "paper-elevation-13": "#3C3942", - "paper-elevation-14": "#3C3942", - "paper-elevation-15": "#3C3942", - "paper-elevation-16": "#403D46", - "paper-elevation-17": "#403D46", - "paper-elevation-18": "#403D46", - "paper-elevation-19": "#403D46", - "paper-elevation-20": "#43404A", - "paper-elevation-21": "#43404A", - "paper-elevation-22": "#43404A", - "paper-elevation-23": "#43404A", - "paper-elevation-24": "#43404A", + default: neutral.softBlack1, + paper: "#1D1C20", }, elevation: { outlined: "rgba(255, 255, 255, 0.12)", diff --git a/src/theme/components.ts b/src/theme/components.ts index 2ae35b6..98e2a89 100644 --- a/src/theme/components.ts +++ b/src/theme/components.ts @@ -1,4 +1,4 @@ -import { Components, Palette, Theme } from "@mui/material" +import { Components, Palette, Theme, getOverlayAlpha } from "@mui/material" export const components = ( palette: Palette @@ -2601,7 +2601,157 @@ export const components = ( MuiPaper: { styleOverrides: { root: { - backgroundColor: palette.background.default, + backgroundColor: palette.background.paper, + }, + elevation0: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(0)}), rgba(255, 255, 255, ${getOverlayAlpha(0)}))` + : "none", + }, + elevation1: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(1)}), rgba(255, 255, 255, ${getOverlayAlpha(1)}))` + : "none", + }, + elevation2: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(2)}), rgba(255, 255, 255, ${getOverlayAlpha(2)}))` + : "none", + }, + elevation3: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(3)}), rgba(255, 255, 255, ${getOverlayAlpha(3)}))` + : "none", + }, + elevation4: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(4)}), rgba(255, 255, 255, ${getOverlayAlpha(4)}))` + : "none", + }, + elevation5: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(5)}), rgba(255, 255, 255, ${getOverlayAlpha(5)}))` + : "none", + }, + elevation6: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(6)}), rgba(255, 255, 255, ${getOverlayAlpha(6)}))` + : "none", + }, + elevation7: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(7)}), rgba(255, 255, 255, ${getOverlayAlpha(7)}))` + : "none", + }, + elevation8: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(8)}), rgba(255, 255, 255, ${getOverlayAlpha(8)}))` + : "none", + }, + elevation9: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(9)}), rgba(255, 255, 255, ${getOverlayAlpha(9)}))` + : "none", + }, + elevation10: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(10)}), rgba(255, 255, 255, ${getOverlayAlpha(10)}))` + : "none", + }, + elevation11: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(11)}), rgba(255, 255, 255, ${getOverlayAlpha(11)}))` + : "none", + }, + elevation12: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(12)}), rgba(255, 255, 255, ${getOverlayAlpha(12)}))` + : "none", + }, + elevation13: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(13)}), rgba(255, 255, 255, ${getOverlayAlpha(13)}))` + : "none", + }, + elevation14: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(14)}), rgba(255, 255, 255, ${getOverlayAlpha(14)}))` + : "none", + }, + elevation15: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(15)}), rgba(255, 255, 255, ${getOverlayAlpha(15)}))` + : "none", + }, + elevation16: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(16)}), rgba(255, 255, 255, ${getOverlayAlpha(16)}))` + : "none", + }, + elevation17: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(17)}), rgba(255, 255, 255, ${getOverlayAlpha(17)}))` + : "none", + }, + elevation18: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(18)}), rgba(255, 255, 255, ${getOverlayAlpha(18)}))` + : "none", + }, + elevation19: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(19)}), rgba(255, 255, 255, ${getOverlayAlpha(19)}))` + : "none", + }, + elevation20: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(20)}), rgba(255, 255, 255, ${getOverlayAlpha(20)}))` + : "none", + }, + elevation21: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(21)}), rgba(255, 255, 255, ${getOverlayAlpha(21)}))` + : "none", + }, + elevation22: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(22)}), rgba(255, 255, 255, ${getOverlayAlpha(22)}))` + : "none", + }, + elevation23: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(23)}), rgba(255, 255, 255, ${getOverlayAlpha(23)}))` + : "none", + }, + elevation24: { + backgroundImage: + palette.mode === "dark" + ? `linear-gradient(rgba(255, 255, 255, ${getOverlayAlpha(24)}), rgba(255, 255, 255, ${getOverlayAlpha(24)}))` + : "none", }, }, },