feat: consistent header for sub sections

- fixed achievements grid
- added more achievements
- altered achievements style
- made header of background subsection consistent with advanced

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;
   }
-}
+}

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);
       }
     }
 

src/components/modals/main/settings/sections/Stats.jsx

@@ -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 />

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) => (
-      <div className="breadcrumb">
-        <div onClick={() => this.setState({ [toSet]: false })} className="settingsReturn">
-          <Tooltip title="back" key="backArrow">
-            <MdArrowBack />
-          </Tooltip>
-        </div>
-        <span className="subtitle">{name}</span>
-      </div>
-    );
-
-    return (
-      <>
+    let header;
+    if (this.state.effects === true) {
+      header = (
+        <span className="mainTitle" onClick={() => this.setState({ effects: false })}>
+          {getMessage('modals.main.settings.sections.background.title')}{' '}
+          <MdOutlineKeyboardArrowRight />{' '}
+          {getMessage('modals.main.settings.sections.background.effects.title')}
+        </span>
+      );
+    } else if (this.state.backgroundSettingsSection === true) {
+      header = (
+        <span
+          className="mainTitle"
+          onClick={() => this.setState({ backgroundSettingsSection: false })}
+        >
+          {getMessage('modals.main.settings.sections.background.title')}{' '}
+          <MdOutlineKeyboardArrowRight />{' '}
+          {getMessage('modals.main.settings.sections.background.source.title')}
+        </span>
+      );
+    } else {
+      header = (
         <Header
           title={getMessage('modals.main.settings.sections.background.title')}
           setting="background"
           category="background"
           element="#backgroundImage"
         />
-        {this.state.effects ? breadcrumb('Effects', 'effects') : null}
-        {this.state.backgroundSettingsSection
-          ? breadcrumb('Source', 'backgroundSettingsSection')
-          : null}
+      );
+    }
+    return (
+      <>
+        {header}
         {this.state.backgroundSettingsSection !== true && this.state.effects !== true ? (
           <>
             <div

src/components/widgets/navbar/Navbar.jsx

@@ -35,9 +35,7 @@ export default class Navbar extends PureComponent {
         this.forceUpdate();
         try {
           this.setZoom();
-        } catch (e) {
-          
-        }
+        } catch (e) {}
       }
     });
 

src/modules/translations.js

@@ -10,16 +10,16 @@ import * as zh_CN from '../translations/zh_CN.json';
 import * as id_ID from '../translations/id_ID.json';
 
 const translations = {
-    de_DE,
-    en_GB,
-    en_US,
-    es,
-    fr,
-    nl,
-    no,
-    ru,
-    zh_CN,
-    id_ID
+  de_DE,
+  en_GB,
+  en_US,
+  es,
+  fr,
+  nl,
+  no,
+  ru,
+  zh_CN,
+  id_ID,
 };
 
 export default translations;