From f892c4c690972090153a47e49216f724437651b2 Mon Sep 17 00:00:00 2001
From: alexsparkes <turbomarshmello@gmail.com>
Date: Wed, 15 Mar 2023 21:27:02 +0000
Subject: [PATCH] fix: changes to stats page design

---
 .../modals/main/scss/settings/_main.scss      |  34 +++--
 .../modals/main/settings/sections/Stats.jsx   | 144 ++++++++++--------
 2 files changed, 102 insertions(+), 76 deletions(-)

diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss
index ad46b25a..7c2a5b44 100644
--- a/src/components/modals/main/scss/settings/_main.scss
+++ b/src/components/modals/main/scss/settings/_main.scss
@@ -132,22 +132,27 @@ h4 {
   }
 }
 
-.statsGrid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  column-gap: 45px;
-  row-gap: 100px;
-
-  .leftPanel {
-    grid-area: 1 / 1 / 3 / 3;
-  }
+.stats {
+  display: flex;
+  flex-flow: column;
+  gap: 30px;
+  width: 100%;
 
   .rightPanel {
-    grid-area: 1 / 3 / 4 / 4;
-    display: flex;
-    flex-flow: column;
-    gap: 10px;
+    .statIcon {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 30px;
+    }
+    .statGrid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      grid-gap: 10px;
+      div {
+        display: flex;
+        flex-flow: column;
+      }
+    }
 
     .subtitle {
       text-transform: capitalize;
@@ -200,7 +205,6 @@ h4 {
 }
 
 .achievements {
-  margin-top: 25px;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-gap: 10px;
diff --git a/src/components/modals/main/settings/sections/Stats.jsx b/src/components/modals/main/settings/sections/Stats.jsx
index d9f9a6da..acc95d0d 100644
--- a/src/components/modals/main/settings/sections/Stats.jsx
+++ b/src/components/modals/main/settings/sections/Stats.jsx
@@ -75,7 +75,7 @@ export default class Stats extends PureComponent {
     const achievementElement = (key, name, achieved) => (
       <div className="achievement">
         <FaTrophy />
-        <div className={"achievementContent" + (achieved ? ' achieved' : '')}>
+        <div className={'achievementContent' + (achieved ? ' achieved' : '')}>
           <span>{name}</span>
           <span className="subtitle">
             {achievementLanguage[localStorage.getItem('language')][key]}
@@ -89,7 +89,84 @@ export default class Stats extends PureComponent {
         <span className="mainTitle">
           {variables.getMessage('modals.main.settings.sections.stats.title')}
         </span>
-        <div className="statsGrid">
+        <div className="stats">
+          <div className="statSection rightPanel">
+            <div className="statIcon">
+              <MdShowChart />
+            </div>
+            <div className="statGrid">
+              <div>
+                <span className="subtitle">
+                  {variables.getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}{' '}
+                </span>
+                <span>{this.state.stats['tabs-opened'] || 0}</span>
+              </div>
+              <div>
+                <span className="subtitle">
+                  {variables.getMessage(
+                    'modals.main.settings.sections.stats.sections.backgrounds_favourited',
+                  )}{' '}
+                </span>
+                <span>
+                  {this.state.stats.feature
+                    ? this.state.stats.feature['background-favourite'] || 0
+                    : 0}
+                </span>
+              </div>
+              <div>
+                <span className="subtitle">
+                  {variables.getMessage(
+                    'modals.main.settings.sections.stats.sections.backgrounds_downloaded',
+                  )}{' '}
+                </span>
+                <span>
+                  {this.state.stats.feature
+                    ? this.state.stats.feature['background-download'] || 0
+                    : 0}
+                </span>
+              </div>
+              <div>
+                <span className="subtitle">
+                  {variables.getMessage(
+                    'modals.main.settings.sections.stats.sections.quotes_favourited',
+                  )}{' '}
+                </span>
+                <span>
+                  {this.state.stats.feature ? this.state.stats.feature['quoted-favourite'] || 0 : 0}
+                </span>
+              </div>
+              <div>
+                <span className="subtitle">
+                  {variables.getMessage(
+                    'modals.main.settings.sections.stats.sections.quicklinks_added',
+                  )}{' '}
+                </span>
+                <span>
+                  {this.state.stats.feature ? this.state.stats.feature['quicklink-add'] || 0 : 0}
+                </span>
+              </div>
+              <div>
+                <span className="subtitle">
+                  {variables.getMessage(
+                    'modals.main.settings.sections.stats.sections.settings_changed',
+                  )}{' '}
+                </span>
+                <span>
+                  {this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0}
+                </span>
+              </div>
+              <div>
+                <span className="subtitle">
+                  {variables.getMessage(
+                    'modals.main.settings.sections.stats.sections.addons_installed',
+                  )}{' '}
+                </span>
+                <span>
+                  {this.state.stats.marketplace ? this.state.stats.marketplace['install'] : 0}
+                </span>
+              </div>
+            </div>
+          </div>
           <div className="statSection leftPanel">
             <span className="title">
               {variables.getMessage('modals.main.settings.sections.stats.achievements')}
@@ -100,66 +177,11 @@ export default class Stats extends PureComponent {
                 count: this.getUnlockedCount() + '/' + this.state.achievements.length,
               })}
             </span>
-            <div className="achievements">
-              {this.state.achievements.map((achievement, index) => (
-                achievementElement(index, achievement.name, achievement.achieved)
-              ))}
-            </div>
           </div>
-          <div className="statSection rightPanel">
-            <MdShowChart />
-            <span className="subtitle">
-              {variables.getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}{' '}
-            </span>
-            <span>{this.state.stats['tabs-opened'] || 0}</span>
-            <span className="subtitle">
-              {variables.getMessage(
-                'modals.main.settings.sections.stats.sections.backgrounds_favourited',
-              )}{' '}
-            </span>
-            <span>
-              {this.state.stats.feature ? this.state.stats.feature['background-favourite'] || 0 : 0}
-            </span>
-            <span className="subtitle">
-              {variables.getMessage(
-                'modals.main.settings.sections.stats.sections.backgrounds_downloaded',
-              )}{' '}
-            </span>
-            <span>
-              {this.state.stats.feature ? this.state.stats.feature['background-download'] || 0 : 0}
-            </span>
-            <span className="subtitle">
-              {variables.getMessage(
-                'modals.main.settings.sections.stats.sections.quotes_favourited',
-              )}{' '}
-            </span>
-            <span>
-              {this.state.stats.feature ? this.state.stats.feature['quoted-favourite'] || 0 : 0}
-            </span>
-            <span className="subtitle">
-              {variables.getMessage(
-                'modals.main.settings.sections.stats.sections.quicklinks_added',
-              )}{' '}
-            </span>
-            <span>
-              {this.state.stats.feature ? this.state.stats.feature['quicklink-add'] || 0 : 0}
-            </span>
-            <span className="subtitle">
-              {variables.getMessage(
-                'modals.main.settings.sections.stats.sections.settings_changed',
-              )}{' '}
-            </span>
-            <span>
-              {this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0}
-            </span>
-            <span className="subtitle">
-              {variables.getMessage(
-                'modals.main.settings.sections.stats.sections.addons_installed',
-              )}{' '}
-            </span>
-            <span>
-              {this.state.stats.marketplace ? this.state.stats.marketplace['install'] : 0}
-            </span>
+          <div className="achievements">
+            {this.state.achievements.map((achievement, index) =>
+              achievementElement(index, achievement.name, achievement.achieved),
+            )}
           </div>
         </div>
       </>