[MM-52979]: Remove code around abandoned MUI modal migration (#23556)

webapp/platform/components/src/common/constants/theme.ts

@@ -1,139 +0,0 @@
-import {Theme, ThemeKey} from '@mattermost/types/theme';
-
-export const THEMES: Record<ThemeKey, Theme> = {
-    denim: {
-        type: 'Denim',
-            sidebarBg: '#1e325c',
-            sidebarText: '#ffffff',
-            sidebarUnreadText: '#ffffff',
-            sidebarTextHoverBg: '#28427b',
-            sidebarTextActiveBorder: '#5d89ea',
-            sidebarTextActiveColor: '#ffffff',
-            sidebarHeaderBg: '#192a4d',
-            sidebarHeaderTextColor: '#ffffff',
-            sidebarTeamBarBg: '#14213e',
-            onlineIndicator: '#3db887',
-            awayIndicator: '#ffbc1f',
-            dndIndicator: '#d24b4e',
-            mentionBg: '#ffffff',
-            mentionColor: '#1e325c',
-            centerChannelBg: '#ffffff',
-            centerChannelColor: '#3f4350',
-            newMessageSeparator: '#cc8f00',
-            linkColor: '#386fe5',
-            buttonBg: '#1c58d9',
-            buttonColor: '#ffffff',
-            errorTextColor: '#d24b4e',
-            mentionHighlightBg: '#ffd470',
-            mentionHighlightLink: '#1b1d22',
-            codeTheme: 'github',
-    },
-    sapphire: {
-        type: 'Sapphire',
-            sidebarBg: '#174ab5',
-            sidebarText: '#ffffff',
-            sidebarUnreadText: '#ffffff',
-            sidebarTextHoverBg: '#2a58ba',
-            sidebarTextActiveBorder: '#57b5f0',
-            sidebarTextActiveColor: '#ffffff',
-            sidebarHeaderBg: '#1542a2',
-            sidebarHeaderTextColor: '#ffffff',
-            sidebarTeamBarBg: '#133a91',
-            onlineIndicator: '#3db887',
-            awayIndicator: '#ffbc1f',
-            dndIndicator: '#d24b4e',
-            mentionBg: '#ffffff',
-            mentionColor: '#174ab5',
-            centerChannelBg: '#ffffff',
-            centerChannelColor: '#3f4350',
-            newMessageSeparator: '#15b7b7',
-            linkColor: '#1c58d9',
-            buttonBg: '#1c58d9',
-            buttonColor: '#ffffff',
-            errorTextColor: '#d24b4e',
-            mentionHighlightBg: '#7ff0f0',
-            mentionHighlightLink: '#0d6e6e',
-            codeTheme: 'github',
-    },
-    quartz: {
-        type: 'Quartz',
-            sidebarBg: '#f4f4f6',
-            sidebarText: '#090a0b',
-            sidebarUnreadText: '#2d3039',
-            sidebarTextHoverBg: '#ebebed',
-            sidebarTextActiveBorder: '#32a4ec',
-            sidebarTextActiveColor: '#2d3039',
-            sidebarHeaderBg: '#e8e9ed',
-            sidebarHeaderTextColor: '#2d3039',
-            sidebarTeamBarBg: '#dddfe4',
-            onlineIndicator: '#3db887',
-            awayIndicator: '#f5ab07',
-            dndIndicator: '#d24b4e',
-            mentionBg: '#1c58d9',
-            mentionColor: '#ffffff',
-            centerChannelBg: '#ffffff',
-            centerChannelColor: '#3f4350',
-            newMessageSeparator: '#15b7b7',
-            linkColor: '#1c58d9',
-            buttonBg: '#1c58d9',
-            buttonColor: '#ffffff',
-            errorTextColor: '#d24b4e',
-            mentionHighlightBg: '#7ff0f0',
-            mentionHighlightLink: '#0d6e6e',
-            codeTheme: 'github',
-    },
-    indigo: {
-        type: 'Indigo',
-            sidebarBg: '#0f1a2e',
-            sidebarText: '#ffffff',
-            sidebarUnreadText: '#ffffff',
-            sidebarTextHoverBg: '#222c3f',
-            sidebarTextActiveBorder: '#1279ba',
-            sidebarTextActiveColor: '#ffffff',
-            sidebarHeaderBg: '#152231',
-            sidebarHeaderTextColor: '#dddfe4',
-            sidebarTeamBarBg: '#05080f',
-            onlineIndicator: '#3db887',
-            awayIndicator: '#f5ab00',
-            dndIndicator: '#d24b4e',
-            mentionBg: '#1c58d9',
-            mentionColor: '#ffffff',
-            centerChannelBg: '#0a111f',
-            centerChannelColor: '#dddfe4',
-            newMessageSeparator: '#81a3ef',
-            linkColor: '#5d89ea',
-            buttonBg: '#386fe5',
-            buttonColor: '#ffffff',
-            errorTextColor: '#d24b4e',
-            mentionHighlightBg: '#133a91',
-            mentionHighlightLink: '#a4f4f4',
-            codeTheme: 'solarized-dark',
-    },
-    onyx: {
-        type: 'Onyx',
-            sidebarBg: '#121317',
-            sidebarText: '#ffffff',
-            sidebarUnreadText: '#ffffff',
-            sidebarTextHoverBg: '#25262a',
-            sidebarTextActiveBorder: '#1592e0',
-            sidebarTextActiveColor: '#ffffff',
-            sidebarHeaderBg: '#1b1d22',
-            sidebarHeaderTextColor: '#dddfe4',
-            sidebarTeamBarBg: '#000000',
-            onlineIndicator: '#3db887',
-            awayIndicator: '#f5ab00',
-            dndIndicator: '#d24b4e',
-            mentionBg: '#1c58d9',
-            mentionColor: '#ffffff',
-            centerChannelBg: '#090a0b',
-            centerChannelColor: '#dddfe4',
-            newMessageSeparator: '#1adbdb',
-            linkColor: '#5d89ea',
-            buttonBg: '#386fe5',
-            buttonColor: '#ffffff',
-            errorTextColor: '#da6c6e',
-            mentionHighlightBg: '#0d6e6e',
-            mentionHighlightLink: '#a4f4f4',
-            codeTheme: 'monokai',
-    },
-};

webapp/platform/components/src/common/hooks/useMeasurePunchouts.ts

@@ -11,7 +11,7 @@ export type Coords = {
     y?: string;
 }
 
-export type PunchOutCoordsHeightAndWidth = Coords & {
+export type Props = Coords & {
     width: string;
     height: string;
 }
@@ -23,7 +23,7 @@ type PunchOutOffset = {
     height: number;
 }
 
-export const useMeasurePunchouts = (elementIds: string[], additionalDeps: any[], offset?: PunchOutOffset): PunchOutCoordsHeightAndWidth | null => {
+export const useMeasurePunchouts = (elementIds: string[], additionalDeps: any[], offset?: PunchOutOffset): Props | null => {
     const elementsAvailable = useElementAvailable(elementIds);
     const [size, setSize] = useState({x: window.innerWidth, y: window.innerHeight});
     const updateSize = throttle(() => {

webapp/platform/components/src/compass/components/base_modal/base_modal.tsx

@@ -1,59 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {memo} from 'react';
-import {styled} from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import MUIPaper, {PaperProps} from '@mui/material/Paper';
-import Slide from '@mui/material/Slide';
-import {TransitionProps} from '@mui/material/transitions';
-
-const Transition = React.forwardRef((
-    {children, ...props}: TransitionProps & {
-        children: React.ReactElement<any, any>;
-    },
-    ref: React.Ref<unknown>,
-) => {
-    return (
-        <Slide
-            direction='up'
-            ref={ref}
-            {...props}
-        >
-            {children}
-        </Slide>
-    );
-});
-
-const Paper = styled(MUIPaper)<PaperProps>(() => ({
-    border: '1px solid rgba(var(--center-channel-color-rgb), 0.16)',
-    borderRadius: 12,
-    backgroundColor: 'var(--center-channel-bg)',
-    boxShadow: '0 20px 32px 0 rgba(0, 0, 0, 0.12)',
-    minWidth: 600,
-}));
-
-type ModalProps = {
-    children: React.ReactNode | React.ReactNodeArray;
-    isOpen: boolean;
-    dialogClassName?: string;
-    dialogId?: string;
-    onClose?: () => void;
-}
-
-const BaseModal = ({children, isOpen, onClose, dialogClassName = '', dialogId = ''}: ModalProps) => (
-    <Dialog
-        open={isOpen}
-        TransitionComponent={Transition}
-        PaperComponent={Paper}
-        keepMounted={true}
-        onClose={onClose}
-        aria-describedby='alert-dialog-slide-description'
-        role='dialog'
-        className={dialogClassName}
-        id={dialogId}
-    >{children}
-    </Dialog>
-);
-
-export default BaseModal;

webapp/platform/components/src/compass/components/base_modal/modal_title.tsx

@@ -1,71 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {styled} from '@mui/material/styles';
-import MUIDialogTitle, {DialogTitleProps as MUIDialogTitleProps} from '@mui/material/DialogTitle';
-
-import {CloseIcon} from '@mattermost/compass-icons/components';
-
-import Icon_button from '../icon_button/icon_button';
-
-type DialogTitleProps = MUIDialogTitleProps & { hasCloseButton: boolean };
-
-const StyledModalTitle = styled(MUIDialogTitle, {
-    shouldForwardProp: (prop) => prop !== 'hasCloseButton',
-})<DialogTitleProps>(({hasCloseButton}) => ({
-    display: 'grid',
-    gridTemplateColumns: '1fr max-content max-content',
-    gap: 12,
-    fontFamily: 'Metropolis',
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: 22,
-    lineHeight: '28px',
-    color: 'var(--center-channel-color)',
-    alignItems: 'center',
-    padding: hasCloseButton ? '22px 26px 24px 32px' : '28px 32px 24px',
-}));
-
-const StyledModalTitleSection = styled('div')(() => ({
-    padding: '0 32px 24px 32px',
-    borderBottom: '1px solid rgba(var(--center-channel-text-rgb), 0.12)',
-}));
-
-type ModalTitleProps = {
-    title: string;
-    rightSection?: React.ReactNode | React.ReactNode[];
-    children?: React.ReactNode | React.ReactNode[];
-    onClose?: React.MouseEventHandler;
-}
-
-const ModalTitle = ({title, onClose, children, rightSection = null}: ModalTitleProps) => {
-    const hasCloseButton = Boolean(onClose);
-
-    return (
-        <>
-            <StyledModalTitle
-                hasCloseButton={hasCloseButton}
-                component={'div'}
-            >
-                {title}
-                {rightSection}
-                {hasCloseButton && (
-                    <Icon_button
-                        compact={true}
-                        type='button'
-                        onClick={onClose}
-                        IconComponent={CloseIcon}
-                    />
-                )}
-            </StyledModalTitle>
-            {children && (
-                <StyledModalTitleSection>
-                    {children}
-                </StyledModalTitleSection>
-            )}
-        </>
-    );
-};
-
-export default ModalTitle;

webapp/platform/components/src/compass/components/button/button.overrides.ts

@@ -1,173 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {alpha, ComponentsProps, ComponentsVariants, emphasize, Theme} from '@mui/material';
-import {ComponentsOverrides} from '@mui/material/styles/overrides';
-
-import {blend} from '../../utils/color';
-
-const componentName = 'MuiButton';
-
-declare module '@mui/material/Button' {
-    interface ButtonPropsSizeOverrides {
-        'x-small': true;
-    }
-
-    interface ButtonPropsVariantOverrides {
-        quaternary: true;
-    }
-}
-
-const defaultProps: ComponentsProps[typeof componentName] = {
-    disableElevation: true,
-    disableRipple: true,
-    disableTouchRipple: true,
-    disableFocusRipple: true,
-};
-
-const getFocusStyles = (color: string) => ({
-    '&:not(.Mui-disabled)': {
-        '&:focus': {
-            boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
-        },
-
-        '&:focus:not(:focus-visible)': {
-            boxShadow: 'none',
-        },
-
-        '&:focus:focus-visible': {
-            boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
-        },
-    },
-});
-
-const styleOverrides: ComponentsOverrides<Theme>[typeof componentName] = {
-    containedPrimary: ({theme, ownerState}) => ({
-        backgroundColor: ownerState.inverted ? theme.palette.text.primary : theme.palette.primary.main,
-        color: ownerState.inverted ? theme.palette.primary.main : theme.palette.primary.contrastText,
-
-        '&:hover': {
-            backgroundColor: ownerState.inverted ? blend(theme.palette.text.primary, alpha(theme.palette.primary.main, 0.08)) : emphasize(theme.palette.primary.main, 0.1),
-        },
-        '&:active': {
-            backgroundColor: ownerState.inverted ? blend(theme.palette.text.primary, alpha(theme.palette.primary.main, 0.16)) : emphasize(theme.palette.primary.main, 0.2),
-        },
-
-        ...getFocusStyles(theme.palette.primary.main),
-    }),
-    containedError: ({theme}) => ({
-        '&:hover': {
-            backgroundColor: emphasize(theme.palette.error.dark, 0.1),
-        },
-        '&:active': {
-            backgroundColor: emphasize(theme.palette.error.dark, 0.2),
-        },
-
-        ...getFocusStyles(theme.palette.error.main),
-    }),
-    outlinedPrimary: ({theme}) => ({
-        backgroundColor: alpha(theme.palette.primary.main, 0),
-
-        '&:hover': {
-            backgroundColor: alpha(theme.palette.primary.main, 0.08),
-        },
-
-        '&:active': {
-            backgroundColor: alpha(theme.palette.primary.main, 0.16),
-        },
-
-        ...getFocusStyles(theme.palette.primary.main),
-    }),
-    outlinedError: ({theme}) => ({
-        backgroundColor: alpha(theme.palette.error.main, 0),
-
-        '&:hover': {
-            backgroundColor: alpha(theme.palette.error.main, 0.08),
-        },
-
-        '&:active': {
-            backgroundColor: alpha(theme.palette.error.main, 0.16),
-        },
-
-        ...getFocusStyles(theme.palette.error.main),
-    }),
-    textPrimary: ({theme}) => ({
-        backgroundColor: alpha(theme.palette.primary.main, 0.08),
-
-        '&:hover': {
-            backgroundColor: alpha(theme.palette.primary.main, 0.12),
-        },
-
-        '&:active': {
-            backgroundColor: alpha(theme.palette.primary.main, 0.16),
-        },
-
-        ...getFocusStyles(theme.palette.primary.main),
-    }),
-    textError: ({theme, ownerState}) => ({
-        backgroundColor: ownerState.disabled ? theme.palette.action.disabledBackground : alpha(theme.palette.error.main, 0.12),
-
-        '&:hover': {
-            backgroundColor: alpha(theme.palette.error.main, 0.12),
-        },
-
-        '&:active': {
-            backgroundColor: alpha(theme.palette.error.main, 0.16),
-        },
-
-        ...getFocusStyles(theme.palette.error.main),
-    }),
-};
-
-const variants: ComponentsVariants[typeof componentName] = [
-    {
-        props: {size: 'x-small'},
-        style: ({theme}) => ({
-            padding: '0.4rem 1rem',
-            ...theme.typography.b50,
-            margin: 0,
-            textTransform: 'none',
-        }),
-    },
-    {
-        props: {size: 'small'},
-        style: ({theme}) => ({
-            padding: '0.8rem 1.6rem',
-            ...theme.typography.b75,
-            margin: 0,
-            textTransform: 'none',
-        }),
-    },
-    {
-        props: {size: 'medium'},
-        style: ({theme}) => ({
-            padding: '1rem 2rem',
-            ...theme.typography.b100,
-            margin: 0,
-            textTransform: 'none',
-        }),
-    },
-    {
-        props: {size: 'large'},
-        style: ({theme}) => ({
-            padding: '1.2rem 2.4rem',
-            ...theme.typography.b200,
-            margin: 0,
-            textTransform: 'none',
-        }),
-    },
-    {
-        props: {variant: 'quaternary'},
-        style: () => ({
-            backgroundColor: 'red',
-        }),
-    },
-];
-
-const buttonOverrides = {
-    variants,
-    defaultProps,
-    styleOverrides,
-};
-
-export default buttonOverrides;

webapp/platform/components/src/compass/components/button/button.tsx

@@ -1,39 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import MuiButton, {ButtonProps as MuiButtonProps} from '@mui/material/Button';
-
-type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
-
-const variantMap: Record<ButtonVariant, Exclude<MuiButtonProps['variant'], undefined>> = {
-    primary: 'contained',
-    secondary: 'outlined',
-    tertiary: 'text',
-};
-
-type ExcludedMuiProps =
-    | 'sx'
-    | 'classes'
-    | 'variant'
-    | 'disableElevation'
-    | 'disableRipple'
-    | 'disableFocusRipple';
-
-export type ButtonProps = Omit<MuiButtonProps, ExcludedMuiProps> & {
-    destructive?: boolean;
-    disabled?: boolean;
-    inverted?: boolean;
-    variant?: ButtonVariant;
-    children: React.ReactNode | React.ReactNode[];
-}
-
-export const Button = ({variant = 'primary', destructive, ...rest}: ButtonProps) => (
-    <MuiButton
-        {...rest}
-        color={destructive ? 'error' : 'primary'}
-        variant={variantMap[variant]}
-    />
-);
-
-export default Button;

webapp/platform/components/src/compass/components/generic_modal/generic_modal.tsx

@@ -1,80 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {memo} from 'react';
-import {styled} from '@mui/material/styles';
-import Button from '@mui/material/Button';
-import MUIPaper, {PaperProps} from '@mui/material/Paper';
-import DialogActions from '@mui/material/DialogActions';
-import Slide from '@mui/material/Slide';
-import {TransitionProps} from '@mui/material/transitions';
-import BaseModal from "../base_modal/base_modal";
-
-const Transition = React.forwardRef((
-    {children, ...props}: TransitionProps & {
-        children: React.ReactElement<any, any>;
-    },
-    ref: React.Ref<unknown>,
-) => {
-    return (
-        <Slide
-            direction='up'
-            ref={ref}
-            {...props}
-        >
-            {children}
-        </Slide>
-    );
-});
-
-const Paper = styled(MUIPaper)<PaperProps>(() => ({
-    border: '1px solid rgba(var(--center-channel-color-rgb), 0.16)',
-    borderRadius: 12,
-    backgroundColor: 'var(--center-channel-bg)',
-    boxShadow: '0 20px 32px 0 rgba(0, 0, 0, 0.12)',
-    minWidth: 600,
-}));
-
-type ModalProps = {
-    children: React.ReactNode | React.ReactNodeArray;
-    isOpen: boolean;
-    dialogClassName?: string;
-    dialogId?: string;
-    onClose?: () => void;
-    onConfirm?: () => void;
-    onCancel?: () => void;
-}
-
-const GenericModal = ({children, isOpen, onClose, onConfirm, onCancel, dialogClassName = '', dialogId = ''}: ModalProps) => {
-    const hasActions = Boolean(onConfirm || onCancel);
-
-    const handleConfirmAction = () => {
-        onConfirm?.();
-        onClose?.();
-    };
-
-    const handleCancelAction = () => {
-        onCancel?.();
-        onClose?.();
-    };
-
-    return (
-            <BaseModal
-                isOpen={isOpen}
-                onClose={onClose}
-                aria-describedby='alert-dialog-slide-description'
-                dialogClassName={dialogClassName}
-                dialogId={dialogId}
-            >
-                {children}
-                {hasActions && (
-                    <DialogActions>
-                        {onCancel && <Button onClick={handleCancelAction}>{'Cancel'}</Button>}
-                        {onConfirm && <Button onClick={handleConfirmAction}>{'Confirm'}</Button>}
-                    </DialogActions>
-                )}
-            </BaseModal>
-    );
-};
-
-export default memo(GenericModal);

webapp/platform/components/src/compass/components/icon_button/icon_button.overrides.ts

@@ -1,206 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {alpha, ComponentsProps, emphasize, Theme} from '@mui/material';
-import type {ComponentsVariants} from '@mui/material';
-import type {ComponentsOverrides} from '@mui/material/styles/overrides';
-
-const componentName = 'MuiIconButton';
-
-declare module '@mui/material/IconButton' {
-    interface IconButtonPropsSizeOverrides {
-        'x-small': true;
-    }
-    interface IconButtonPropsOverrides {
-        destructive: boolean;
-        compact: boolean;
-    }
-}
-
-const defaultProps: ComponentsProps[typeof componentName] = {
-    disableRipple: true,
-    disableTouchRipple: true,
-    disableFocusRipple: true,
-};
-
-export const getFocusStyles = (color: string) => ({
-    '&:not(.Mui-disabled)': {
-        '&:focus': {
-            boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
-        },
-
-        '&:focus:not(:focus-visible)': {
-            boxShadow: 'none',
-        },
-
-        '&:focus:focus-visible': {
-            boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
-        },
-    },
-});
-
-const styleOverrides: ComponentsOverrides<Theme>[typeof componentName] = {
-    root: ({theme, ownerState}) => ({
-        backgroundColor: 'transparent',
-        color: ownerState.color === 'error' ? theme.palette.error.main : alpha(theme.palette.text.primary, 0.56),
-        borderRadius: 4,
-        margin: 0,
-
-        '&:hover': {
-            backgroundColor: alpha(ownerState.color === 'error' ? theme.palette.error.main : theme.palette.text.primary, 0.08),
-            color: ownerState.color === 'error' ? theme.palette.error.main : alpha(theme.palette.text.primary, 0.72),
-        },
-
-        '&:active': {
-            backgroundColor: alpha(ownerState.color === 'error' ? theme.palette.error.main : theme.palette.primary.main, 0.16),
-            color: ownerState.color === 'error' ? theme.palette.error.main : theme.palette.primary.main,
-        },
-
-        svg: {
-            margin: 0,
-            fill: 'currentColor',
-        },
-
-        ...getFocusStyles(ownerState.color === 'error' ? theme.palette.error.main : theme.palette.primary.main),
-
-        ...(ownerState.color !== 'error' && {
-            '&.toggled:not(.inverted):not(.Mui-disabled)': {
-                backgroundColor: theme.palette.primary.main,
-                color: theme.palette.primary.contrastText,
-
-                '&:hover': {
-                    backgroundColor: alpha(theme.palette.primary.main, 0.92),
-                    color: theme.palette.primary.contrastText,
-                },
-
-                '&:active': {
-                    backgroundColor: alpha(theme.palette.primary.main, 0.16),
-                    color: theme.palette.primary.main,
-                },
-            },
-
-            '&.inverted:not(.Mui-disabled)': {
-                backgroundColor: 'transparent',
-                color: alpha(theme.palette.text.primary, 0.56),
-
-                '&:hover': {
-                    backgroundColor: alpha(theme.palette.text.primary, 0.08),
-                    color: theme.palette.text.primary,
-                },
-
-                '&:active': {
-                    backgroundColor: alpha(theme.palette.text.primary, 0.16),
-                    color: theme.palette.text.primary,
-                },
-
-                '&.toggled': {
-                    backgroundColor: theme.palette.text.primary,
-                    color: alpha(theme.palette.background.default, 0.56),
-
-                    '&:hover': {
-                        backgroundColor: alpha(theme.palette.text.primary, 0.92),
-                        color: alpha(theme.palette.background.default, 0.56),
-                    },
-
-                    '&:active': {
-                        backgroundColor: alpha(theme.palette.text.primary, 0.16),
-                        color: theme.palette.text.primary,
-                    },
-                },
-            },
-        }),
-
-        transition: theme.transitions.create(['background-color', 'color'], {duration: theme.transitions.duration.shorter}),
-    }),
-};
-
-const variants: ComponentsVariants[typeof componentName] = [
-    {
-        props: {size: 'x-small'},
-        style: ({theme}) => ({
-            padding: theme.spacing(0.5),
-
-            svg: {
-                width: '12px',
-                height: '12px',
-            },
-
-            ...theme.typography.b75,
-            lineHeight: 0,
-            fontWeight: 600,
-
-            '.MuiGrid-container': {
-                gap: theme.spacing(0.25),
-                maxHeight: theme.spacing(1.5),
-            },
-        }),
-    },
-    {
-        props: {size: 'small'},
-        style: ({theme}) => ({
-            padding: theme.spacing(0.75),
-
-            svg: {
-                width: '16px',
-                height: '16px',
-            },
-
-            ...theme.typography.b100,
-            lineHeight: 0,
-            fontWeight: 600,
-
-            '.MuiGrid-container': {
-                gap: theme.spacing(0.5),
-                maxHeight: theme.spacing(2),
-            },
-        }),
-    },
-    {
-        props: {size: 'medium'},
-        style: ({theme}) => ({
-            padding: theme.spacing(1),
-
-            svg: {
-                width: '20px',
-                height: '20px',
-            },
-
-            ...theme.typography.b200,
-            lineHeight: 0,
-            fontWeight: 600,
-
-            '.MuiGrid-container': {
-                gap: theme.spacing(0.75),
-                maxHeight: theme.spacing(2.5),
-            },
-        }),
-    },
-    {
-        props: {size: 'large'},
-        style: ({theme}) => ({
-            padding: theme.spacing(1),
-
-            svg: {
-                width: '28px',
-                height: '28px',
-            },
-
-            ...theme.typography.b300,
-            lineHeight: 0,
-            fontWeight: 600,
-
-            '.MuiGrid-container': {
-                gap: theme.spacing(0.75),
-                maxHeight: theme.spacing(3.5),
-            },
-        }),
-    },
-];
-
-const overrides = {
-    variants,
-    defaultProps,
-    styleOverrides,
-};
-
-export default overrides;

webapp/platform/components/src/compass/components/icon_button/icon_button.tsx

@@ -1,51 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {Grid} from '@mui/material';
-import classNames from 'classnames';
-import React from 'react';
-import MuiIconButton, {IconButtonProps as MuiIconButtonProps} from '@mui/material/IconButton';
-
-type ExcludedMuiProps = 'sx' | 'disableFocusRipple' | 'disableRipple' | 'color' | 'classes';
-
-type CustomProps = {
-    IconComponent: React.FC;
-    compact?: boolean;
-    toggled?: boolean;
-    inverted?: boolean;
-    destructive?: boolean;
-    label?: string;
-}
-
-type IconButtonProps = Omit<MuiIconButtonProps, ExcludedMuiProps> & CustomProps;
-
-const IconButton = ({IconComponent, label, destructive = false, compact = false, toggled = false, inverted = false, ...props}: IconButtonProps) => {
-    return (
-        <MuiIconButton
-            {...props}
-            className={classNames({compact, toggled, inverted})}
-            color={destructive ? 'error' : 'primary'}
-        >
-            <Grid
-                container={true}
-                m={compact ? 0 : 0.25}
-                alignItems='center'
-                alignContent='center'
-            >
-                <Grid item={true}>
-                    <IconComponent/>
-                </Grid>
-                {label && (
-                    <Grid
-                        item={true}
-                        pt={0.25}
-                    >
-                        {label}
-                    </Grid>
-                )}
-            </Grid>
-        </MuiIconButton>
-    );
-};
-
-export default IconButton;

webapp/platform/components/src/compass/components/index.ts

@@ -1,16 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import Typography from './typography/typography';
-import Button, {ButtonProps} from './button/button';
-import IconButton from './icon_button/icon_button';
-
-export {
-    IconButton,
-    Button,
-    Typography,
-};
-
-export type {
-    ButtonProps,
-};

webapp/platform/components/src/compass/components/typography/typography.overrides.ts

@@ -1,285 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {TypographyOptions} from '@mui/material/styles/createTypography';
-
-import {getFontMargin} from '../../utils/font';
-
-declare module '@mui/material/styles' {
-    interface TypographyVariants {
-
-        // body text variants
-        b25: React.CSSProperties;
-        b50: React.CSSProperties;
-        b75: React.CSSProperties;
-        b100: React.CSSProperties;
-        b200: React.CSSProperties;
-        b300: React.CSSProperties;
-
-        // heading variants
-        h25: React.CSSProperties;
-        h50: React.CSSProperties;
-        h75: React.CSSProperties;
-        h100: React.CSSProperties;
-        h200: React.CSSProperties;
-        h300: React.CSSProperties;
-        h400: React.CSSProperties;
-        h500: React.CSSProperties;
-        h600: React.CSSProperties;
-        h700: React.CSSProperties;
-        h800: React.CSSProperties;
-        h900: React.CSSProperties;
-        h1000: React.CSSProperties;
-    }
-
-    // allow configuration using `createTheme`
-    interface TypographyVariantsOptions {
-
-        // body text style properties
-        b25?: React.CSSProperties;
-        b50?: React.CSSProperties;
-        b75?: React.CSSProperties;
-        b100?: React.CSSProperties;
-        b200?: React.CSSProperties;
-        b300?: React.CSSProperties;
-
-        // heading style properties
-        h25?: React.CSSProperties;
-        h50?: React.CSSProperties;
-        h75?: React.CSSProperties;
-        h100?: React.CSSProperties;
-        h200?: React.CSSProperties;
-        h300?: React.CSSProperties;
-        h400?: React.CSSProperties;
-        h500?: React.CSSProperties;
-        h600?: React.CSSProperties;
-        h700?: React.CSSProperties;
-        h800?: React.CSSProperties;
-        h900?: React.CSSProperties;
-        h1000?: React.CSSProperties;
-    }
-}
-
-// Update the Typography's variant prop options
-declare module '@mui/material/Typography' {
-    interface TypographyPropsVariantOverrides {
-
-        // enable our custom body text variants
-        b25: true;
-        b50: true;
-        b75: true;
-        b100: true;
-        b200: true;
-        b300: true;
-
-        // enable our custom heading variants
-        h25: true;
-        h50: true;
-        h75: true;
-        h100: true;
-        h200: true;
-        h300: true;
-        h400: true;
-        h500: true;
-        h600: true;
-        h700: true;
-        h800: true;
-        h900: true;
-        h1000: true;
-
-        // disable the MUI variants
-        h1: false;
-        h2: false;
-        h3: false;
-        h4: false;
-        h5: false;
-        h6: false;
-        body1: false;
-        body2: false;
-        button: false;
-        caption: false;
-        inherit: false;
-        overline: false;
-        subtitle1: false;
-        subtitle2: false;
-    }
-}
-
-const baseBodyStyles = {
-    fontFamily: 'Open Sans, sans-serif',
-    fontStyle: 'normal',
-    fontWeight: 400,
-};
-
-const b25 = {
-    fontSize: '1rem',
-    lineHeight: '1.6rem',
-    marginTop: getFontMargin(10, 0.75),
-    marginBottom: getFontMargin(10, 0.75),
-    ...baseBodyStyles,
-};
-const b50 = {
-    fontSize: '1.1rem',
-    lineHeight: '1.6rem',
-    marginTop: getFontMargin(11, 0.75),
-    marginBottom: getFontMargin(11, 0.75),
-    ...baseBodyStyles,
-};
-const b75 = {
-    fontSize: '1.2rem',
-    lineHeight: '1.6rem',
-    marginTop: getFontMargin(12, 0.75),
-    marginBottom: getFontMargin(12, 0.75),
-    ...baseBodyStyles,
-};
-const b100 = {
-    fontSize: '1.4rem',
-    lineHeight: '2rem',
-    marginTop: getFontMargin(14, 0.75),
-    marginBottom: getFontMargin(14, 0.75),
-    ...baseBodyStyles,
-};
-const b200 = {
-    fontSize: '1.6rem',
-    lineHeight: '2.4rem',
-    marginTop: getFontMargin(16, 0.75),
-    marginBottom: getFontMargin(16, 0.75),
-    ...baseBodyStyles,
-};
-const b300 = {
-    fontSize: '1.8rem',
-    lineHeight: '2.8rem',
-    marginTop: getFontMargin(18, 0.75),
-    marginBottom: getFontMargin(18, 0.75),
-    ...baseBodyStyles,
-};
-
-const baseHeadingStyles = {
-    fontFamily: 'Metropolis, sans-serif',
-    fontStyle: 'normal',
-    fontWeight: 600,
-
-    '&:first-of-type': {
-        marginTop: 0,
-    },
-};
-
-const h25 = {
-    fontSize: '1rem',
-    lineHeight: '1.6rem',
-    marginTop: getFontMargin(10, 8 / 9),
-    marginBottom: getFontMargin(10, 0.5),
-    ...baseHeadingStyles,
-    fontFamily: 'Open Sans, sans-serif',
-};
-const h50 = {
-    fontSize: '1.1rem',
-    lineHeight: '1.6rem',
-    marginTop: getFontMargin(11, 8 / 9),
-    marginBottom: getFontMargin(11, 0.5),
-    ...baseHeadingStyles,
-    fontFamily: 'Open Sans, sans-serif',
-};
-const h75 = {
-    fontSize: '1.2rem',
-    lineHeight: '1.6rem',
-    marginTop: getFontMargin(12, 8 / 9),
-    marginBottom: getFontMargin(12, 0.5),
-    ...baseHeadingStyles,
-    fontFamily: 'Open Sans, sans-serif',
-};
-const h100 = {
-    fontSize: '1.4rem',
-    lineHeight: '2rem',
-    marginTop: getFontMargin(14, 8 / 9),
-    marginBottom: getFontMargin(14, 0.5),
-    ...baseHeadingStyles,
-    fontFamily: 'Open Sans, sans-serif',
-};
-const h200 = {
-    fontSize: '1.6rem',
-    lineHeight: '2.4rem',
-    marginTop: getFontMargin(16, 8 / 9),
-    marginBottom: getFontMargin(16, 0.5),
-    ...baseHeadingStyles,
-};
-const h300 = {
-    fontSize: '1.8rem',
-    lineHeight: '2.4rem',
-    marginTop: getFontMargin(18, 8 / 9),
-    marginBottom: getFontMargin(18, 0.5),
-    ...baseHeadingStyles,
-};
-const h400 = {
-    fontSize: '2rem',
-    lineHeight: '2.8rem',
-    marginTop: getFontMargin(18, 8 / 9),
-    marginBottom: getFontMargin(18, 0.5),
-    ...baseHeadingStyles,
-};
-const h500 = {
-    fontSize: '2.2rem',
-    lineHeight: '2.8rem',
-    marginTop: getFontMargin(22, 8 / 9),
-    marginBottom: getFontMargin(22, 0.5),
-    ...baseHeadingStyles,
-};
-const h600 = {
-    fontSize: '2.5rem',
-    lineHeight: '3rem',
-    marginTop: getFontMargin(25, 8 / 9),
-    marginBottom: getFontMargin(25, 0.5),
-    ...baseHeadingStyles,
-};
-const h700 = {
-    fontSize: '2.8rem',
-    lineHeight: '3.6rem',
-    marginTop: getFontMargin(28, 8 / 9),
-    marginBottom: getFontMargin(28, 0.5),
-    ...baseHeadingStyles,
-};
-const h800 = {
-    fontSize: '3.2rem',
-    lineHeight: '4rem',
-    marginTop: getFontMargin(32, 8 / 9),
-    marginBottom: getFontMargin(32, 0.5),
-    ...baseHeadingStyles,
-};
-const h900 = {
-    fontSize: '3.6rem',
-    lineHeight: '4.4rem',
-    marginTop: getFontMargin(36, 8 / 9),
-    marginBottom: getFontMargin(36, 0.5),
-    ...baseHeadingStyles,
-};
-const h1000 = {
-    fontSize: '4rem',
-    lineHeight: '4.8rem',
-    marginTop: getFontMargin(40, 8 / 9),
-    marginBottom: getFontMargin(40, 0.5),
-    ...baseHeadingStyles,
-};
-
-const typographyOverrides: TypographyOptions = {
-    b25,
-    b50,
-    b75,
-    b100,
-    b200,
-    b300,
-    h25,
-    h50,
-    h75,
-    h100,
-    h200,
-    h300,
-    h400,
-    h500,
-    h600,
-    h700,
-    h800,
-    h900,
-    h1000,
-};
-
-export default typographyOverrides;

webapp/platform/components/src/compass/components/typography/typography.tsx

@@ -1,44 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {Typography as MuiTypography, TypographyProps as MuiTypographyProps} from '@mui/material';
-
-type Props = Omit<MuiTypographyProps, 'variantMapping' | 'paragraph'> & {
-    gutterTop?: boolean;
-}
-
-const Typography = ({variant = 'b100', ...props}: Props) => {
-    const variantMap = {
-        b25: 'p',
-        b50: 'p',
-        b75: 'p',
-        b100: 'p',
-        b200: 'p',
-        b300: 'p',
-
-        h25: 'h6',
-        h50: 'h6',
-        h75: 'h6',
-        h100: 'h5',
-        h200: 'h5',
-        h300: 'h4',
-        h400: 'h4',
-        h500: 'h3',
-        h600: 'h3',
-        h700: 'h2',
-        h800: 'h2',
-        h900: 'h1',
-        h1000: 'h1',
-    };
-
-    return (
-        <MuiTypography
-            {...props}
-            variant={variant}
-            variantMapping={variantMap}
-        />
-    );
-};
-
-export default Typography;

webapp/platform/components/src/compass/index.ts

@@ -1,10 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-export * from './components';
-
-import ThemeProvider from './theme_provider/theme_provider';
-
-export {
-    ThemeProvider,
-};

webapp/platform/components/src/compass/theme_provider/overrides.ts

@@ -1,23 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {ThemeOptions} from '@mui/material/styles/createTheme';
-
-import MuiButton from '../components/button/button.overrides';
-import MuiIconButton from '../components/icon_button/icon_button.overrides';
-import typographyOverrides from '../components/typography/typography.overrides';
-
-const components: ThemeOptions['components'] = {
-    MuiButton,
-    MuiIconButton,
-};
-
-const overrides: ThemeOptions = {
-    components,
-    typography: {
-        ...typographyOverrides,
-        htmlFontSize: 10,
-    },
-};
-
-export default overrides;

webapp/platform/components/src/compass/theme_provider/theme_provider.tsx

@@ -1,31 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {createTheme, ThemeProvider as MUIThemeProvider} from '@mui/material/styles';
-import {Theme} from "@mattermost/types/theme";
-
-import {createMUIThemeFromMMTheme} from './themes';
-
-import {THEMES} from '../../common/constants/theme';
-import overrides from './overrides';
-
-type Props = {
-    theme: Theme;
-}
-
-const ThemeProvider = ({theme = THEMES.onyx}: Props) => {
-    const MUITheme = createMUIThemeFromMMTheme(theme);
-    const combinedTheme = createTheme({
-        ...MUITheme,
-        ...overrides,
-    });
-
-    return (
-        <MUIThemeProvider
-            theme={combinedTheme}
-        />
-    );
-};
-
-export default ThemeProvider;

webapp/platform/components/src/compass/theme_provider/themes.ts

@@ -1,47 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {alpha} from '@mui/material';
-import {createTheme} from '@mui/material/styles';
-import {Theme} from '@mattermost/types/theme';
-
-import {THEMES} from '../../common/constants/theme';
-
-declare module '@mui/material/styles' {
-    interface Palette {
-        mention?: Palette['primary'];
-    }
-    interface PaletteOptions {
-        mention?: PaletteOptions['primary'];
-    }
-
-    interface PaletteColor {
-        darker?: string;
-    }
-    interface SimplePaletteColorOptions {
-        darker?: string;
-    }
-}
-
-export const createMUIThemeFromMMTheme = (theme: Theme) =>  createTheme({
-    palette: {
-        primary: {main: theme.buttonBg},
-        secondary: {main: theme.linkColor},
-        error: {main: theme.dndIndicator},
-        warning: {main: theme.awayIndicator},
-        info: {main: theme.mentionHighlightBg},
-        success: {main: theme.onlineIndicator},
-        text: {
-            primary: theme.centerChannelColor,
-        },
-        background: {
-            default: theme.centerChannelBg,
-        },
-        action: {
-            disabled: alpha(theme.centerChannelColor, 0.32),
-            disabledBackground: alpha(theme.centerChannelColor, 0.08),
-        },
-        tonalOffset: 0.05,
-    },
-});
-

webapp/platform/components/src/compass/utils/color.ts

@@ -1,32 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {decomposeColor, hslToRgb} from '@mui/material';
-import {normal} from 'color-blend';
-
-export const decomposeColorToRgb = (color: string) => {
-    if (color.startsWith('hsl')) {
-        return decomposeColor(hslToRgb(color));
-    }
-
-    return decomposeColor(color);
-};
-
-export const blend = (background: string, foreground: string) => {
-    const bg = decomposeColorToRgb(background);
-    const fg = decomposeColorToRgb(foreground);
-
-    const blended = normal({
-        r: bg.values[0],
-        g: bg.values[1],
-        b: bg.values[2],
-        a: bg.values[3] || 1,
-    }, {
-        r: fg.values[0],
-        g: fg.values[1],
-        b: fg.values[2],
-        a: fg.values[3] || 1,
-    });
-
-    return `rgba(${blended.r}, ${blended.g}, ${blended.b}, ${blended.a})`;
-};

webapp/platform/components/src/compass/utils/font.ts

@@ -1,5 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-export const getFontMargin = (fontSize: number, multiplier: number): number =>
-    Math.max(Math.round((fontSize * multiplier) / 4) * 4, 8);

webapp/platform/components/src/footer_pagination/footer_pagination.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import '../../../../../channels/src/sass/utils/mixins';
+@import '../../../../channels/src/sass/utils/mixins';
 
 .footer-pagination {
     display: flex;

webapp/platform/components/src/footer_pagination/footer_pagination.test.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import {render, screen} from '@testing-library/react';
 
 import {FooterPagination} from './footer_pagination';
-import {wrapIntl} from '../../testUtils'
+import {wrapIntl} from '../testUtils'
 
 describe('LegacyGenericModal/FooterPagination', () => {
     const baseProps = {

webapp/platform/components/src/footer_pagination/footer_pagination.tsx

@@ -11,7 +11,7 @@ import './footer_pagination.scss';
 
 const BUTTON_ICON_SIZE = 16;
 
-type FooterPaginationProps = {
+type Props = {
     page: number;
     total: number;
     itemsPerPage: number;
@@ -25,7 +25,7 @@ export const FooterPagination = ({
     itemsPerPage,
     onNextPage,
     onPreviousPage,
-}: FooterPaginationProps) => {
+}: Props) => {
     const {formatMessage} = useIntl();
 
     const startCount = page * itemsPerPage;

webapp/platform/components/src/generic_modal/generic_modal.scss

@@ -0,0 +1,320 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+@charset 'UTF-8';
+
+@import '../../../../channels/src/sass/utils/variables';
+@import '../../../../channels/src/sass/utils/mixins';
+
+.console__body .modal .GenericModal,
+.app__body .modal .GenericModal {
+    &.modal-dialog {
+        margin-top: calc(50vh - 240px);
+    }
+
+    &.modal-overflow {
+        .modal-body {
+            overflow: visible;
+        }
+    }
+
+    .modal-body {
+        max-height: 100%;
+        padding: 0;
+
+        .form-control {
+            height: 40px;
+            box-sizing: border-box;
+            border: 2px solid var(--button-bg);
+            border-radius: 4px;
+
+            &.has-error {
+                border-color: var(--error-text);
+            }
+        }
+
+        .MaxLengthInput {
+            &.form-control.has-error {
+                padding-right: 66px;
+            }
+
+            &__validation {
+                position: absolute;
+                top: 12px;
+                right: 56px;
+                color: var(--error-text);
+                font-size: 14px;
+                font-style: normal;
+                font-weight: normal;
+                line-height: 16px;
+            }
+        }
+
+        .input-clear {
+            top: 12px;
+            right: 36px;
+            width: 16px;
+            height: 16px;
+            color: var(--center-channel-color);
+            font-size: 18px;
+            font-style: normal;
+            font-weight: normal;
+            line-height: 16px;
+            opacity: 0.48;
+        }
+    }
+
+    .modal-content {
+        padding: 16px 15px;
+        border-radius: 8px;
+    }
+
+    .modal-header {
+        min-height: 0;
+        padding: 0;
+        border: none;
+        background: transparent;
+
+        .close {
+            top: 6px;
+            right: 6px;
+            display: flex;
+            width: 4rem;
+            height: 4rem;
+            align-items: center;
+            justify-content: center;
+            border-radius: 4px;
+            color: rgba(var(--center-channel-color-rgb), 0.56);
+            font-size: 32px;
+            font-weight: 400;
+
+            &:hover {
+                background-color: rgba(var(--center-channel-color-rgb), 0.08);
+                color: rgba(var(--center-channel-color-rgb), 0.72);
+            }
+
+            &:active {
+                background-color: rgba(var(--button-bg-rgb), 0.08);
+                color: v(button-bg);
+            }
+        }
+    }
+
+    .modal-footer {
+        padding: 12px 24px 24px 24px;
+        border: none;
+        border-radius: 4px;
+
+        &.divider {
+            border-top: 1px solid rgba(63, 67, 80, 0.08);
+        }
+    }
+
+    &.GenericModal__compassDesign {
+        .modal-content {
+            padding: 0;
+            border-radius: 12px;
+
+            .modal-header {
+                flex-direction: column;
+                padding: 26px 32px 7px;
+
+                .close {
+                    top: 22px;
+                    right: 18px;
+                    width: 40px;
+                    height: 40px;
+                    box-shadow: none;
+
+                    &:active {
+                        background: rgba(var(--button-bg-rgb), 0.08);
+                        color: var(--button-bg);
+                    }
+
+                    &:focus {
+                        box-sizing: border-box;
+                        border: 2px solid var(--sidebar-text-active-border);
+                    }
+                }
+
+                .GenericModal__header {
+                    display: flex;
+                    flex: 1;
+                    flex-direction: row;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 0;
+                    margin-right: 32px;
+                    border-top-left-radius: 12px;
+                    border-top-right-radius: 12px;
+
+                    h1 {
+                        color: var(--center-channel-color);
+                        font-size: 22px;
+                    }
+                }
+            }
+
+            .modal-body {
+                .GenericModal__body {
+                    padding: 0;
+
+                    &.padding {
+                        padding: 15px 32px 0;
+                    }
+                }
+            }
+
+            .modal-footer {
+                padding: 24px 32px;
+                border-bottom-left-radius: 12px;
+                border-bottom-right-radius: 12px;
+            }
+
+            .genericModalError {
+                display: flex;
+                box-sizing: border-box;
+                flex: 1;
+                padding: 14px;
+                border: 1px solid rgba(var(--dnd-indicator-rgb), 0.16);
+                margin-bottom: 24px;
+                background: rgba(var(--dnd-indicator-rgb), 0.08);
+                border-radius: 4px;
+
+                span {
+                    color: var(--center-channel-color);
+                    font-size: 14px;
+                    font-weight: 600;
+                    line-height: 24px;
+                }
+
+                i {
+                    margin-right: 8px;
+                    color: var(--error-text);
+                    font-size: 24px;
+                    line-height: 24px;
+
+                    &::before {
+                        margin: 0;
+                    }
+                }
+            }
+
+            .GenericModal__button {
+                padding: 13px 20px;
+                border: none;
+                border-radius: 4px;
+                box-shadow: none;
+
+                @include button-medium;
+
+                &.cancel {
+                    margin-right: 8px;
+                    background: var(--center-channel-bg);
+                    background: rgba(var(--button-bg-rgb), 0.08);
+                    color: var(--button-bg);
+
+                    &:hover {
+                        background: rgba(var(--button-bg-rgb), 0.12);
+                    }
+
+                    &:active {
+                        background: rgba(var(--button-bg-rgb), 0.16);
+                    }
+
+                    &:focus {
+                        box-sizing: border-box;
+                        padding: 11px 18px;
+                        border: 2px solid var(--sidebar-text-active-border);
+                    }
+                }
+
+                &.delete {
+                    @include primary-button;
+
+                    border-color: transparent;
+                    background: var(--dnd-indicator);
+
+                    &:focus {
+                        padding: 11px 18px;
+                    }
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        background: linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)), var(--dnd-indicator) !important;
+                    }
+                }
+
+                &.confirm {
+                    @include primary-button;
+                    @include button-medium;
+
+                    &:focus {
+                        padding: 11px 18px;
+                    }
+                }
+            }
+        }
+
+        @media screen and (max-width: 640px) {
+            margin: 0;
+
+            .modal-header {
+                box-shadow: var(--elevation-2);
+            }
+        }
+    }
+
+    &__wrapper-enter-key-press-catcher {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.GenericModal__header {
+    padding: 28px 24px 16px 24px;
+
+    h1 {
+        margin: 0;
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 28px;
+    }
+}
+
+.GenericModal__body {
+    position: relative;
+    width: 100%;
+    padding: 0 24px;
+    color: rgba(var(--center-channel-color-rgb), 0.72);
+    font-family: Open Sans;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 20px;
+}
+
+.GenericModal__button {
+    padding: 12px 16px;
+    border: none;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 12px;
+
+    &.cancel {
+        background: var(--center-channel-bg);
+        color: var(--button-bg);
+    }
+
+    &.confirm {
+        background: var(--button-bg);
+        border-radius: 4px;
+        color: var(--button-color);
+
+        &.disabled {
+            background: rgba(var(--center-channel-color-rgb), 0.08);
+            color: rgba(var(--center-channel-color-rgb), 0.32);
+        }
+    }
+}

webapp/platform/components/src/generic_modal/generic_modal.test.tsx

@@ -4,10 +4,10 @@
 import React from 'react';
 import {render, screen} from '@testing-library/react';
 
-import {LegacyGenericModal} from './legacy_generic_modal';
+import {GenericModal} from './generic_modal';
 import {wrapIntl} from '../testUtils';
 
-describe('LegacyGenericModal', () => {
+describe('GenericModal', () => {
     const baseProps = {
         onExited: jest.fn(),
         modalHeaderText: 'Modal Header Text',
@@ -16,7 +16,7 @@ describe('LegacyGenericModal', () => {
 
     test('should match snapshot for base case', () => {
         const wrapper = render(
-            wrapIntl(<LegacyGenericModal {...baseProps}/>),
+            wrapIntl(<GenericModal {...baseProps}/>),
         );
 
         expect(wrapper).toMatchSnapshot();
@@ -30,7 +30,7 @@ describe('LegacyGenericModal', () => {
         };
 
         render(
-            wrapIntl(<LegacyGenericModal {...props}/>),
+            wrapIntl(<GenericModal {...props}/>),
         );
         
         expect(screen.getByText('Confirm')).toBeInTheDocument();

webapp/platform/components/src/generic_modal/generic_modal.tsx

@@ -7,6 +7,7 @@ import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
 import {FocusTrap} from '../focus_trap';
+import './generic_modal.scss';
 
 export type Props = {
     className?: string;
@@ -53,7 +54,7 @@ type State = {
     isFocalTrapActive: boolean;
 }
 
-export class LegacyGenericModal extends React.PureComponent<Props, State> {
+export class GenericModal extends React.PureComponent<Props, State> {
     static defaultProps: Partial<Props> = {
         show: true,
         id: 'genericModal',

webapp/platform/components/src/index.tsx

@@ -2,20 +2,21 @@
 // See LICENSE.txt for license information.
 
 // type
-export type {Props as LegacyGenericModalProps} from './legacy_generic_modal/legacy_generic_modal';
+export type {Props as GenericModalProps} from './generic_modal/generic_modal';
 export type {CircleSkeletonLoaderProps, RectangleSkeletonLoaderProps} from './skeleton_loader';
 export type {Props as FocusTrapProps} from './focus_trap';
+export type {Props as PunchOutCoordsHeightAndWidth} from './common/hooks/useMeasurePunchouts';
 
 // components
-export * from './compass';
-export * from './legacy_generic_modal/footer_content';
-export {LegacyGenericModal} from './legacy_generic_modal/legacy_generic_modal';
+export {GenericModal} from './generic_modal/generic_modal';
+export {FooterPagination} from './footer_pagination/footer_pagination';
 export {CircleSkeletonLoader, RectangleSkeletonLoader} from './skeleton_loader';
-export * from './tour_tip';
-export * from './pulsating_dot';
+export {TourTip} from './tour_tip/tour_tip';
+export {TourTipBackdrop} from './tour_tip/tour_tip_backdrop';
+export {PulsatingDot} from './pulsating_dot';
 export {FocusTrap} from './focus_trap';
 
 // hooks
-export * from './common/hooks/useMeasurePunchouts';
+export {useMeasurePunchouts} from './common/hooks/useMeasurePunchouts';
 export {useElementAvailable} from './common/hooks/useElementAvailable';
 export {useFollowElementDimensions} from './common/hooks/useFollowElementDimensions';

webapp/platform/components/src/legacy_generic_modal/footer_content/index.ts

@@ -1,4 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-export * from './footer_pagination';

webapp/platform/components/src/tour_tip/tour_tip.tsx

@@ -7,7 +7,7 @@ import Tippy from '@tippyjs/react';
 import {Placement} from 'tippy.js';
 import classNames from 'classnames';
 
-import {PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts';
+import type {Props as PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts';
 
 import 'tippy.js/dist/tippy.css';
 import 'tippy.js/themes/light-border.css';

webapp/platform/components/src/tour_tip/tour_tip_backdrop.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import {PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts';
+import type {Props as PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts';
 
 type Props = {
     overlayPunchOut: PunchOutCoordsHeightAndWidth | null;