diff --git a/packages/yoroi-extension/app/assets/images/down-arrow.inline.svg b/packages/yoroi-extension/app/assets/images/down-arrow.inline.svg deleted file mode 100644 index 22e694013a..0000000000 --- a/packages/yoroi-extension/app/assets/images/down-arrow.inline.svg +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/yoroi-extension/app/assets/images/forms/error.inline.svg b/packages/yoroi-extension/app/assets/images/forms/error.inline.svg deleted file mode 100644 index 43f2c0c66a..0000000000 --- a/packages/yoroi-extension/app/assets/images/forms/error.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/sidebar/revamp/assets.inline.svg b/packages/yoroi-extension/app/assets/images/sidebar/revamp/assets.inline.svg deleted file mode 100644 index fd5644d3bb..0000000000 --- a/packages/yoroi-extension/app/assets/images/sidebar/revamp/assets.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/components/layout/BackgroundColoredLayout.js b/packages/yoroi-extension/app/components/layout/BackgroundColoredLayout.js deleted file mode 100644 index 1f458a606d..0000000000 --- a/packages/yoroi-extension/app/components/layout/BackgroundColoredLayout.js +++ /dev/null @@ -1,26 +0,0 @@ -// @flow -import { Box } from '@mui/system'; -import { observer } from 'mobx-react'; -import type { Node, ComponentType } from 'react'; - -type Props = {| - +children: Node, - +isRevamp?: boolean, -|}; - -function BackgroundColoredLayout({ children, isRevamp = false }: Props): Node { - return ( - - {children} - - ); -} - -export default (observer(BackgroundColoredLayout): ComponentType); diff --git a/packages/yoroi-extension/app/components/mixins/card-mixin.scss b/packages/yoroi-extension/app/components/mixins/card-mixin.scss deleted file mode 100644 index bb80500a39..0000000000 --- a/packages/yoroi-extension/app/components/mixins/card-mixin.scss +++ /dev/null @@ -1,44 +0,0 @@ -@mixin card-mixin { - width: 250px; - height: 380px; - border-radius: 8px; - background-color: var(--yoroi-palette-common-white); - color: var(--yoroi-palette-gray-800); - font-size: 1rem; - font-weight: 400; - padding: 32px 20px; - text-align: center; - display: flex; - flex-direction: column; - justify-content: flex-end; - margin: 0 8px; - box-shadow: 0 5px 20px 0px rgba(24, 26, 30, 0.08); - margin-bottom: 15px; - cursor: pointer; - - &:hover { - box-shadow: 0 5px 30px 0px rgba(24, 26, 30, 0.12); - - .heroCardsItemTitle { - color: var(--yoroi-palette-primary-300); - } - } - - .heroCardsItemTitle { - display: flex; - justify-content: center; - letter-spacing: -0.03em; - line-height: 22px; - - .tooltip { - margin-left: 3px; - margin-top: 2px; - } - } - - .heroCardsItemDate { - color: var(--yoroi-palette-gray-600); - font-size: 12px; - line-height: 20px; - } -} diff --git a/packages/yoroi-extension/app/components/wallet/create-wallet/VerifyRecoveryPhraseStep.scss b/packages/yoroi-extension/app/components/wallet/create-wallet/VerifyRecoveryPhraseStep.scss deleted file mode 100644 index 9aa854ba29..0000000000 --- a/packages/yoroi-extension/app/components/wallet/create-wallet/VerifyRecoveryPhraseStep.scss +++ /dev/null @@ -1,66 +0,0 @@ -.component { - .verifyRecoveryPhraseArea { - // border: double 2px transparent; - border-radius: 8px; - // background-image: linear-gradient( - // 0deg, - // var(--yoroi-palette-common-white), - // var(--yoroi-palette-common-white) - // ), - // linear-gradient(269.97deg, #e4e8f7 0%, #c6f7ed 99.98%); - // background-origin: border-box; - // background-clip: content-box, border-box; - margin-bottom: 16px; - } - - .wordChip { - position: relative; - text-align: center; - border-radius: 8px; - display: flex; - align-items: center; - justify-content: center; - width: 123px; - height: 40px; - cursor: pointer; - - // background-image: linear-gradient(180deg, #e4e8f7 0%, #c6f7f7 100%), - // linear-gradient(180deg, #e4e8f7 0%, #c6f7f7 100%); - // background-origin: border-box; - // background-clip: content-box, border-box; - - &::before { - position: absolute; - content: ''; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - // background: linear-gradient(180deg, #93f5e1 0%, #c6f7ed 100%); - border-radius: 8px; - z-index: 1; - transition: opacity 200ms linear; - opacity: 0; - } - - &:not(.wordAdded):not(.wrongWord):hover::before { - opacity: 1; - } - - &.wordAdded { - border: double 2px transparent; - // background-image: linear-gradient( - // 0deg, - // var(--yoroi-palette-common-white), - // var(--yoroi-palette-common-white) - // ), - // linear-gradient(180deg, #e4e8f7 0%, #c6f7f7 100%); - cursor: not-allowed; - } - - &.wrongWord { - border: 2px solid #ff1351; - background: transparent; - } - } -} diff --git a/packages/yoroi-extension/app/components/widgets/HorizontalLine.js b/packages/yoroi-extension/app/components/widgets/HorizontalLine.js deleted file mode 100644 index 9243f4cc0d..0000000000 --- a/packages/yoroi-extension/app/components/widgets/HorizontalLine.js +++ /dev/null @@ -1,17 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import styles from './HorizontalLine.scss'; - -type Props = {||}; - -@observer -export default class FlagLabel extends Component { - - render(): Node { - return ( -
- ); - } -} diff --git a/packages/yoroi-extension/app/components/widgets/HorizontalLine.scss b/packages/yoroi-extension/app/components/widgets/HorizontalLine.scss deleted file mode 100644 index c5af77abd5..0000000000 --- a/packages/yoroi-extension/app/components/widgets/HorizontalLine.scss +++ /dev/null @@ -1,8 +0,0 @@ -.fullWidth { - border: 0; - border-bottom: 2px solid var(--yoroi-palette-gray-200); - width: 100%; - margin: 0; - background-color: #f0f3f5; - padding: 20px 0 0 0; -} \ No newline at end of file diff --git a/packages/yoroi-extension/app/containers/wallet/UnsupportedWallet.js b/packages/yoroi-extension/app/containers/wallet/UnsupportedWallet.js deleted file mode 100644 index ac09a178b3..0000000000 --- a/packages/yoroi-extension/app/containers/wallet/UnsupportedWallet.js +++ /dev/null @@ -1,39 +0,0 @@ -// @flow -import type { Node } from 'react'; -import { Component } from 'react'; -import { defineMessages, intlShape } from 'react-intl'; -import FullscreenMessage from '../../components/wallet/layouts/FullscreenMessage'; -import { observer } from 'mobx-react'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; - -export const messages: * = defineMessages({ - title: { - id: 'wallet.unsupported.title', - defaultMessage: '!!!This wallet type is incompatible.', - }, - subtitle: { - id: 'wallet.unsupported.subtitle', - defaultMessage: '!!!The selected wallet does not support this functionality', - }, -}); - -type Props = {| -|}; - -@observer -export default class UnsupportedWallet extends Component { - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { - intl: intlShape.isRequired, - }; - - render(): Node { - const { intl } = this.context; - - return ( - - ); - } -} diff --git a/packages/yoroi-extension/app/styles/overrides/legacy/Button.js b/packages/yoroi-extension/app/styles/overrides/legacy/Button.js deleted file mode 100644 index cbd525000b..0000000000 --- a/packages/yoroi-extension/app/styles/overrides/legacy/Button.js +++ /dev/null @@ -1,429 +0,0 @@ -// @flow -import { baseLightTheme } from '../../themes/light-theme-mui'; - -const ClassicButton: any = { - styleOverrides: { - root: { - fontSize: '0.875rem', - borderRadius: 0, - border: 0, - fontWeight: 500, - minHeight: 44, - minWidth: 230, - padding: '12px 20px', - textTransform: 'none', - }, - }, - defaultProps: { disableRipple: true }, - variants: [ - { - props: { variant: 'primary' }, - style: { - backgroundColor: 'var(--yoroi-comp-button-primary-background)', - color: 'var(--yoroi-comp-button-primary-text)', - ':hover': { - backgroundColor: 'var(--yoroi-comp-button-primary-background-hover)', - }, - '&.Mui-active': { - backgroundColor: 'var(--yoroi-comp-button-primary-background-active)', - }, - '&.Mui-disabled': { - opacity: 0.4, - color: 'var(--yoroi-comp-button-primary-text)', - }, - '& .MuiLoadingButton-loadingIndicator': { - color: 'var(--yoroi-comp-button-primary-text)', - }, - }, - }, - { - props: { variant: 'secondary' }, - style: { - backgroundColor: 'var(--yoroi-comp-button-flat-background)', - color: 'var(--yoroi-comp-button-flat-text)', - border: 0, - ':hover': { - backgroundColor: 'var(--yoroi-comp-button-flat-background-hover)', - }, - '&.Mui-active': { - backgroundColor: 'var(--yoroi-comp-button-flat-background-active)', - }, - '&.Mui-disabled': { - color: 'var(--yoroi-comp-button-flat-text)', - opacity: 0.4, - }, - '& .MuiLoadingButton-loadingIndicator': { - color: 'var(--yoroi-comp-button-flat-text)', - }, - }, - }, - { - props: { variant: 'danger' }, - style: { - backgroundColor: 'var(--yoroi-comp-button-danger-background)', - color: 'var(--yoroi-comp-button-danger-text)', - border: 0, - ':hover': { - backgroundColor: 'var(--yoroi-comp-button-danger-background-hover)', - }, - '&.Mui-active': { - backgroundColor: 'var(--yoroi-comp-button-danger-background-active)', - }, - '&.Mui-disabled': { - opacity: 0.4, - color: 'var(--yoroi-comp-button-danger-text)', - }, - '& .MuiLoadingButton-loadingIndicator': { - color: 'var(--yoroi-comp-button-danger-background)', - }, - }, - }, - ], -}; - -const ModernButton: any = { - styleOverrides: { - root: { - fontSize: '1rem', - borderRadius: 8, - fontWeight: 500, - fontFamily: 'Rubik', - minHeight: 52, - minWidth: 230, - lineHeight: '18px', - textTransform: 'uppercase', - padding: '16px', - height: 52, - }, - }, - defaultProps: { disableRipple: true }, - variants: [ - { - props: { variant: 'primary' }, - style: { - backgroundColor: 'var(--yoroi-comp-button-primary-background)', - color: 'var(--yoroi-comp-button-primary-text)', - ':hover': { - backgroundColor: 'var(--yoroi-comp-button-primary-background-hover)', - }, - '&.Mui-active': { - backgroundColor: 'var(--yoroi-comp-button-primary-background-active)', - }, - '&.Mui-disabled': { - opacity: 0.4, - color: 'var(--yoroi-comp-button-primary-text)', - }, - '& .MuiLoadingButton-loadingIndicator': { - color: 'var(--yoroi-comp-button-primary-text)', - }, - }, - }, - { - props: { variant: 'secondary-blue' }, - style: { - backgroundColor: 'var(--yoroi-comp-button-secondary-background)', - color: 'var(--yoroi-comp-button-primary-text)', - border: '2px solid', - borderColor: 'var(--yoroi-comp-button-primary-border)', - ':hover': { - color: 'var(--yoroi-comp-button-primary-text)', - borderColor: 'var(--yoroi-comp-button-primary-border-hover)', - backgroundColor: 'var(--yoroi-comp-button-primary-background-hover)', - }, - '&.Mui-active': { - backgroundColor: 'var(--yoroi-comp-button-primary-background-active)', - }, - '&.Mui-disabled': { - border: '2px solid', - opacity: 0.4, - borderColor: 'var(--yoroi-comp-button-primary-border)', - color: 'var(--yoroi-comp-button-primary-text)', - }, - '& .MuiLoadingButton-loadingIndicator': { - color: 'var(--yoroi-comp-button-primary-text)', - }, - }, - }, - { - props: { variant: 'secondary' }, - style: { - backgroundColor: 'var(--yoroi-comp-button-secondary-background)', - color: 'var(--yoroi-comp-button-secondary-text)', - border: '2px solid', - borderColor: 'var(--yoroi-comp-button-secondary-border)', - ':hover': { - color: 'var(--yoroi-comp-button-secondary-text)', - borderColor: 'var(--yoroi-comp-button-secondary-border-hover)', - backgroundColor: 'var(--yoroi-comp-button-secondary-background-hover)', - }, - '&.Mui-active': { - backgroundColor: 'var(--yoroi-comp-button-secondary-background-active)', - }, - '&.Mui-disabled': { - border: '2px solid', - opacity: 0.4, - borderColor: 'var(--yoroi-comp-button-secondary-border)', - color: 'var(--yoroi-comp-button-secondary-text)', - }, - '& .MuiLoadingButton-loadingIndicator': { - color: 'var(--yoroi-comp-button-secondary-text)', - }, - }, - }, - { - props: { variant: 'ternary' }, - style: { - minWidth: '160px', - minHeight: '44px', - height: '44px', - fontSize: '0.875rem', - backgroundColor: 'transparent', - color: 'var(--yoroi-palette-gray-600)', - border: '1px solid', - borderColor: 'var(--yoroi-palette-gray-400)', - ':hover': { - borderColor: 'var(--yoroi-palette-gray-500)', - }, - '&.Mui-active': { - backgroundColor: 'var(--yoroi-palette-gray-50)', - }, - '&.Mui-disabled': { - border: '1px solid', - opacity: 0.4, - borderColor: 'var(--yoroi-palette-gray-400)', - color: 'var(--yoroi-palette-gray-600)', - }, - '& .MuiLoadingButton-loadingIndicator': { - color: 'var(--yoroi-palette-gray-600)', - }, - }, - }, - { - props: { variant: 'danger' }, - style: { - backgroundColor: 'var(--yoroi-comp-button-danger-background)', - color: 'var(--yoroi-comp-button-danger-text)', - border: 0, - ':hover': { - backgroundColor: 'var(--yoroi-comp-button-danger-background-hover)', - }, - '&.Mui-active': { - backgroundColor: 'var(--yoroi-comp-button-danger-background-active)', - }, - '&.Mui-disabled': { - color: 'var(--yoroi-comp-button-danger-text)', - opacity: 0.4, - }, - '& .MuiLoadingButton-loadingIndicator': { - color: 'var(--yoroi-comp-button-danger-background)', - }, - }, - }, - // Todo: this button `varient` should be part of the new revam design system - { - props: { variant: 'rv-primary' }, - style: { - minWidth: 'unset', - minHeight: 'unset', - width: 'unset', - height: 'unset', - // Todo: get the colors from the design system - backgroundColor: '#4B6DDE', - color: 'var(--yoroi-palette-common-white)', - border: 1, - ':hover': { - backgroundColor: '#3154CB', - }, - '&.Mui-active': { - backgroundColor: '#1737A3', - }, - '&.Mui-disabled': { - color: '#C4CFF5', - opacity: 0.4, - }, - '& .MuiLoadingButton-loadingIndicator': { - color: '#C4CFF5', - }, - }, - }, - ], -}; - -function makeContainedBtnStyles(color: 'primary' | 'secondary'): Object { - return { - backgroundColor: baseLightTheme.palette[color].main, - color: baseLightTheme.palette.static.white, - ':hover': { - backgroundColor: baseLightTheme.palette[color][600], - }, - ':active': { - backgroundColor: baseLightTheme.palette[color][700], - }, - ':focus': { - backgroundColor: baseLightTheme.palette[color][500], - }, - '&.Mui-disabled': { - color: baseLightTheme.palette.static.white, - backgroundColor: baseLightTheme.palette[color][200], - }, - '& .MuiLoadingButton-loadingIndicator': { - color: baseLightTheme.palette.static.white, - }, - }; -} - -function makeOutlinedBtnStyles(color: 'primary' | 'secondary'): Object { - return { - backgroundColor: 'transparent', - color: baseLightTheme.palette[color][500], - border: '2px solid', - borderColor: baseLightTheme.palette[color][500], - ':hover': { - border: '2px solid', - color: baseLightTheme.palette[color][600], - borderColor: baseLightTheme.palette[color][600], - }, - ':active': { - borderColor: baseLightTheme.palette[color][700], - }, - ':focus': { - borderColor: baseLightTheme.palette[color][500], - }, - '&.Mui-disabled': { - border: '2px solid', - borderColor: baseLightTheme.palette[color][200], - color: baseLightTheme.palette[color][200], - }, - '& .MuiLoadingButton-loadingIndicator': { - color: baseLightTheme.palette[color][600], - }, - }; -} - -// Button in Figam: https://bit.ly/3Ky4uvo -const RevampButton: any = { - styleOverrides: { - root: { - fontSize: '1rem', - borderRadius: 8, - fontWeight: 500, - fontFamily: 'Rubik', - lineHeight: '19px', - textTransform: 'uppercase', - padding: '16px', - '&.MuiButton-sizeLarge': { - height: '56px', - }, - '&.MuiButton-sizeMedium': { - padding: '10px', - height: '48px', - }, - '&.MuiButton-sizeSmall': { - padding: '7px', - height: '32px', - }, - boxShadow: 'none', - ':hover': { - boxShadow: 'none', - }, - }, - }, - defaultProps: { disableRipple: false }, - variants: [ - { - props: { variant: 'contained', color: 'primary' }, - style: makeContainedBtnStyles('primary'), - }, - { - props: { variant: 'contained', color: 'secondary' }, - style: makeContainedBtnStyles('secondary'), - }, - { - props: { variant: 'outlined', color: 'primary' }, - style: makeOutlinedBtnStyles('primary'), - }, - { - props: { variant: 'outlined', color: 'secondary' }, - style: makeOutlinedBtnStyles('secondary'), - }, - { - props: { variant: 'ternary' }, - style: { - width: '160px', - height: '48px', - padding: '8px', - fontSize: '0.875rem', - backgroundColor: 'transparent', - color: baseLightTheme.palette.grayscale[600], - border: '1px solid', - borderColor: baseLightTheme.palette.grayscale[400], - ':hover': { - borderColor: baseLightTheme.palette.grayscale[500], - }, - '&.Mui-active': { - backgroundColor: baseLightTheme.palette.grayscale[50], - }, - '&.Mui-disabled': { - border: '1px solid', - opacity: 0.4, - borderColor: baseLightTheme.palette.grayscale[400], - color: baseLightTheme.palette.grayscale[600], - }, - '& .MuiLoadingButton-loadingIndicator': { - color: baseLightTheme.palette.grayscale[600], - }, - }, - }, - { - props: { variant: 'contained', color: 'error' }, - style: { - backgroundColor: baseLightTheme.palette.system.magenta[300], - color: baseLightTheme.palette.static.white, - border: 0, - ':hover': { - backgroundColor: baseLightTheme.palette.system.magenta[100], - }, - '&.Mui-active': { - backgroundColor: baseLightTheme.palette.system.magenta[300], - }, - '&.Mui-disabled': { - backgroundColor: baseLightTheme.palette.system.magenta[300], - color: baseLightTheme.palette.static.white, - opacity: 0.4, - }, - '& .MuiLoadingButton-loadingIndicator': { - color: baseLightTheme.palette.system.magenta[300], - }, - }, - }, - { - props: { variant: 'outlined', color: 'error' }, - style: { - backgroundColor: baseLightTheme.palette.static.white, - color: baseLightTheme.palette.system.magenta[500], - border: '2px solid', - borderColor: baseLightTheme.palette.system.magenta[500], - ':hover': { - border: '2px solid', - color: baseLightTheme.palette.system.magenta[400], - borderColor: baseLightTheme.palette.system.magenta[400], - }, - ':active': { - borderColor: baseLightTheme.palette.system.magenta[400], - }, - ':focus': { - borderColor: baseLightTheme.palette.system.magenta[400], - }, - '&.Mui-disabled': { - border: '2px solid', - opacity: 0.4, - }, - '& .MuiLoadingButton-loadingIndicator': { - color: baseLightTheme.palette.system.magenta[500], - }, - }, - }, - ], -}; - -export { ClassicButton, ModernButton, RevampButton }; diff --git a/packages/yoroi-extension/app/styles/overrides/legacy/Checkbox.js b/packages/yoroi-extension/app/styles/overrides/legacy/Checkbox.js deleted file mode 100644 index 12b67ce604..0000000000 --- a/packages/yoroi-extension/app/styles/overrides/legacy/Checkbox.js +++ /dev/null @@ -1,54 +0,0 @@ -// @flow -import { lightThemeBase } from '../../themes/light-theme-base'; - -const ClassicCheckbox = { - styleOverrides: { - root: { - padding: 0, - marginRight: '18px', - color: 'var(--yoroi-comp-checkbox-background-active)', - '&.Mui-checked': { - color: 'var(--yoroi-comp-checkbox-background-active)', - }, - '&.Mui-disabled': { - color: 'var(--yoroi-comp-checkbox-border-disabled)', - }, - }, - }, -}; - -const ModernCheckbox = { - styleOverrides: { - root: { - padding: 0, - marginRight: '18px', - color: 'var(--yoroi-comp-checkbox-border)', - '&.Mui-checked': { - color: 'var(--yoroi-comp-checkbox-background-active)', - }, - '&.Mui-disabled': { - color: 'var(--yoroi-comp-checkbox-border-disabled)', - }, - }, - }, -}; - -const RevampCheckbox: any = { - styleOverrides: { - root: { - padding: 0, - marginRight: '18px', - borderRadius: '2px', - color: 'ds.primary_500', - '&.Mui-checked': { - color: 'ds.primary_500', - }, - '&.Mui-disabled': { - color: lightThemeBase.palette.grayscale[400], - backgroundColor: lightThemeBase.palette.grayscale[400], - }, - }, - }, -}; - -export { ClassicCheckbox, ModernCheckbox, RevampCheckbox }; diff --git a/packages/yoroi-extension/app/styles/overrides/legacy/Chip.js b/packages/yoroi-extension/app/styles/overrides/legacy/Chip.js deleted file mode 100644 index 0038f727d2..0000000000 --- a/packages/yoroi-extension/app/styles/overrides/legacy/Chip.js +++ /dev/null @@ -1,171 +0,0 @@ -// @flow -const ClassicChip = { - styleOverrides: { - root: { - minWidth: '87px', - textAlign: 'center', - fontSize: '0.75rem', - lineHeight: '21px', - letterSpacing: '1px', - textTransform: 'uppercase', - borderRadius: '8px', - paddingTop: '3px', - height: '25px', - userSelect: 'none', - border: 'none', - }, - }, - variants: [ - { - props: { variant: 'pending' }, - style: { - background: 'var(--yoroi-palette-tx-status-pending-background)', - color: 'var(--yoroi-palette-tx-status-pending-text)', - }, - }, - { - props: { variant: 'high' }, - style: { - background: 'var(--yoroi-palette-tx-status-high-background)', - color: 'var(--yoroi-palette-tx-status-high-text)', - }, - }, - { - props: { variant: 'failed' }, - style: { - background: 'var(--yoroi-palette-tx-status-failed-background)', - color: 'var(--yoroi-palette-tx-status-failed-text)', - }, - }, - { - props: { variant: 'medium' }, - style: { - background: 'var(--yoroi-palette-tx-status-medium-background)', - color: 'var(--yoroi-palette-tx-status-medium-text)', - }, - }, - { - props: { variant: 'low' }, - style: { - background: 'var(--yoroi-palette-tx-status-low-background)', - color: 'var(--yoroi-palette-tx-status-low-text)', - }, - }, - { - props: { variant: 'autocomplete' }, - style: { - minWidth: 'auto', - borderRadius: '2px', - margin: '5px 3px 0 3px', - textTransform: 'lowercase', - padding: '3px 0 3px 6px', - background: '#daa49a', - height: '28px', - display: 'flex', - alignItems: 'center', - color: '#f9fafb', - fontSize: '0.9rem', - fontWeight: 300, - span: { - padding: 0, - marginLeft: '2px', - paddingRight: '10px', - }, - '& .MuiChip-deleteIcon': { - color: 'inherit', - }, - '&:hover': { - background: '#daa49a', - }, - }, - }, - ], -}; - -const ModernChip = { - styleOverrides: { - root: { - minWidth: '87px', - textAlign: 'center', - fontSize: '0.75rem', - lineHeight: '21px', - letterSpacing: '1px', - textTransform: 'uppercase', - borderRadius: '8px', - paddingTop: '3px', - height: '25px', - userSelect: 'none', - border: 'none', - }, - }, - variants: [ - { - props: { variant: 'pending' }, - style: { - background: 'var(--yoroi-palette-tx-status-pending-background)', - color: 'var(--yoroi-palette-tx-status-pending-text)', - }, - }, - { - props: { variant: 'high' }, - style: { - background: 'var(--yoroi-palette-tx-status-high-background)', - color: 'var(--yoroi-palette-tx-status-high-text)', - }, - }, - { - props: { variant: 'failed' }, - style: { - background: 'var(--yoroi-palette-tx-status-failed-background)', - color: 'var(--yoroi-palette-tx-status-failed-text)', - }, - }, - { - props: { variant: 'medium' }, - style: { - background: 'var(--yoroi-palette-tx-status-medium-background)', - color: 'var(--yoroi-palette-tx-status-medium-text)', - }, - }, - { - props: { variant: 'low' }, - style: { - background: 'var(--yoroi-palette-tx-status-low-background)', - color: 'var(--yoroi-palette-tx-status-low-text)', - }, - }, - { - props: { variant: 'autocomplete' }, - style: { - minWidth: 'auto', - borderRadius: '8px', - textTransform: 'lowercase', - margin: '5px 4px 0 4px', - padding: '3px 0 4px 3px', - background: 'var(--yoroi-palette-gray-50)', - height: '30px', - display: 'flex', - alignItems: 'center', - fontSize: '0.875rem', - color: 'var(--yoroi-palette-gray-900)', - letterSpacing: 0, - span: { - padding: 0, - paddingRight: '9px', - paddingLeft: '7px', - }, - '& .MuiChip-deleteIcon': { - color: 'inherit', - }, - '&:hover': { - background: 'var(--yoroi-palette-gray-50)', - }, - }, - }, - ], - defaultProps: { - readOnly: true, - }, -}; - -export { ClassicChip, ModernChip }; diff --git a/packages/yoroi-extension/app/styles/overrides/legacy/FormControl.js b/packages/yoroi-extension/app/styles/overrides/legacy/FormControl.js deleted file mode 100644 index f211175c24..0000000000 --- a/packages/yoroi-extension/app/styles/overrides/legacy/FormControl.js +++ /dev/null @@ -1,40 +0,0 @@ -// @flow -const ClassicFormControl = { - styleOverrides: { - root: { - paddingBottom: '20px', - marginBottom: '10px', - }, - }, - defaultProps: { - variant: 'outlined', - fullWidth: true, - }, -}; - -const ModernFormControl = { - styleOverrides: { - root: { - paddingBottom: '20px', - marginBottom: '10px', - marginTop: '7px', - '&:hover': { - '& .MuiInputLabel-root': { - color: 'var(--yoroi-comp-input-text-focus)', - '&.Mui-disabled': { - color: 'var(--yoroi-comp-input-border-disabled)', - }, - '&.Mui-error': { - color: 'var(--yoroi-comp-input-error)', - }, - }, - }, - }, - }, - defaultProps: { - variant: 'outlined', - fullWidth: true, - }, -}; - -export { ClassicFormControl, ModernFormControl }; diff --git a/packages/yoroi-extension/app/styles/overrides/legacy/FormHelperText.js b/packages/yoroi-extension/app/styles/overrides/legacy/FormHelperText.js deleted file mode 100644 index 3e13091604..0000000000 --- a/packages/yoroi-extension/app/styles/overrides/legacy/FormHelperText.js +++ /dev/null @@ -1,44 +0,0 @@ -// @flow -const ClassicFormHelperText = { - styleOverrides: { - root: { - color: 'var(--yoroi-comp-input-helper-text)', - marginLeft: 0, - marginTop: 0, - fontWeight: 400, - position: 'absolute', - bottom: '-2px', - '&.Mui-disabled': { - color: 'var(--yoroi-comp-input-helper-text-disabled)', - }, - '&.Mui-error': { - color: 'var(--yoroi-comp-input-error)', - }, - }, - }, - defaultProps: { - variant: 'outlined', - }, -}; -const ModernFormHelperText = { - styleOverrides: { - root: { - color: 'var(--yoroi-comp-input-helper-text)', - marginTop: 0, - marginLeft: '14px', - fontWeight: 400, - position: 'absolute', - bottom: '-2px', - '&.Mui-disabled': { - color: 'var(--yoroi-comp-input-helper-text-disabled)', - }, - '&.Mui-error': { - color: 'var(--yoroi-comp-input-error)', - }, - }, - }, - defaultProps: { - variant: 'outlined', - }, -}; -export { ClassicFormHelperText, ModernFormHelperText }; diff --git a/packages/yoroi-extension/app/styles/overrides/legacy/InputLabel.js b/packages/yoroi-extension/app/styles/overrides/legacy/InputLabel.js deleted file mode 100644 index 792f13b250..0000000000 --- a/packages/yoroi-extension/app/styles/overrides/legacy/InputLabel.js +++ /dev/null @@ -1,51 +0,0 @@ -// @flow -const ClassicInputLabel = { - styleOverrides: { - root: { - color: 'var(--yoroi-comp-input-placeholder)', - position: 'relative', - top: 'unset', - transform: 'none', - marginBottom: '10px', - letterSpacing: '1.12px', - fontWeight: 500, - '&.Mui-focused': { - color: 'var(--yoroi-comp-input-text-focus)', - }, - '&.Mui-disabled': { - color: 'var(--yoroi-comp-input-placeholder-disabled)', - }, - '&.Mui-error': { - color: 'var(--yoroi-comp-input-error)', - }, - }, - }, - defaultProps: { - variant: 'outlined', - shrink: false, - }, -}; -const ModernInputLabel = { - styleOverrides: { - root: { - color: 'var(--yoroi-comp-input-placeholder)', - '&::first-letter': { - textTransform: 'uppercase' - }, - '&.Mui-focused': { - color: 'var(--yoroi-comp-input-text-focus)', - }, - '&.Mui-disabled': { - color: 'var(--yoroi-comp-input-placeholder-disabled)', - }, - '&.Mui-error': { - color: 'var(--yoroi-comp-input-error)', - }, - }, - }, - defaultProps: { - variant: 'outlined', - }, -}; - -export { ClassicInputLabel, ModernInputLabel }; diff --git a/packages/yoroi-extension/app/styles/overrides/legacy/Menu.js b/packages/yoroi-extension/app/styles/overrides/legacy/Menu.js deleted file mode 100644 index 2096637801..0000000000 --- a/packages/yoroi-extension/app/styles/overrides/legacy/Menu.js +++ /dev/null @@ -1,31 +0,0 @@ -// @flow -const ClassicMenu = { - styleOverrides: { - root: { - '& .MuiMenu-paper': { - maxHeight: '500px', - borderRadius: 0, - }, - '& .MuiMenu-list': { - padding: 0, - boxShadow: '0 3px 7px 0 rgba(74,74,74,0.16)', - }, - }, - }, -}; -const ModernMenu = { - styleOverrides: { - root: { - '& .MuiMenu-paper': { - maxHeight: '500px', - borderRadius: 6, - boxShadow: '0 3px 7px 0 rgba(74,74,74,0.16)', - marginTop: '4px', - }, - '& .MuiMenu-list': { - padding: 0, - }, - }, - }, -}; -export { ClassicMenu, ModernMenu }; diff --git a/packages/yoroi-extension/app/styles/overrides/legacy/MenuItem.js b/packages/yoroi-extension/app/styles/overrides/legacy/MenuItem.js deleted file mode 100644 index b1ae80259b..0000000000 --- a/packages/yoroi-extension/app/styles/overrides/legacy/MenuItem.js +++ /dev/null @@ -1,65 +0,0 @@ -// @flow -const ClassicMenuItem = { - styleOverrides: { - root: { - padding: '14px 20px', - backgroundColor: 'var(--yoroi-comp-menu-item-background)', - height: 50, - color: 'var(--yoroi-comp-menu-item-text)', - '&:hover': { - background: 'var(--yoroi-comp-menu-item-background-highlighted)', - }, - '&.Mui-selected': { - background: 'var(--yoroi-comp-menu-item-background-highlighted)', - '&:hover': { - backgroundColor: 'var(--yoroi-comp-menu-item-background-highlighted)', - }, - '&::after': { - content: '""', - position: 'absolute', - borderColor: 'var(--yoroi-comp-menu-item-checkmark)', - borderStyle: 'solid', - borderWidth: '0 2px 2px 0', - height: '9px', - margin: '0 2px 3px auto', - transform: 'rotate(45deg)', - width: '5px', - right: '22px', - }, - }, - }, - }, -}; -const ModernMenuItem = { - styleOverrides: { - root: { - padding: '14px 20px', - backgroundColor: 'var(--yoroi-comp-menu-item-background)', - height: 45, - color: 'var(--yoroi-comp-menu-item-text)', - '&:hover': { - background: 'var(--yoroi-comp-menu-item-background-highlighted)', - }, - '&.Mui-selected': { - background: 'var(--yoroi-comp-menu-item-background-highlighted)', - position: 'relative', - '&:hover': { - backgroundColor: 'var(--yoroi-comp-menu-item-background-highlighted)', - }, - '&::after': { - content: '""', - position: 'absolute', - borderColor: 'var(--yoroi-comp-menu-item-checkmark)', - borderStyle: 'solid', - borderWidth: '0 2px 2px 0', - height: '9px', - margin: '0 2px 3px auto', - transform: 'rotate(45deg)', - width: '5px', - right: '22px', - }, - }, - }, - }, -}; -export { ClassicMenuItem, ModernMenuItem }; diff --git a/packages/yoroi-extension/app/styles/overrides/legacy/OutlinedInput.js b/packages/yoroi-extension/app/styles/overrides/legacy/OutlinedInput.js deleted file mode 100644 index dd7fff2dd5..0000000000 --- a/packages/yoroi-extension/app/styles/overrides/legacy/OutlinedInput.js +++ /dev/null @@ -1,89 +0,0 @@ -// @flow -const ClassicOutlinedInput = { - styleOverrides: { - root: { - paddingRight: '16px', - '& .MuiOutlinedInput-notchedOutline': { - borderColor: 'var(--yoroi-comp-input-border)', - borderRadius: 0, - backgroundColor: 'var(--yoroi-comp-input-background)', - letterSpacing: 'initial', - }, - '&:hover .MuiOutlinedInput-notchedOutline': { - borderColor: 'var(--yoroi-comp-input-border-focus)', - }, - '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: 'var(--yoroi-comp-input-border-focus)', - }, - '&.Mui-disabled .MuiOutlinedInput-notchedOutline': { - borderColor: 'var(--yoroi-comp-input-border-disabled)', - backgroundColor: 'var(--yoroi-comp-input-background-disabled)', - color: 'var(--yoroi-comp-input-text-disabled)', - }, - '&.Mui-error .MuiOutlinedInput-notchedOutline': { - borderColor: 'var(--yoroi-comp-input-error)', - }, - '& .MuiOutlinedInput-input': { - height: '1.2em', - '&.Mui-disabled': { - color: 'var(--yoroi-comp-input-text-disabled)', - WebkitTextFillColor: 'var(--yoroi-comp-input-text-disabled)', - }, - }, - '& svg': { - color: 'var(--yoroi-comp-input-border)', - }, - '&.Mui-focused svg': { - color: 'var(--yoroi-comp-input-helper-text)', - }, - '&.Mui-disabled svg': { - color: 'var(--yoroi-comp-input-border-disabled)', - }, - }, - }, -}; -const ModernOutlinedInput = { - styleOverrides: { - root: { - paddingRight: '16px', - height: '56px', - '&:hover .MuiOutlinedInput-notchedOutline': { - borderColor: 'var(--yoroi-comp-input-border-focus)', - }, - '& .MuiOutlinedInput-notchedOutline': { - borderColor: 'var(--yoroi-comp-input-border)', - borderRadius: 8, - backgroundColor: 'var(--yoroi-comp-input-background)', - letterSpacing: 'initial', - }, - '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: 'var(--yoroi-comp-input-border-focus)', - border: '2px solid', - }, - '&.Mui-disabled .MuiOutlinedInput-notchedOutline': { - borderColor: 'var(--yoroi-comp-input-border-disabled)', - backgroundColor: 'var(--yoroi-comp-input-background-disabled)', - color: 'var(--yoroi-comp-input-text-disabled)', - }, - '&.Mui-error .MuiOutlinedInput-notchedOutline': { - borderColor: 'var(--yoroi-comp-input-error)', - }, - '& .MuiOutlinedInput-input': { - '&.Mui-disabled': { - color: 'var(--yoroi-comp-input-text-disabled)', - WebkitTextFillColor: 'var(--yoroi-comp-input-text-disabled)', - }, - }, - '& svg': { - color: 'var(--yoroi-comp-input-border)', - }, - '&.Mui-focused svg': { - color: 'var(--yoroi-comp-input-helper-text)', - }, - '&.Mui-disabled svg': { - color: 'var(--yoroi-comp-input-border-disabled)', - }, - }, - }, -}; -export { ClassicOutlinedInput, ModernOutlinedInput }; diff --git a/packages/yoroi-extension/app/styles/overrides/legacy/Select.js b/packages/yoroi-extension/app/styles/overrides/legacy/Select.js deleted file mode 100644 index be248d5c21..0000000000 --- a/packages/yoroi-extension/app/styles/overrides/legacy/Select.js +++ /dev/null @@ -1,26 +0,0 @@ -// @flow -const ClassicSelect = { - styleOverrides: { - icon: { - color: 'var(--yoroi-comp-menu-icon)', - right: '15px', - }, - }, - defaultProps: { - notched: false, - }, -}; - -const ModernSelect = { - styleOverrides: { - icon: { - color: 'var(--yoroi-comp-menu-icon)', - right: '15px', - }, - }, - defaultProps: { - notched: true, - }, -}; - -export { ClassicSelect, ModernSelect }; diff --git a/packages/yoroi-extension/app/styles/overrides/legacy/TabPanel.js b/packages/yoroi-extension/app/styles/overrides/legacy/TabPanel.js deleted file mode 100644 index 68071bec39..0000000000 --- a/packages/yoroi-extension/app/styles/overrides/legacy/TabPanel.js +++ /dev/null @@ -1,23 +0,0 @@ -// @flow - -const ClassicTabPanel = { - styleOverrides: { - root: { - background: 'white', - borderBottomLeftRadius: 8, - borderBottomRightRadius: 8, - boxShadow: 'inset 0 2px 12px 0 hsl(0 0% 0% / 6%)', - }, - }, -}; -const ModernTabPanel = { - styleOverrides: { - root: { - background: 'white', - borderBottomLeftRadius: 8, - borderBottomRightRadius: 8, - boxShadow: 'inset 0 2px 12px 0 hsl(0 0% 0% / 6%)', - }, - }, -}; -export { ClassicTabPanel, ModernTabPanel }; diff --git a/packages/yoroi-extension/app/styles/overrides/legacy/Tabs.js b/packages/yoroi-extension/app/styles/overrides/legacy/Tabs.js deleted file mode 100644 index d7cda13437..0000000000 --- a/packages/yoroi-extension/app/styles/overrides/legacy/Tabs.js +++ /dev/null @@ -1,101 +0,0 @@ -// @flow - -const ClassicTabs = { - styleOverrides: { - root: { - borderBottom: 'none', - borderTopLeftRadius: 8, - borderTopRightRadius: 8, - boxShadow: '0 4px 6px 0 hsl(220deg 22% 89%), 0 1px 2px 0 hsl(220deg 22% 89% / 82%), 0 2px 4px 0 hsl(220deg 22% 89% / 74%)', - '& .MuiTab-root': { - background: 'var(--yoroi-comp-tabs-background)', - color: 'var(--yoroi-comp-tabs-text)', - fontSize: '1rem', - paddingRight: 24, - paddingLeft: 24, - textTransform: 'capitalize', - ':hover': { - color: 'var(--yoroi-comp-tabs-text-active)', - }, - }, - '& .Mui-selected ': { - fontWeight: 500, - color: 'var(--yoroi-comp-tabs-text-active)', - }, - '& .Mui-disabled': { - color: 'var(--yoroi-comp-tabs-text-disabled)', - }, - }, - }, - defaultProps: { - indicatorColor: 'secondary', - textColor: 'secondary', - }, -}; - -const ModernTabs = { - styleOverrides: { - root: { - borderBottom: 'none', - borderTopLeftRadius: 8, - borderTopRightRadius: 8, - boxShadow: '0 4px 6px 0 hsl(220deg 22% 89%), 0 1px 2px 0 hsl(220deg 22% 89% / 82%), 0 2px 4px 0 hsl(220deg 22% 89% / 74%)', - '& .MuiTab-root': { - background: 'var(--yoroi-comp-tabs-background)', - color: 'var(--yoroi-comp-tabs-text)', - fontSize: '1rem', - paddingRight: 24, - paddingLeft: 24, - textTransform: 'capitalize', - ':hover': { - color: 'var(--yoroi-comp-tabs-text-active)', - }, - }, - '& .Mui-selected ': { - fontWeight: 500, - color: 'var(--yoroi-comp-tabs-text-active)', - }, - '& .Mui-disabled': { - color: 'var(--yoroi-comp-tabs-text-disabled)', - }, - }, - }, - defaultProps: { - indicatorColor: 'secondary', - textColor: 'secondary', - }, -}; - -const RevampTabs = { - styleOverrides: { - root: { - borderBottom: 'none', - borderTopLeftRadius: 8, - borderTopRightRadius: 8, - boxShadow: '0 4px 6px 0 hsl(220deg 22% 89%), 0 1px 2px 0 hsl(220deg 22% 89% / 82%), 0 2px 4px 0 hsl(220deg 22% 89% / 74%)', - '& .MuiTab-root': { - bgcolor: 'ds.gray_min', - color: 'gray.600', - fontSize: '1rem', - paddingRight: 24, - paddingLeft: 24, - textTransform: 'capitalize', - ':hover': { - color: 'ds.primary_600', - }, - }, - '& .Mui-selected ': { - fontWeight: 500, - color: 'ds.primary_600', - }, - '& .Mui-disabled': { - color: 'gray.400', - }, - }, - }, - defaultProps: { - indicatorColor: 'primary', - textColor: 'primary', - }, -}; -export { ClassicTabs, ModernTabs, RevampTabs }; diff --git a/packages/yoroi-extension/app/styles/overrides/legacy/TextField.js b/packages/yoroi-extension/app/styles/overrides/legacy/TextField.js deleted file mode 100644 index e42bf14614..0000000000 --- a/packages/yoroi-extension/app/styles/overrides/legacy/TextField.js +++ /dev/null @@ -1,23 +0,0 @@ -// @flow - -/* It's important to understand that the text field is a - simple abstraction on top of - - FormControl - - InputLabel - - OutlinedInput - - FormHelperText -*/ -const ClassicTextField = { - defaultProps: { - variant: 'outlined', - fullWidth: true, - }, -}; -const ModernTextField = { - defaultProps: { - variant: 'outlined', - fullWidth: true, - }, -}; - -export { ClassicTextField, ModernTextField }; diff --git a/packages/yoroi-extension/app/styles/overrides/legacy/Tooltip.js b/packages/yoroi-extension/app/styles/overrides/legacy/Tooltip.js deleted file mode 100644 index bbe460b0d5..0000000000 --- a/packages/yoroi-extension/app/styles/overrides/legacy/Tooltip.js +++ /dev/null @@ -1,41 +0,0 @@ -// @flow -const ClassicTooltip = { - styleOverrides: { - tooltip: { - color: 'var(--yoroi-comp-tooltip-text) ', - backgroundColor: 'var(--yoroi-comp-tooltip-background)', - borderRadius: 0, - fontSize: '0.75rem', - boxShadow: '0 1.5px 5px 0 rgba(0, 0, 0, 0.18)', - padding: '8px 12px', - }, - arrow: { - color: 'var(--yoroi-comp-tooltip-background)', - }, - }, - defaultProps: { - arrow: true, - placement: 'bottom', - }, -}; - -const ModernTooltip = { - styleOverrides: { - tooltip: { - color: 'var(--yoroi-comp-tooltip-text) ', - backgroundColor: 'var(--yoroi-comp-tooltip-background)', - borderRadius: 8, - fontSize: '0.75rem', - boxShadow: '0 1.5px 5px 0 rgba(0, 0, 0, 0.18)', - padding: '8px 14px', - }, - arrow: { - color: 'var(--yoroi-comp-tooltip-background)', - }, - }, - defaultProps: { - arrow: true, - placement: 'bottom', - }, -}; -export { ClassicTooltip, ModernTooltip }; diff --git a/packages/yoroi-extension/app/styles/overrides/legacy/index.js b/packages/yoroi-extension/app/styles/overrides/legacy/index.js deleted file mode 100644 index a996d34d02..0000000000 --- a/packages/yoroi-extension/app/styles/overrides/legacy/index.js +++ /dev/null @@ -1,15 +0,0 @@ -// @flow -export * from './Button'; -export * from './Checkbox'; -export * from './TextField'; -export * from './OutlinedInput'; -export * from './FormControl'; -export * from './FormHelperText'; -export * from './Select'; -export * from './MenuItem'; -export * from './Menu'; -export * from './Tabs'; -export * from './TabPanel'; -export * from './Chip'; -export * from './Tooltip'; -export * from './InputLabel'; diff --git a/packages/yoroi-extension/app/styles/themes/revamp/base-palettes/dark-palette.js b/packages/yoroi-extension/app/styles/themes/revamp/base-palettes/dark-palette.js deleted file mode 100644 index d1eee0dd85..0000000000 --- a/packages/yoroi-extension/app/styles/themes/revamp/base-palettes/dark-palette.js +++ /dev/null @@ -1,58 +0,0 @@ -export const darkPalette = { - primary_900: '#E4E8F7', - primary_800: '#C4CFF5', - primary_700: '#A0B3F2', - primary_600: '#7892E8', - primary_500: '#4B6DDE', - primary_400: '#2E4BB0', - primary_300: '#304489', - primary_200: '#142049', - primary_100: '#171B28', - - secondary_900: '#E4F7F3', - secondary_800: '#C6F7ED', - secondary_700: '#93F5E1', - secondary_600: '#66F2D6', - secondary_500: '#16E3BA', - secondary_400: '#08C29D', - secondary_300: '#0B997D', - secondary_200: '#12705D', - secondary_100: '#17453C', - - gray_max: '#FFFFFF', - gray_900: '#E1E6F5', - gray_800: '#BCC5E0', - gray_700: '#9BA4C2', - gray_600: '#7C85A3', - gray_500: '#656C85', - gray_400: '#4B5266', - gray_300: '#3E4457', - gray_200: '#262A38', - gray_100: '#1F232E', - gray_50: '#15171F', - gray_min: '#0B0B0F', - - black_static: '#000000', - white_static: '#FFFFFF', - - sys_magenta_700: '#FFC0D0', - sys_magenta_600: '#FB9CB5', - sys_magenta_500: '#FF7196', - sys_magenta_300: '#64303E', - sys_magenta_100: '#3B252A', - - sys_cyan_500: '#59B1F4', - sys_cyan_100: '#112333', - - sys_yellow_500: '#ECBA09', - sys_yellow_100: '#31290E', - - sys_orange_500: '#FAB357', - sys_orange_100: '#291802', - - bg_gradient_1: - 'linear-gradient(195.39deg, rgba(26, 227, 187, 0.26) 0.57%, rgba(75, 109, 222, 0.1) 41.65%, rgba(75, 109, 222, 0.16) 100%)', - bg_gradient_2: 'linear-gradient(205.51deg, rgba(11, 153, 125, 0.49) -10.43%, rgba(8, 194, 157, 0.08) 100%)', - bg_gradient_3: 'linear-gradient(30.09deg, #244ABF 0%, #4760FF 100%)', - light_shadow_dropdown_menu: `0px 4px 20px 0px #0000007A`, // dropdown shadow -}; diff --git a/packages/yoroi-extension/app/styles/themes/revamp/base-palettes/light-palette.js b/packages/yoroi-extension/app/styles/themes/revamp/base-palettes/light-palette.js deleted file mode 100644 index 1903469dea..0000000000 --- a/packages/yoroi-extension/app/styles/themes/revamp/base-palettes/light-palette.js +++ /dev/null @@ -1,57 +0,0 @@ -export const lightPalette = { - primary_900: '#121F4D', - primary_800: '#122770', - primary_700: '#1737A3', - primary_600: '#3154CB', - primary_500: '#4B6DDE', - primary_400: '#7892E8', - primary_300: '#A0B3F2', - primary_200: '#C4CFF5', - primary_100: '#E4E8F7', - - secondary_900: '#17453C', - secondary_800: '#12705D', - secondary_700: '#0B997D', - secondary_600: '#08C29D', - secondary_500: '#16E3BA', - secondary_400: '#66F2D6', - secondary_300: '#93F5E1', - secondary_200: '#C6F7ED', - secondary_100: '#E4F7F3', - - gray_max: '#000000', - gray_900: '#242838', - gray_800: '#383E54', - gray_700: '#4A5065', - gray_600: '#6B7384', - gray_500: '#8A92A3', - gray_400: '#A7AFC0', - gray_300: '#C4CAD7', - gray_200: '#DCE0E9', - gray_100: '#EAEDF2', - gray_50: '#F0F3F5', - gray_min: '#FFFFFF', - - black_static: '#000000', - white_static: '#FFFFFF', - - sys_magenta_700: '#CF053A', - sys_magenta_600: '#E80742', - sys_magenta_500: '#FF1351', - sys_magenta_300: '#FBCBD7', - sys_magenta_100: '#FFF1F5', - - sys_cyan_500: '#59B1F4', - sys_cyan_100: '#E8F4FF', - - sys_yellow_500: '#ECBA09', - sys_yellow_100: '#FDF7E2', - - sys_orange_500: '#ED8600', - sys_orange_100: '#FFF2E2', - - bg_gradient_1: 'linear-gradient(312.19deg, #C6F7ED 0%, #E4E8F7 100%)', - bg_gradient_2: 'linear-gradient(180deg, #93F5E1 0%, #C6F7ED 100%)', - bg_gradient_3: 'linear-gradient(30.09deg, #244ABF 0%, #4760FF 100%)', - light_shadow_dropdown_menu: '0px 4px 10px 0px #181A1E29', -}; diff --git a/packages/yoroi-extension/app/styles/themes/revamp/dark-theme-base.js b/packages/yoroi-extension/app/styles/themes/revamp/dark-theme-base.js deleted file mode 100644 index 015bb91039..0000000000 --- a/packages/yoroi-extension/app/styles/themes/revamp/dark-theme-base.js +++ /dev/null @@ -1,95 +0,0 @@ -//@flow -import { dark } from './themed-palettes/dark'; - -const cyan = { '400': '#59B1F4', '100': '#F2F9FF' }; -const yellow = { '500': '#ECBA09', '100': '#FDF7E2' }; -const magenta = { - main: '#FF1351', - '700': '#CF053A', - '600': '#E80742', - '500': '#FF1351', - '300': '#FBCBD7', - '100': '#FFF1F5', -}; - -export const darkTheme = { - name: 'revamp-dark', - palette: { - mode: 'dark', - /* `main` is added since MUI required it but we don't use it at all */ - ds: { - ...dark, - }, - primary: { - main: '#17D1AA', - '900': '#17453C', - '800': '#12705D', - '700': '#0B997D', - '600': '#08C29D', - '500': '#17D1AA', - '400': '#66F2D6', - '300': '#93F5E1', - '200': '#C6F7ED', - '100': '#E4F7F3', - contrastText: '#FFF', - }, - secondary: { - main: '#4B6DDE', - '900': '#121F4D', - '800': '#122770', - '700': '#1737A3', - '600': '#3154CB', - '500': '#4B6DDE', - '400': '#7892E8', - '300': '#A0B3F2', - '200': '#C4CFF5', - '100': '#E4E8F7', - contrastText: '#FFF', - }, - grayscale: { - main: '#A7AFC0', - min: '#000000', - '50': '#242838', - '100': '#383E54', - '200': '#4A5065', - '300': '#6B7384', - '400': '#8A92A3', - '500': '#A7AFC0', - '600': '#C4CAD7', - '700': '#DCE0E9', - '800': '#EAEDF2', - '900': '#F0F3F5', - max: '#FFFFFF', - contrastText: '#000', - }, - magenta, - cyan, - yellow, - common: { black: '#FFF', white: '#000', magenta, cyan, yellow }, - gradients: { - 'blue-green-bg': 'linear-gradient(180deg, #E4E8F7 0%, #C6F7F7 100%)', - 'blue-green-banner': 'linear-gradient(269.97deg, #E4E8F7 0%, #C6F7ED 100%)', - green: 'linear-gradient(180deg, #93F5E1 0%, #C6F7ED 100%)', - blue: 'linear-gradient(30.09deg, #244ABF 0%, #4760FF 176.73%)', - }, - background: { - card: '#15171F', - sidebar: '#121F4D', - banner: { - warning: '#f5a623', - }, - walletAdd: { - title: '#ffffff', - subtitle: '#ffffff', - }, - gradients: { - walletEmptyCard: 'linear-gradient(180deg, #93F5E1 0%, #C6F7ED 100%)', - supportedAddressDomainsBanner: 'linear-gradient(260deg, #E4E8F7 0%, #C6F7ED 100%)', - primary: 'linear-gradient(269.97deg, #E4E8F7 0%, #C6F7ED 100%)', - }, - }, - }, - shape: { - borderRadius: 8, - }, -}; diff --git a/packages/yoroi-extension/app/styles/themes/revamp/light-theme-base.js b/packages/yoroi-extension/app/styles/themes/revamp/light-theme-base.js deleted file mode 100644 index 43f1d9a465..0000000000 --- a/packages/yoroi-extension/app/styles/themes/revamp/light-theme-base.js +++ /dev/null @@ -1,95 +0,0 @@ -// @flow -import { light } from './themed-palettes/light'; - -const cyan = { '400': '#59B1F4', '100': '#F2F9FF' }; -const yellow = { '500': '#ECBA09', '100': '#FDF7E2' }; -const magenta = { - main: '#FF1351', - '700': '#CF053A', - '600': '#E80742', - '500': '#FF1351', - '300': '#FBCBD7', - '100': '#FFF1F5', -}; - -export const lightTheme = { - name: 'revamp-light', - palette: { - mode: 'light', - /* `main` is added since MUI required it but we don't use it at all */ - ds: { - ...light, - }, - primary: { - main: '#4B6DDE', - '900': '#121F4D', - '800': '#122770', - '700': '#1737A3', - '600': '#3154CB', - '500': '#4B6DDE', - '400': '#7892E8', - '300': '#A0B3F2', - '200': '#C4CFF5', - '100': '#E4E8F7', - contrastText: '#FFF', - }, - secondary: { - main: '#16E3BA', - '900': '#17453C', - '800': '#12705D', - '700': '#0B997D', - '600': '#08C29D', - '500': '#16E3BA', - '400': '#66F2D6', - '300': '#93F5E1', - '200': '#C6F7ED', - '100': '#E4F7F3', - contrastText: '#FFF', - }, - grayscale: { - main: '#8A92A3', - max: '#000000', - '900': '#242838', - '800': '#383E54', - '700': '#4A5065', - '600': '#6B7384', - '500': '#8A92A3', - '400': '#A7AFC0', - '300': '#C4CAD7', - '200': '#DCE0E9', - '100': '#EAEDF2', - '50': '#F0F3F5', - min: '#FFFFFF', - contrastText: '#FFF', - }, - magenta, - cyan, - yellow, - common: { black: '#000000', white: '#FFFFFF', magenta, cyan, yellow }, - gradients: { - 'blue-green-bg': 'linear-gradient(180deg, #E4E8F7 0%, #C6F7F7 100%)', - 'blue-green-banner': 'linear-gradient(269.97deg, #E4E8F7 0%, #C6F7ED 100%)', - green: 'linear-gradient(180deg, #93F5E1 0%, #C6F7ED 100%)', - blue: 'linear-gradient(30.09deg, #244ABF 0%, #4760FF 176.73%)', - }, - background: { - card: '#fff', - sidebar: '#4760FF', - banner: { - warning: '#f5a623', - }, - walletAdd: { - title: '#ffffff', - subtitle: '#ffffff', - }, - gradients: { - walletEmptyCard: 'linear-gradient(180deg, #93F5E1 0%, #C6F7ED 100%)', - supportedAddressDomainsBanner: 'linear-gradient(260deg, #E4E8F7 0%, #C6F7ED 100%)', - primary: 'linear-gradient(269.97deg, #E4E8F7 0%, #C6F7ED 100%)', - }, - }, - }, - shape: { - borderRadius: 8, - }, -}; diff --git a/packages/yoroi-extension/app/styles/themes/revamp/themed-palettes/dark.js b/packages/yoroi-extension/app/styles/themes/revamp/themed-palettes/dark.js deleted file mode 100644 index fec08ec73e..0000000000 --- a/packages/yoroi-extension/app/styles/themes/revamp/themed-palettes/dark.js +++ /dev/null @@ -1,45 +0,0 @@ -import { darkPalette } from '../base-palettes/dark-palette'; - -export const dark = { - ...darkPalette, - - text_primary_max: darkPalette.primary_700, // hover, text, button, links, text in tabs, chips - text_primary_medium: darkPalette.primary_600, // links, tabs, chips, special cases - text_primary_min: darkPalette.primary_300, // disabled, buttons, links - - text_gray_max: darkPalette.gray_max, // hover and pressed - text_gray_medium: darkPalette.gray_900, // draws attention - text_gray_low: darkPalette.gray_600, // accent or additional text - text_gray_min: darkPalette.gray_400, // disabled text - - text_error: darkPalette.sys_magenta_500, // error messages - text_warning: darkPalette.sys_orange_500, // warning messages - text_success: darkPalette.secondary_500, // success messages - text_info: darkPalette.sys_cyan_500, // info messages - - bg_color_max: darkPalette.gray_50, // bottom surface - bg_color_min: darkPalette.gray_100, // upper surface - bg_color_contrast_min: darkPalette.gray_100, // dropdown selected\highlighted item - bg_color_contrast_high: darkPalette.gray_50 , // dropdown idle item - - el_primary_max: darkPalette.primary_700, // hover'nd pressed state, actianable elements - el_primary_medium: darkPalette.primary_600, // actionable elements - el_primary_min: darkPalette.primary_300, // disabled elements, icons - - el_gray_max: darkPalette.gray_max, // hover and pressed, icons, shapes, lines in buttons, icons in banners - el_gray_medium: darkPalette.gray_900, // icons, shapes, lines in buttons, chips, tabs, checkboxes, readio, switch - el_gray_low: darkPalette.gray_600, // icons, shapes, inputs, bottom navigation bar - el_gray_min: darkPalette.gray_400, // input stroke, disabled state for most components - - el_secondary: darkPalette.secondary_600, // success state - - web_overlay: `${darkPalette.gray_100}${opacity._80}`, // extension modal overlay - web_sidebar_item_active: `${darkPalette.black_static}${opacity._16}`, // extension active sidebar item background - web_sidebar_item_inactive: `${darkPalette.white_static}${opacity._48}`, // extension inactive sidebar item - special_web_bg_sidebar: 'rgba(0, 0, 0, 0.24)', - // TODO renamed to - web_sidebar_item_active_bg: `${darkPalette.black_static}${opacity._24}`, - - mobile_overlay: `${darkPalette.black_static}${opacity._40}`, // mobile bottom sheet overlay - mobile_bg_blur: `${darkPalette.gray_50}${opacity._80}`, // mobile bottom sheet background -}; diff --git a/packages/yoroi-extension/app/styles/themes/revamp/themed-palettes/light.js b/packages/yoroi-extension/app/styles/themes/revamp/themed-palettes/light.js deleted file mode 100644 index 6d9a8e4087..0000000000 --- a/packages/yoroi-extension/app/styles/themes/revamp/themed-palettes/light.js +++ /dev/null @@ -1,45 +0,0 @@ -import { lightPalette } from '../base-palettes/light-palette'; - -export const light = { - ...lightPalette, - - text_primary_max: lightPalette.primary_600, // hover, text, button, links, text in tabs, chips - text_primary_medium: lightPalette.primary_500, // links, tabs, chips, special cases - text_primary_min: lightPalette.primary_300, // disabled, buttons, links - - text_gray_max: lightPalette.gray_max, // hover and pressed - text_gray_medium: lightPalette.gray_900, // draws attention - text_gray_low: lightPalette.gray_600, // accent or additional text - text_gray_min: lightPalette.gray_400, // disabled text - - text_error: lightPalette.sys_magenta_500, // error messages - text_warning: lightPalette.sys_orange_500, // warning messages - text_success: lightPalette.secondary_500, // success messages - text_info: lightPalette.sys_cyan_500, // info messages - - bg_color_max: lightPalette.gray_min, // bottom surface - bg_color_min: lightPalette.gray_100, // upper surface - bg_color_contrast_min: lightPalette.gray_100, // dropdown selected\highlighted surface - bg_color_contrast_high: lightPalette.gray_min , // dropdown idle item - - el_primary_max: lightPalette.primary_600, // hover'nd pressed state, actianable elements - el_primary_medium: lightPalette.primary_500, // actionable elements - el_primary_min: lightPalette.primary_300, // disabled elements, icons - - el_gray_max: lightPalette.gray_max, // hover and pressed, icons, shapes, lines in buttons, icons in banners - el_gray_medium: lightPalette.gray_900, // icons, shapes, lines in buttons, chips, tabs, checkboxes, readio, switch - el_gray_low: lightPalette.gray_600, // icons, shapes, inputs, bottom navigation bar - el_gray_min: lightPalette.gray_400, // input stroke, disabled state for most components - - el_secondary: lightPalette.secondary_300, // success state - - web_overlay: `${lightPalette.black_static}${opacity._70}`, // extension modal overlay - web_sidebar_item_active: `${lightPalette.black_static}${opacity._16}`, // extension active sidebar item background - web_sidebar_item_inactive: `${lightPalette.white_static}${opacity._48}`, // extension inactive sidebar item - - // TODO new to be added in code - web_sidebar_item_active_bg: `${lightPalette.black_static}${opacity._24}`, - - mobile_overlay: `${lightPalette.black_static}${opacity._40}`, // mobile bottom sheet overlay - mobile_bg_blur: `${lightPalette.white_static}${opacity._80}`, // mobile bottom sheet background -};