Skip to content

Commit

Permalink
Merge pull request #3261 from Emurgo/feat/YOEXT-680/revamp-settings-page
Browse files Browse the repository at this point in the history 
feat(settings): revamp settings page layout (all subpages)
  • Loading branch information
@vsubhuman
vsubhuman authored Oct 7, 2023
2 parents 7432836 + e730b5d commit a21d997
Show file tree
Hide file tree
Showing 42 changed files with 1,378 additions and 944 deletions.
143 changes: 127 additions & 16 deletions packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @flow
import { Component } from 'react';
import type { Node, ComponentType } from 'react';
import { intlShape, defineMessages } from 'react-intl';
import { intlShape, defineMessages, FormattedHTMLMessage } from 'react-intl';
import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
import styles from './ComplexityLevelForm.scss';
import classnames from 'classnames';
Expand All @@ -12,7 +12,8 @@ import { LoadingButton } from '@mui/lab';
import { ComplexityLevels } from '../../../types/complexityLevelType';
import type { ComplexityLevelType } from '../../../types/complexityLevelType';
import { withLayout } from '../../../styles/context/layout';
import { Box } from '@mui/material';
import { Box, Typography } from '@mui/material';
import { settingsMenuMessages } from '../../settings/menu/SettingsMenu';

const messages = defineMessages({
subtitle: {
Expand Down Expand Up @@ -42,6 +43,10 @@ const messages = defineMessages({
id: 'profile.complexityLevel.selected.label',
defaultMessage: '!!!Your current level of Complexity is',
},
selectedLevelLabel: {
id: 'profile.complexityLevel.selected.labelWithLevel',
defaultMessage: '!!!Your current level of Complexity is : <strong>{level}</strong>',
},
labelChoose: {
id: 'global.label.choose',
defaultMessage: '!!!Choose',
Expand Down Expand Up @@ -85,19 +90,125 @@ class ComplexityLevel extends Component<Props & InjectedProps> {
];

return (
<>
<div className={styles.component}>
<div className={styles.description}>{intl.formatMessage(messages.subtitle)}</div>
<div className={styles.selected}>
{complexityLevel && (
<>
{intl.formatMessage(messages.labelSelectedLevel)} :{' '}
<Box component="span" className="currentLevel">
{complexityLevel}
<Box className={styles.component}>
{isRevampLayout && (
<Typography
textAlign="center"
color="grayscale.900"
mb="16px"
variant="h3"
fontWeight={500}
>
{intl.formatMessage(settingsMenuMessages.levelOfComplexity)}
</Typography>
)}

<Typography
textAlign="center"
variant="body1"
color={isRevampLayout ? 'grayscale.800' : 'var(--yoroi-palette-gray-600)'}
>
{intl.formatMessage(messages.subtitle)}
</Typography>

{complexityLevel && (
<Typography
variant="body1"
my="1rem"
mx="auto"
sx={{
textAlign: 'center',
'& strong': {
color: isRevampLayout ? 'primary.500' : 'var(--yoroi-comp-button-secondary-text)',
fontWeight: 500,
textTransform: 'uppercase',
},
}}
>
<FormattedHTMLMessage
{...messages.selectedLevelLabel}
values={{
level: intl.formatMessage(
complexityLevel === ComplexityLevels.Advanced
? messages.titleAdvancedLevel
: messages.titleSimpleLevel
),
}}
/>
</Typography>
)}

{isRevampLayout ? (
<Box
sx={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: '24px',
mt: '32px',
maxWidth: '700px',
}}
>
{levels.map(level => {
const isSelected = level.key === complexityLevel;

return (
<Box
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
? theme.palette.gradients.green
: 'linear-gradient( 0deg, var(--yoroi-palette-common-white), var(--yoroi-palette-common-white)), linear-gradient(180deg, #e4e8f7 0%, #c6f7f7 100%)',
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,
},
}}
onClick={() => this.props.onSubmit(level.key)}
>
<Box sx={{ p: '15px' }}>
<Box sx={{ mb: '16px' }}>{level.image}</Box>
<Box mb="10px">
<Typography mb="4px" variant="h3" fontWeight={500}>
{level.name}
</Typography>
<Typography variant="body2">{level.description}</Typography>
</Box>
</Box>
</Box>
</>
)}
</div>
);
})}
</Box>
) : (
<div className={styles.cardsWrapper}>
{levels.map(level => (
<div className={styles.card} key={level.key}>
Expand All @@ -121,8 +232,8 @@ class ComplexityLevel extends Component<Props & InjectedProps> {
</div>
))}
</div>
</div>
</>
)}
</Box>
);
}
}
Expand Down
27 changes: 16 additions & 11 deletions packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,52 +15,48 @@
letter-spacing: 0;
line-height: 1.375rem;
}

.description {
color: var(--yoroi-palette-gray-600);
font-size: 1rem;
line-height: 1.375rem;
text-align: center;
}
.selected {
font-size: 1rem;
text-align: center;
margin: 1rem 0;

span {
color: var(--yoroi-comp-button-secondary-text);
font-weight: bold;
text-transform: uppercase;
}
}
.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;
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);
Expand Down Expand Up @@ -90,3 +86,12 @@
}
}
}

:global(.YoroiRevamp) .component {
min-width: 650px;
max-width: unset;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
52 changes: 43 additions & 9 deletions packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseText.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
overflow: auto;
}

h1, h2 {
h1,
h2 {
font-weight: 500;
font-size: 17px;
margin-bottom: 11px;
Expand All @@ -27,38 +28,71 @@
margin-left: 20px;
}

p, li {
p,
li {
font-weight: 400;
font-size: 14px;
letter-spacing: 0.5px;
line-height: 1.38;
margin-bottom: 11px;

}
}

:global(.YoroiClassic) .terms {
color: var(--yoroi-terms-of-use-text-color);
}

:global(.YoroiModern), :global(.YoroiRevamp) {
:global(.YoroiModern) {
.terms {
h1, h2 {
h1,
h2 {
font-size: 16px;
}

h1 {
margin-top: 26px;
}

h2 {
margin-top: 46px;
}

p, li {

p,
li {
color: var(--yoroi-terms-of-use-text-color);
font-size: 13px;
line-height: 1.54;
}
}
}

:global(.YoroiRevamp) {
.terms {
&.fixedHeight h1 {
margin-top: 26px;
}

h1 {
text-align: center;
font-size: 18px;
font-weight: 500;
margin-top: 0px;
margin-bottom: 16px;
color: var(--yoroi-palette-common-black);
}

h2 {
font-size: 16px;
font-weight: 500;
margin-top: 46px;
color: var(--yoroi-terms-of-use-text-color);
}

p,
li {
color: var(--yoroi-terms-of-use-text-color);
font-size: 16px;
line-height: 24px;
}
}
}
Loading

0 comments on commit a21d997

Please sign in to comment.