summaryrefslogtreecommitdiffstats
path: root/src/components/Settings
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Settings')
-rw-r--r--src/components/Settings/AckeeSelect/AckeeSelect.module.scss6
-rw-r--r--src/components/Settings/AckeeSelect/AckeeSelect.tsx96
-rw-r--r--src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx50
-rw-r--r--src/components/Settings/ReduceMotion/ReduceMotion.tsx48
-rw-r--r--src/components/Settings/Settings.module.scss17
-rw-r--r--src/components/Settings/Settings.tsx30
-rw-r--r--src/components/Settings/ThemeToggle/ThemeToggle.tsx41
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;