diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-04-29 12:13:34 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-04-29 18:30:05 +0200 |
| commit | 7e16f500cb7bc0cfd8bafbf6bb1555704f771231 (patch) | |
| tree | bfc2b4a475cb06a787e2c4bdf284165644e82952 /src/components/Settings | |
| parent | 5324664e87bedfaa01ba62c0c847ef5b861e69b3 (diff) | |
chore: remove old pages, components, helpers and types
Since I'm using new components, I will also rewrite the GraphQL queries
so it is easier to start from scratch.
Diffstat (limited to 'src/components/Settings')
| -rw-r--r-- | src/components/Settings/AckeeSelect/AckeeSelect.module.scss | 6 | ||||
| -rw-r--r-- | src/components/Settings/AckeeSelect/AckeeSelect.tsx | 96 | ||||
| -rw-r--r-- | src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx | 50 | ||||
| -rw-r--r-- | src/components/Settings/ReduceMotion/ReduceMotion.tsx | 48 | ||||
| -rw-r--r-- | src/components/Settings/Settings.module.scss | 17 | ||||
| -rw-r--r-- | src/components/Settings/Settings.tsx | 30 | ||||
| -rw-r--r-- | src/components/Settings/ThemeToggle/ThemeToggle.tsx | 41 |
7 files changed, 0 insertions, 288 deletions
diff --git a/src/components/Settings/AckeeSelect/AckeeSelect.module.scss b/src/components/Settings/AckeeSelect/AckeeSelect.module.scss deleted file mode 100644 index b145761..0000000 --- a/src/components/Settings/AckeeSelect/AckeeSelect.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -.wrapper { - display: flex; - flex-flow: row wrap; - align-items: center; - gap: var(--spacing-xs); -} diff --git a/src/components/Settings/AckeeSelect/AckeeSelect.tsx b/src/components/Settings/AckeeSelect/AckeeSelect.tsx deleted file mode 100644 index f711fe2..0000000 --- a/src/components/Settings/AckeeSelect/AckeeSelect.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { Field, Label } from '@components/FormElements'; -import Tooltip from '@components/Tooltip/Tooltip'; -import { LocalStorage } from '@services/local-storage'; -import { useAckeeTracker } from '@utils/providers/ackee'; -import { useEffect, useState } from 'react'; -import { useIntl } from 'react-intl'; -import styles from './AckeeSelect.module.scss'; - -const AckeeSelect = () => { - const intl = useIntl(); - const options = [ - { - id: 'partial', - name: intl.formatMessage({ - defaultMessage: 'Partial', - description: 'AckeeSelect: partial option name', - id: 'e/8Kyj', - }), - value: 'partial', - }, - { - id: 'full', - name: intl.formatMessage({ - defaultMessage: 'Full', - description: 'AckeeSelect: full option name', - id: 'PzRpPw', - }), - value: 'full', - }, - ]; - const [value, setValue] = useState<string>('full'); - const { setDetailed } = useAckeeTracker(); - - useEffect(() => { - setDetailed(value === 'full'); - }, [setDetailed, value]); - - useEffect(() => { - const initialState = LocalStorage.get('ackee-tracking'); - if (initialState) setValue(initialState); - }, []); - - useEffect(() => { - LocalStorage.set('ackee-tracking', `${value}`); - }, [value]); - - const label = ( - <Label - body={intl.formatMessage({ - defaultMessage: 'Tracking:', - description: 'AckeeSelect: select label', - id: '2pmylc', - })} - htmlFor="ackee-settings" - kind="settings" - /> - ); - - const message = [ - intl.formatMessage({ - defaultMessage: 'Partial includes only page url, views and duration.', - description: 'AckeeSelect: tooltip message', - id: 'skb4W5', - }), - intl.formatMessage({ - defaultMessage: - 'Full includes all information from partial as well as information about referrer, operating system, device, browser, screen size and language.', - description: 'AckeeSelect: tooltip message', - id: 'Ogccx6', - }), - ]; - - return ( - <div className={styles.wrapper}> - <Field - id="ackee-settings" - name="ackee-settings" - kind="select" - label={label} - options={options} - value={value} - setValue={setValue} - /> - <Tooltip - message={message} - title={intl.formatMessage({ - defaultMessage: 'Ackee tracking (analytics)', - description: 'AckeeSelect: tooltip title', - id: 'F1EQX3', - })} - /> - </div> - ); -}; - -export default AckeeSelect; diff --git a/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx b/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx deleted file mode 100644 index 20ad267..0000000 --- a/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { Toggle } from '@components/FormElements'; -import { MoonIcon, SunIcon } from '@components/Icons'; -import Spinner from '@components/Spinner/Spinner'; -import { usePrismTheme } from '@utils/providers/prism-theme'; -import { useEffect, useState } from 'react'; -import { useIntl } from 'react-intl'; - -const PrismThemeToggle = () => { - const intl = useIntl(); - const [isMounted, setIsMounted] = useState<boolean>(false); - - useEffect(() => { - setIsMounted(true); - }, []); - - const { theme, setTheme, resolvedTheme } = usePrismTheme(); - const [isDarkTheme, setIsDarkTheme] = useState<boolean>(theme === 'dark'); - - useEffect(() => { - if (theme === 'system') { - setIsDarkTheme(resolvedTheme === 'dark'); - } else { - setIsDarkTheme(theme === 'dark'); - } - }, [theme, resolvedTheme]); - - const updateTheme = () => { - isDarkTheme ? setTheme('light') : setTheme('dark'); - setIsDarkTheme(!isDarkTheme); - }; - - if (!isMounted) return <Spinner />; - - return ( - <Toggle - id="prism-theme" - label={intl.formatMessage({ - defaultMessage: 'Code blocks:', - description: 'PrismThemeToggle: toggle label', - id: 'w0UfY0', - })} - leftChoice={<SunIcon />} - rightChoice={<MoonIcon />} - value={isDarkTheme} - changeHandler={updateTheme} - /> - ); -}; - -export default PrismThemeToggle; diff --git a/src/components/Settings/ReduceMotion/ReduceMotion.tsx b/src/components/Settings/ReduceMotion/ReduceMotion.tsx deleted file mode 100644 index 00562cd..0000000 --- a/src/components/Settings/ReduceMotion/ReduceMotion.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { Toggle } from '@components/FormElements'; -import { LocalStorage } from '@services/local-storage'; -import { useEffect, useState } from 'react'; -import { useIntl } from 'react-intl'; - -const ReduceMotion = () => { - const intl = useIntl(); - const [isDeactivated, setIsDeactivated] = useState<boolean>(false); - - useEffect(() => { - const initialState = LocalStorage.get('reduced-motion'); - if (initialState) setIsDeactivated(initialState === 'true' ? true : false); - }, []); - - useEffect(() => { - document.documentElement.dataset.reducedMotion = `${isDeactivated}`; - LocalStorage.set('reduced-motion', `${isDeactivated}`); - }, [isDeactivated]); - - const updateState = () => { - setIsDeactivated(!isDeactivated); - }; - - return ( - <Toggle - id="reduced-motion" - label={intl.formatMessage({ - defaultMessage: 'Animations:', - description: 'ReduceMotion: toggle label', - id: 'X3PDXO', - })} - leftChoice={intl.formatMessage({ - defaultMessage: 'On', - description: 'ReduceMotion: toggle on label', - id: 'qPU/Qn', - })} - rightChoice={intl.formatMessage({ - defaultMessage: 'Off', - description: 'ReduceMotion: toggle off label', - id: 'w1nIrj', - })} - value={isDeactivated} - changeHandler={updateState} - /> - ); -}; - -export default ReduceMotion; diff --git a/src/components/Settings/Settings.module.scss b/src/components/Settings/Settings.module.scss deleted file mode 100644 index fe6b17b..0000000 --- a/src/components/Settings/Settings.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use "@styles/abstracts/functions" as fun; - -.title { - --icon-size: #{fun.convert-px(30)}; - - display: flex; - flex-flow: row nowrap; - gap: var(--spacing-2xs); - margin-bottom: var(--spacing-md); - color: var(--color-primary-dark); - font-size: var(--font-size-lg); - font-weight: 600; - - svg { - margin: 0; - } -} diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx deleted file mode 100644 index fec4c45..0000000 --- a/src/components/Settings/Settings.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { CogIcon } from '@components/Icons'; -import ThemeToggle from '@components/Settings/ThemeToggle/ThemeToggle'; -import { useIntl } from 'react-intl'; -import AckeeSelect from './AckeeSelect/AckeeSelect'; -import PrismThemeToggle from './PrismThemeToggle/PrismThemeToggle'; -import ReduceMotion from './ReduceMotion/ReduceMotion'; -import styles from './Settings.module.scss'; - -const Settings = () => { - const intl = useIntl(); - - return ( - <> - <div className={styles.title}> - <CogIcon />{' '} - {intl.formatMessage({ - defaultMessage: 'Settings', - description: 'Settings: modal title', - id: 'bHEmkY', - })} - </div> - <ThemeToggle /> - <ReduceMotion /> - <PrismThemeToggle /> - <AckeeSelect /> - </> - ); -}; - -export default Settings; diff --git a/src/components/Settings/ThemeToggle/ThemeToggle.tsx b/src/components/Settings/ThemeToggle/ThemeToggle.tsx deleted file mode 100644 index ec2cee1..0000000 --- a/src/components/Settings/ThemeToggle/ThemeToggle.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { Toggle } from '@components/FormElements'; -import { MoonIcon, SunIcon } from '@components/Icons'; -import Spinner from '@components/Spinner/Spinner'; -import { useTheme } from 'next-themes'; -import { useEffect, useState } from 'react'; -import { useIntl } from 'react-intl'; - -const ThemeToggle = () => { - const intl = useIntl(); - const [isMounted, setIsMounted] = useState<boolean>(false); - const { resolvedTheme, setTheme } = useTheme(); - - useEffect(() => { - setIsMounted(true); - }, []); - - if (!isMounted) return <Spinner />; - - const isDarkTheme = resolvedTheme === 'dark'; - - const updateTheme = () => { - setTheme(isDarkTheme ? 'light' : 'dark'); - }; - - return ( - <Toggle - id="dark-theme" - label={intl.formatMessage({ - defaultMessage: 'Theme:', - description: 'ThemeToggle: toggle label', - id: 'O9XLDc', - })} - leftChoice={<SunIcon />} - rightChoice={<MoonIcon />} - value={isDarkTheme} - changeHandler={updateTheme} - /> - ); -}; - -export default ThemeToggle; |
