From 4d45805bce634a6fa14ec0ba3ff377c093df549e Mon Sep 17 00:00:00 2001 From: Manuel Ruwe Date: Tue, 6 Dec 2022 21:22:37 +0100 Subject: [PATCH] feat: improved structure of settings --- data/constants.ts | 2 +- .../Settings/{ => Common}/CommonSettings.tsx | 12 ++-- .../Common/{ => Config}/ConfigActions.tsx | 71 +++++++++++-------- .../CreateCopyModal.tsx | 0 .../Settings/{ => Common}/Credits.tsx | 2 +- .../Common/{ => Language}/LanguageSelect.tsx | 2 +- .../SearchEngineSelector.tsx | 7 +- .../{ => SearchEngine}/SearchNewTabSwitch.tsx | 6 +- .../CustomizationSettings.tsx | 22 +++--- .../{ => Layout}/LayoutSelector.tsx | 8 +-- .../{ => Meta}/BackgroundChanger.tsx | 6 +- .../{ => Meta}/FaviconChanger.tsx | 6 +- .../{ => Meta}/LogoImageChanger.tsx | 6 +- .../{ => Meta}/MetaTitleChanger.tsx | 6 +- .../{ => Meta}/PageTitleChanger.tsx | 6 +- .../{ => Theme}/ColorSelector.tsx | 12 ++-- .../{ => Theme}/CustomCssChanger.tsx | 6 +- .../{ => Theme}/OpacitySelector.tsx | 8 +-- .../{ => Theme}/ShadeSelector.tsx | 16 ++--- src/components/Settings/SettingsDrawer.tsx | 6 +- 20 files changed, 111 insertions(+), 99 deletions(-) rename src/components/Settings/{ => Common}/CommonSettings.tsx (57%) rename src/components/Settings/Common/{ => Config}/ConfigActions.tsx (61%) rename src/components/Settings/Common/{ConfigActions => Config}/CreateCopyModal.tsx (100%) rename src/components/Settings/{ => Common}/Credits.tsx (95%) rename src/components/Settings/Common/{ => Language}/LanguageSelect.tsx (97%) rename src/components/Settings/Common/{ => SearchEngine}/SearchEngineSelector.tsx (95%) rename src/components/Settings/Common/{ => SearchEngine}/SearchNewTabSwitch.tsx (86%) rename src/components/Settings/{ => Customization}/CustomizationSettings.tsx (61%) rename src/components/Settings/Customization/{ => Layout}/LayoutSelector.tsx (95%) rename src/components/Settings/Customization/{ => Meta}/BackgroundChanger.tsx (88%) rename src/components/Settings/Customization/{ => Meta}/FaviconChanger.tsx (87%) rename src/components/Settings/Customization/{ => Meta}/LogoImageChanger.tsx (87%) rename src/components/Settings/Customization/{ => Meta}/MetaTitleChanger.tsx (87%) rename src/components/Settings/Customization/{ => Meta}/PageTitleChanger.tsx (87%) rename src/components/Settings/Customization/{ => Theme}/ColorSelector.tsx (90%) rename src/components/Settings/Customization/{ => Theme}/CustomCssChanger.tsx (87%) rename src/components/Settings/Customization/{ => Theme}/OpacitySelector.tsx (86%) rename src/components/Settings/Customization/{ => Theme}/ShadeSelector.tsx (92%) diff --git a/data/constants.ts b/data/constants.ts index 1db7f949d..2dfb47db2 100644 --- a/data/constants.ts +++ b/data/constants.ts @@ -1,3 +1,3 @@ export const REPO_URL = 'ajnart/homarr'; -export const CURRENT_VERSION = 'v0.10.7'; +export const CURRENT_VERSION = 'v0.11'; export const ICON_PICKER_SLICE_LIMIT = 36; diff --git a/src/components/Settings/CommonSettings.tsx b/src/components/Settings/Common/CommonSettings.tsx similarity index 57% rename from src/components/Settings/CommonSettings.tsx rename to src/components/Settings/Common/CommonSettings.tsx index cdbef53f7..8923c3498 100644 --- a/src/components/Settings/CommonSettings.tsx +++ b/src/components/Settings/Common/CommonSettings.tsx @@ -1,10 +1,10 @@ import { Space, Stack, Text } from '@mantine/core'; -import { useConfigContext } from '../../config/provider'; -import ConfigChanger from '../Config/ConfigChanger'; -import ConfigActions from './Common/ConfigActions'; -import LanguageSelect from './Common/LanguageSelect'; -import { SearchEngineSelector } from './Common/SearchEngineSelector'; -import { SearchNewTabSwitch } from './Common/SearchNewTabSwitch'; +import { useConfigContext } from '../../../config/provider'; +import ConfigChanger from '../../Config/ConfigChanger'; +import ConfigActions from './Config/ConfigActions'; +import LanguageSelect from './Language/LanguageSelect'; +import { SearchEngineSelector } from './SearchEngine/SearchEngineSelector'; +import { SearchNewTabSwitch } from './SearchNewTabSwitch'; export default function CommonSettings() { const { config } = useConfigContext(); diff --git a/src/components/Settings/Common/ConfigActions.tsx b/src/components/Settings/Common/Config/ConfigActions.tsx similarity index 61% rename from src/components/Settings/Common/ConfigActions.tsx rename to src/components/Settings/Common/Config/ConfigActions.tsx index f8645efaf..b045ff030 100644 --- a/src/components/Settings/Common/ConfigActions.tsx +++ b/src/components/Settings/Common/Config/ConfigActions.tsx @@ -1,13 +1,13 @@ -import { Button, Center, Group } from '@mantine/core'; +import { ActionIcon, Center, createStyles, Flex, Text, useMantineTheme } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; import { showNotification } from '@mantine/notifications'; -import { IconCheck, IconDownload, IconPlus, IconTrash, IconX } from '@tabler/icons'; +import { IconCheck, IconCopy, IconDownload, IconTrash, IconX } from '@tabler/icons'; import { useMutation } from '@tanstack/react-query'; import fileDownload from 'js-file-download'; import { useTranslation } from 'next-i18next'; -import { useConfigContext } from '../../../config/provider'; -import Tip from '../../layout/Tip'; -import { CreateConfigCopyModal } from './ConfigActions/CreateCopyModal'; +import { useConfigContext } from '../../../../config/provider'; +import Tip from '../../../layout/Tip'; +import { CreateConfigCopyModal } from './CreateCopyModal'; export default function ConfigActions() { const { t } = useTranslation(['settings/general/config-changer', 'settings/common']); @@ -26,6 +26,9 @@ export default function ConfigActions() { await mutateAsync(); }; + const { classes } = useStyles(); + const { colors } = useMantineTheme(); + return ( <> - - - - - + + {t('buttons.delete.text')} + + + + {t('buttons.saveCopy')} + +
{t('settings/common:tips.configTip')} @@ -67,6 +63,23 @@ export default function ConfigActions() { ); } +const useStyles = createStyles(() => ({ + actionIcon: { + width: 'auto', + height: 'auto', + maxWidth: 'auto', + maxHeight: 'auto', + flexGrow: 1, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + textAlign: 'center', + rowGap: 10, + padding: 10, + }, +})); + const useDeleteConfigMutation = (configName: string) => { const { t } = useTranslation(['settings/general/config-changer']); diff --git a/src/components/Settings/Common/ConfigActions/CreateCopyModal.tsx b/src/components/Settings/Common/Config/CreateCopyModal.tsx similarity index 100% rename from src/components/Settings/Common/ConfigActions/CreateCopyModal.tsx rename to src/components/Settings/Common/Config/CreateCopyModal.tsx diff --git a/src/components/Settings/Credits.tsx b/src/components/Settings/Common/Credits.tsx similarity index 95% rename from src/components/Settings/Credits.tsx rename to src/components/Settings/Common/Credits.tsx index 6b935efc7..677f283e3 100644 --- a/src/components/Settings/Credits.tsx +++ b/src/components/Settings/Common/Credits.tsx @@ -2,7 +2,7 @@ import { Group, ActionIcon, Anchor, Text } from '@mantine/core'; import { IconBrandDiscord, IconBrandGithub } from '@tabler/icons'; import { useTranslation } from 'next-i18next'; -import { CURRENT_VERSION } from '../../../data/constants'; +import { CURRENT_VERSION } from '../../../../data/constants'; export default function Credits() { const { t } = useTranslation('settings/common'); diff --git a/src/components/Settings/Common/LanguageSelect.tsx b/src/components/Settings/Common/Language/LanguageSelect.tsx similarity index 97% rename from src/components/Settings/Common/LanguageSelect.tsx rename to src/components/Settings/Common/Language/LanguageSelect.tsx index f8a51334a..1d2d2be94 100644 --- a/src/components/Settings/Common/LanguageSelect.tsx +++ b/src/components/Settings/Common/Language/LanguageSelect.tsx @@ -5,7 +5,7 @@ import { forwardRef, useState } from 'react'; import { useTranslation } from 'next-i18next'; import { useRouter } from 'next/router'; import { getCookie, setCookie } from 'cookies-next'; -import { getLanguageByCode, Language } from '../../../tools/language'; +import { getLanguageByCode, Language } from '../../../../tools/language'; export default function LanguageSelect() { const { t, i18n } = useTranslation('settings/general/internationalization'); diff --git a/src/components/Settings/Common/SearchEngineSelector.tsx b/src/components/Settings/Common/SearchEngine/SearchEngineSelector.tsx similarity index 95% rename from src/components/Settings/Common/SearchEngineSelector.tsx rename to src/components/Settings/Common/SearchEngine/SearchEngineSelector.tsx index 5f25a1044..3e9fe1d4d 100644 --- a/src/components/Settings/Common/SearchEngineSelector.tsx +++ b/src/components/Settings/Common/SearchEngine/SearchEngineSelector.tsx @@ -2,13 +2,12 @@ import { Alert, Paper, SegmentedControl, Space, Stack, TextInput, Title } from ' import { IconInfoCircle } from '@tabler/icons'; import { useTranslation } from 'next-i18next'; import { ChangeEventHandler, useState } from 'react'; -import { useConfigContext } from '../../../config/provider'; -import { useConfigStore } from '../../../config/store'; +import { useConfigContext } from '../../../../config/provider'; +import { useConfigStore } from '../../../../config/store'; import { CommonSearchEngineCommonSettingsType, SearchEngineCommonSettingsType, -} from '../../../types/settings'; -import Tip from '../../layout/Tip'; +} from '../../../../types/settings'; import { SearchNewTabSwitch } from './SearchNewTabSwitch'; interface Props { diff --git a/src/components/Settings/Common/SearchNewTabSwitch.tsx b/src/components/Settings/Common/SearchEngine/SearchNewTabSwitch.tsx similarity index 86% rename from src/components/Settings/Common/SearchNewTabSwitch.tsx rename to src/components/Settings/Common/SearchEngine/SearchNewTabSwitch.tsx index a3d5cdc72..7391841cc 100644 --- a/src/components/Settings/Common/SearchNewTabSwitch.tsx +++ b/src/components/Settings/Common/SearchEngine/SearchNewTabSwitch.tsx @@ -1,9 +1,9 @@ import { Switch } from '@mantine/core'; import { useTranslation } from 'next-i18next'; import { useState } from 'react'; -import { useConfigContext } from '../../../config/provider'; -import { useConfigStore } from '../../../config/store'; -import { SearchEngineCommonSettingsType } from '../../../types/settings'; +import { useConfigContext } from '../../../../config/provider'; +import { useConfigStore } from '../../../../config/store'; +import { SearchEngineCommonSettingsType } from '../../../../types/settings'; interface SearchNewTabSwitchProps { defaultValue: boolean | undefined; diff --git a/src/components/Settings/CustomizationSettings.tsx b/src/components/Settings/Customization/CustomizationSettings.tsx similarity index 61% rename from src/components/Settings/CustomizationSettings.tsx rename to src/components/Settings/Customization/CustomizationSettings.tsx index aa553b0e1..585389291 100644 --- a/src/components/Settings/CustomizationSettings.tsx +++ b/src/components/Settings/Customization/CustomizationSettings.tsx @@ -1,15 +1,15 @@ import { Stack } from '@mantine/core'; -import { useConfigContext } from '../../config/provider'; -import { ColorSelector } from './Customization/ColorSelector'; -import { BackgroundChanger } from './Customization/BackgroundChanger'; -import { CustomCssChanger } from './Customization/CustomCssChanger'; -import { FaviconChanger } from './Customization/FaviconChanger'; -import { LogoImageChanger } from './Customization/LogoImageChanger'; -import { MetaTitleChanger } from './Customization/MetaTitleChanger'; -import { PageTitleChanger } from './Customization/PageTitleChanger'; -import { OpacitySelector } from './Customization/OpacitySelector'; -import { ShadeSelector } from './Customization/ShadeSelector'; -import { LayoutSelector } from './Customization/LayoutSelector'; +import { useConfigContext } from '../../../config/provider'; +import { ColorSelector } from './Theme/ColorSelector'; +import { BackgroundChanger } from './Meta/BackgroundChanger'; +import { CustomCssChanger } from './Theme/CustomCssChanger'; +import { FaviconChanger } from './Meta/FaviconChanger'; +import { LogoImageChanger } from './Meta/LogoImageChanger'; +import { MetaTitleChanger } from './Meta/MetaTitleChanger'; +import { PageTitleChanger } from './Meta/PageTitleChanger'; +import { OpacitySelector } from './Theme/OpacitySelector'; +import { ShadeSelector } from './Theme/ShadeSelector'; +import { LayoutSelector } from './Layout/LayoutSelector'; export default function CustomizationSettings() { const { config } = useConfigContext(); diff --git a/src/components/Settings/Customization/LayoutSelector.tsx b/src/components/Settings/Customization/Layout/LayoutSelector.tsx similarity index 95% rename from src/components/Settings/Customization/LayoutSelector.tsx rename to src/components/Settings/Customization/Layout/LayoutSelector.tsx index f1e072f89..594558d93 100644 --- a/src/components/Settings/Customization/LayoutSelector.tsx +++ b/src/components/Settings/Customization/Layout/LayoutSelector.tsx @@ -11,10 +11,10 @@ import { } from '@mantine/core'; import { IconBrandDocker, IconLayout, IconSearch } from '@tabler/icons'; import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react'; -import { useConfigContext } from '../../../config/provider'; -import { useConfigStore } from '../../../config/store'; -import { CustomizationSettingsType } from '../../../types/settings'; -import { Logo } from '../../layout/Logo'; +import { useConfigContext } from '../../../../config/provider'; +import { useConfigStore } from '../../../../config/store'; +import { CustomizationSettingsType } from '../../../../types/settings'; +import { Logo } from '../../../layout/Logo'; interface LayoutSelectorProps { defaultLayout: CustomizationSettingsType['layout'] | undefined; diff --git a/src/components/Settings/Customization/BackgroundChanger.tsx b/src/components/Settings/Customization/Meta/BackgroundChanger.tsx similarity index 88% rename from src/components/Settings/Customization/BackgroundChanger.tsx rename to src/components/Settings/Customization/Meta/BackgroundChanger.tsx index 2addf76d9..5c3efabd2 100644 --- a/src/components/Settings/Customization/BackgroundChanger.tsx +++ b/src/components/Settings/Customization/Meta/BackgroundChanger.tsx @@ -1,8 +1,8 @@ import { TextInput } from '@mantine/core'; import { useTranslation } from 'next-i18next'; import { ChangeEventHandler, useState } from 'react'; -import { useConfigContext } from '../../../config/provider'; -import { useConfigStore } from '../../../config/store'; +import { useConfigContext } from '../../../../config/provider'; +import { useConfigStore } from '../../../../config/store'; interface BackgroundChangerProps { defaultValue: string | undefined; @@ -17,7 +17,7 @@ export const BackgroundChanger = ({ defaultValue }: BackgroundChangerProps) => { if (!configName) return null; const handleChange: ChangeEventHandler = (ev) => { - const value = ev.currentTarget.value; + const { value } = ev.currentTarget; const backgroundImageUrl = value.trim().length === 0 ? undefined : value; setBackgroundImageUrl(backgroundImageUrl); updateConfig(configName, (prev) => ({ diff --git a/src/components/Settings/Customization/FaviconChanger.tsx b/src/components/Settings/Customization/Meta/FaviconChanger.tsx similarity index 87% rename from src/components/Settings/Customization/FaviconChanger.tsx rename to src/components/Settings/Customization/Meta/FaviconChanger.tsx index b99347959..7bb71f815 100644 --- a/src/components/Settings/Customization/FaviconChanger.tsx +++ b/src/components/Settings/Customization/Meta/FaviconChanger.tsx @@ -1,8 +1,8 @@ import { TextInput } from '@mantine/core'; import { useTranslation } from 'next-i18next'; import { ChangeEventHandler, useState } from 'react'; -import { useConfigContext } from '../../../config/provider'; -import { useConfigStore } from '../../../config/store'; +import { useConfigContext } from '../../../../config/provider'; +import { useConfigStore } from '../../../../config/store'; interface FaviconChangerProps { defaultValue: string | undefined; @@ -17,7 +17,7 @@ export const FaviconChanger = ({ defaultValue }: FaviconChangerProps) => { if (!configName) return null; const handleChange: ChangeEventHandler = (ev) => { - const value = ev.currentTarget.value; + const { value } = ev.currentTarget; const faviconUrl = value.trim().length === 0 ? undefined : value; setFaviconUrl(faviconUrl); updateConfig(configName, (prev) => ({ diff --git a/src/components/Settings/Customization/LogoImageChanger.tsx b/src/components/Settings/Customization/Meta/LogoImageChanger.tsx similarity index 87% rename from src/components/Settings/Customization/LogoImageChanger.tsx rename to src/components/Settings/Customization/Meta/LogoImageChanger.tsx index 3ab1db7fe..0f45de7d5 100644 --- a/src/components/Settings/Customization/LogoImageChanger.tsx +++ b/src/components/Settings/Customization/Meta/LogoImageChanger.tsx @@ -1,8 +1,8 @@ import { TextInput } from '@mantine/core'; import { useTranslation } from 'next-i18next'; import { ChangeEventHandler, useState } from 'react'; -import { useConfigContext } from '../../../config/provider'; -import { useConfigStore } from '../../../config/store'; +import { useConfigContext } from '../../../../config/provider'; +import { useConfigStore } from '../../../../config/store'; interface LogoImageChangerProps { defaultValue: string | undefined; @@ -17,7 +17,7 @@ export const LogoImageChanger = ({ defaultValue }: LogoImageChangerProps) => { if (!configName) return null; const handleChange: ChangeEventHandler = (ev) => { - const value = ev.currentTarget.value; + const { value } = ev.currentTarget; const logoImageSrc = value.trim().length === 0 ? undefined : value; setLogoImageSrc(logoImageSrc); updateConfig(configName, (prev) => ({ diff --git a/src/components/Settings/Customization/MetaTitleChanger.tsx b/src/components/Settings/Customization/Meta/MetaTitleChanger.tsx similarity index 87% rename from src/components/Settings/Customization/MetaTitleChanger.tsx rename to src/components/Settings/Customization/Meta/MetaTitleChanger.tsx index 79ef71f68..430eee07f 100644 --- a/src/components/Settings/Customization/MetaTitleChanger.tsx +++ b/src/components/Settings/Customization/Meta/MetaTitleChanger.tsx @@ -1,8 +1,8 @@ import { TextInput } from '@mantine/core'; import { useTranslation } from 'next-i18next'; import { ChangeEventHandler, useState } from 'react'; -import { useConfigContext } from '../../../config/provider'; -import { useConfigStore } from '../../../config/store'; +import { useConfigContext } from '../../../../config/provider'; +import { useConfigStore } from '../../../../config/store'; interface MetaTitleChangerProps { defaultValue: string | undefined; @@ -18,7 +18,7 @@ export const MetaTitleChanger = ({ defaultValue }: MetaTitleChangerProps) => { if (!configName) return null; const handleChange: ChangeEventHandler = (ev) => { - const value = ev.currentTarget.value; + const { value } = ev.currentTarget; const metaTitle = value.trim().length === 0 ? undefined : value; setMetaTitle(metaTitle); updateConfig(configName, (prev) => ({ diff --git a/src/components/Settings/Customization/PageTitleChanger.tsx b/src/components/Settings/Customization/Meta/PageTitleChanger.tsx similarity index 87% rename from src/components/Settings/Customization/PageTitleChanger.tsx rename to src/components/Settings/Customization/Meta/PageTitleChanger.tsx index d4145e645..65c9eed76 100644 --- a/src/components/Settings/Customization/PageTitleChanger.tsx +++ b/src/components/Settings/Customization/Meta/PageTitleChanger.tsx @@ -1,8 +1,8 @@ import { TextInput } from '@mantine/core'; import { useTranslation } from 'next-i18next'; import { ChangeEventHandler, useState } from 'react'; -import { useConfigContext } from '../../../config/provider'; -import { useConfigStore } from '../../../config/store'; +import { useConfigContext } from '../../../../config/provider'; +import { useConfigStore } from '../../../../config/store'; interface PageTitleChangerProps { defaultValue: string | undefined; @@ -18,7 +18,7 @@ export const PageTitleChanger = ({ defaultValue }: PageTitleChangerProps) => { if (!configName) return null; const handleChange: ChangeEventHandler = (ev) => { - const value = ev.currentTarget.value; + const { value } = ev.currentTarget; const pageTitle = value.trim().length === 0 ? undefined : value; setPageTitle(pageTitle); updateConfig(configName, (prev) => ({ diff --git a/src/components/Settings/Customization/ColorSelector.tsx b/src/components/Settings/Customization/Theme/ColorSelector.tsx similarity index 90% rename from src/components/Settings/Customization/ColorSelector.tsx rename to src/components/Settings/Customization/Theme/ColorSelector.tsx index 7e98969bc..053a7d386 100644 --- a/src/components/Settings/Customization/ColorSelector.tsx +++ b/src/components/Settings/Customization/Theme/ColorSelector.tsx @@ -1,4 +1,3 @@ -import React, { useState } from 'react'; import { ColorSwatch, Grid, @@ -8,11 +7,12 @@ import { Text, useMantineTheme, } from '@mantine/core'; -import { useTranslation } from 'next-i18next'; -import { useColorTheme } from '../../../tools/color'; import { useDisclosure } from '@mantine/hooks'; -import { useConfigStore } from '../../../config/store'; -import { useConfigContext } from '../../../config/provider'; +import { useTranslation } from 'next-i18next'; +import { useState } from 'react'; +import { useConfigContext } from '../../../../config/provider'; +import { useConfigStore } from '../../../../config/store'; +import { useColorTheme } from '../../../../tools/color'; interface ColorControlProps { defaultValue: MantineTheme['primaryColor'] | undefined; @@ -40,7 +40,7 @@ export function ColorSelector({ type, defaultValue }: ColorControlProps) { if (type === 'primary') setPrimaryColor(color); else setSecondaryColor(color); updateConfig(configName, (prev) => { - const colors = prev.settings.customization.colors; + const { colors } = prev.settings.customization; colors[type] = color; return { ...prev, diff --git a/src/components/Settings/Customization/CustomCssChanger.tsx b/src/components/Settings/Customization/Theme/CustomCssChanger.tsx similarity index 87% rename from src/components/Settings/Customization/CustomCssChanger.tsx rename to src/components/Settings/Customization/Theme/CustomCssChanger.tsx index 5a7393e34..5b8db8de1 100644 --- a/src/components/Settings/Customization/CustomCssChanger.tsx +++ b/src/components/Settings/Customization/Theme/CustomCssChanger.tsx @@ -1,8 +1,8 @@ import { Textarea } from '@mantine/core'; import { useTranslation } from 'next-i18next'; import { ChangeEventHandler, useState } from 'react'; -import { useConfigContext } from '../../../config/provider'; -import { useConfigStore } from '../../../config/store'; +import { useConfigContext } from '../../../../config/provider'; +import { useConfigStore } from '../../../../config/store'; interface CustomCssChangerProps { defaultValue: string | undefined; @@ -17,7 +17,7 @@ export const CustomCssChanger = ({ defaultValue }: CustomCssChangerProps) => { if (!configName) return null; const handleChange: ChangeEventHandler = (ev) => { - const value = ev.currentTarget.value; + const { value } = ev.currentTarget; const customCss = value.trim().length === 0 ? undefined : value; setCustomCss(customCss); updateConfig(configName, (prev) => ({ diff --git a/src/components/Settings/Customization/OpacitySelector.tsx b/src/components/Settings/Customization/Theme/OpacitySelector.tsx similarity index 86% rename from src/components/Settings/Customization/OpacitySelector.tsx rename to src/components/Settings/Customization/Theme/OpacitySelector.tsx index fc858aea0..cc7888af6 100644 --- a/src/components/Settings/Customization/OpacitySelector.tsx +++ b/src/components/Settings/Customization/Theme/OpacitySelector.tsx @@ -1,8 +1,8 @@ -import React, { useState } from 'react'; -import { Text, Slider, Stack } from '@mantine/core'; +import { Slider, Stack, Text } from '@mantine/core'; import { useTranslation } from 'next-i18next'; -import { useConfigContext } from '../../../config/provider'; -import { useConfigStore } from '../../../config/store'; +import { useState } from 'react'; +import { useConfigContext } from '../../../../config/provider'; +import { useConfigStore } from '../../../../config/store'; interface OpacitySelectorProps { defaultValue: number | undefined; diff --git a/src/components/Settings/Customization/ShadeSelector.tsx b/src/components/Settings/Customization/Theme/ShadeSelector.tsx similarity index 92% rename from src/components/Settings/Customization/ShadeSelector.tsx rename to src/components/Settings/Customization/Theme/ShadeSelector.tsx index 61e710517..5611581ae 100644 --- a/src/components/Settings/Customization/ShadeSelector.tsx +++ b/src/components/Settings/Customization/Theme/ShadeSelector.tsx @@ -1,19 +1,19 @@ -import React, { useState } from 'react'; import { ColorSwatch, + Grid, Group, + MantineTheme, Popover, + Stack, Text, useMantineTheme, - MantineTheme, - Stack, - Grid, } from '@mantine/core'; -import { useTranslation } from 'next-i18next'; -import { useColorTheme } from '../../../tools/color'; import { useDisclosure } from '@mantine/hooks'; -import { useConfigStore } from '../../../config/store'; -import { useConfigContext } from '../../../config/provider'; +import { useTranslation } from 'next-i18next'; +import { useState } from 'react'; +import { useConfigContext } from '../../../../config/provider'; +import { useConfigStore } from '../../../../config/store'; +import { useColorTheme } from '../../../../tools/color'; interface ShadeSelectorProps { defaultValue: MantineTheme['primaryShade'] | undefined; diff --git a/src/components/Settings/SettingsDrawer.tsx b/src/components/Settings/SettingsDrawer.tsx index b21c98da5..3fef9e2ef 100644 --- a/src/components/Settings/SettingsDrawer.tsx +++ b/src/components/Settings/SettingsDrawer.tsx @@ -4,9 +4,9 @@ import { useState } from 'react'; import { IconSettings } from '@tabler/icons'; import { useTranslation } from 'next-i18next'; -import CustomizationSettings from './CustomizationSettings'; -import CommonSettings from './CommonSettings'; -import Credits from './Credits'; +import CustomizationSettings from './Customization/CustomizationSettings'; +import CommonSettings from './Common/CommonSettings'; +import Credits from './Common/Credits'; function SettingsMenu() { const { t } = useTranslation('settings/common');