fix: welcome svg, privacy welcome tab, marketplace optimisations, various widget fixes etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2021-07-06 19:38:20 +01:00
parent 44fc24951f
commit 95614a383f
29 changed files with 155 additions and 66 deletions

View File

@@ -51,7 +51,7 @@ export default class WelcomeModal extends React.PureComponent {
return (
<div className='welcomeContent'>
<section>
<img alt='celebration' draggable={false} src={this.state.image} />
<img className='showcaseimg' alt='celebration' draggable={false} src={this.state.image} />
<ProgressBar count={this.images} currentTab={this.state.currentTab} switchTab={(tab) => this.switchTab(tab)}/>
</section>
<section>

View File

@@ -1,8 +1,9 @@
import React from 'react';
import Radio from '../main/settings/Radio';
//import Checkbox from '../main/settings/Checkbox';
import Checkbox from '../main/settings/Checkbox';
import FileUpload from '../main/settings/FileUpload';
import UploadIcon from '@material-ui/icons/CloudUpload';
import AutoIcon from '@material-ui/icons/AutoAwesome';
import LightModeIcon from '@material-ui/icons/LightMode';
@@ -79,9 +80,11 @@ export default class WelcomeSections extends React.Component {
changeWelcomeImg() {
let welcomeImage = this.state.welcomeImage;
this.setState({
welcomeImage: ++welcomeImage % this.welcomeImages.length
});
this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000);
}
@@ -125,7 +128,7 @@ export default class WelcomeSections extends React.Component {
</>
);
const { appearance } = window.language.modals.main.settings.sections;
const { appearance, advanced } = window.language.modals.main.settings.sections;
const languageSettings = window.language.modals.main.settings.sections.language;
const theme = (
@@ -139,12 +142,12 @@ export default class WelcomeSections extends React.Component {
</div>
<div className='options'>
<div className={this.state.lightClass} onClick={() => this.changeTheme('light')}>
<LightModeIcon/>
<span>{appearance.theme.light}</span>
<LightModeIcon/>
<span>{appearance.theme.light}</span>
</div>
<div className={this.state.darkClass} onClick={() => this.changeTheme('dark')}>
<DarkModeIcon/>
<span>{appearance.theme.dark}</span>
<DarkModeIcon/>
<span>{appearance.theme.dark}</span>
</div>
</div>
<h3 className='quicktip'>{language.tip}</h3>
@@ -172,6 +175,10 @@ export default class WelcomeSections extends React.Component {
<>
<h1>{language.sections.privacy.title}</h1>
<p>{language.sections.privacy.description}</p>
<Checkbox name='offlineMode' text={advanced.offline_mode} element='.other' />
<p>{language.sections.privacy.offline_mode_description}</p>
<h3 className='quicktip'>{language.sections.privacy.links.title}</h3>
<a className='privacy' href='https://muetab.com/privacy' target='_blank' rel='noopener noreferrer'>{language.sections.privacy.links.privacy_policy}</a>
</>
);

View File

@@ -24,10 +24,6 @@
justify-content: center;
align-items: center;
img {
height: 300px;
width: 400px;
}
}
section:nth-child(2) {
@@ -82,20 +78,6 @@
}
}
.examples {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
img {
width: 30rem;
height: auto;
display: block;
margin: 30px;
border-radius: 12px;
}
}
.themesToggleArea {
.active {
@@ -146,3 +128,23 @@ a.privacy {
color: #5352ed;
}
}
.examples {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
img {
width: 30rem !important;
height: auto !important;
display: block;
margin: 30px;
border-radius: 12px;
}
}
.showcaseimg {
width: 350px;
height: auto;
}