Merge pull request #3791 from Emurgo/fix/yoext-1545/dark-level-comple…

…xity Dark theme for level complexity
Emurgo · Dec 23, 2024 · a49eb24 · a49eb24
2 parents 0967651 + 9e22d6a
commit a49eb24
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 192 deletions.
diff --git 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<void>,
@@ -73,7 +99,7 @@ class ComplexityLevel extends Component<Props & InjectedProps> {
 
   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<Props & InjectedProps> {
     ];
 
     return (
-      <Box className={styles.component}>
+      <Box maxWidth="930px" margin="0 auto" mt="24px">
         {isRevampLayout && (
-          <Typography component="div" textAlign="center" color="grayscale.900" mb="16px" variant="h3" fontWeight={500}>
+          <Typography component="div" textAlign="center" color="ds.text_gray_medium" mb="16px" variant="h3" fontWeight={500}>
             {intl.formatMessage(settingsMenuMessages.levelOfComplexity)}
           </Typography>
         )}
@@ -102,7 +128,7 @@ class ComplexityLevel extends Component<Props & InjectedProps> {
           component="div"
           textAlign="center"
           variant="body1"
-          color={isRevampLayout ? 'grayscale.800' : 'var(--yoroi-palette-gray-600)'}
+          color="ds.text_gray_low"
         >
           {intl.formatMessage(messages.subtitle)}
         </Typography>
@@ -113,10 +139,11 @@ class ComplexityLevel extends Component<Props & InjectedProps> {
             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<Props & InjectedProps> {
           </Typography>
         )}
 
-        {isRevampLayout ? (
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: '24px',
-              mt: '32px',
-              maxWidth: '700px',
-            }}
-          >
-            {levels.map(level => {
+        <Box display="flex" alignItems="center" justifyContent="center" mt="32px">
+          <Box display="flex" flexDirection="row" justifyContent="center" gap="24px">
+          {levels.map(level => {
               const isSelected = level.key === complexityLevel;
-
               return (
-                <Box
+                <GradientBox
                   key={level.key}
-                  sx={{
-                    flex: 1,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'flex-start',
-                    textAlign: 'center',
-                    p: '1px',
-                    border: 'solid 1px transparent',
-                    background: theme =>
-                      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)}
                 >
-                  <Box sx={{ p: '15px' }}>
-                    <Box sx={{ mb: '16px' }}>{level.image}</Box>
-                    <Box mb="10px">
-                      <Typography component="div" mb="4px" variant="h3" fontWeight={500}>
+                  <Box display="flex" flexDirection="column" alignItems="center">
+                    <Box sx={{ mb: '16px' }} width="180px" height="116px">{level.image}</Box>
+                    <Box>
+                      <Typography component="div" mb="4px" variant="h3" fontWeight={500} color="ds.text_gray_medium">
                         {level.name}
                       </Typography>
-                      <Typography component="div" variant="body2">
+                      <Typography component="div" variant="body2" color="ds.text_gray_medium">
                         {level.description}
                       </Typography>
                     </Box>
                   </Box>
-                </Box>
+                </GradientBox>
               );
-            })}
+              })
+          }
           </Box>
-        ) : (
-          <div className={styles.cardsWrapper}>
-            {levels.map(level => (
-              <div className={styles.card} key={level.key}>
-                <div className={classnames([styles.cardImage, styles[level.key]])}>{level.image}</div>
-                <div className={styles.cardContent}>
-                  <div>
-                    <h3>{level.name}</h3>
-                    <div>{level.description}</div>
-                  </div>
-                  <LoadingButton
-                    variant={isRevampLayout ? 'contained' : 'primary'}
-                    loading={isSubmitting}
-                    disabled={complexityLevel === level.key}
-                    onClick={() => this.props.onSubmit(level.key)}
-                  >
-                    {intl.formatMessage(messages.labelChoose)}
-                  </LoadingButton>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
+        </Box>
       </Box>
     );
   }

diff --git a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss