From e4bf670584620fcb471aae7a512e4ce3ced6a209 Mon Sep 17 00:00:00 2001 From: Denis Nebytov Date: Fri, 20 Dec 2024 14:47:07 +0300 Subject: [PATCH] applied dark theme to the complexity cards --- .../complexity-level/ComplexityLevelForm.js | 145 ++++++------------ .../complexity-level/ComplexityLevelForm.scss | 97 ------------ 2 files changed, 50 insertions(+), 192 deletions(-) delete mode 100644 packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss diff --git a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js index 3484721f7e..ecfb8ecc50 100644 --- a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js +++ b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js @@ -3,16 +3,13 @@ import { Component } from 'react'; import type { Node, ComponentType } from 'react'; import { intlShape, defineMessages, FormattedHTMLMessage } from 'react-intl'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import styles from './ComplexityLevelForm.scss'; -import classnames from 'classnames'; import { ReactComponent as BeginnerLevel } from '../../../assets/images/complexity-level/beginner-level.inline.svg'; import { ReactComponent as AdvancedLevel } from '../../../assets/images/complexity-level/advanced-level.inline.svg'; import LocalizableError from '../../../i18n/LocalizableError'; -import { LoadingButton } from '@mui/lab'; import { ComplexityLevels } from '../../../types/complexityLevelType'; import type { ComplexityLevelType } from '../../../types/complexityLevelType'; import { withLayout } from '../../../styles/context/layout'; -import { Box, Typography } from '@mui/material'; +import { Box, Typography, styled } from '@mui/material'; import { settingsMenuMessages } from '../../settings/menu/SettingsMenu'; const messages = defineMessages({ @@ -52,6 +49,35 @@ const messages = defineMessages({ defaultMessage: '!!!Choose', }, }); + +const GradientBox = styled(Box)(({ theme, isSelected }) => ({ + maxWidth: '294px', + maxHeight: '362px', + flex: 1, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'flex-start', + textAlign: 'center', + alignSelf: 'stretch', + padding: '16px', + cursor: isSelected ? 'not-allowed' : 'pointer', + backgroundImage: isSelected ? theme.palette.ds.bg_gradient_2 : 'unset', + outline: `solid 1px ${isSelected ? 'transparent' : theme.palette.ds.gray_200}`, + borderRadius: '8px', + '&:hover': { + backgroundImage: theme.palette.ds.bg_gradient_1, + outlineColor: 'transparent', + '&::before': { + opacity: 1, + }, + }, + '&::before': { + opacity: 0, + transition: 'opacity 300ms linear', + } +})); + type Props = {| +complexityLevel: ?ComplexityLevelType, +onSubmit: ComplexityLevelType => PossiblyAsync, @@ -73,7 +99,7 @@ class ComplexityLevel extends Component { render(): Node { const { intl } = this.context; - const { complexityLevel, isSubmitting, isRevampLayout, baseTheme } = this.props; + const { complexityLevel, isRevampLayout } = this.props; const levels = [ { @@ -91,9 +117,9 @@ class ComplexityLevel extends Component { ]; return ( - + {isRevampLayout && ( - + {intl.formatMessage(settingsMenuMessages.levelOfComplexity)} )} @@ -102,7 +128,7 @@ class ComplexityLevel extends Component { component="div" textAlign="center" variant="body1" - color={isRevampLayout ? 'grayscale.800' : 'var(--yoroi-palette-gray-600)'} + color="ds.text_gray_low" > {intl.formatMessage(messages.subtitle)} @@ -113,10 +139,11 @@ class ComplexityLevel extends Component { variant="body1" my="1rem" mx="auto" + color="ds.text_gray_medium" sx={{ textAlign: 'center', '& strong': { - color: isRevampLayout ? 'primary.500' : 'var(--yoroi-comp-button-secondary-text)', + color: 'ds.text_primary_medium', fontWeight: 500, textTransform: 'uppercase', }, @@ -133,105 +160,33 @@ class ComplexityLevel extends Component { )} - {isRevampLayout ? ( - - {levels.map(level => { + + + {levels.map(level => { const isSelected = level.key === complexityLevel; - return ( - - isSelected - ? baseTheme === 'light-theme' - ? theme.palette.gradients.green - : theme.palette.gradients_2 - : baseTheme === 'light-theme' - ? 'linear-gradient( 0deg, var(--yoroi-palette-common-white), var(--yoroi-palette-common-white)), linear-gradient(180deg, #e4e8f7 0%, #c6f7f7 100%)' - : theme.palette.ds.bg_gradient_3, - backgroundClip: 'content-box, border-box', - backgroundOrigin: 'border-box', - borderRadius: '8px', - alignSelf: 'stretch', - cursor: isSelected ? 'not-allowed' : 'pointer', - position: 'relative', - zIndex: 1, - '&::before': { - position: 'absolute', - content: '""', - top: '0px', - right: '0px', - left: '0px', - bottom: '0px', - background: theme => theme.palette.gradients['blue-green-bg'], - borderRadius: '8px', - zIndex: -1, - opacity: 0, - transition: 'opacity 300ms linear', - }, - '&:hover::before': { - opacity: 1, - }, - }} + isSelected={isSelected} onClick={() => this.props.onSubmit(level.key)} > - - {level.image} - - + + {level.image} + + {level.name} - + {level.description} - + ); - })} + }) + } - ) : ( -
- {levels.map(level => ( -
-
{level.image}
-
-
-

{level.name}

-
{level.description}
-
- this.props.onSubmit(level.key)} - > - {intl.formatMessage(messages.labelChoose)} - -
-
- ))} -
- )} + ); } diff --git a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss deleted file mode 100644 index 3b563162fe..0000000000 --- a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss +++ /dev/null @@ -1,97 +0,0 @@ -@import '../../../themes/mixins/loading-spinner'; -@import '../../../themes/mixins/error-message'; - -.component { - max-width: 650px; - margin: 0 auto; - margin-top: 24px; - - .header { - color: var(--yoroi-palette-gray-600); - text-align: center; - margin-bottom: 50px; - font-size: 1.125rem; - font-weight: bold; - letter-spacing: 0; - line-height: 1.375rem; - } - - .description { - color: var(--yoroi-palette-gray-600); - font-size: 1rem; - line-height: 1.375rem; - text-align: center; - } - - .cardsWrapper { - margin: 30px auto; - display: flex; - & > div { - flex: 1; - } - } - - .card { - margin-right: 30px; - border-radius: 8px; - background-color: var(--yoroi-palette-common-white); - border: 1px solid #dce0e9; - overflow: hidden; - &:last-child { - margin-right: 0; - } - - .cardImage { - background-color: var(--yoroi-palette-gray-100); - height: 184px; - display: flex; - align-items: center; - justify-content: center; - } - - .simple { - background: #f1fdfa; - } - - .advanced { - background: #f3f5fd; - } - - .cardContent { - padding: 24px; - color: var(--yoroi-palette-gray-900); - display: flex; - flex-direction: column; - justify-content: space-between; - height: 300px; - h3 { - font-size: 1.5rem; - letter-spacing: 0; - line-height: 1.875rem; - text-align: center; - text-transform: capitalize; - margin-bottom: 16px; - } - p { - font-size: 0.75rem; - letter-spacing: 0; - line-height: 1.25rem; - } - } - - .error { - @include error-message; - text-align: center; - margin-bottom: 1rem; - } - } -} - -:global(.YoroiRevamp) .component { - min-width: 650px; - max-width: unset; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -}