From ffb1c513c9de6ef1352b276d30d4ac06da993687 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Mon, 19 Feb 2024 19:51:12 +0000 Subject: [PATCH] refactor(welcome): Improve readability of sections --- .../welcome/Sections/ChooseLanguage.jsx | 6 +- .../modals/welcome/Sections/Final.jsx | 6 +- .../welcome/Sections/ImportSettings.jsx | 6 +- .../modals/welcome/Sections/Intro.jsx | 6 +- .../welcome/Sections/PrivacyOptions.jsx | 47 ++++++++---- .../welcome/Sections/StyleSelection.jsx | 76 +++++++++++-------- .../welcome/Sections/ThemeSelection.jsx | 74 ++++++++++-------- src/features/modals/welcome/Welcome.jsx | 64 +++++++++------- .../Elements/ProgressBar/ProgressBar.jsx | 34 +++++---- .../welcome/components/Layout/Content.jsx | 7 ++ .../welcome/components/Layout/Panel.jsx | 8 +- .../welcome/components/Layout/index.jsx | 3 +- src/features/modals/welcome/welcome.scss | 12 +++ 13 files changed, 209 insertions(+), 140 deletions(-) create mode 100644 src/features/modals/welcome/components/Layout/Content.jsx diff --git a/src/features/modals/welcome/Sections/ChooseLanguage.jsx b/src/features/modals/welcome/Sections/ChooseLanguage.jsx index 4f47c66c..0dfad872 100644 --- a/src/features/modals/welcome/Sections/ChooseLanguage.jsx +++ b/src/features/modals/welcome/Sections/ChooseLanguage.jsx @@ -3,11 +3,11 @@ import { MdOutlineOpenInNew } from 'react-icons/md'; import languages from '@/i18n/languages.json'; import { Radio } from 'components/Form/Settings'; -import { Header } from '../components/Layout'; +import { Header, Content } from '../components/Layout'; function ChooseLanguage() { return ( - <> +
- + ); } diff --git a/src/features/modals/welcome/Sections/Final.jsx b/src/features/modals/welcome/Sections/Final.jsx index 1256ac44..8c502a7f 100644 --- a/src/features/modals/welcome/Sections/Final.jsx +++ b/src/features/modals/welcome/Sections/Final.jsx @@ -1,10 +1,10 @@ import variables from 'config/variables'; import languages from '@/i18n/languages.json'; -import { Header } from '../components/Layout'; +import { Header, Content } from '../components/Layout'; function Final(props) { return ( - <> +
)}*/} - + ); } diff --git a/src/features/modals/welcome/Sections/ImportSettings.jsx b/src/features/modals/welcome/Sections/ImportSettings.jsx index 1f3bdabb..3c78556e 100644 --- a/src/features/modals/welcome/Sections/ImportSettings.jsx +++ b/src/features/modals/welcome/Sections/ImportSettings.jsx @@ -3,7 +3,7 @@ import { useState } from 'react'; import { FileUpload } from 'components/Form/Settings'; import { MdCloudUpload } from 'react-icons/md'; import { importSettings as importSettingsFunction } from 'utils/settings'; -import { Header } from '../components/Layout'; +import { Header, Content } from '../components/Layout'; import default_settings from 'utils/data/default_settings.json'; function ImportSettings(props) { @@ -43,7 +43,7 @@ function ImportSettings(props) { props.switchTab(5); }; return ( - <> +
{variables.getMessage('modals.welcome.sections.settings.tip')} - + ); } diff --git a/src/features/modals/welcome/Sections/Intro.jsx b/src/features/modals/welcome/Sections/Intro.jsx index e1bc475c..e0b8a520 100644 --- a/src/features/modals/welcome/Sections/Intro.jsx +++ b/src/features/modals/welcome/Sections/Intro.jsx @@ -1,7 +1,7 @@ import variables from 'config/variables'; import { useState, useEffect } from 'react'; -import { Header } from '../components/Layout'; +import { Header, Content } from '../components/Layout'; import { MdOutlineWavingHand, MdOpenInNew } from 'react-icons/md'; import { FaDiscord, FaGithub } from 'react-icons/fa'; @@ -18,7 +18,7 @@ useEffect(() => { }, [welcomeImage]); return ( - <> +
{ {variables.getMessage('modals.welcome.sections.intro.notices.github_open')}
- + ); } diff --git a/src/features/modals/welcome/Sections/PrivacyOptions.jsx b/src/features/modals/welcome/Sections/PrivacyOptions.jsx index 34b68fa4..9df95ac1 100644 --- a/src/features/modals/welcome/Sections/PrivacyOptions.jsx +++ b/src/features/modals/welcome/Sections/PrivacyOptions.jsx @@ -1,15 +1,11 @@ import variables from 'config/variables'; import { MdOutlineOpenInNew } from 'react-icons/md'; import { Checkbox } from 'components/Form/Settings'; -import { Header } from '../components/Layout'; +import { Header, Content } from '../components/Layout'; -function PrivacyOptions() { +function OfflineMode() { return ( <> -
{variables.getMessage('modals.welcome.sections.privacy.offline_mode_description')} + + ); +} + +function DuckDuckGoProxy() { + return ( + <> {variables.getMessage('modals.welcome.sections.privacy.ddg_proxy_description')} + + ); +} + +function Links() { + return ( + <> {variables.getMessage('modals.welcome.sections.privacy.links.title')} @@ -45,7 +50,7 @@ function PrivacyOptions() { @@ -56,4 +61,18 @@ function PrivacyOptions() { ); } -export { PrivacyOptions as default, PrivacyOptions }; +function PrivacyOptions() { + return ( + +
+ + + + + ); +} + +export { PrivacyOptions as default, PrivacyOptions }; \ No newline at end of file diff --git a/src/features/modals/welcome/Sections/StyleSelection.jsx b/src/features/modals/welcome/Sections/StyleSelection.jsx index ae267508..6a863c0e 100644 --- a/src/features/modals/welcome/Sections/StyleSelection.jsx +++ b/src/features/modals/welcome/Sections/StyleSelection.jsx @@ -1,41 +1,53 @@ import variables from 'config/variables'; import { MdArchive, MdOutlineWhatshot } from 'react-icons/md'; import { useState } from 'react'; -import { Header } from '../components/Layout'; +import { Header, Content } from '../components/Layout'; -function StyleSelection() { - const widgetStyle = localStorage.getItem('widgetStyle'); - const [style, setStyle] = useState({ - newStyle: widgetStyle === 'legacy' ? 'toggle newStyle' : 'toggle newStyle active', - legacyStyle: widgetStyle === 'legacy' ? 'toggle legacyStyle active' : 'toggle legacyStyle', - }); - - const changeStyle = (type) => { - setStyle({ - newStyle: type === 'new' ? 'toggle newStyle active' : 'toggle newStyle', - legacyStyle: type === 'legacy' ? 'toggle legacyStyle active' : 'toggle legacyStyle', - }); - - localStorage.setItem('widgetStyle', type); - }; +const STYLES = { + NEW: 'new', + LEGACY: 'legacy', +}; - return ( - <> -
-
-
-
changeStyle('legacy')}> - - {variables.getMessage('modals.welcome.sections.style.legacy')} +const StyleSelection = () => { + const widgetStyle = localStorage.getItem('widgetStyle') || STYLES.NEW; + const [style, setStyle] = useState(widgetStyle); + + const changeStyle = (type) => { + setStyle(type); + localStorage.setItem('widgetStyle', type); + }; + + const styleMapping = { + [STYLES.LEGACY]: { + className: style === STYLES.LEGACY ? 'toggle legacyStyle active' : 'toggle legacyStyle', + icon: , + text: variables.getMessage('modals.welcome.sections.style.legacy'), + }, + [STYLES.NEW]: { + className: style === STYLES.NEW ? 'toggle newStyle active' : 'toggle newStyle', + icon: , + text: variables.getMessage('modals.welcome.sections.style.modern'), + }, + }; + + return ( + +
+
+
+ {Object.entries(styleMapping).map(([type, { className, icon, text }]) => ( +
changeStyle(type)} key={type}> + {icon} + {text}
-
changeStyle('new')}> - - {variables.getMessage('modals.welcome.sections.style.modern')} -
-
+ ))}
- - ) -} +
+ + ); +}; export { StyleSelection as default, StyleSelection }; \ No newline at end of file diff --git a/src/features/modals/welcome/Sections/ThemeSelection.jsx b/src/features/modals/welcome/Sections/ThemeSelection.jsx index 2cae0508..48b00d0a 100644 --- a/src/features/modals/welcome/Sections/ThemeSelection.jsx +++ b/src/features/modals/welcome/Sections/ThemeSelection.jsx @@ -2,55 +2,69 @@ import variables from 'config/variables'; import { useState } from 'react'; import { MdAutoAwesome, MdLightMode, MdDarkMode } from 'react-icons/md'; import { loadSettings } from 'utils/settings'; -import { Header } from '../components/Layout'; +import { Header, Content } from '../components/Layout'; + +const THEMES = { + AUTO: 'auto', + LIGHT: 'light', + DARK: 'dark', +}; function ThemeSelection() { - const [theme, setTheme] = useState({ - autoClass: 'toggle auto active', - lightClass: 'toggle lightTheme', - darkClass: 'toggle darkTheme', - }); + const currentTheme = localStorage.getItem('theme') || THEMES.AUTO; + const [theme, setTheme] = useState(currentTheme); + const changeTheme = (type) => { - setTheme({ - autoClass: type === 'auto' ? 'toggle auto active' : 'toggle auto', - lightClass: type === 'light' ? 'toggle lightTheme active' : 'toggle lightTheme', - darkClass: type === 'dark' ? 'toggle darkTheme active' : 'toggle darkTheme', - }); - + setTheme(type); localStorage.setItem('theme', type); loadSettings(true); }; + + const themeMapping = { + [THEMES.AUTO]: { + className: theme === THEMES.AUTO ? 'toggle auto active' : 'toggle auto', + icon: , + text: variables.getMessage('modals.main.settings.sections.appearance.theme.auto'), + }, + [THEMES.LIGHT]: { + className: theme === THEMES.LIGHT ? 'toggle lightTheme active' : 'toggle lightTheme', + icon: , + text: variables.getMessage('modals.main.settings.sections.appearance.theme.light'), + }, + [THEMES.DARK]: { + className: theme === THEMES.DARK ? 'toggle darkTheme active' : 'toggle darkTheme', + icon: , + text: variables.getMessage('modals.main.settings.sections.appearance.theme.dark'), + }, + }; + return ( - <> +
-
changeTheme('auto')}> - - {variables.getMessage('modals.main.settings.sections.appearance.theme.auto')} +
changeTheme(THEMES.AUTO)}> + {themeMapping[THEMES.AUTO].icon} + {themeMapping[THEMES.AUTO].text}
-
changeTheme('light')}> - - - {variables.getMessage('modals.main.settings.sections.appearance.theme.light')} - -
-
changeTheme('dark')}> - - - {variables.getMessage('modals.main.settings.sections.appearance.theme.dark')} - -
+ {Object.entries(themeMapping) + .filter(([type]) => type !== THEMES.AUTO) + .map(([type, { className, icon, text }]) => ( +
changeTheme(type)} key={type}> + {icon} + {text} +
+ ))}
{variables.getMessage('modals.welcome.tip')} {variables.getMessage('modals.welcome.sections.theme.tip')} - + ); } -export { ThemeSelection as default, ThemeSelection }; +export { ThemeSelection as default, ThemeSelection }; \ No newline at end of file diff --git a/src/features/modals/welcome/Welcome.jsx b/src/features/modals/welcome/Welcome.jsx index 0ba3a1e4..0b9b0cf0 100644 --- a/src/features/modals/welcome/Welcome.jsx +++ b/src/features/modals/welcome/Welcome.jsx @@ -37,7 +37,6 @@ class WelcomeModal extends PureComponent { if (minus) { return this.setState({ currentTab: this.state.currentTab - 1, - image: this.images[this.state.currentTab - 1], buttonText: variables.getMessage('modals.welcome.buttons.next'), }); } @@ -48,7 +47,7 @@ class WelcomeModal extends PureComponent { this.setState({ currentTab: this.state.currentTab + 1, - image: this.images[this.state.currentTab + 1], + image: [this.state.currentTab + 1], buttonText: this.state.currentTab !== this.state.finalTab ? variables.getMessage('modals.welcome.buttons.next') @@ -60,7 +59,6 @@ class WelcomeModal extends PureComponent { switchTab(tab) { this.setState({ currentTab: tab, - image: this.images[tab], buttonText: tab !== this.state.finalTab + 1 ? variables.getMessage('modals.welcome.buttons.next') @@ -76,7 +74,6 @@ class WelcomeModal extends PureComponent { if (welcomeTab) { this.setState({ currentTab: Number(welcomeTab), - image: this.images[Number(welcomeTab)], buttonText: Number(welcomeTab) !== this.state.finalTab + 1 ? variables.getMessage('modals.welcome.buttons.next') @@ -97,6 +94,38 @@ class WelcomeModal extends PureComponent { EventBus.off('refresh'); } + renderButtons() { + const { currentTab, buttonText } = this.state; + const { modalSkip } = this.props; + + return ( +
+ {currentTab !== 0 ? ( +
+ ); + } + render() { const tabComponents = { 0: , @@ -114,37 +143,14 @@ class WelcomeModal extends PureComponent { this.switchTab(tab)} /> {CurrentSection} -
- {this.state.currentTab !== 0 ? ( -
+ {this.renderButtons()} ); diff --git a/src/features/modals/welcome/components/Elements/ProgressBar/ProgressBar.jsx b/src/features/modals/welcome/components/Elements/ProgressBar/ProgressBar.jsx index a6d310d7..acd12b64 100644 --- a/src/features/modals/welcome/components/Elements/ProgressBar/ProgressBar.jsx +++ b/src/features/modals/welcome/components/Elements/ProgressBar/ProgressBar.jsx @@ -1,22 +1,26 @@ import { memo } from 'react'; -function ProgressBar({ count, currentTab, switchTab }) { +const Step = memo(({ isActive, index, onClick }) => { + const className = isActive ? 'step active' : 'step'; + + return ( +
+ {index + 1} +
+ ); +}); + +function ProgressBar({ numberOfTabs, currentTab, switchTab }) { return (
- {count.map((num) => { - let className = 'step'; - - const index = count.indexOf(num); - if (index === currentTab) { - className = 'step active'; - } - - return ( -
switchTab(index)}> - {index + 1} -
- ); - })} + {Array.from({ length: numberOfTabs }, (_, index) => ( + switchTab(index)} + /> + ))}
); } diff --git a/src/features/modals/welcome/components/Layout/Content.jsx b/src/features/modals/welcome/components/Layout/Content.jsx new file mode 100644 index 00000000..3e8d0410 --- /dev/null +++ b/src/features/modals/welcome/components/Layout/Content.jsx @@ -0,0 +1,7 @@ +const Content = ({ children }) => { + return ( +
{children}
+ ) +} + +export { Content as default, Content }; \ No newline at end of file diff --git a/src/features/modals/welcome/components/Layout/Panel.jsx b/src/features/modals/welcome/components/Layout/Panel.jsx index 2f988954..6f67ab9f 100644 --- a/src/features/modals/welcome/components/Layout/Panel.jsx +++ b/src/features/modals/welcome/components/Layout/Panel.jsx @@ -1,12 +1,6 @@ const Panel = ({ children, type }) => (
- {type === 'content' ? ( -
{children}
- ) : type === 'aside' ? ( - <>{children} - ) : ( - children - )} + {children}
); diff --git a/src/features/modals/welcome/components/Layout/index.jsx b/src/features/modals/welcome/components/Layout/index.jsx index 3acb6361..9f455392 100644 --- a/src/features/modals/welcome/components/Layout/index.jsx +++ b/src/features/modals/welcome/components/Layout/index.jsx @@ -1,3 +1,4 @@ export * from './Wrapper'; export * from './Panel'; -export * from './Header'; \ No newline at end of file +export * from './Header'; +export * from './Content'; \ No newline at end of file diff --git a/src/features/modals/welcome/welcome.scss b/src/features/modals/welcome/welcome.scss index df3857e9..796c9116 100644 --- a/src/features/modals/welcome/welcome.scss +++ b/src/features/modals/welcome/welcome.scss @@ -89,6 +89,16 @@ } .themesToggleArea { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto auto; + div:nth-child(1) { + grid-column: span 1 / span 1 !important; + } + div:nth-child(2), + div:nth-child(3) { + grid-column: span 1 / span 1 !important; + } @include themed { .active { background: t($modal-sidebarActive); @@ -199,6 +209,7 @@ a.privacy { flex-flow: column; .shareYourMue { + width: -moz-fit-content; width: fit-content; } @@ -305,6 +316,7 @@ a.privacy { .welcomeButtons { z-index: 999; + -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); position: sticky; bottom: 0;