From 4af873379532afd4f629597ed6738e805fa898bf Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Tue, 19 Mar 2024 23:35:17 +0000 Subject: [PATCH] Fix: Modal buttons Co-authored-by: David Ralph --- src/components/Elements/Button/Button.jsx | 3 + .../scss/marketplace/modules/_buttons.scss | 9 + .../scss/settings/modules/tabs/_stats.scss | 37 ++++- .../Elements/ResetModal/ResetModal.jsx | 1 + .../Elements/ShareModal/sharemodal.scss | 13 -- src/config/variables.js | 2 +- .../background/components/ExcludeModal.jsx | 22 ++- .../background/options/CustomURLModal.jsx | 22 ++- src/features/misc/sections/index.jsx | 1 - src/features/misc/views/Settings.jsx | 2 +- .../stats/api}/achievements/condition.js | 0 .../stats/api}/achievements/index.js | 0 src/{utils => features/stats/api}/stats.js | 5 +- src/features/stats/index.jsx | 1 + src/features/stats/options/ClearModal.jsx | 47 ++++++ .../options/StatsOptions.jsx} | 155 +++++++++--------- src/features/stats/options/index.jsx | 1 + src/i18n/locales/{de_DE.json => de-DE.json} | 0 src/i18n/locales/{en_GB.json => en-GB.json} | 6 +- src/i18n/locales/{en_US.json => en-US.json} | 0 src/i18n/locales/{es_419.json => es-419.json} | 0 src/i18n/locales/{id_ID.json => id-ID.json} | 0 src/i18n/locales/{pt_BR.json => pt-BR.json} | 0 src/i18n/locales/{tr_TR.json => tr-TR.json} | 0 src/i18n/locales/{zh_CN.json => zh-CN.json} | 0 src/lib/translations.js | 16 +- src/scss/_variables.scss | 11 ++ src/utils/data/achievements.json | 2 +- 28 files changed, 226 insertions(+), 130 deletions(-) rename src/{utils => features/stats/api}/achievements/condition.js (100%) rename src/{utils => features/stats/api}/achievements/index.js (100%) rename src/{utils => features/stats/api}/stats.js (92%) create mode 100644 src/features/stats/index.jsx create mode 100644 src/features/stats/options/ClearModal.jsx rename src/features/{misc/sections/Stats.jsx => stats/options/StatsOptions.jsx} (56%) create mode 100644 src/features/stats/options/index.jsx rename src/i18n/locales/{de_DE.json => de-DE.json} (100%) rename src/i18n/locales/{en_GB.json => en-GB.json} (99%) rename src/i18n/locales/{en_US.json => en-US.json} (100%) rename src/i18n/locales/{es_419.json => es-419.json} (100%) rename src/i18n/locales/{id_ID.json => id-ID.json} (100%) rename src/i18n/locales/{pt_BR.json => pt-BR.json} (100%) rename src/i18n/locales/{tr_TR.json => tr-TR.json} (100%) rename src/i18n/locales/{zh_CN.json => zh-CN.json} (100%) 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 { />