mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-22 08:17:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: consistent header for sub sections

Browse Source 
- fixed achievements grid
- added more achievements
- altered achievements style
- made header of background subsection consistent with advanced
This commit is contained in:
alexsparkes
2022-05-26 23:46:08 +01:00
parent 5f42b1a6ee
commit cd9eed0c81
6 changed files with 68 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/modals/main/settings/sections/Stats.jsx
View File

@@ -58,6 +58,16 @@ export default class Stats extends PureComponent {
);
}
const achievement = (name, description) => (
<div className="achievement">
<FaTrophy />
<div className="achievementContent">
<span>{name}</span>
<span className="subtitle">{description}</span>
</div>
</div>
);
return (
<>
<span className="mainTitle">{getMessage('modals.main.settings.sections.stats.title')}</span>
@@ -72,28 +82,15 @@ export default class Stats extends PureComponent {
/>
</SettingsItem>
<div className="statsGrid">
<div className="statSection">
<div className="statSection leftPanel">
<span className="title">Achievements</span>
<div className="achievements">
{this.state.stats['tabs-opened'] > 10 && (
<div className="achievement">
<FaTrophy />
<div className="achievementContent">
<span>10/10 IGN</span>
<span className="subtitle">Opened 10 tabs</span>
</div>
</div>
)}
{this.state.stats['tabs-opened'] > 100 && (
<div className="achievement">
<FaTrophy />
<div className="achievementContent">
<span>Seasoning</span>
<span className="subtitle">Opened 100 tabs</span>
</div>
</div>
)}
</div>
{this.state.stats['tabs-opened'] >= 10 && achievement('10/10 IGN', 'Opened 10 tabs')}
{this.state.stats['tabs-opened'] >= 39 && achievement('Thank you', 'Opened 39 tabs')}
{this.state.stats['tabs-opened'] >= 100 && achievement('Seasoning', 'Opened 100 tabs')}
{(this.state.stats.marketplace && this.state.stats.marketplace['install']) >= 1 && achievement('Average Linux User', 'Installed an add-on')}
{(this.state.stats.marketplace && this.state.stats.marketplace['install']) >= 5 && achievement('Fully riced', 'Installed 5 add-ons')}
</div>
</div>
<div className="statSection rightPanel">
<MdShowChart />