From 8e7d319d74af6490791d44c1de4f54d0512713dd Mon Sep 17 00:00:00 2001 From: miko Date: Thu, 6 Jul 2023 17:49:40 +0400 Subject: [PATCH 1/2] Change Illustrations on tutorial for shared wallet --- assets/images/org-tutorial-step-1.svg | 50 +++++- assets/images/org-tutorial-step-2.svg | 230 ++++++++++++++++++++++++- assets/images/org-tutorial-step-3.svg | 70 +++++++- src/components/TutorialOrganization.js | 23 +-- 4 files changed, 351 insertions(+), 22 deletions(-) diff --git a/assets/images/org-tutorial-step-1.svg b/assets/images/org-tutorial-step-1.svg index f2f93792..21339992 100644 --- a/assets/images/org-tutorial-step-1.svg +++ b/assets/images/org-tutorial-step-1.svg @@ -1 +1,49 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/org-tutorial-step-2.svg b/assets/images/org-tutorial-step-2.svg index e88d7819..7ca74a89 100644 --- a/assets/images/org-tutorial-step-2.svg +++ b/assets/images/org-tutorial-step-2.svg @@ -1 +1,229 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/org-tutorial-step-3.svg b/assets/images/org-tutorial-step-3.svg index 593fbb95..ddcd2c3a 100644 --- a/assets/images/org-tutorial-step-3.svg +++ b/assets/images/org-tutorial-step-3.svg @@ -1 +1,69 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/TutorialOrganization.js b/src/components/TutorialOrganization.js index d4283ee6..d22d99a3 100644 --- a/src/components/TutorialOrganization.js +++ b/src/components/TutorialOrganization.js @@ -1,5 +1,4 @@ import { Box, Dialog, IconButton, Slide, Typography } from '@mui/material'; -import useMediaQuery from '@mui/material/useMediaQuery'; import makeStyles from '@mui/styles/makeStyles'; import PropTypes from 'prop-types'; import React, { useState } from 'react'; @@ -48,10 +47,7 @@ const useStyles = makeStyles((theme) => ({ height: '100%', }, imageContainer: { - height: 230, - [theme.breakpoints.up('sm')]: { - height: 320, - }, + height: 280, }, slideBody: { maxWidth: 480, @@ -69,13 +65,11 @@ const slides = [ heading: translate('TutorialOrganization.slideHeading1'), body: translate('TutorialOrganization.slideBody1'), image: OrgTutorialStep1SVG, - imageScale: 0.9, }, { heading: translate('TutorialOrganization.slideHeading2'), body: translate('TutorialOrganization.slideBody2'), image: OrgTutorialStep2SVG, - imageScale: 1.2, }, { heading: translate('TutorialOrganization.slideHeading3'), @@ -159,10 +153,7 @@ const TutorialOrganization = ({ onFinishTutorial }) => { key={slide.heading} p={1} > - + {slide.heading} {slide.body} @@ -194,19 +185,14 @@ const TutorialOrganization = ({ onFinishTutorial }) => { ); }; -const TutorialOrganizationImage = ({ image, imageScale }) => { +const TutorialOrganizationImage = ({ image }) => { const classes = useStyles(); - const matches = useMediaQuery((theme) => theme.breakpoints.up('sm')); const ImageComponent = image; - const imageHeight = 180 * (imageScale || 1); - const imageHeightLarger = 250 * (imageScale || 1); return ( - + ); }; @@ -217,7 +203,6 @@ TutorialOrganization.propTypes = { TutorialOrganizationImage.propTypes = { image: PropTypes.func.isRequired, - imageScale: PropTypes.number, }; export default TutorialOrganization; From 0e1d2da05a63e8ed4e84d5f702c59d052edda4c0 Mon Sep 17 00:00:00 2001 From: miko Date: Tue, 11 Jul 2023 17:23:13 +0400 Subject: [PATCH 2/2] Update icons, colors, margins --- assets/images/org-tutorial-step-1.svg | 36 ++--- assets/images/org-tutorial-step-2.svg | 180 ++++++++++++------------- assets/images/org-tutorial-step-3.svg | 52 +++---- src/components/TutorialOrganization.js | 11 +- 4 files changed, 143 insertions(+), 136 deletions(-) diff --git a/assets/images/org-tutorial-step-1.svg b/assets/images/org-tutorial-step-1.svg index 21339992..f24a8b19 100644 --- a/assets/images/org-tutorial-step-1.svg +++ b/assets/images/org-tutorial-step-1.svg @@ -1,49 +1,49 @@ - + - - - - - - - - + + + + + + + + - + - + - + - + - + - + - + - + - + diff --git a/assets/images/org-tutorial-step-2.svg b/assets/images/org-tutorial-step-2.svg index 7ca74a89..948e40c6 100644 --- a/assets/images/org-tutorial-step-2.svg +++ b/assets/images/org-tutorial-step-2.svg @@ -1,229 +1,229 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/assets/images/org-tutorial-step-3.svg b/assets/images/org-tutorial-step-3.svg index ddcd2c3a..c56db964 100644 --- a/assets/images/org-tutorial-step-3.svg +++ b/assets/images/org-tutorial-step-3.svg @@ -1,69 +1,69 @@ - + - - - - - - - - - - - - + + + + + + + + + + + + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/components/TutorialOrganization.js b/src/components/TutorialOrganization.js index d22d99a3..fd7fa709 100644 --- a/src/components/TutorialOrganization.js +++ b/src/components/TutorialOrganization.js @@ -43,15 +43,21 @@ const useStyles = makeStyles((theme) => ({ }, }, }, + btnContainer: { + '& svg': { + color: theme.custom.colors.violet, + }, + }, slideContainer: { height: '100%', }, imageContainer: { - height: 280, + height: 235, }, slideBody: { - maxWidth: 480, + maxWidth: 410, padding: 24, + textAlign: 'center', }, footer: { margin: '0 auto', @@ -126,6 +132,7 @@ const TutorialOrganization = ({ onFinishTutorial }) => { justifyContent="space-between" >