diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index b67f2437..cc9b285d 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -121,10 +121,10 @@ h4 { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); - column-gap: 100px; + column-gap: 45px; row-gap: 100px; - padding: 25px; - div:nth-child(1) { + padding-top: 45px; + .leftPanel { grid-area: 1 / 1 / 3 / 3; } .rightPanel { @@ -180,7 +180,7 @@ h4 { .achievements { margin-top: 25px; display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-gap: 10px; } @@ -192,17 +192,21 @@ h4 { @include themed() { background: t($modal-sidebarActive); border-radius: t($borderRadius); - gap: 20px; + gap: 10px; } svg { - font-size: 25px !important; + font-size: 20px !important; + padding: 15px; + border-radius: 100%; + @include themed() { + background: t($modal-sidebar); + } } } .statSection { padding: 25px; @include themed() { - padding: 45px; border-radius: t($borderRadius); background: t($modal-sidebar); box-shadow: 0 0 0 4px t($modal-sidebarActive); @@ -219,4 +223,4 @@ h4 { span { font-size: 15px; } -} \ No newline at end of file +} diff --git a/src/components/modals/main/settings/Radio.jsx b/src/components/modals/main/settings/Radio.jsx index b66da0ca..8d956faa 100644 --- a/src/components/modals/main/settings/Radio.jsx +++ b/src/components/modals/main/settings/Radio.jsx @@ -32,10 +32,7 @@ export default class Radio extends PureComponent { localStorage.getItem('tabName') === variables.language.getMessage(variables.languagecode, 'tabname') ) { - localStorage.setItem( - 'tabName', - translations[value.replace('-', '_')].tabname, - ); + localStorage.setItem('tabName', translations[value.replace('-', '_')].tabname); } } diff --git a/src/components/modals/main/settings/sections/Stats.jsx b/src/components/modals/main/settings/sections/Stats.jsx index 949b01c6..6b852ed7 100644 --- a/src/components/modals/main/settings/sections/Stats.jsx +++ b/src/components/modals/main/settings/sections/Stats.jsx @@ -58,6 +58,16 @@ export default class Stats extends PureComponent { ); } + const achievement = (name, description) => ( +
+ +
+ {name} + {description} +
+
+ ); + return ( <> {getMessage('modals.main.settings.sections.stats.title')} @@ -72,28 +82,15 @@ export default class Stats extends PureComponent { />
-
+
Achievements
- {this.state.stats['tabs-opened'] > 10 && ( -
- -
- 10/10 IGN - Opened 10 tabs -
-
- )} - {this.state.stats['tabs-opened'] > 100 && ( -
- -
- Seasoning - Opened 100 tabs -
-
- )} -
+ {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')} +
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx index ff5b773e..921bbca7 100644 --- a/src/components/modals/main/settings/sections/background/Background.jsx +++ b/src/components/modals/main/settings/sections/background/Background.jsx @@ -205,29 +205,39 @@ export default class BackgroundSettings extends PureComponent { this.state.backgroundType !== 'random_colour' && this.state.backgroundType !== 'random_gradient'; - const breadcrumb = (name, toSet) => ( -
-
this.setState({ [toSet]: false })} className="settingsReturn"> - - - -
- {name} -
- ); - - return ( - <> + let header; + if (this.state.effects === true) { + header = ( + this.setState({ effects: false })}> + {getMessage('modals.main.settings.sections.background.title')}{' '} + {' '} + {getMessage('modals.main.settings.sections.background.effects.title')} + + ); + } else if (this.state.backgroundSettingsSection === true) { + header = ( + this.setState({ backgroundSettingsSection: false })} + > + {getMessage('modals.main.settings.sections.background.title')}{' '} + {' '} + {getMessage('modals.main.settings.sections.background.source.title')} + + ); + } else { + header = (
- {this.state.effects ? breadcrumb('Effects', 'effects') : null} - {this.state.backgroundSettingsSection - ? breadcrumb('Source', 'backgroundSettingsSection') - : null} + ); + } + return ( + <> + {header} {this.state.backgroundSettingsSection !== true && this.state.effects !== true ? ( <>