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 ? (
<>