698 replace shared wallet illustrations (#707)

* Change Illustrations on tutorial for shared wallet * Update icons, colors, margins
CirclesUBI · Aug 8, 2023 · be0fa98 · be0fa98
1 parent 6189b72
commit be0fa98
Show file tree

Hide file tree

Showing 4 changed files with 359 additions and 23 deletions.
diff --git a/assets/images/org-tutorial-step-1.svg b/assets/images/org-tutorial-step-1.svg
diff --git a/assets/images/org-tutorial-step-2.svg b/assets/images/org-tutorial-step-2.svg
diff --git a/assets/images/org-tutorial-step-3.svg b/assets/images/org-tutorial-step-3.svg
diff --git 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"
       >
         <Box
+          className={classes.btnContainer}
           display="flex"
           justifyContent={isFirstSlide ? 'flex-end' : 'space-between'}
           padding={1}
@@ -159,10 +160,7 @@ const TutorialOrganization = ({ onFinishTutorial }) => {
                 key={slide.heading}
                 p={1}
               >
-                <TutorialOrganizationImage
-                  image={slide.image}
-                  imageScale={slide.imageScale}
-                />
+                <TutorialOrganizationImage image={slide.image} />
                 <Typography variant="h2">{slide.heading}</Typography>
                 <Typography className={classes.slideBody} variant="body1">
                   {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 (
     <Box alignItems="center" className={classes.imageContainer} display="flex">
-      <ImageComponent
-        height={matches ? `${imageHeightLarger}px` : `${imageHeight}px`}
-      />
+      <ImageComponent />
     </Box>
   );
 };
@@ -217,7 +210,6 @@ TutorialOrganization.propTypes = {
 
 TutorialOrganizationImage.propTypes = {
   image: PropTypes.func.isRequired,
-  imageScale: PropTypes.number,
 };
 
 export default TutorialOrganization;