diff --git a/assets/images/org-tutorial-step-1.svg b/assets/images/org-tutorial-step-1.svg
index f2f93792..f24a8b19 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..948e40c6 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..c56db964 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..fd7fa709 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';
@@ -44,18 +43,21 @@ const useStyles = makeStyles((theme) => ({
},
},
},
+ btnContainer: {
+ '& svg': {
+ color: theme.custom.colors.violet,
+ },
+ },
slideContainer: {
height: '100%',
},
imageContainer: {
- height: 230,
- [theme.breakpoints.up('sm')]: {
- height: 320,
- },
+ height: 235,
},
slideBody: {
- maxWidth: 480,
+ maxWidth: 410,
padding: 24,
+ textAlign: 'center',
},
footer: {
margin: '0 auto',
@@ -69,13 +71,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'),
@@ -132,6 +132,7 @@ const TutorialOrganization = ({ onFinishTutorial }) => {
justifyContent="space-between"
>
{
key={slide.heading}
p={1}
>
-
+
{slide.heading}
{slide.body}
@@ -194,19 +192,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 +210,6 @@ TutorialOrganization.propTypes = {
TutorialOrganizationImage.propTypes = {
image: PropTypes.func.isRequired,
- imageScale: PropTypes.number,
};
export default TutorialOrganization;