diff --git a/src/components/loginModal/index.ts b/src/components/loginModal/index.ts index 1eced661..ed169b61 100644 --- a/src/components/loginModal/index.ts +++ b/src/components/loginModal/index.ts @@ -1,3 +1 @@ -export * from './types'; - export { LoginModal } from './modal'; diff --git a/src/components/loginModal/styles.ts b/src/components/loginModal/styles.ts deleted file mode 100644 index c6a37e1f..00000000 --- a/src/components/loginModal/styles.ts +++ /dev/null @@ -1,89 +0,0 @@ -// @mui -import { alpha, Theme, styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -// -import { LabelColor, LabelVariant } from './types'; - -// ---------------------------------------------------------------------- - -export const StyledLabel = styled(Box)(({ - theme, - ownerState, -}: { - theme: Theme; - ownerState: { - color: LabelColor; - variant: LabelVariant; - }; -}) => { - const isLight = theme.palette.mode === 'light'; - - const filledVariant = ownerState.variant === 'filled'; - - const outlinedVariant = ownerState.variant === 'outlined'; - - const softVariant = ownerState.variant === 'soft'; - - const defaultStyle = { - ...(ownerState.color === 'default' && { - // FILLED - ...(filledVariant && { - color: isLight ? theme.palette.common.white : theme.palette.grey[800], - backgroundColor: theme.palette.text.primary, - }), - // OUTLINED - ...(outlinedVariant && { - backgroundColor: 'transparent', - color: theme.palette.text.primary, - border: `2px solid ${theme.palette.text.primary}`, - }), - // SOFT - ...(softVariant && { - color: theme.palette.text.secondary, - backgroundColor: alpha(theme.palette.grey[500], 0.16), - }), - }), - }; - - const colorStyle = { - ...(ownerState.color !== 'default' && { - // FILLED - ...(filledVariant && { - color: theme.palette[ownerState.color].contrastText, - backgroundColor: theme.palette[ownerState.color].main, - }), - // OUTLINED - ...(outlinedVariant && { - backgroundColor: 'transparent', - color: theme.palette[ownerState.color].main, - border: `2px solid ${theme.palette[ownerState.color].main}`, - }), - // SOFT - ...(softVariant && { - color: theme.palette[ownerState.color][isLight ? 'dark' : 'light'], - backgroundColor: alpha(theme.palette[ownerState.color].main, 0.16), - }), - }), - }; - - return { - height: 24, - minWidth: 24, - lineHeight: 0, - borderRadius: 6, - cursor: 'default', - alignItems: 'center', - whiteSpace: 'nowrap', - display: 'inline-flex', - justifyContent: 'center', - textTransform: 'capitalize', - padding: theme.spacing(0, 0.75), - fontSize: theme.typography.pxToRem(12), - fontWeight: theme.typography.fontWeightBold, - transition: theme.transitions.create('all', { - duration: theme.transitions.duration.shorter, - }), - ...defaultStyle, - ...colorStyle, - }; -}); diff --git a/src/components/loginModal/types.ts b/src/components/loginModal/types.ts deleted file mode 100644 index 6bc24d62..00000000 --- a/src/components/loginModal/types.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { BoxProps } from '@mui/material/Box'; - -// ---------------------------------------------------------------------- - -export type LabelColor = - | 'default' - | 'primary' - | 'secondary' - | 'info' - | 'success' - | 'warning' - | 'error'; - -export type LabelVariant = 'filled' | 'outlined' | 'soft'; - -export interface LabelProps extends BoxProps { - startIcon?: React.ReactElement | null; - endIcon?: React.ReactElement | null; - color?: LabelColor; - variant?: LabelVariant; -}