perf: new tooltip and fix background on/off hot reload

This commit is contained in:
David Ralph
2021-04-21 14:52:05 +01:00
parent 98d6ef115c
commit 9b43063935
12 changed files with 124 additions and 72 deletions

View File

@@ -1,48 +1,48 @@
%storebutton {
cursor: pointer;
font-size: 18px;
display: block;
padding: 5px 30px;
background: none;
border-radius: 24px;
transition: ease 0.33s;
border: 2px solid black;
&:hover {
background: #2d3436;
color: map-get($theme-colours, 'main');
}
}
.dark %storebutton {
border: 2px solid map-get($theme-colours, 'main');
cursor: pointer;
font-size: 18px;
display: block;
padding: 5px 30px;
background: none;
border-radius: 24px;
transition: ease 0.33s;
border: 2px solid black;
&:hover {
background: #2d3436;
color: map-get($theme-colours, 'main');
&:hover {
background: map-get($theme-colours, 'main');
color: #2d3436;
}
}
.removeFromMue {
@extend %storebutton;
border: 2px solid #ff4757;
color: #ff4757;
margin-top: 5px;
&:hover {
background: #ff4757;
color: map-get($theme-colours, 'main');
}
}
.dark %storebutton {
border: 2px solid map-get($theme-colours, 'main');
color: map-get($theme-colours, 'main');
&:hover {
background: map-get($theme-colours, 'main');
color: #2d3436;
}
.addToMue {
@extend %storebutton;
margin-top: 5px;
}
.removeFromMue {
@extend %storebutton;
border: 2px solid #ff4757;
color: #ff4757;
margin-top: 5px;
&:hover {
background: #ff4757;
color: map-get($theme-colours, 'main');
}
.sideload {
display: inline;
margin-top: 0px;
}
}
.addToMue {
@extend %storebutton;
margin-top: 5px;
}
.sideload {
display: inline;
margin-top: 0px;
}

View File

@@ -114,7 +114,6 @@ ul {
.MuiRadio-root,
.aboutLink,
.MuiIconButton-root,
.welcomeLink,
legend {
color: var(--modal-text) !important;
}

View File

@@ -1,6 +1,6 @@
import React from 'react';
import Tooltip from '@material-ui/core/Tooltip';
import Tooltip from '../../../../helpers/tooltip/Tooltip';
import EmailIcon from '@material-ui/icons/Email';
import TwitterIcon from '@material-ui/icons/Twitter';
import ForumIcon from '@material-ui/icons/Forum';
@@ -104,13 +104,13 @@ export default class About extends React.PureComponent {
<h3>{this.language.contributors}</h3>
<p>{this.state.loading}</p>
{this.state.contributors.map((item) => (
<Tooltip title={item.login} placement='top' key={item.login}>
<Tooltip title={item.login} key={item.login}>
<a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=128'} alt={item.login}/></a>
</Tooltip>
))}
{ // for those who contributed without opening a pull request
this.state.other_contributors.map((item) => (
<Tooltip title={item.login} placement='top' key={item.login}>
<Tooltip title={item.login} key={item.login}>
<a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=128'} alt={item.login}/></a>
</Tooltip>
))}
@@ -118,7 +118,7 @@ export default class About extends React.PureComponent {
<h3>{this.language.supporters}</h3>
<p>{this.state.loading}</p>
{this.state.sponsors.map((item) => (
<Tooltip title={item.handle} placement='top' key={item.handle}>
<Tooltip title={item.handle} key={item.handle}>
<a href={item.profile} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar + '&size=128'} alt={item.handle}></img></a>
</Tooltip>
))}