diff --git a/src/components/SettingsModal/Appearance/index.tsx b/src/components/SettingsModal/Appearance/index.tsx deleted file mode 100644 index 47e51d337..000000000 --- a/src/components/SettingsModal/Appearance/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import styled from 'styled-components' -import { GraphViewControl } from '~/components/App/ActionsToolbar/GraphViewControl' -import { Button } from '~/components/Button' -import { Flex } from '~/components/common/Flex' -import { Text } from '~/components/common/Text' - -export const Appearance = () => ( - - Default graph view: - - - - - -) - -const Wrapper = styled(Flex)` - display: flex; - gap: 10px; - padding: 36px; -` - -const StyledText = styled(Text)` - font-family: Barlow; - font-size: 13px; - font-weight: 400; -` diff --git a/src/components/SettingsModal/SettingsView/Appearance/index.tsx b/src/components/SettingsModal/SettingsView/Appearance/index.tsx new file mode 100644 index 000000000..ffad9b741 --- /dev/null +++ b/src/components/SettingsModal/SettingsView/Appearance/index.tsx @@ -0,0 +1,44 @@ +import { FC } from 'react' +import styled from 'styled-components' +import { GraphViewControl } from '~/components/App/ActionsToolbar/GraphViewControl' +import { Button } from '~/components/Button' +import { Flex } from '~/components/common/Flex' +import { Text } from '~/components/common/Text' +import { useDataStore } from '~/stores/useDataStore' + +type Props = { + onClose: () => void +} + +export const Appearance: FC = ({ onClose }) => { + const [graphStyle] = useDataStore((s) => [s.graphStyle]) + + const handleSave = () => { + localStorage.setItem('graphStyle', graphStyle) + onClose() + } + + return ( + + Default graph view: + + + + + + ) +} + +const Wrapper = styled(Flex)` + display: flex; + gap: 10px; + padding: 36px; +` + +const StyledText = styled(Text)` + font-family: Barlow; + font-size: 13px; + font-weight: 400; +` diff --git a/src/components/SettingsModal/General/index.tsx b/src/components/SettingsModal/SettingsView/General/index.tsx similarity index 100% rename from src/components/SettingsModal/General/index.tsx rename to src/components/SettingsModal/SettingsView/General/index.tsx diff --git a/src/components/SettingsModal/SourceView/index.tsx b/src/components/SettingsModal/SettingsView/index.tsx similarity index 95% rename from src/components/SettingsModal/SourceView/index.tsx rename to src/components/SettingsModal/SettingsView/index.tsx index 5b74d40db..5741c1188 100644 --- a/src/components/SettingsModal/SourceView/index.tsx +++ b/src/components/SettingsModal/SettingsView/index.tsx @@ -11,8 +11,8 @@ import { TAboutParams, getAboutData } from '~/network/fetchSourcesData' import { useUserStore } from '~/stores/useUserStore' import { colors } from '~/utils/colors' import { executeIfProd } from '~/utils/tests' -import { Appearance } from '../Appearance' -import { General } from '../General' +import { Appearance } from './Appearance' +import { General } from './General' interface TabPanelProps { children?: React.ReactNode @@ -58,7 +58,11 @@ function a11yProps(index: number) { } } -export const SourcesView = () => { +type Props = { + onClose: () => void +} + +export const SettingsView: React.FC = ({ onClose }) => { const [value, setValue] = useState(0) const [setIsAdmin, isAdmin, setPubKey, pubKey] = useUserStore((s) => [s.setIsAdmin, s.isAdmin, s.setPubKey, s.pubKey]) const [loading, setLoading] = useState(false) @@ -148,7 +152,7 @@ export const SourcesView = () => { )} - + ) diff --git a/src/components/SettingsModal/index.tsx b/src/components/SettingsModal/index.tsx index 4e7720a04..d40f862d9 100644 --- a/src/components/SettingsModal/index.tsx +++ b/src/components/SettingsModal/index.tsx @@ -1,13 +1,13 @@ import { BaseModal } from '~/components/Modal' import { useModal } from '~/stores/useModalStore' -import { SourcesView } from './SourceView' +import { SettingsView } from './SettingsView' export const SettingsModal = () => { const { close } = useModal('settings') return ( - + ) } diff --git a/src/stores/useDataStore/index.ts b/src/stores/useDataStore/index.ts index 36d35a2c4..c09fde312 100644 --- a/src/stores/useDataStore/index.ts +++ b/src/stores/useDataStore/index.ts @@ -90,7 +90,7 @@ const defaultData: Omit< scrollEventsDisabled: false, disableCameraRotation: false, graphRadius: isChileGraph ? 1600 : 3056, // calculated from initial load - graphStyle: 'split', + graphStyle: (localStorage.getItem('graphStyle') as GraphStyle) || 'split', isFetching: false, isTimestampLoaded: false, queuedSources: null,