fix: background component and style tweaks

This commit is contained in:
David Ralph
2021-04-22 14:20:51 +01:00
parent 51d0715f0f
commit 4128fbae46
5 changed files with 18 additions and 15 deletions

View File

@@ -48,7 +48,7 @@ export default class Modals extends React.PureComponent {
<Main modalClose={() => this.setState({ mainModal: false })}/>
</Modal>
<React.Suspense fallback={renderLoader()}>
<Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal' overlayClassName='Overlay' ariaHideApp={false}>
<Modal closeTimeoutMS={300} onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal' overlayClassName='Overlay' ariaHideApp={false}>
<Welcome modalClose={() => this.closeWelcome()}/>
</Modal>
<Modal onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>

View File

@@ -351,6 +351,16 @@ li {
.aboutIcon {
color: var(--modal-text) !important;
padding-right: 10px;
&:hover {
opacity: 0.8;
}
}
.aboutLink {
&:hover {
opacity: 0.8;
}
}
.MuiFormControl-root {

View File

@@ -52,7 +52,7 @@ export default class AdvancedSettings extends React.PureComponent {
<p>{advanced.experimental_warning}</p>
<Checkbox name='experimental' text={this.language.enabled} element='.other'/>
<Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className={'Modal resetmodal'} overlayClassName={'Overlay resetoverlay'} ariaHideApp={false}>
<Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className='Modal resetmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
<ResetModal modalClose={() => this.setState({ resetModal: false })} />
</Modal>
</>

View File

@@ -28,10 +28,6 @@
line-height: 20px !important;
color: var(--modal-link);
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
img.icon,

View File

@@ -71,12 +71,12 @@ export default class Background extends React.PureComponent {
if (photoInformation) {
photoInformation.style.display = 'block';
}
backgroundImage.style.backgroundImage = null;
return backgroundImage.style.backgroundImage = `url(${url})`;
backgroundImage.style.background = null;
return backgroundImage.style.background = `url(${url})`;
}
backgroundImage.classList.add('backgroundPreload');
backgroundImage.style.backgroundImage = null;
backgroundImage.style.background = null;
if (photoInformation) {
photoInformation.classList.add('backgroundPreload');
@@ -91,7 +91,7 @@ export default class Background extends React.PureComponent {
backgroundImage.classList.remove('backgroundPreload');
backgroundImage.classList.add('fade-in');
backgroundImage.style.backgroundImage = `url(${url})`;
backgroundImage.style.background = `url(${url})`;
preloader.remove();
if (photoInformation) {
@@ -100,7 +100,7 @@ export default class Background extends React.PureComponent {
}
});
} else {
backgroundImage.setAttribute('style', `${this.state.style};`);
backgroundImage.setAttribute('style', this.state.style);
}
}
@@ -232,6 +232,7 @@ export default class Background extends React.PureComponent {
element.classList.remove('fade-in');
this.setState({
url: '',
style: '',
video: false,
photoInfo: {
hidden: true
@@ -260,10 +261,6 @@ export default class Background extends React.PureComponent {
element.style.display = 'block';
}
if (this.state.photoInfo.hidden === false) {
document.querySelector('.photoInformation').style.display = 'block';
}
const backgroundType = localStorage.getItem('backgroundType');
// todo: make this good