diff --git a/src/components/Elements/Button/Button.jsx b/src/components/Elements/Button/Button.jsx index 830b51bd..396c44e9 100644 --- a/src/components/Elements/Button/Button.jsx +++ b/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; diff --git a/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss b/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss index cdf06d34..9a692159 100644 --- a/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss +++ b/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); diff --git a/src/components/Elements/MainModal/scss/settings/modules/tabs/_stats.scss b/src/components/Elements/MainModal/scss/settings/modules/tabs/_stats.scss index 5890342a..282ecb08 100644 --- a/src/components/Elements/MainModal/scss/settings/modules/tabs/_stats.scss +++ b/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; } diff --git a/src/components/Elements/ResetModal/ResetModal.jsx b/src/components/Elements/ResetModal/ResetModal.jsx index aec4c229..9f9be898 100644 --- a/src/components/Elements/ResetModal/ResetModal.jsx +++ b/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'); diff --git a/src/components/Elements/ShareModal/sharemodal.scss b/src/components/Elements/ShareModal/sharemodal.scss index 084a383d..09b477c3 100644 --- a/src/components/Elements/ShareModal/sharemodal.scss +++ b/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; diff --git a/src/config/variables.js b/src/config/variables.js index e8cceeeb..b5c2d119 100644 --- a/src/config/variables.js +++ b/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: {}, diff --git a/src/features/background/components/ExcludeModal.jsx b/src/features/background/components/ExcludeModal.jsx index 381a75d4..f7a921db 100644 --- a/src/features/background/components/ExcludeModal.jsx +++ b/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 })}
- - +
); diff --git a/src/features/background/options/CustomURLModal.jsx b/src/features/background/options/CustomURLModal.jsx index a90db453..14b910f6 100644 --- a/src/features/background/options/CustomURLModal.jsx +++ b/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 }) { /> {urlError}
- - +
); diff --git a/src/features/misc/sections/index.jsx b/src/features/misc/sections/index.jsx index cd904db7..143879d0 100644 --- a/src/features/misc/sections/index.jsx +++ b/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'; diff --git a/src/features/misc/views/Settings.jsx b/src/features/misc/views/Settings.jsx index 856577d7..af6e9033 100644 --- a/src/features/misc/views/Settings.jsx +++ b/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 = [ diff --git a/src/utils/achievements/condition.js b/src/features/stats/api/achievements/condition.js similarity index 100% rename from src/utils/achievements/condition.js rename to src/features/stats/api/achievements/condition.js diff --git a/src/utils/achievements/index.js b/src/features/stats/api/achievements/index.js similarity index 100% rename from src/utils/achievements/index.js rename to src/features/stats/api/achievements/index.js diff --git a/src/utils/stats.js b/src/features/stats/api/stats.js similarity index 92% rename from src/utils/stats.js rename to src/features/stats/api/stats.js index 12529e77..b1aa2e7e 100644 --- a/src/utils/stats.js +++ b/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: '🚀', + });*/ } } diff --git a/src/features/stats/index.jsx b/src/features/stats/index.jsx new file mode 100644 index 00000000..5f30ef38 --- /dev/null +++ b/src/features/stats/index.jsx @@ -0,0 +1 @@ +export * from './options'; diff --git a/src/features/stats/options/ClearModal.jsx b/src/features/stats/options/ClearModal.jsx new file mode 100644 index 00000000..79234c04 --- /dev/null +++ b/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 ( +
+
+ + {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.title')} + + +
+ +
+ +
+ + {variables.getMessage('modals.main.settings.sections.stats.clear_modal.question')} + + + {variables.getMessage('modals.main.settings.sections.stats.clear_modal.information')} + +
+
+
+ ); +} + +const MemoizedClearModal = memo(ClearModal); + +export { MemoizedClearModal as default, MemoizedClearModal as ClearModal }; diff --git a/src/features/misc/sections/Stats.jsx b/src/features/stats/options/StatsOptions.jsx similarity index 56% rename from src/features/misc/sections/Stats.jsx rename to src/features/stats/options/StatsOptions.jsx index 56b34cdd..8e5906ed 100644 --- a/src/features/misc/sections/Stats.jsx +++ b/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 { getLocalisedAchievementData, achievements, checkAchievements } from 'utils/achievements'; +import { + 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 (
- + {achieved ? : }
- {name} + {achieved ? ( + + {new Date(timestamp).toLocaleDateString()} + + ) : null} + {name} {achieved ? description : '?????'}
); }; + const statsElement = (title, value) => { + return ( +
+ {title} + {value} +
+ ); + }; + const STATS_SECTION = 'modals.main.settings.sections.stats'; return ( @@ -92,88 +114,59 @@ class Stats extends PureComponent { />