Fix: Modal buttons

Co-authored-by: David Ralph <me@davidcralph.co.uk>

src/components/Elements/Button/Button.jsx

@@ -12,6 +12,9 @@ const Button = forwardRef(
       case 'settings':
         className = 'btn-settings';
         break;
+      case 'secondary':
+        className = 'btn-secondary';
+        break;
       case 'icon':
         className = 'btn-icon';
         break;

src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss

@@ -11,6 +11,15 @@
   padding: 0 20px;
 }
 
+.btn-secondary {
+  @include modal-button(secondary);
+
+  display: inline;
+  margin-top: 0;
+  float: none !important;
+  padding: 0 20px;
+}
+
 .btn-navigation {
   @include modal-button(standard);
 

src/components/Elements/MainModal/scss/settings/modules/tabs/_stats.scss

@@ -57,14 +57,42 @@
     gap: 10px;
   }
 
-  svg {
+  .timestamp {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: 5px;
+    font-size: 12px;
+    @include themed {
+      color: t($subColor);
+    }
+  }
+
+  .achievementTitle {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  svg.trophy {
     font-size: 20px !important;
+    @include themed {
+      background-image: t($slightGradient);
+      box-shadow: t($boxShadow);
+    }
+
     padding: 15px;
     border-radius: 100%;
+  }
 
+  svg.trophyLocked {
+    font-size: 20px !important;
     @include themed {
-      background: t($modal-sidebarActive);
+      background-image: t($modal-sidebarActive);
+      box-shadow: t($boxShadow);
     }
+
+    padding: 15px;
+    border-radius: 100%;
   }
 }
 
@@ -88,11 +116,6 @@
   flex-flow: column;
   gap: 2px;
 
-  span:first-child {
-    font-weight: bold;
-    font-size: 15px;
-  }
-
   .subtitle {
     font-size: 13px !important;
   }

src/components/Elements/ResetModal/ResetModal.jsx

@@ -3,6 +3,7 @@ import variables from 'config/variables';
 import { MdClose, MdRestartAlt } from 'react-icons/md';
 import { setDefaultSettings } from 'utils/settings';
 import { Tooltip } from 'components/Elements';
+
 function ResetModal({ modalClose }) {
   const reset = () => {
     variables.stats.postEvent('setting', 'Reset');

src/components/Elements/ShareModal/sharemodal.scss

@@ -18,12 +18,6 @@
     flex-flow: row;
     justify-content: flex-end;
     gap: 20px;
-
-    button {
-      gap: 20px;
-      display: flex;
-      flex-flow: row;
-    }
   }
 
   .textButton {
@@ -46,13 +40,6 @@
     gap: 15px;
   }
 
-  button {
-    place-items: center;
-    display: grid;
-
-    @include basicIconButton(11px, 1.3rem, modal);
-  }
-
   .copy {
     display: flex;
     flex-flow: row;

src/config/variables.js

@@ -1,5 +1,5 @@
 import * as constants from 'config/constants';
-import Stats from 'utils/stats';
+import Stats from 'features/stats/api/stats';
 
 const variables = {
   language: {},

src/features/background/components/ExcludeModal.jsx

@@ -1,7 +1,7 @@
 import variables from 'config/variables';
 import { memo } from 'react';
 import EventBus from 'utils/eventbus';
-import { Tooltip } from 'components/Elements';
+import { Tooltip, Button } from 'components/Elements';
 
 import { MdClose, MdDone } from 'react-icons/md';
 
@@ -33,14 +33,18 @@ function ExcludeModal({ modalClose, info }) {
         {variables.getMessage('widgets.background.exclude_confirm', { category: info.category })}
       </span>
       <div className="resetFooter">
-        <button className="textButton" onClick={modalClose}>
+        <Button
-          <MdClose />
+          type="secondary"
-          {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
+          onClick={modalClose}
-        </button>
+          icon={<MdClose />}
-        <button onClick={() => excludeImage()}>
+          label={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
-          <MdDone />
+        />
-          {variables.getMessage('widgets.background.confirm')}
+        <Button
-        </button>
+          type="settings"
+          onClick={() => excludeImage()}
+          icon={<MdDone />}
+          label={variables.getMessage('widgets.background.confirm')}
+        />
       </div>
     </div>
   );

src/features/background/options/CustomURLModal.jsx

@@ -1,7 +1,7 @@
 import variables from 'config/variables';
 import { useState, memo } from 'react';
 import { MdClose, MdOutlineAddLink } from 'react-icons/md';
-import { Tooltip } from 'components/Elements';
+import { Tooltip, Button } from 'components/Elements';
 
 function CustomURLModal({ modalClose, urlError, modalCloseOnly }) {
   const [url, setURL] = useState();
@@ -28,14 +28,18 @@ function CustomURLModal({ modalClose, urlError, modalCloseOnly }) {
       />
       <span className="dropdown-error">{urlError}</span>
       <div className="resetFooter">
-        <button className="textButton" onClick={modalCloseOnly}>
+        <Button
-          <MdClose />
+          type="secondary"
-          {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
+          onClick={modalCloseOnly}
-        </button>
+          icon={<MdClose />}
-        <button onClick={() => modalClose(url)}>
+          label={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
-          <MdOutlineAddLink />
+        />
-          {variables.getMessage('modals.main.settings.sections.background.source.add_url')}
+        <Button
-        </button>
+          type="settings"
+          onClick={() => modalClose(url)}
+          icon={<MdOutlineAddLink />}
+          label={variables.getMessage('modals.main.settings.sections.background.source.add_url')}
+        />
       </div>
     </div>
   );

src/features/misc/sections/index.jsx

@@ -5,4 +5,3 @@ export * from './Changelog';
 export * from './Experimental';
 export * from './Language';
 export * from './Overview';
-export * from './Stats';

src/features/misc/views/Settings.jsx

@@ -12,6 +12,7 @@ import { MessageOptions } from 'features/message';
 import { BackgroundOptions } from 'features/background';
 import { SearchOptions } from 'features/search';
 import { WeatherOptions } from 'features/weather';
+import { Stats } from 'features/stats';
 import {
   About,
   AdvancedOptions,
@@ -20,7 +21,6 @@ import {
   ExperimentalOptions,
   LanguageOptions,
   Overview,
-  Stats,
 } from '../sections';
 
 const sections = [

src/features/stats/api/stats.js

@@ -7,7 +7,7 @@ export default class Stats {
     newAchievement.forEach((achievement) => {
       if (achievement) {
         const { name } = getLocalisedAchievementData(achievement.id);
-        toast(`Achievement Unlocked: ${name}`);
+        toast.success(`Achievement Unlocked: ${name}`);
       }
     });
   }
@@ -48,5 +48,8 @@ export default class Stats {
     data['tabs-opened'] = data['tabs-opened'] + 1 || 1;
     localStorage.setItem('statsData', JSON.stringify(data));
     this.achievementTrigger(data);
+    /*toast.success(`Achievement Unlocked: Test`, {
+      icon: '🚀',
+    });*/
   }
 }

src/features/stats/index.jsx

@@ -0,0 +1 @@
+export * from './options';

src/features/stats/options/ClearModal.jsx

@@ -0,0 +1,47 @@
+import { memo } from 'react';
+import variables from 'config/variables';
+import { MdClose, MdRestartAlt } from 'react-icons/md';
+import { Tooltip, Button } from 'components/Elements';
+
+function ClearModal({ modalClose, resetStats }) {
+  return (
+    <div className="smallModal">
+      <div className="shareHeader">
+        <span className="title">
+          {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.title')}
+        </span>
+        <Tooltip
+          title={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
+        >
+          <div className="close" onClick={modalClose}>
+            <MdClose />
+          </div>
+        </Tooltip>
+      </div>
+      <span className="title">
+        {variables.getMessage('modals.main.settings.sections.stats.clear_modal.question')}
+      </span>
+      <span className="subtitle">
+        {variables.getMessage('modals.main.settings.sections.stats.clear_modal.information')}
+      </span>
+      <div className="resetFooter">
+        <Button
+          type="secondary"
+          onClick={modalClose}
+          icon={<MdClose />}
+          label={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
+        />
+        <Button
+          type="settings"
+          onClick={() => resetStats()}
+          icon={<MdRestartAlt />}
+          label={variables.getMessage('modals.main.settings.buttons.reset')}
+        />
+      </div>
+    </div>
+  );
+}
+
+const MemoizedClearModal = memo(ClearModal);
+
+export { MemoizedClearModal as default, MemoizedClearModal as ClearModal };

src/features/stats/options/StatsOptions.jsx

@@ -1,16 +1,21 @@
 /* eslint-disable array-callback-return */
 import variables from 'config/variables';
 import { PureComponent } from 'react';
-import { MdShowChart, MdRestartAlt, MdDownload } from 'react-icons/md';
+import { MdShowChart, MdRestartAlt, MdDownload, MdAccessTime, MdLock } from 'react-icons/md';
 import { FaTrophy } from 'react-icons/fa';
 import { toast } from 'react-toastify';
+import Modal from 'react-modal';
 
 import { Button } from 'components/Elements';
 import { Header, CustomActions } from 'components/Layout/Settings';
+import { ClearModal } from './ClearModal';
 
 import { saveFile } from 'utils/saveFile';
-
+import {
-import { getLocalisedAchievementData, achievements, checkAchievements } from 'utils/achievements';
+  getLocalisedAchievementData,
+  achievements,
+  checkAchievements,
+} from 'features/stats/api/achievements';
 
 class Stats extends PureComponent {
   constructor() {
@@ -18,6 +23,7 @@ class Stats extends PureComponent {
     this.state = {
       stats: JSON.parse(localStorage.getItem('statsData')) || {},
       achievements,
+      clearmodal: false,
     };
   }
 
@@ -44,6 +50,7 @@ class Stats extends PureComponent {
     this.setState({
       stats: {},
       achievements,
+      clearmodal: false,
     });
     toast(variables.getMessage('toasts.stats_reset'));
     this.updateAchievements();
@@ -64,20 +71,35 @@ class Stats extends PureComponent {
   }
 
   render() {
-    const achievementElement = (key, id, achieved) => {
+    const achievementElement = (key, id, achieved, timestamp) => {
       const { name, description } = getLocalisedAchievementData(id);
+      console.log(timestamp);
 
       return (
         <div className="achievement" key={key}>
-          <FaTrophy />
+          {achieved ? <FaTrophy className="trophy" /> : <MdLock className="trophyLocked" />}
           <div className={'achievementContent' + (achieved ? ' achieved' : '')}>
-            <span>{name}</span>
+            {achieved ? (
+              <span className="timestamp">
+                <MdAccessTime /> {new Date(timestamp).toLocaleDateString()}
+              </span>
+            ) : null}
+            <span className="achievementTitle">{name}</span>
             <span className="subtitle">{achieved ? description : '?????'}</span>
           </div>
         </div>
       );
     };
 
+    const statsElement = (title, value) => {
+      return (
+        <div>
+          <span className="subtitle">{title}</span>
+          <span>{value}</span>
+        </div>
+      );
+    };
+
     const STATS_SECTION = 'modals.main.settings.sections.stats';
 
     return (
@@ -92,88 +114,59 @@ class Stats extends PureComponent {
             />
             <Button
               type="settings"
-              onClick={() => this.resetStats()}
+              onClick={() => this.setState({ clearmodal: true })}
               icon={<MdRestartAlt />}
               label={variables.getMessage('modals.main.settings.buttons.reset')}
             />
           </CustomActions>
         </Header>
+        <Modal
+          closeTimeoutMS={100}
+          onRequestClose={() => this.setState({ clearmodal: false })}
+          isOpen={this.state.clearmodal}
+          className="Modal ClearModal mainModal"
+          overlayClassName="Overlay resetoverlay"
+          ariaHideApp={false}
+        >
+          <ClearModal
+            modalClose={() => this.setState({ clearmodal: false })}
+            resetStats={() => this.resetStats()}
+          />
+        </Modal>
         <div className="stats">
           <div className="statSection rightPanel">
             <div className="statIcon">
               <MdShowChart />
             </div>
             <div className="statGrid">
-              <div>
+              {statsElement(
-                <span className="subtitle">
+                variables.getMessage(`${STATS_SECTION}.sections.tabs_opened`),
-                  {variables.getMessage(`${STATS_SECTION}.sections.tabs_opened`)}{' '}
+                this.state.stats['tabs-opened'] || 0,
-                </span>
+              )}
-                <span>{this.state.stats['tabs-opened'] || 0}</span>
+              {statsElement(
-              </div>
+                variables.getMessage(`${STATS_SECTION}.sections.backgrounds_favourited`),
-              <div>
+                this.state.stats['background-favourite'] || 0,
-                <span className="subtitle">
+              )}
-                  {variables.getMessage(
+              {statsElement(
-                    'modals.main.settings.sections.stats.sections.backgrounds_favourited',
+                variables.getMessage(`${STATS_SECTION}.sections.backgrounds_downloaded`),
-                  )}{' '}
+                this.state.stats.feature ? this.state.stats.feature['background-download'] || 0 : 0,
-                </span>
+              )}
-                <span>
+              {statsElement(
-                  {this.state.stats.feature
+                variables.getMessage(`${STATS_SECTION}.sections.quotes_favourited`),
-                    ? this.state.stats.feature['background-favourite'] || 0
+                this.state.stats.feature ? this.state.stats.feature['quoted-favourite'] || 0 : 0,
-                    : 0}
+              )}
-                </span>
+              {statsElement(
-              </div>
+                variables.getMessage(`${STATS_SECTION}.sections.quicklinks_added`),
-              <div>
+                this.state.stats.feature ? this.state.stats.feature['quicklink-add'] || 0 : 0,
-                <span className="subtitle">
+              )}
-                  {variables.getMessage(
+              {statsElement(
-                    'modals.main.settings.sections.stats.sections.backgrounds_downloaded',
+                variables.getMessage(`${STATS_SECTION}.sections.settings_changed`),
-                  )}{' '}
+                this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0,
-                </span>
+              )}
-                <span>
+              {statsElement(
-                  {this.state.stats.feature
+                variables.getMessage(`${STATS_SECTION}.sections.addons_installed`),
-                    ? this.state.stats.feature['background-download'] || 0
+                this.state.stats.marketplace ? this.state.stats.marketplace['install'] : 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">
@@ -188,8 +181,14 @@ class Stats extends PureComponent {
           <div className="achievements">
             <div className="achievementsGrid">
               {this.state.achievements.map((achievement, index) => {
+                console.log(achievement);
                 if (achievement.achieved) {
-                  return achievementElement(index, achievement.id, achievement.achieved);
+                  return achievementElement(
+                    index,
+                    achievement.id,
+                    achievement.achieved,
+                    achievement.timestamp,
+                  );
                 }
               })}
             </div>

src/features/stats/options/index.jsx

@@ -0,0 +1 @@
+export * from './StatsOptions';

src/i18n/locales/en-GB.json

@@ -455,7 +455,11 @@
             "usage": "Usage Stats",
             "achievements": "Achievements",
             "unlocked": "{count} Unlocked",
-            "locked": "Locked"
+            "locked": "Locked",
+            "clear_modal": {
+              "question": "Do you want to clear your stats?",
+              "information": "This will clear all achievements and usage statistics."
+            }
           },
           "experimental": {
             "title": "Experimental",

src/lib/translations.js

@@ -1,18 +1,18 @@
 import I18n from '@eartharoid/i18n';
 
-import * as de_DE from 'translations/de_DE.json';
+import * as de_DE from 'translations/de-DE.json';
-import * as en_GB from 'translations/en_GB.json';
+import * as en_GB from 'translations/en-GB.json';
-import * as en_US from 'translations/en_US.json';
+import * as en_US from 'translations/en-US.json';
 import * as es from 'translations/es.json';
-import * as es_419 from 'translations/es_419.json';
+import * as es_419 from 'translations/es-419.json';
 import * as fr from 'translations/fr.json';
 import * as nl from 'translations/nl.json';
 import * as no from 'translations/no.json';
 import * as ru from 'translations/ru.json';
-import * as zh_CN from 'translations/zh_CN.json';
+import * as zh_CN from 'translations/zh-CN.json';
-import * as id_ID from 'translations/id_ID.json';
+import * as id_ID from 'translations/id-ID.json';
-import * as tr_TR from 'translations/tr_TR.json';
+import * as tr_TR from 'translations/tr-TR.json';
-import * as pt_BR from 'translations/pt_BR.json';
+import * as pt_BR from 'translations/pt-BR.json';
 import * as bn from 'translations/bn.json';
 
 /**

src/scss/_variables.scss

@@ -187,6 +187,17 @@ $themes: (
       }
     }
 
+    @if $type == 'secondary' {
+      background: t($modal-sidebarActive);
+      box-shadow: t($boxShadow);
+      border: 0;
+      color: t($color);
+
+      &:hover {
+        background: t($modal-sidebar) !important;
+      }
+    }
+
     border-radius: 12px;
     height: 40px;
     font-size: 1rem;

src/utils/data/achievements.json

@@ -3,7 +3,7 @@
     "id": "10tabs",
     "condition": {
       "type": "tabsOpened",
-      "amount": 10
+      "amount": 3
     }
   },
   {