From 472f45738c25e88d0853c50295d252346b2e41c7 Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Wed, 30 Oct 2024 13:51:54 +1000 Subject: [PATCH] fix: fix cookie banner color (#239) --- .../Content/components/Logo/logo.tsx | 2 +- src/components/Links/components/Link/link.tsx | 2 +- src/components/common/Alert/constants.ts | 29 +++ .../common/Alert/hooks/useTransition/types.ts | 5 + .../hooks/useTransition/useTransition.ts | 25 +++ .../components/CookieBanner/constants.ts | 9 + .../CookieBanner/cookieBanner.styles.ts | 13 +- .../components/CookieBanner/cookieBanner.tsx | 100 ++++------- .../DismissibleBanner/dismissibleBanner.tsx | 44 ----- .../common/Breadcrumbs/breadcrumbs.tsx | 2 +- src/components/types.ts | 3 + src/hooks/useLocalStorage/useLocalStorage.ts | 4 +- src/styles/common/mui/alert.ts | 24 +++ src/styles/common/mui/icon.ts | 8 + src/theme/common/components.ts | 170 ++---------------- src/theme/components/index.ts | 2 + src/theme/components/muiAlert.ts | 144 +++++++++++++++ src/theme/components/muiAlertTitle.ts | 14 ++ src/theme/theme.ts | 5 +- types/data-explorer-ui.d.ts | 1 + 20 files changed, 322 insertions(+), 284 deletions(-) create mode 100644 src/components/common/Alert/constants.ts create mode 100644 src/components/common/Alert/hooks/useTransition/types.ts create mode 100644 src/components/common/Alert/hooks/useTransition/useTransition.ts create mode 100644 src/components/common/Banner/components/CookieBanner/constants.ts delete mode 100644 src/components/common/Banner/components/DismissibleBanner/dismissibleBanner.tsx create mode 100644 src/components/types.ts create mode 100644 src/styles/common/mui/alert.ts create mode 100644 src/styles/common/mui/icon.ts create mode 100644 src/theme/components/index.ts create mode 100644 src/theme/components/muiAlert.ts create mode 100644 src/theme/components/muiAlertTitle.ts diff --git a/src/components/Layout/components/Header/components/Content/components/Logo/logo.tsx b/src/components/Layout/components/Header/components/Content/components/Logo/logo.tsx index 2191a027..60726ac9 100644 --- a/src/components/Layout/components/Header/components/Content/components/Logo/logo.tsx +++ b/src/components/Layout/components/Header/components/Content/components/Logo/logo.tsx @@ -1,10 +1,10 @@ import React from "react"; -import { BaseComponentProps } from "../../../../../../../../theme/common/types"; import { ImageSrc, StaticImage, } from "../../../../../../../common/StaticImage/staticImage"; import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities"; +import { BaseComponentProps } from "../../../../../../../types"; import { StyledLink } from "./logo.styles"; export interface LogoProps extends BaseComponentProps { diff --git a/src/components/Links/components/Link/link.tsx b/src/components/Links/components/Link/link.tsx index b3d65225..5951d739 100644 --- a/src/components/Links/components/Link/link.tsx +++ b/src/components/Links/components/Link/link.tsx @@ -6,9 +6,9 @@ import { import NLink from "next/link"; import React, { ReactNode } from "react"; import { isValidUrl } from "../../../../common/utils"; -import { BaseComponentProps } from "../../../../theme/common/types"; import { CopyToClipboard } from "../../../common/CopyToClipboard/copyToClipboard"; import { TypographyProps } from "../../../common/Typography/common/entities"; +import { BaseComponentProps } from "../../../types"; import { ANCHOR_TARGET, REL_ATTRIBUTE, Url } from "../../common/entities"; import { isClientSideNavigation, diff --git a/src/components/common/Alert/constants.ts b/src/components/common/Alert/constants.ts new file mode 100644 index 00000000..fe2d5546 --- /dev/null +++ b/src/components/common/Alert/constants.ts @@ -0,0 +1,29 @@ +import { AlertProps } from "@mui/material"; +import { COLOR, SEVERITY, VARIANT } from "../../../styles/common/mui/alert"; + +export const ALERT_PROPS: Record> = { + FILLED_INK: { + color: COLOR.INK, + variant: VARIANT.FILLED, + }, + FILLED_PRIMARY: { + color: COLOR.PRIMARY, + variant: VARIANT.FILLED, + }, + FILLED_SMOKE: { + color: COLOR.SMOKE, + variant: VARIANT.FILLED, + }, + STANDARD_ERROR: { + severity: SEVERITY.ERROR, + }, + STANDARD_INFO: { + severity: SEVERITY.INFO, + }, + STANDARD_SUCCESS: { + severity: SEVERITY.SUCCESS, + }, + STANDARD_WARNING: { + severity: SEVERITY.WARNING, + }, +}; diff --git a/src/components/common/Alert/hooks/useTransition/types.ts b/src/components/common/Alert/hooks/useTransition/types.ts new file mode 100644 index 00000000..78f50423 --- /dev/null +++ b/src/components/common/Alert/hooks/useTransition/types.ts @@ -0,0 +1,5 @@ +export interface UseTransition { + isIn: boolean; + onEnter: () => void; + onExit: () => void; +} diff --git a/src/components/common/Alert/hooks/useTransition/useTransition.ts b/src/components/common/Alert/hooks/useTransition/useTransition.ts new file mode 100644 index 00000000..f109d9d4 --- /dev/null +++ b/src/components/common/Alert/hooks/useTransition/useTransition.ts @@ -0,0 +1,25 @@ +import { useCallback, useState } from "react"; +import { UseTransition } from "./types"; + +/** + * Hook to manage transition state for alert component wrapped in a transition component. + * @param initialState - Initial state of the transition. + * @returns transition state and handlers. + */ +export const useTransition = (initialState?: boolean): UseTransition => { + const [isIn, setIsIn] = useState(initialState || false); + + const onEnter = useCallback((): void => { + setIsIn(true); + }, []); + + const onExit = useCallback((): void => { + setIsIn(false); + }, []); + + return { + isIn, + onEnter, + onExit, + }; +}; diff --git a/src/components/common/Banner/components/CookieBanner/constants.ts b/src/components/common/Banner/components/CookieBanner/constants.ts new file mode 100644 index 00000000..7eac01aa --- /dev/null +++ b/src/components/common/Banner/components/CookieBanner/constants.ts @@ -0,0 +1,9 @@ +import { AlertProps } from "@mui/material"; +import { COLOR, VARIANT } from "../../../../../styles/common/mui/alert"; + +export const ALERT_PROPS: Partial = { + color: COLOR.INK, + elevation: 2, + icon: false, + variant: VARIANT.FILLED, +}; diff --git a/src/components/common/Banner/components/CookieBanner/cookieBanner.styles.ts b/src/components/common/Banner/components/CookieBanner/cookieBanner.styles.ts index bb3c73d5..b860e3ff 100644 --- a/src/components/common/Banner/components/CookieBanner/cookieBanner.styles.ts +++ b/src/components/common/Banner/components/CookieBanner/cookieBanner.styles.ts @@ -1,29 +1,20 @@ import styled from "@emotion/styled"; +import { Alert } from "@mui/material"; import { mediaTabletUp } from "../../../../../styles/common/mixins/breakpoints"; -import { white } from "../../../../../styles/common/mixins/colors"; import { textBody400 } from "../../../../../styles/common/mixins/fonts"; -import { shadows02 } from "../../../../../styles/common/mixins/shadows"; -import { Banner } from "../../banner"; -export const CookieBanner = styled(Banner)` +export const StyledAlert = styled(Alert)` bottom: 0; - box-shadow: ${shadows02}; - color: ${white}; flex-direction: column; gap: 16px; left: 0; margin: 8px; - padding: 16px; position: fixed; width: calc(100vw - 16px); z-index: 1100; // Above support fab, below support form. .MuiAlert-message { ${textBody400}; - - .MuiLink-root { - color: inherit; - } } .MuiAlert-action { diff --git a/src/components/common/Banner/components/CookieBanner/cookieBanner.tsx b/src/components/common/Banner/components/CookieBanner/cookieBanner.tsx index 1c7d0442..8d36dc99 100644 --- a/src/components/common/Banner/components/CookieBanner/cookieBanner.tsx +++ b/src/components/common/Banner/components/CookieBanner/cookieBanner.tsx @@ -1,14 +1,16 @@ -import { ButtonProps, AlertProps as MAlertProps } from "@mui/material"; -import React, { forwardRef, Fragment, ReactNode } from "react"; +import { AlertProps, Button, Fade } from "@mui/material"; +import React, { Fragment, ReactNode, useEffect } from "react"; import { FLAG } from "../../../../../hooks/useFeatureFlag/common/entities"; import { setLocalStorage } from "../../../../../hooks/useLocalStorage/common/utils"; import { useLocalStorage } from "../../../../../hooks/useLocalStorage/useLocalStorage"; -import { BaseComponentProps } from "../../../../../theme/common/types"; -import { ButtonPrimary } from "../../../Button/components/ButtonPrimary/buttonPrimary"; -import { DismissibleBanner } from "../DismissibleBanner/dismissibleBanner"; -import { CookieBanner as Banner } from "./cookieBanner.styles"; +import { BaseComponentProps } from "../../../../types"; +import { useTransition } from "../../../Alert/hooks/useTransition/useTransition"; +import { ALERT_PROPS } from "./constants"; +import { StyledAlert } from "./cookieBanner.styles"; -export interface CookieBannerProps extends BaseComponentProps, MAlertProps { +export interface CookieBannerProps + extends Omit, + BaseComponentProps { localStorageKey: string; message?: ReactNode; secondaryAction?: ReactNode; @@ -20,66 +22,36 @@ export const CookieBanner = ({ message, secondaryAction, }: CookieBannerProps): JSX.Element => { + const { isIn, onEnter, onExit } = useTransition(); const localStorage = useLocalStorage(localStorageKey); - const isCookieAccepted = localStorage === FLAG.TRUE; - // Callback fired when the banner requests to be closed. - const onDismiss = (): void => { - setLocalStorage(localStorageKey, FLAG.TRUE); - }; + useEffect(() => { + if (localStorage === null) onEnter(); + }, [localStorage, onEnter]); return ( - renderCloseButton(props, secondaryAction), - }} - > - {message} - + + + + {secondaryAction} + + } + className={className} + > + {message} + + ); }; - -/** - * Return the cookie banner alert. - * @param props - Alert props e.g. "onClick" to close banner. - * @returns alert element. - */ -const Alert = forwardRef(function Alert( - { ...props }, - ref -): JSX.Element { - return ( - - {props.children} - - ); -}); - -/** - * Returns the close action component(s). - * @param buttonProps - Button props e.g. "onClick" to close banner. - * @param secondaryAction - Secondary action component. - * @returns close button element(s). - */ -function renderCloseButton( - buttonProps: ButtonProps, - secondaryAction?: ReactNode -): JSX.Element { - return ( - - Ok, Got It - {secondaryAction} - - ); -} diff --git a/src/components/common/Banner/components/DismissibleBanner/dismissibleBanner.tsx b/src/components/common/Banner/components/DismissibleBanner/dismissibleBanner.tsx deleted file mode 100644 index 2f62fa8d..00000000 --- a/src/components/common/Banner/components/DismissibleBanner/dismissibleBanner.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { - Fade, - Alert as MAlert, - AlertProps as MAlertProps, -} from "@mui/material"; -import React, { ElementType, ReactNode, useEffect, useState } from "react"; - -export interface CookieBannerProps extends MAlertProps { - Alert?: ElementType; - children: ReactNode; - className?: string; - onDismiss?: () => void; - open: boolean; -} - -export const DismissibleBanner = ({ - Alert = MAlert /* Requires forwardRef to be used as a child of Fade. */, - className, - children, - onDismiss, - open, - ...props /* Spread props to allow for Mui AlertProps specific prop overrides. */ -}: CookieBannerProps): JSX.Element => { - const [isIn, setIsIn] = useState(false); - - // Callback fired when the component requests to be closed. - const onClose = (): void => { - onDismiss?.(); - setIsIn(false); - }; - - // Sets the open state. - useEffect(() => { - setIsIn(open); - }, [open]); - - return ( - - - {children} - - - ); -}; diff --git a/src/components/common/Breadcrumbs/breadcrumbs.tsx b/src/components/common/Breadcrumbs/breadcrumbs.tsx index bc93e962..bd880120 100644 --- a/src/components/common/Breadcrumbs/breadcrumbs.tsx +++ b/src/components/common/Breadcrumbs/breadcrumbs.tsx @@ -2,7 +2,7 @@ import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded"; import { Link, Breadcrumbs as MBreadcrumbs, Typography } from "@mui/material"; import NLink from "next/link"; import React, { ReactNode } from "react"; -import { BaseComponentProps } from "../../../theme/common/types"; +import { BaseComponentProps } from "../../types"; export interface Breadcrumb { path: string; diff --git a/src/components/types.ts b/src/components/types.ts new file mode 100644 index 00000000..0d12404e --- /dev/null +++ b/src/components/types.ts @@ -0,0 +1,3 @@ +export interface BaseComponentProps { + className?: string; +} diff --git a/src/hooks/useLocalStorage/useLocalStorage.ts b/src/hooks/useLocalStorage/useLocalStorage.ts index 15d1004f..027b342e 100644 --- a/src/hooks/useLocalStorage/useLocalStorage.ts +++ b/src/hooks/useLocalStorage/useLocalStorage.ts @@ -6,8 +6,8 @@ import { getLocalStorage } from "./common/utils"; * @param key - Local storage key. * @returns local storage value. */ -export function useLocalStorage(key: string): string | null { - const [value, setValue] = useState(null); +export function useLocalStorage(key: string): string | null | undefined { + const [value, setValue] = useState(); useEffect(() => { setValue(getLocalStorage(key)); diff --git a/src/styles/common/mui/alert.ts b/src/styles/common/mui/alert.ts new file mode 100644 index 00000000..9971170f --- /dev/null +++ b/src/styles/common/mui/alert.ts @@ -0,0 +1,24 @@ +import { AlertProps } from "@mui/material"; + +export const COLOR: Record = { + ERROR: "error", + INFO: "info", + INK: "ink", + PRIMARY: "primary", + SMOKE: "smoke", + SUCCESS: "success", + WARNING: "warning", +}; + +export const SEVERITY: Record = { + ERROR: "error", + INFO: "info", + SUCCESS: "success", + WARNING: "warning", +}; + +export const VARIANT: Record = { + FILLED: "filled", + OUTLINED: "outlined", + STANDARD: "standard", +}; diff --git a/src/styles/common/mui/icon.ts b/src/styles/common/mui/icon.ts new file mode 100644 index 00000000..4dbe6b5e --- /dev/null +++ b/src/styles/common/mui/icon.ts @@ -0,0 +1,8 @@ +import { IconProps } from "@mui/material"; + +export const FONT_SIZE: Record = { + INHERIT: "inherit", + LARGE: "large", + MEDIUM: "medium", + SMALL: "small", +}; diff --git a/src/theme/common/components.ts b/src/theme/common/components.ts index 917b2a95..5ff62cdc 100644 --- a/src/theme/common/components.ts +++ b/src/theme/common/components.ts @@ -1,8 +1,4 @@ import { Components, Theme } from "@mui/material"; -import { ErrorIcon } from "../../components/common/CustomIcon/components/ErrorIcon/errorIcon"; -import { InfoIcon } from "../../components/common/CustomIcon/components/InfoIcon/infoIcon"; -import { SuccessIcon } from "../../components/common/CustomIcon/components/SuccessIcon/successIcon"; -import { WarningIcon } from "../../components/common/CustomIcon/components/WarningIcon/warningIcon"; import { DropDownIcon } from "../../components/common/Form/components/Select/components/DropDownIcon/dropDownIcon"; import { desktopUp, mobileUp, tabletUp } from "./breakpoints"; import { @@ -19,7 +15,6 @@ import { TEXT_BODY_400, TEXT_BODY_400_2_LINES, TEXT_BODY_500, - TEXT_BODY_LARGE_500, TEXT_BODY_SMALL_400, TEXT_BODY_SMALL_500, TEXT_HEADING, @@ -85,159 +80,6 @@ export const MuiAccordionSummary: Components["MuiAccordionSummary"] = { }, }; -/** - * MuiAlert Component - * @param theme - Theme. - * @returns MuiAlert component theme styles. - */ -export const MuiAlert = (theme: Theme): Components["MuiAlert"] => { - return { - defaultProps: { - iconMapping: { - error: ErrorIcon({ fontSize: "small" }), - info: InfoIcon({ fontSize: "small" }), - success: SuccessIcon({ fontSize: "small" }), - warning: WarningIcon({ fontSize: "small" }), - }, - }, - styleOverrides: { - icon: { - opacity: 1, - padding: "2px 0", - }, - message: { - display: "grid", - gap: 4, - padding: 0, - }, - root: { - ...theme.typography[TEXT_BODY_400_2_LINES], - borderRadius: 8, - boxShadow: theme.shadows[1], // elevation01 - color: theme.palette.ink.main, - }, - standard: { - alignItems: FLEX_START, - padding: 20, - }, - standardError: { - backgroundColor: theme.palette.alert.lightest, - border: `1px solid ${theme.palette.alert.main}${alpha32}`, - // eslint-disable-next-line sort-keys -- disabling key order for readability - "& .MuiAlert-icon": { - color: theme.palette.alert.main, - }, - }, - standardInfo: { - backgroundColor: theme.palette.info.lightest, - border: `1px solid ${theme.palette.info.main}${alpha32}`, - // eslint-disable-next-line sort-keys -- disabling key order for readability - "& .MuiAlert-icon": { - color: theme.palette.info.main, - }, - }, - standardSuccess: { - backgroundColor: theme.palette.success.lightest, - border: `1px solid ${theme.palette.success.main}${alpha32}`, - // eslint-disable-next-line sort-keys -- disabling key order for readability - "& .MuiAlert-icon": { - color: theme.palette.success.main, - }, - }, - standardWarning: { - backgroundColor: theme.palette.warning.lightest, - border: `1px solid ${theme.palette.warning.main}${alpha32}`, - // eslint-disable-next-line sort-keys -- disabling key order for readability - "& .MuiAlert-icon": { - color: theme.palette.warning.main, - }, - }, - }, - variants: [ - { - props: { severity: "info", variant: "neutral" }, - style: { - backgroundColor: theme.palette.smoke.light, - padding: 16, - }, - }, - { - props: { variant: "banner" }, - style: { - padding: 16, - // eslint-disable-next-line sort-keys -- disabling key order for readability - "& .MuiAlert-icon": { - padding: 0, - }, - "& .MuiAlertTitle-root": { - ...theme.typography[TEXT_BODY_500], - }, - }, - }, - { - props: { severity: "error", variant: "banner" }, - style: { - backgroundColor: theme.palette.alert.lightest, - border: `1px solid ${theme.palette.alert.main}${alpha32}`, - // eslint-disable-next-line sort-keys -- disabling key order for readability - "& .MuiAlert-icon": { - color: theme.palette.alert.main, - }, - }, - }, - { - props: { severity: "info", variant: "banner" }, - style: { - backgroundColor: theme.palette.info.lightest, - border: `1px solid ${theme.palette.info.main}${alpha32}`, - // eslint-disable-next-line sort-keys -- disabling key order for readability - "& .MuiAlert-icon": { - color: theme.palette.info.main, - }, - }, - }, - { - props: { severity: "success", variant: "banner" }, - style: { - backgroundColor: theme.palette.success.lightest, - border: `1px solid ${theme.palette.success.main}${alpha32}`, - // eslint-disable-next-line sort-keys -- disabling key order for readability - "& .MuiAlert-icon": { - color: theme.palette.success.main, - }, - }, - }, - { - props: { severity: "warning", variant: "banner" }, - style: { - backgroundColor: theme.palette.warning.lightest, - border: `1px solid ${theme.palette.warning.main}${alpha32}`, - // eslint-disable-next-line sort-keys -- disabling key order for readability - "& .MuiAlert-icon": { - color: theme.palette.warning.main, - }, - }, - }, - ], - }; -}; - -/** - * MuiAlertTitle Component - * @param theme - Theme. - * @returns MuiAlertTitle component theme styles. - */ -export const MuiAlertTitle = (theme: Theme): Components["MuiAlertTitle"] => { - return { - styleOverrides: { - root: { - ...theme.typography[TEXT_BODY_LARGE_500], - margin: 0, - }, - }, - }; -}; - /** * MuiAppBar Component */ @@ -1214,6 +1056,18 @@ export const MuiOutlinedInput = ( export const MuiPaper = (theme: Theme): Components["MuiPaper"] => { return { variants: [ + { + props: { elevation: 1 }, + style: { + boxShadow: theme.shadows[1], // elevation01 + }, + }, + { + props: { elevation: 2 }, + style: { + boxShadow: theme.shadows[2], // elevation02 + }, + }, { props: { variant: "footer" }, style: { diff --git a/src/theme/components/index.ts b/src/theme/components/index.ts new file mode 100644 index 00000000..375e83b3 --- /dev/null +++ b/src/theme/components/index.ts @@ -0,0 +1,2 @@ +export { MuiAlert } from "./muiAlert"; +export { MuiAlertTitle } from "./muiAlertTitle"; diff --git a/src/theme/components/muiAlert.ts b/src/theme/components/muiAlert.ts new file mode 100644 index 00000000..7862740f --- /dev/null +++ b/src/theme/components/muiAlert.ts @@ -0,0 +1,144 @@ +import { Components, Theme } from "@mui/material"; +import { ErrorIcon } from "../../components/common/CustomIcon/components/ErrorIcon/errorIcon"; +import { InfoIcon } from "../../components/common/CustomIcon/components/InfoIcon/infoIcon"; +import { SuccessIcon } from "../../components/common/CustomIcon/components/SuccessIcon/successIcon"; +import { WarningIcon } from "../../components/common/CustomIcon/components/WarningIcon/warningIcon"; +import { COLOR, SEVERITY, VARIANT } from "../../styles/common/mui/alert"; +import { FONT_SIZE } from "../../styles/common/mui/icon"; +import { alpha32 } from "../common/palette"; +import { TEXT_BODY_400_2_LINES, TEXT_BODY_500 } from "../common/typography"; + +export const MuiAlert = (theme: Theme): Components["MuiAlert"] => { + return { + defaultProps: { + elevation: 1, + iconMapping: { + error: ErrorIcon({ fontSize: FONT_SIZE.SMALL }), + info: InfoIcon({ fontSize: FONT_SIZE.SMALL }), + success: SuccessIcon({ fontSize: FONT_SIZE.SMALL }), + warning: WarningIcon({ fontSize: FONT_SIZE.SMALL }), + }, + }, + styleOverrides: { + icon: { + opacity: 1, + padding: 0, + }, + message: { + ...theme.typography[TEXT_BODY_400_2_LINES], + display: "grid", + gap: 4, + padding: 0, + }, + root: { + alignItems: "flex-start", + borderRadius: 8, + color: theme.palette.ink.main, + padding: 16, + variants: [ + { + props: { severity: "info", variant: "neutral" }, + style: { + backgroundColor: theme.palette.smoke.light, + padding: 16, + }, + }, // TODO(cc) remove this variant when all alerts are updated. + { + props: { variant: "banner" }, + style: { + padding: 16, + // eslint-disable-next-line sort-keys -- disabling key order for readability + "& .MuiAlert-icon": { + padding: 0, + }, + "& .MuiAlertTitle-root": { + ...theme.typography[TEXT_BODY_500], + }, + }, + }, // TODO(cc) remove this variant when all alerts are updated. + { + props: { severity: SEVERITY.ERROR }, + style: { + backgroundColor: theme.palette.alert.lightest, + border: `1px solid ${theme.palette.alert.main}${alpha32}`, + // eslint-disable-next-line sort-keys -- disabling key order for readability + "& .MuiAlert-icon": { + color: theme.palette.alert.main, + }, + }, + }, + { + props: { severity: SEVERITY.INFO }, + style: { + backgroundColor: theme.palette.info.lightest, + border: `1px solid ${theme.palette.info.main}${alpha32}`, + // eslint-disable-next-line sort-keys -- disabling key order for readability + "& .MuiAlert-icon": { + color: theme.palette.info.main, + }, + }, + }, + { + props: { severity: SEVERITY.SUCCESS }, + style: { + backgroundColor: theme.palette.success.lightest, + border: `1px solid ${theme.palette.success.main}${alpha32}`, + // eslint-disable-next-line sort-keys -- disabling key order for readability + "& .MuiAlert-icon": { + color: theme.palette.success.main, + }, + }, + }, + { + props: { severity: SEVERITY.WARNING }, + style: { + backgroundColor: theme.palette.warning.lightest, + border: `1px solid ${theme.palette.warning.main}${alpha32}`, + // eslint-disable-next-line sort-keys -- disabling key order for readability + "& .MuiAlert-icon": { + color: theme.palette.warning.main, + }, + }, + }, + { + props: { color: COLOR.INK }, + style: { + backgroundColor: theme.palette.ink.main, + color: theme.palette.common.white, + // eslint-disable-next-line sort-keys -- disabling key order for readability + ".MuiLink-root": { + color: theme.palette.common.white, + }, + }, + }, + { + props: { color: COLOR.PRIMARY }, + style: { + backgroundColor: theme.palette.primary.main, + color: theme.palette.common.white, + // eslint-disable-next-line sort-keys -- disabling key order for readability + ".MuiLink-root": { + color: theme.palette.common.white, + }, + }, + }, + { + props: { color: COLOR.SMOKE }, + style: { + backgroundColor: theme.palette.smoke.light, + }, + }, + { + props: { variant: VARIANT.FILLED }, + style: { + border: "none", + }, + }, + ], + }, + standard: { + padding: 20, + }, + }, + }; +}; diff --git a/src/theme/components/muiAlertTitle.ts b/src/theme/components/muiAlertTitle.ts new file mode 100644 index 00000000..6a5145c0 --- /dev/null +++ b/src/theme/components/muiAlertTitle.ts @@ -0,0 +1,14 @@ +import { Components } from "@mui/material"; +import { TEXT_BODY_500 } from "../common/typography"; + +export const MuiAlertTitle: Components["MuiAlertTitle"] = { + defaultProps: { + gutterBottom: false, + variant: TEXT_BODY_500, + }, + styleOverrides: { + root: { + margin: 0, + }, + }, +}; diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 1c249a52..1d9e4ec0 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -4,6 +4,7 @@ import * as C from "./common/components"; import * as P from "./common/palette"; import { shadows } from "./common/shadows"; import * as T from "./common/typography"; +import * as M from "./components"; export interface ThemeProps { theme: Theme; @@ -71,8 +72,8 @@ export function createAppTheme(customOptions?: ThemeOptions): Theme { MuiAccordion: C.MuiAccordion(theme), MuiAccordionDetails: C.MuiAccordionDetails, MuiAccordionSummary: C.MuiAccordionSummary, - MuiAlert: C.MuiAlert(theme), - MuiAlertTitle: C.MuiAlertTitle(theme), + MuiAlert: M.MuiAlert(theme), + MuiAlertTitle: M.MuiAlertTitle, MuiAppBar: C.MuiAppBar, MuiBackdrop: C.MuiBackdrop(theme), MuiBreadcrumbs: C.MuiBreadcrumbs(theme), diff --git a/types/data-explorer-ui.d.ts b/types/data-explorer-ui.d.ts index 967d6fc4..c7722d05 100644 --- a/types/data-explorer-ui.d.ts +++ b/types/data-explorer-ui.d.ts @@ -33,6 +33,7 @@ declare module "@mui/material/Alert" { interface AlertPropsColorOverrides { ink: true; primary: true; + smoke: true; } interface AlertPropsVariantOverrides {