(
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+
+
+
+
+);
+
+ConnectivitySettings.propTypes = {
+ tempSettings: PropTypes.object.isRequired,
+ onChangeTempSettings: PropTypes.func.isRequired,
+ onSaveSettings: PropTypes.func.isRequired,
+ showConfirmModal: PropTypes.bool.isRequired,
+ onCancelConfirmModal: PropTypes.func.isRequired,
+ wrapperClassName: PropTypes.string
+};
+
+export default ConnectivitySettings;
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/ConnectivitySettings.module.css b/app/components/views/SettingsPage/ConnectivitySettingsTab/ConnectivitySettings.module.css
new file mode 100644
index 0000000000..c54a9f0fb1
--- /dev/null
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/ConnectivitySettings.module.css
@@ -0,0 +1,3 @@
+.subtitle {
+ width: initial;
+}
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/ConnectivitySettingsTab.jsx b/app/components/views/SettingsPage/ConnectivitySettingsTab/ConnectivitySettingsTab.jsx
new file mode 100644
index 0000000000..cb0005eaf8
--- /dev/null
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/ConnectivitySettingsTab.jsx
@@ -0,0 +1,55 @@
+import { useState, useEffect, useCallback } from "react";
+import ConnectivitySettings from "./ConnectivitySettings";
+import { useSettings } from "hooks";
+
+const ConnectivitySettingsTab = ({
+ wrapperClassName,
+ groupWrapperClassName
+}) => {
+ const {
+ tempSettings,
+ onSaveSettings,
+ onChangeTempSettings,
+ areSettingsDirty,
+ needNetworkReset,
+ resetSettingsState
+ } = useSettings();
+
+ const onSaveSettingsHandler = useCallback(() => {
+ setShowConfirmModal(false);
+ onSaveSettings && onSaveSettings(tempSettings);
+ }, [tempSettings, onSaveSettings]);
+
+ const [showConfirmModal, setShowConfirmModal] = useState(false);
+ useEffect(() => {
+ if (areSettingsDirty) {
+ if (needNetworkReset) {
+ setShowConfirmModal(true);
+ } else {
+ onSaveSettingsHandler();
+ }
+ }
+ }, [areSettingsDirty, needNetworkReset, onSaveSettingsHandler]);
+
+ const onCancelConfirmModal = () => {
+ setShowConfirmModal(false);
+ resetSettingsState();
+ };
+
+ return (
+
+ );
+ // );
+};
+
+export default ConnectivitySettingsTab;
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.jsx b/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.jsx
new file mode 100644
index 0000000000..fe8e6bcfde
--- /dev/null
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.jsx
@@ -0,0 +1,152 @@
+import { FormattedMessage as T } from "react-intl";
+import { Tooltip } from "pi-ui";
+import { SettingsInput, SettingsTextInput } from "inputs";
+import { TESTNET, MAINNET } from "constants";
+import styles from "./NetworkSettings.module.css";
+import { Box, Label } from "../../helpers";
+
+const SettingsInputWrapper = ({ isTooltipEnabled, children }) =>
+ isTooltipEnabled ? (
+
+ }
+ className={styles.tooltip}>
+ {children}
+
+ ) : (
+ children
+ );
+
+SettingsInputWrapper.propTypes = {
+ isTooltipEnabled: PropTypes.bool,
+ children: PropTypes.object.isRequired
+};
+
+// Do **not** add stuff that depends on the wallet here, as this is also used
+// for startup config.
+const NetworkSettings = ({ tempSettings, onChangeTempSettings }) => (
+
+
+
+
+ onChangeTempSettings({ network: opt.value })}
+ valueKey="value"
+ labelKey="description"
+ disabled={tempSettings.networkFromCli}
+ ariaLabelledBy="network-input"
+ options={[
+ {
+ key: "true",
+ value: MAINNET,
+ description:
+ },
+ {
+ key: "false",
+ value: TESTNET,
+ description:
+ }
+ ]}
+ />
+
+
+
+
+
+
+ onChangeTempSettings({ spvMode: opt.value })}
+ valueKey="value"
+ labelKey="description"
+ disabled={tempSettings.spvModeFromCli}
+ ariaLabelledBy="spv-input"
+ options={[
+ {
+ key: "true",
+ value: true,
+ description:
+ },
+ {
+ key: "false",
+ value: false,
+ description:
+ }
+ ]}
+ />
+
+
+
+
+
+
+
+ onChangeTempSettings({ daemonStartAdvanced: opt.value })
+ }
+ valueKey="value"
+ labelKey="description"
+ disabled={tempSettings.daemonStartAdvancedFromCli}
+ ariaLabelledBy="adv-damon-startup-input"
+ options={[
+ {
+ key: "true",
+ value: true,
+ description:
+ },
+ {
+ key: "false",
+ value: false,
+ description:
+ }
+ ]}
+ />
+
+
+
+
+
+
+
+ onChangeTempSettings({ spvConnect: value.split(",") })
+ }
+ />
+
+
+
+);
+
+NetworkSettings.propTypes = {
+ tempSettings: PropTypes.object.isRequired,
+ onChangeTempSettings: PropTypes.func.isRequired
+};
+
+export default NetworkSettings;
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.module.css b/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.module.css
new file mode 100644
index 0000000000..41e6aa8391
--- /dev/null
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.module.css
@@ -0,0 +1,19 @@
+.box {
+ display: grid;
+ grid-gap: 3rem;
+ grid-template-columns: repeat(2, 1fr);
+}
+
+.tooltip {
+ display: block !important;
+}
+
+.settingsTextInput {
+ color: var(--main-dark-blue) !important;
+}
+
+@media screen and (max-width: 768px) {
+ .box {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/index.js b/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/index.js
rename to app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/index.js
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.jsx b/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.jsx
new file mode 100644
index 0000000000..6662aa19a8
--- /dev/null
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.jsx
@@ -0,0 +1,61 @@
+import { SettingsInput, SettingsTextInput } from "inputs";
+import { FormattedMessage as T } from "react-intl";
+import {
+ PROXYTYPE_PAC,
+ PROXYTYPE_HTTP,
+ PROXYTYPE_SOCKS4,
+ PROXYTYPE_SOCKS5
+} from "constants";
+import styles from "./ProxySettings.module.css";
+import { Label, Box } from "../../helpers";
+
+const availableProxyTypes = [
+ { name: , value: null },
+ { name: "HTTP", value: PROXYTYPE_HTTP },
+ { name: "PAC", value: PROXYTYPE_PAC },
+ { name: "SOCKS4", value: PROXYTYPE_SOCKS4 },
+ { name: "SOCKS5", value: PROXYTYPE_SOCKS5 }
+];
+
+const ProxySettings = ({ tempSettings, onChangeTempSettings }) => (
+
+
+
+
+ onChangeTempSettings({ proxyType: newProxyType.value })
+ }
+ valueKey="value"
+ labelKey="name"
+ ariaLabelledBy="proxy-type-input"
+ options={availableProxyTypes}
+ />
+
+
+
+
+ onChangeTempSettings({ proxyLocation: value })}
+ />
+
+
+);
+
+ProxySettings.propTypes = {
+ tempSettings: PropTypes.object.isRequired,
+ onChangeTempSettings: PropTypes.func.isRequired
+};
+
+export default ProxySettings;
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.module.css b/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.module.css
new file mode 100644
index 0000000000..47d4dd0e17
--- /dev/null
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.module.css
@@ -0,0 +1,15 @@
+.box {
+ display: grid;
+ grid-gap: 3rem;
+ grid-template-columns: repeat(2, 1fr);
+}
+
+.settingsTextInput {
+ color: var(--main-dark-blue) !important;
+}
+
+@media screen and (max-width: 768px) {
+ .box {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/index.js b/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/index.js
rename to app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/index.js
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/index.js b/app/components/views/SettingsPage/ConnectivitySettingsTab/index.js
new file mode 100644
index 0000000000..cf81a7df47
--- /dev/null
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/index.js
@@ -0,0 +1 @@
+export { default } from "./ConnectivitySettingsTab";
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.jsx b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.jsx
new file mode 100644
index 0000000000..07b6292174
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.jsx
@@ -0,0 +1,72 @@
+import { FormattedMessage as T } from "react-intl";
+import UISettings from "./UISettings";
+import MiscSettings from "./MiscSettings";
+import TimezoneSettings from "./TimezoneSettings";
+import { Subtitle } from "shared";
+import styles from "./GeneralSettings.module.css";
+import { Wrapper, Group } from "../helpers";
+import { classNames } from "pi-ui";
+
+const GeneralSettings = ({
+ tempSettings,
+ currencies,
+ locales,
+ onChangeTempSettings,
+ walletReady,
+ wrapperClassName,
+ uiBoxClassName,
+ uiGroupClassName,
+ timezoneBoxClassName
+}) => (
+
+
+
+ }
+ />
+
+
+
+ {walletReady && (
+
+ }
+ />
+
+
+ )}
+
+ }
+ />
+
+
+
+);
+
+GeneralSettings.propTypes = {
+ tempSettings: PropTypes.object.isRequired,
+ currencies: PropTypes.array.isRequired,
+ locales: PropTypes.array,
+ onChangeTempSettings: PropTypes.func.isRequired,
+ wrapperClassName: PropTypes.string,
+ uiBoxClassName: PropTypes.string,
+ uiGroupClassName: PropTypes.string,
+ timezoneBoxClassName: PropTypes.string
+};
+
+export default GeneralSettings;
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.module.css b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.module.css
new file mode 100644
index 0000000000..dd515e85df
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.module.css
@@ -0,0 +1,30 @@
+.subtitle {
+ width: initial;
+}
+
+.wrapper {
+ grid-template-columns: repeat(4, 36.7rem);
+}
+
+.uiGroup {
+ grid-column: 3/5;
+}
+
+@media screen and (max-width: 1920px) {
+ .wrapper {
+ grid-template-columns: repeat(2, 36.7rem);
+ }
+ .uiGroup {
+ grid-column: 1/3;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .wrapper {
+ grid-template-columns: repeat(1, 35.5rem);
+ }
+
+ .uiGroup {
+ grid-column: 1;
+ }
+}
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettingsTab.jsx b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettingsTab.jsx
new file mode 100644
index 0000000000..511a5caca2
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettingsTab.jsx
@@ -0,0 +1,69 @@
+import { useCallback, useEffect } from "react";
+import { DEFAULT_DARK_THEME_NAME, DEFAULT_LIGHT_THEME_NAME } from "pi-ui";
+import GeneralSettings from "./GeneralSettings";
+import { useSettings } from "hooks";
+import * as configConstants from "constants/config";
+import { wallet } from "wallet-preload-shim";
+
+const GeneralSettingsTab = ({
+ wrapperClassName,
+ uiBoxClassName,
+ uiGroupClassName,
+ timezoneBoxClassName,
+ setThemeName
+}) => {
+ const {
+ tempSettings,
+ onSaveSettings,
+ onChangeTempSettings,
+ currencies,
+ locales,
+ areSettingsDirty,
+ walletReady
+ } = useSettings();
+
+ const onSaveSettingsHandler = useCallback(() => {
+ const config = wallet.getGlobalCfg();
+ const oldTheme = config.get(configConstants.THEME);
+ if (oldTheme != tempSettings.theme) {
+ setThemeName(
+ tempSettings.theme.includes("dark")
+ ? DEFAULT_DARK_THEME_NAME
+ : DEFAULT_LIGHT_THEME_NAME
+ );
+ }
+ onSaveSettings?.(tempSettings);
+ }, [onSaveSettings, setThemeName, tempSettings]);
+
+ useEffect(() => {
+ if (areSettingsDirty) {
+ onSaveSettingsHandler();
+ }
+ }, [areSettingsDirty, onSaveSettingsHandler]);
+
+ return (
+
+ );
+};
+
+GeneralSettingsTab.propTypes = {
+ setThemeName: PropTypes.func,
+ wrapperClassName: PropTypes.string,
+ uiBoxClassName: PropTypes.string,
+ uiGroupClassName: PropTypes.string,
+ timezoneBoxClassName: PropTypes.string
+};
+
+export default GeneralSettingsTab;
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.jsx b/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.jsx
new file mode 100644
index 0000000000..239bed513c
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.jsx
@@ -0,0 +1,75 @@
+import { FormattedMessage as T } from "react-intl";
+import { SettingsInput } from "inputs";
+import styles from "./MiscSettings.module.css";
+import { DiscoverUsageModal } from "modals";
+import { KeyBlueButton } from "buttons";
+import { useSettings } from "hooks";
+import { Label, Box } from "../../helpers";
+
+const MiscSettings = ({ tempSettings, currencies, onChangeTempSettings }) => {
+ const {
+ onDiscoverUsage,
+ gapLimit,
+ setGapLimit,
+ isValid,
+ clicked,
+ isDiscoverModalVisible,
+ showDiscoverModal,
+ hideDiscoverModal,
+ discoverUsageAttempt,
+ rescanRunning
+ } = useSettings();
+
+ return (
+
+
+
+
+ onChangeTempSettings({ currencyDisplay: newCurrency.name })
+ }
+ ariaLabelledBy="displayed-units-input"
+ valueKey="name"
+ labelKey="name"
+ options={currencies}
+ />
+
+
+
+
+
+
+
+
+
+ );
+};
+
+MiscSettings.propTypes = {
+ tempSettings: PropTypes.object.isRequired,
+ currencies: PropTypes.array.isRequired,
+ onChangeTempSettings: PropTypes.func.isRequired
+};
+
+export default MiscSettings;
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.module.css b/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.module.css
new file mode 100644
index 0000000000..f32ea67ac8
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.module.css
@@ -0,0 +1,12 @@
+.box {
+ min-height: 19rem;
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-gap: 3rem;
+}
+
+.discoverUsageButton {
+ background-color: var(--grey-7);
+ padding: 0.6rem 1rem;
+ margin-top: 1rem;
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/index.js b/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/index.js
rename to app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/index.js
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.jsx b/app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/TimezoneSettings.jsx
similarity index 67%
rename from app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.jsx
rename to app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/TimezoneSettings.jsx
index 3dd91839c8..37dd385403 100644
--- a/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.jsx
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/TimezoneSettings.jsx
@@ -1,9 +1,13 @@
import { FormattedMessage as T } from "react-intl";
-import { RadioButtonGroup } from "pi-ui";
+import { RadioButtonGroup, classNames } from "pi-ui";
import styles from "./TimezoneSettings.module.css";
-import { ColumnTitle } from "../../helpers";
+import { Box } from "../../helpers";
-const TimezoneSettings = ({ tempSettings, onChangeTempSettings }) => {
+const TimezoneSettings = ({
+ tempSettings,
+ onChangeTempSettings,
+ timezoneBoxClassName
+}) => {
const update = (value) => onChangeTempSettings({ timezone: value });
const timezoneOptions = [
@@ -30,22 +34,21 @@ const TimezoneSettings = ({ tempSettings, onChangeTempSettings }) => {
];
return (
- <>
- } />
+
update(option.value)}
value={tempSettings.timezone}
vertical
- optionsClassName={styles.timezoneOption}
+ optionsClassName={[styles.timezoneOption1, styles.timezoneOption2]}
/>
-
+
);
};
TimezoneSettings.propTypes = {
tempSettings: PropTypes.object.isRequired,
- onChangeTempSettings: PropTypes.func.isRequired
+ onChangeTempSettings: PropTypes.func.isRequired,
+ timezoneBoxClassName: PropTypes.string
};
-
export default TimezoneSettings;
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/TimezoneSettings.module.css b/app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/TimezoneSettings.module.css
new file mode 100644
index 0000000000..cf1b7a7284
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/TimezoneSettings.module.css
@@ -0,0 +1,27 @@
+.box {
+ min-height: 19rem;
+}
+
+.timezoneOption1 {
+ margin: 0 0 4rem 0 !important;
+ padding-left: 0 !important;
+}
+.timezoneOption2 {
+ margin: 0 !important;
+ padding-left: 0 !important;
+}
+
+.timezoneOption1 > div,
+.timezoneOption2 > div {
+ font-size: 1.3rem;
+ line-height: 1.6rem;
+ color: var(--grey-5);
+ font-style: normal;
+}
+
+.timezoneOption1 label,
+.timezoneOption2 label {
+ color: var(--main-dark-blue);
+ font-size: 1.6rem;
+ line-height: 2rem;
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/index.js b/app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/index.js
rename to app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/index.js
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.jsx b/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.jsx
new file mode 100644
index 0000000000..726be22bcf
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.jsx
@@ -0,0 +1,111 @@
+import { FormattedMessage as T } from "react-intl";
+import { SettingsInput, LanguageSelectInput } from "inputs";
+import { InfoDocFieldModalInvisibleButton } from "buttons";
+import styles from "./UISettings.module.css";
+import {
+ DEFAULT_DARK_THEME_NAME,
+ DEFAULT_LIGHT_THEME_NAME,
+ classNames
+} from "pi-ui";
+import { Box, Label } from "../../helpers";
+
+const availableUIThemeTypes = [
+ {
+ name: ,
+ value: DEFAULT_LIGHT_THEME_NAME
+ },
+ {
+ name: ,
+ value: DEFAULT_DARK_THEME_NAME
+ }
+];
+
+const UISettings = ({
+ tempSettings,
+ locales,
+ onChangeTempSettings,
+ uiBoxClassName
+}) => (
+
+
+
+ onChangeTempSettings({ theme: newTheme.value })}
+ valueKey="value"
+ labelKey="name"
+ options={availableUIThemeTypes}
+ />
+
+
+
+
+
+ onChangeTempSettings({ locale: newLocale.key })
+ }
+ ariaLabelledBy="locale-input"
+ valueKey="key"
+ labelKey="description"
+ options={locales}
+ />
+
+
+
+
+
+ onChangeTempSettings({ uiAnimations: newUIAnimations.value })
+ }
+ valueKey="value"
+ labelKey="description"
+ ariaLabelledBy="ui-animation"
+ options={[
+ {
+ key: "true",
+ value: true,
+ description:
+ },
+ {
+ key: "false",
+ value: false,
+ description:
+ }
+ ]}
+ />
+
+ }
+ draggable
+ />
+
+
+);
+
+UISettings.propTypes = {
+ tempSettings: PropTypes.object.isRequired,
+ locales: PropTypes.array.isRequired,
+ onChangeTempSettings: PropTypes.func.isRequired,
+ uiBoxClassName: PropTypes.string
+};
+
+export default UISettings;
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.module.css b/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.module.css
new file mode 100644
index 0000000000..bfc63b1eb6
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.module.css
@@ -0,0 +1,26 @@
+.box {
+ display: grid;
+ grid-gap: 3rem;
+ grid-template-columns: repeat(3, 1fr);
+}
+
+.hasWarning strong {
+ color: var(--error-text-color);
+}
+
+.infoButton {
+ padding: 0;
+ text-decoration: none;
+ color: var(--grey-5);
+ font-size: 1.1rem;
+ line-height: 1.4rem;
+}
+.infoButton:hover {
+ text-decoration: underline;
+}
+
+@media screen and (max-width: 768px) {
+ .box {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/UISettings/index.js b/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/groups/UISettings/index.js
rename to app/components/views/SettingsPage/GeneralSettingsTab/UISettings/index.js
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/index.js b/app/components/views/SettingsPage/GeneralSettingsTab/index.js
new file mode 100644
index 0000000000..1396aabf45
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/index.js
@@ -0,0 +1 @@
+export { default } from "./GeneralSettingsTab";
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.jsx b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.jsx
new file mode 100644
index 0000000000..84cfb9b84d
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.jsx
@@ -0,0 +1,145 @@
+import { FormattedMessage as T } from "react-intl";
+import {
+ EXTERNALREQUEST_NETWORK_STATUS,
+ EXTERNALREQUEST_STAKEPOOL_LISTING,
+ EXTERNALREQUEST_UPDATE_CHECK,
+ EXTERNALREQUEST_POLITEIA,
+ EXTERNALREQUEST_DCRDATA
+} from "constants";
+import { Checkbox, classNames } from "pi-ui";
+import styles from "./PrivacySettings.module.css";
+import { Box } from "../../helpers";
+
+const PrivacySettings = ({
+ tempSettings,
+ onChangeTempSettings,
+ boxClassName
+}) => {
+ const toggle = (value) => () => {
+ const allowedExternalRequests = [...tempSettings.allowedExternalRequests];
+ const idx = allowedExternalRequests.indexOf(value);
+ if (idx > -1) {
+ allowedExternalRequests.splice(idx, 1);
+ } else {
+ allowedExternalRequests.push(value);
+ }
+ onChangeTempSettings({ allowedExternalRequests });
+ };
+
+ return (
+
+
+
+ }
+ id="networking"
+ description={
+
+ }
+ checked={
+ tempSettings.allowedExternalRequests.indexOf(
+ EXTERNALREQUEST_NETWORK_STATUS
+ ) > -1
+ }
+ onChange={toggle(EXTERNALREQUEST_NETWORK_STATUS)}
+ />
+
+
+
+ }
+ id="dcrdata"
+ description={
+
+ }
+ checked={
+ tempSettings.allowedExternalRequests.indexOf(
+ EXTERNALREQUEST_DCRDATA
+ ) > -1
+ }
+ onChange={toggle(EXTERNALREQUEST_DCRDATA)}
+ />
+
+
+
+ }
+ id="stakepool"
+ description={
+
+ }
+ checked={
+ tempSettings.allowedExternalRequests.indexOf(
+ EXTERNALREQUEST_STAKEPOOL_LISTING
+ ) > -1
+ }
+ onChange={toggle(EXTERNALREQUEST_STAKEPOOL_LISTING)}
+ />
+
+
+ }
+ id="politeia"
+ description={
+
+ }
+ checked={
+ tempSettings.allowedExternalRequests.indexOf(
+ EXTERNALREQUEST_POLITEIA
+ ) > -1
+ }
+ onChange={toggle(EXTERNALREQUEST_POLITEIA)}
+ />
+
+
+ }
+ id="update"
+ description={
+
+ }
+ checked={
+ tempSettings.allowedExternalRequests.indexOf(
+ EXTERNALREQUEST_UPDATE_CHECK
+ ) > -1
+ }
+ onChange={toggle(EXTERNALREQUEST_UPDATE_CHECK)}
+ />
+
+
+ );
+};
+
+PrivacySettings.propTypes = {
+ tempSettings: PropTypes.object.isRequired,
+ onChangeTempSettings: PropTypes.func.isRequired,
+ boxClassName: PropTypes.string
+};
+
+export default PrivacySettings;
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.module.css b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.module.css
new file mode 100644
index 0000000000..99a0d1b91e
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.module.css
@@ -0,0 +1,17 @@
+.box {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 3rem 8rem;
+}
+
+.privacyCheckbox {
+ line-height: 2rem;
+ font-size: 1.6rem;
+ color: var(--grey-7);
+}
+
+@media screen and (max-width: 768px) {
+ .box {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/index.js b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/index.js
rename to app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/index.js
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.jsx b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.jsx
new file mode 100644
index 0000000000..960736ed04
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.jsx
@@ -0,0 +1,73 @@
+import { FormattedMessage as T } from "react-intl";
+import PrivacySettings from "./PrivacySettings";
+import PrivatePassphraseSettings from "./PrivatePassphraseSettings";
+import { Subtitle } from "shared";
+import styles from "./PrivacyandSecuritySettings.module.css";
+import { Wrapper, Group } from "../helpers";
+import { classNames } from "pi-ui";
+
+const PrivacyandSecuritySettings = ({
+ tempSettings,
+ onChangeTempSettings,
+ onAttemptChangePassphrase,
+ isChangePassPhraseDisabled,
+ changePassphraseRequestAttempt,
+ walletReady,
+ wrapperClassName,
+ boxClassName
+}) => (
+
+ {walletReady && (
+
+
+ }
+ />
+
+
+ )}
+
+
+
+ }
+ />
+
+
+
+);
+
+PrivacyandSecuritySettings.propTypes = {
+ tempSettings: PropTypes.object.isRequired,
+ onChangeTempSettings: PropTypes.func.isRequired,
+ onAttemptChangePassphrase: PropTypes.func,
+ isChangePassPhraseDisabled: PropTypes.bool.isRequired,
+ changePassphraseRequestAttempt: PropTypes.bool.isRequired,
+ walletReady: PropTypes.bool.isRequired,
+ wrapperClassName: PropTypes.string,
+ boxClassName: PropTypes.string
+};
+
+export default PrivacyandSecuritySettings;
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.module.css b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.module.css
new file mode 100644
index 0000000000..1e4a9c6ce9
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.module.css
@@ -0,0 +1,19 @@
+.subtitle {
+ width: initial;
+}
+
+.wrapper {
+ grid-template-columns: repeat(1, 76.4rem);
+}
+
+@media screen and (max-width: 1920px) {
+ .wrapper {
+ grid-template-columns: repeat(1, 76.4rem);
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .wrapper {
+ grid-template-columns: repeat(1, 35.5rem);
+ }
+}
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettingsTab.jsx b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettingsTab.jsx
new file mode 100644
index 0000000000..24156a047c
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettingsTab.jsx
@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import PrivacyandSecuritySettings from "./PrivacyandSecuritySettings";
+import { useSettings } from "hooks";
+
+const PrivacyandSecuritySettingsTab = ({ wrapperClassName, boxClassName }) => {
+ const {
+ tempSettings,
+ onSaveSettings,
+ onChangeTempSettings,
+ onAttemptChangePassphrase,
+ changePassphraseRequestAttempt,
+ isChangePassPhraseDisabled,
+ areSettingsDirty,
+ walletReady
+ } = useSettings();
+
+ useEffect(() => {
+ if (areSettingsDirty) {
+ onSaveSettings?.(tempSettings);
+ }
+ }, [areSettingsDirty, onSaveSettings, tempSettings]);
+
+ return (
+
+ );
+};
+
+export default PrivacyandSecuritySettingsTab;
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/PrivatePassphraseSettings.jsx b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/PrivatePassphraseSettings.jsx
new file mode 100644
index 0000000000..1b22127fa5
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/PrivatePassphraseSettings.jsx
@@ -0,0 +1,39 @@
+import { FormattedMessage as T } from "react-intl";
+import { ChangePassphraseButton } from "buttons";
+import { WatchOnlyWarnNotification } from "shared";
+import styles from "./PrivatePassphraseSettings.module.css";
+
+const PrivatePassphraseSettings = ({
+ isChangePassPhraseDisabled,
+ changePassphraseRequestAttempt,
+ onAttemptChangePassphrase
+}) => {
+ return (
+
+
+ }
+ onSubmit={onAttemptChangePassphrase}
+ buttonLabel={
+
+ }
+ />
+
+ );
+};
+
+PrivatePassphraseSettings.propTypes = {
+ onAttemptChangePassphrase: PropTypes.func,
+ isChangePassPhraseDisabled: PropTypes.bool.isRequired,
+ changePassphraseRequestAttempt: PropTypes.bool.isRequired
+};
+
+export default PrivatePassphraseSettings;
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/PrivatePassphraseSettings.module.css b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/PrivatePassphraseSettings.module.css
new file mode 100644
index 0000000000..2309b369e4
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/PrivatePassphraseSettings.module.css
@@ -0,0 +1,10 @@
+.changePassphraseButton {
+ background-color: var(--grey-7) !important;
+ border-color: var(--grey-7) !important;
+ font-size: 1.6rem !important;
+ font-weight: 600 !important;
+ line-height: 2rem !important;
+}
+.changePassphraseButton:hover {
+ background-color: var(--input-color-hover) !important;
+}
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/index.js b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/index.js
new file mode 100644
index 0000000000..08337487bb
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/index.js
@@ -0,0 +1 @@
+export { default } from "./PrivatePassphraseSettings";
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/index.js b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/index.js
new file mode 100644
index 0000000000..7962d8b545
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/index.js
@@ -0,0 +1 @@
+export { default } from "./PrivacyandSecuritySettingsTab";
diff --git a/app/components/views/SettingsPage/SettingsPage.jsx b/app/components/views/SettingsPage/SettingsPage.jsx
index 155d37e6cc..48ca0de7ae 100644
--- a/app/components/views/SettingsPage/SettingsPage.jsx
+++ b/app/components/views/SettingsPage/SettingsPage.jsx
@@ -4,10 +4,13 @@ import { TabbedPage, TitleHeader, DescriptionHeader } from "layout";
import LinksTab from "./LinksTab";
import LogsTab from "./LogsTab";
import TutorialsTab from "./TutorialsTab";
-import SettingsTab from "./SettingsTab";
-import { useSettings } from "hooks";
+import ConnectivitySettingsTab from "./ConnectivitySettingsTab";
+import GeneralSettingsTab from "./GeneralSettingsTab";
+import PrivacyandSecuritySettingsTab from "./PrivacyandSecuritySettingsTab";
+import { useSettings, useService } from "hooks";
import styles from "./SettingsPage.module.css";
import { SETTINGS_ICON } from "constants";
+import ErrorScreen from "ErrorScreen";
import { useTheme } from "pi-ui";
const closeWalletModalContent = (walletName) => (
@@ -51,13 +54,26 @@ const SettingsPageHeader = () => {
};
const SettingsPage = () => {
+ const { walletService } = useService();
const { setThemeName } = useTheme();
const tabs = [
{
- path: "/settings/settings",
- content: ,
+ path: "/settings/connectivity",
+ content: ConnectivitySettingsTab,
header: SettingsTabHeader,
- label:
+ label:
+ },
+ {
+ path: "/settings/general",
+ content: ,
+ header: SettingsTabHeader,
+ label:
+ },
+ {
+ path: "/settings/privacyandsecurity",
+ content: PrivacyandSecuritySettingsTab,
+ header: SettingsTabHeader,
+ label:
},
{
path: "/settings/links",
@@ -78,7 +94,11 @@ const SettingsPage = () => {
label:
}
];
- return } tabs={tabs} />;
+ return !walletService ? (
+
+ ) : (
+ } tabs={tabs} />
+ );
};
export default SettingsPage;
diff --git a/app/components/views/SettingsPage/SettingsPage.module.css b/app/components/views/SettingsPage/SettingsPage.module.css
index b8bc808e76..9a9bb71bfb 100644
--- a/app/components/views/SettingsPage/SettingsPage.module.css
+++ b/app/components/views/SettingsPage/SettingsPage.module.css
@@ -1,11 +1,11 @@
.closeModalButton {
height: 29px;
- background-color: var(--wallet-close-button-bg);
+ background-color: var(--grey-7) !important;
color: var(--wallet-close-button-text);
background-image: var(--close-wallet-icon);
background-repeat: no-repeat;
background-size: 13px;
background-position: 10px 8px;
- border-radius: 10px;
+ border-radius: 0.5rem;
padding: 0 15px 0 30px;
}
diff --git a/app/components/views/SettingsPage/SettingsTab/Settings.jsx b/app/components/views/SettingsPage/SettingsTab/Settings.jsx
deleted file mode 100644
index 37bb2ab55b..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/Settings.jsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { useCallback } from "react";
-import { DEFAULT_DARK_THEME_NAME, DEFAULT_LIGHT_THEME_NAME } from "pi-ui";
-import { FormattedMessage as T } from "react-intl";
-import { KeyBlueButton, ResetNetworkButton } from "buttons";
-import {
- NetworkSettings,
- ProxySettings,
- PrivacySettings,
- UISettings,
- MiscSettings,
- TimezoneSettings
-} from "./groups";
-import { Subtitle } from "shared";
-import styles from "./Settings.module.css";
-import * as configConstants from "constants/config";
-import { wallet } from "wallet-preload-shim";
-import { Wrapper, Group, ColumnWrapper, Column } from "./helpers";
-
-const SettingsPage = ({
- areSettingsDirty,
- tempSettings,
- currencies,
- locales,
- onChangeTempSettings,
- onSaveSettings,
- onAttemptChangePassphrase,
- isChangePassPhraseDisabled,
- changePassphraseRequestAttempt,
- needNetworkReset,
- walletReady,
- setThemeName
-}) => {
- const saveSettingsHandler = useCallback(() => {
- const config = wallet.getGlobalCfg();
- const oldTheme = config.get(configConstants.THEME);
- if (oldTheme != tempSettings.theme) {
- setThemeName(
- tempSettings.theme.includes("dark")
- ? DEFAULT_DARK_THEME_NAME
- : DEFAULT_LIGHT_THEME_NAME
- );
- }
- onSaveSettings(tempSettings);
- }, [onSaveSettings, tempSettings, setThemeName]);
-
- return (
- <>
-
-
-
- }
- />
-
-
-
-
-
-
-
-
-
-
-
-
- }
- />
-
-
-
-
-
-
-
- {walletReady && (
-
-
-
- )}
-
-
-
-
-
- }
- />
-
-
-
-
-
-
-
-
- {needNetworkReset ? (
-
- }
- buttonLabel={}
- modalContent={
-
- }
- disabled={!areSettingsDirty}
- size="large"
- block={false}
- onSubmit={saveSettingsHandler}
- />
- ) : (
-
-
-
- )}
-
-
- {walletReady && (
-
-
-
- onChangeTempSettings({ currencyDisplay: newCurrency.name })
- }
- ariaLabelledBy="displayed-units-input"
- valueKey="name"
- labelKey="name"
- options={currencies}
- />
-
- )}
-
- {walletReady && (
-
-
-
-
-
-
- )}
-
-
- );
-};
-
-MiscSettings.propTypes = {
- tempSettings: PropTypes.object.isRequired,
- currencies: PropTypes.array.isRequired,
- onChangeTempSettings: PropTypes.func.isRequired,
- walletReady: PropTypes.bool.isRequired
-};
-
-export default MiscSettings;
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/MiscSettings.module.css b/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/MiscSettings.module.css
deleted file mode 100644
index 99fd4eaa05..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/MiscSettings.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.input {
- display: inline-block;
- vertical-align: middle;
- width: 150px;
- min-width: 150px;
- margin-right: 0;
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.jsx b/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.jsx
deleted file mode 100644
index 68fddcc8c1..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.jsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { FormattedMessage as T } from "react-intl";
-import { Tooltip } from "pi-ui";
-import { SettingsInput, SettingsTextInput } from "inputs";
-import { TESTNET, MAINNET } from "constants";
-import styles from "./NetworkSettings.module.css";
-import { Row, Label, ColumnTitle } from "../../helpers";
-
-const AlreadySetMessage = () => (
-
-);
-
-// Do **not** add stuff that depends on the wallet here, as this is also used
-// for startup config.
-const NetworkSettings = ({ tempSettings, onChangeTempSettings }) => (
- <>
- } />
-
-
-
- }
- disabled={!tempSettings.networkFromCli}>
- onChangeTempSettings({ network: opt.value })}
- valueKey="value"
- labelKey="description"
- disabled={tempSettings.networkFromCli}
- ariaLabelledBy="network-input"
- options={[
- {
- key: "true",
- value: MAINNET,
- description:
- },
- {
- key: "false",
- value: TESTNET,
- description:
- }
- ]}
- />
-
-
-
-
-
- }
- disabled={!tempSettings.spvModeFromCli}>
- onChangeTempSettings({ spvMode: opt.value })}
- valueKey="key"
- labelKey="description"
- disabled={tempSettings.spvModeFromCli}
- ariaLabelledBy="spv-input"
- options={[
- {
- key: "true",
- value: true,
- description:
- },
- {
- key: "false",
- value: false,
- description:
- }
- ]}
- />
-
-
-
-
-
- }
- disabled={!tempSettings.spvConnectFromCli}>
-
- onChangeTempSettings({ spvConnect: e.target.value.split(",") })
- }
- />
-
-
-
-
-
- }
- disabled={!tempSettings.daemonStartAdvancedFromCli}>
-
- onChangeTempSettings({ daemonStartAdvanced: opt.value })
- }
- valueKey="key"
- labelKey="description"
- disabled={tempSettings.daemonStartAdvancedFromCli}
- ariaLabelledBy="adv-damon-startup-input"
- options={[
- {
- key: "true",
- value: true,
- description:
- },
- {
- key: "false",
- value: false,
- description: (
-
- )
- }
- ]}
- />
-
-
-
-
-);
-
-NetworkSettings.propTypes = {
- tempSettings: PropTypes.object.isRequired,
- onChangeTempSettings: PropTypes.func.isRequired
-};
-
-export default NetworkSettings;
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.module.css b/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.module.css
deleted file mode 100644
index 265d2e7107..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.input {
- display: inline-block;
- vertical-align: middle;
- width: 150px;
- min-width: 150px;
- margin-right: 0;
-}
-
-.settingsTextInput {
- width: 150px !important;
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.jsx b/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.jsx
deleted file mode 100644
index 82bff8bfd1..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.jsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import { FormattedMessage as T } from "react-intl";
-import {
- EXTERNALREQUEST_NETWORK_STATUS,
- EXTERNALREQUEST_STAKEPOOL_LISTING,
- EXTERNALREQUEST_UPDATE_CHECK,
- EXTERNALREQUEST_POLITEIA,
- EXTERNALREQUEST_DCRDATA
-} from "constants";
-import { ChangePassphraseButton } from "buttons";
-import { WatchOnlyWarnNotification } from "shared";
-import { classNames, Checkbox } from "pi-ui";
-import styles from "./PrivacySettings.module.css";
-import { Row } from "../../helpers";
-
-const PrivacySettings = ({
- tempSettings,
- isChangePassPhraseDisabled,
- changePassphraseRequestAttempt,
- onAttemptChangePassphrase,
- onChangeTempSettings,
- walletReady
-}) => {
- const toggle = (value) => () => {
- const allowedExternalRequests = [...tempSettings.allowedExternalRequests];
- const idx = allowedExternalRequests.indexOf(value);
- if (idx > -1) {
- allowedExternalRequests.splice(idx, 1);
- } else {
- allowedExternalRequests.push(value);
- }
- onChangeTempSettings({ allowedExternalRequests });
- };
-
- return (
- <>
-
-
- {walletReady && (
-
-
-
-
-
- }
- onSubmit={onAttemptChangePassphrase}
- />
-
-
-
- )}
-
-
- }
- id="networking"
- description={
-
- }
- checked={
- tempSettings.allowedExternalRequests.indexOf(
- EXTERNALREQUEST_NETWORK_STATUS
- ) > -1
- }
- onChange={toggle(EXTERNALREQUEST_NETWORK_STATUS)}
- />
-
-
-
- }
- id="stakepool"
- description={
-
- }
- checked={
- tempSettings.allowedExternalRequests.indexOf(
- EXTERNALREQUEST_STAKEPOOL_LISTING
- ) > -1
- }
- onChange={toggle(EXTERNALREQUEST_STAKEPOOL_LISTING)}
- />
-
-
-
-
-
-
- }
- id="update"
- description={
-
- }
- checked={
- tempSettings.allowedExternalRequests.indexOf(
- EXTERNALREQUEST_UPDATE_CHECK
- ) > -1
- }
- onChange={toggle(EXTERNALREQUEST_UPDATE_CHECK)}
- />
-
-
- }
- id="politeia"
- description={
-
- }
- checked={
- tempSettings.allowedExternalRequests.indexOf(
- EXTERNALREQUEST_POLITEIA
- ) > -1
- }
- onChange={toggle(EXTERNALREQUEST_POLITEIA)}
- />
-
-
-
- }
- id="dcrdata"
- description={
-
- }
- checked={
- tempSettings.allowedExternalRequests.indexOf(
- EXTERNALREQUEST_DCRDATA
- ) > -1
- }
- onChange={toggle(EXTERNALREQUEST_DCRDATA)}
- />
-
-
-
-
-
-
- onChangeTempSettings({ proxyType: newProxyType.value })
- }
- valueKey="value"
- labelKey="name"
- ariaLabelledBy="proxy-type-input"
- options={availableProxyTypes}
- />
-
-
-
-
-
- onChangeTempSettings({ proxyLocation: e.target.value })
- }
- />
-
-
-
-);
-
-ProxySettings.propTypes = {
- tempSettings: PropTypes.object.isRequired,
- onChangeTempSettings: PropTypes.func.isRequired
-};
-
-export default ProxySettings;
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/ProxySettings.module.css b/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/ProxySettings.module.css
deleted file mode 100644
index 265d2e7107..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/ProxySettings.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.input {
- display: inline-block;
- vertical-align: middle;
- width: 150px;
- min-width: 150px;
- margin-right: 0;
-}
-
-.settingsTextInput {
- width: 150px !important;
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.module.css b/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.module.css
deleted file mode 100644
index c2d474ca4c..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.timezoneOption {
- margin: 0 0 1rem 0 !important;
-}
-
-.timezoneOption label {
- color: var(--input-color-default);
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.jsx b/app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.jsx
deleted file mode 100644
index 614619c057..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.jsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { FormattedMessage as T } from "react-intl";
-import { SettingsInput, LanguageSelectInput } from "inputs";
-import { InfoDocFieldModalButton } from "buttons";
-import styles from "./UISettings.module.css";
-import { DEFAULT_DARK_THEME_NAME, DEFAULT_LIGHT_THEME_NAME } from "pi-ui";
-import { Row, Label, ColumnTitle } from "../../helpers";
-
-const availableUIThemeTypes = [
- {
- name: ,
- value: DEFAULT_LIGHT_THEME_NAME
- },
- {
- name: ,
- value: DEFAULT_DARK_THEME_NAME
- }
-];
-
-const UISettings = ({ tempSettings, locales, onChangeTempSettings }) => (
- <>
- } />
-
-
-
-
- onChangeTempSettings({ theme: newTheme.value })
- }
- valueKey="value"
- labelKey="name"
- options={availableUIThemeTypes}
- />
-
-
-
-
-
- onChangeTempSettings({ locale: newLocale.key })
- }
- ariaLabelledBy="locale-input"
- valueKey="key"
- labelKey="description"
- options={locales}
- />
-
-
-
-
-
- onChangeTempSettings({ uiAnimations: newUIAnimations.value })
- }
- valueKey="value"
- labelKey="description"
- options={[
- {
- key: "true",
- value: true,
- description:
- },
- {
- key: "false",
- value: false,
- description: (
-
- )
- }
- ]}
- />
-
-
-
-);
-
-UISettings.propTypes = {
- tempSettings: PropTypes.object.isRequired,
- locales: PropTypes.array.isRequired,
- onChangeTempSettings: PropTypes.func.isRequired
-};
-
-export default UISettings;
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.module.css b/app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.module.css
deleted file mode 100644
index 57dda2ad8a..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.input {
- display: inline-block;
- vertical-align: middle;
- width: 150px;
- min-width: 150px;
- margin-right: 0;
-}
-
-.hasWarning strong {
- color: var(--error-text-color);
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/index.js b/app/components/views/SettingsPage/SettingsTab/groups/index.js
deleted file mode 100644
index 3c18dbad16..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as MiscSettings } from "./MiscSettings";
-export { default as NetworkSettings } from "./NetworkSettings";
-export { default as PrivacySettings } from "./PrivacySettings";
-export { default as ProxySettings } from "./ProxySettings";
-export { default as TimezoneSettings } from "./TimezoneSettings";
-export { default as UISettings } from "./UISettings";
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.jsx b/app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.jsx
deleted file mode 100644
index 3ee79f163a..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { classNames } from "pi-ui";
-import styles from "./Column.module.css";
-
-const Column = ({ className, children }) => (
- {children}
-);
-
-Column.propTypes = {
- className: PropTypes.string,
- children: PropTypes.node.isRequired
-};
-
-export default Column;
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.module.css b/app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.module.css
deleted file mode 100644
index 9978ce2338..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.module.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.column {
- width: 300px;
-}
-
-@media screen and (min-width: 1680px) and (max-width: 1920px) {
- .column {
- width: 245px;
- }
-}
-
-@media screen and (min-width: 1400px) and (max-width: 1680px) {
- .column {
- width: 420px;
- }
-}
-
-@media screen and (max-width: 1180px) {
- .column {
- width: 248px;
- }
-}
-
-@media screen and (max-width: 768px) {
- .column {
- width: 100%;
- }
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Column/index.js b/app/components/views/SettingsPage/SettingsTab/helpers/Column/index.js
deleted file mode 100644
index 5adccd4886..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Column/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Column";
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.jsx b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.jsx
deleted file mode 100644
index 0bb0e64137..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import styles from "./ColumnTitle.module.css";
-
-const ColumnTitle = ({ title }) => (
- {title}
-);
-
-ColumnTitle.propTypes = {
- title: PropTypes.object.isRequired
-};
-
-export default ColumnTitle;
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.module.css b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.module.css
deleted file mode 100644
index c9385865ae..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.columnTitle {
- font-size: 19px;
- text-transform: capitalize;
- margin-bottom: 14px;
- line-height: 24px;
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/index.js b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/index.js
deleted file mode 100644
index ba83bb52b4..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ColumnTitle";
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.jsx b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.jsx
deleted file mode 100644
index 4203fab461..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import styles from "./ColumnWrapper.module.css";
-
-const ColumnWrapper = ({ children }) => (
- {children}
-);
-
-ColumnWrapper.propTypes = {
- children: PropTypes.node.isRequired
-};
-
-export default ColumnWrapper;
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.module.css b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.module.css
deleted file mode 100644
index 567c194fa8..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.module.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.columnWrapper {
- padding: 30px 40px;
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- background: var(--background-back-color);
- min-height: 190px;
-}
-
-@media screen and (min-width: 1680px) and (max-width: 1920px) {
- .columnWrapper {
- padding-left: 30px;
- padding-right: 40px;
- }
-}
-
-@media screen and (max-width: 1400px) {
- .columnWrapper {
- min-height: initial;
- padding: 30px 40px;
- }
-}
-
-@media screen and (max-width: 1180px) {
- .columnWrapper {
- padding-left: 20px;
- }
-}
-
-@media screen and (max-width: 768px) {
- .columnWrapper {
- padding-left: 15px;
- padding-right: 35px;
- }
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/index.js b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/index.js
deleted file mode 100644
index b5318c917d..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ColumnWrapper";
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.jsx b/app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.jsx
deleted file mode 100644
index df40d42033..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { classNames } from "pi-ui";
-import styles from "./Group.module.css";
-
-const Group = ({ className, children }) => (
- {children}
-);
-
-Group.propTypes = {
- className: PropTypes.string,
- children: PropTypes.node.isRequired
-};
-
-export default Group;
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.module.css b/app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.module.css
deleted file mode 100644
index 42a14325f4..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.group {
- display: flex;
- flex-direction: column;
- margin-bottom: 37px;
- width: 720px;
-}
-
-@media screen and (min-width: 1680px) and (max-width: 1920px) {
- .group {
- width: 600px;
- }
-}
-
-@media screen and (min-width: 1400px) and (max-width: 1680px) {
- .group {
- width: 1000px;
- }
-}
-
-@media screen and (max-width: 1400px) {
- .group {
- width: 739px;
- }
-}
-
-@media screen and (max-width: 1180px) {
- .group {
- width: 649px;
- }
-}
-
-@media screen and (max-width: 768px) {
- .group {
- width: 355px;
- margin-bottom: 27px;
- }
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Group/index.js b/app/components/views/SettingsPage/SettingsTab/helpers/Group/index.js
deleted file mode 100644
index 867468fee1..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Group/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Group";
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.module.css b/app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.module.css
deleted file mode 100644
index 3eb76f19a0..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.label {
- display: inline-block;
- margin-right: 14px;
- text-align: right;
- width: 116px;
-}
-
-.label button {
- margin-right: 0;
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.jsx b/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.jsx
deleted file mode 100644
index e8dcae2199..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { classNames } from "pi-ui";
-import styles from "./Row.module.css";
-
-const Row = ({ children, className }) => (
- {children}
-);
-
-Row.propTypes = {
- children: PropTypes.node.isRequired,
- className: PropTypes.string
-};
-
-export default Row;
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.module.css b/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.module.css
deleted file mode 100644
index f3da300152..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.row {
- display: flex;
- margin-bottom: 20px;
- justify-content: flex-end;
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Row/index.js b/app/components/views/SettingsPage/SettingsTab/helpers/Row/index.js
deleted file mode 100644
index 74ea459f62..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Row/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Row";
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.jsx b/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.jsx
deleted file mode 100644
index 30be6165de..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import styles from "./Wrapper.module.css";
-
-const Wrapper = ({ children }) => (
- {children}
-);
-
-Wrapper.propTypes = {
- children: PropTypes.node.isRequired
-};
-
-export default Wrapper;
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.module.css b/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.module.css
deleted file mode 100644
index f65467757e..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.module.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.wrapper {
- display: flex;
- justify-content: space-between;
- width: 1481px;
- flex-direction: row;
- font-size: 13px;
- flex-wrap: wrap;
-}
-
-@media screen and (min-width: 1680px) and (max-width: 1920px) {
- .wrapper {
- width: 1240px;
- }
-}
-
-@media screen and (min-width: 1400px) and (max-width: 1680px) {
- .wrapper {
- flex-direction: column;
- }
-}
-
-@media screen and (max-width: 1400px) {
- .wrapper {
- flex-direction: column;
- }
-}
-
-@media screen and (max-width: 768px) {
- .wrapper {
- margin-top: 0;
- flex-direction: column;
- }
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/index.js b/app/components/views/SettingsPage/SettingsTab/helpers/index.js
deleted file mode 100644
index 7de531a4ea..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export { default as Wrapper } from "./Wrapper";
-export { default as Group } from "./Group";
-export { default as ColumnWrapper } from "./ColumnWrapper";
-export { default as Column } from "./Column";
-export { default as Row } from "./Row";
-export { default as Label } from "./Label";
-export { default as ColumnTitle } from "./ColumnTitle";
diff --git a/app/components/views/SettingsPage/SettingsTab/index.js b/app/components/views/SettingsPage/SettingsTab/index.js
deleted file mode 100644
index a1fbd9d339..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./SettingsTab";
diff --git a/app/components/views/SettingsPage/helpers/Box/Box.jsx b/app/components/views/SettingsPage/helpers/Box/Box.jsx
new file mode 100644
index 0000000000..0c048c666a
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/Box/Box.jsx
@@ -0,0 +1,13 @@
+import { classNames } from "pi-ui";
+import styles from "./Box.module.css";
+
+const Box = ({ className, children }) => (
+ {children}
+);
+
+Box.propTypes = {
+ className: PropTypes.string,
+ children: PropTypes.node.isRequired
+};
+
+export default Box;
diff --git a/app/components/views/SettingsPage/helpers/Box/Box.module.css b/app/components/views/SettingsPage/helpers/Box/Box.module.css
new file mode 100644
index 0000000000..ca1a442b5e
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/Box/Box.module.css
@@ -0,0 +1,11 @@
+.box {
+ padding: 3rem 4rem;
+ background: var(--background-back-color);
+ width: 100%;
+}
+
+@media screen and (max-width: 768px) {
+ .box {
+ padding: 3rem 2rem;
+ }
+}
diff --git a/app/components/views/SettingsPage/helpers/Box/index.js b/app/components/views/SettingsPage/helpers/Box/index.js
new file mode 100644
index 0000000000..772ab37c11
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/Box/index.js
@@ -0,0 +1 @@
+export { default } from "./Box";
diff --git a/app/components/views/SettingsPage/helpers/ConfirmRestartModal.jsx b/app/components/views/SettingsPage/helpers/ConfirmRestartModal.jsx
new file mode 100644
index 0000000000..247984d892
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/ConfirmRestartModal.jsx
@@ -0,0 +1,20 @@
+import { ConfirmModal } from "modals";
+import { FormattedMessage as T } from "react-intl";
+
+const ConfirmRestartModal = (props) => (
+ }
+ buttonLabel={}
+ modalContent={
+
+ }
+ size="large"
+ block={false}
+ {...props}
+ />
+);
+
+export default ConfirmRestartModal;
diff --git a/app/components/views/SettingsPage/helpers/Group.jsx b/app/components/views/SettingsPage/helpers/Group.jsx
new file mode 100644
index 0000000000..9bad3ae27f
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/Group.jsx
@@ -0,0 +1,9 @@
+const Group = ({ className, children }) => (
+ {children}
+);
+
+Group.propTypes = {
+ children: PropTypes.node.isRequired
+};
+
+export default Group;
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.jsx b/app/components/views/SettingsPage/helpers/Label/Label.jsx
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.jsx
rename to app/components/views/SettingsPage/helpers/Label/Label.jsx
diff --git a/app/components/views/SettingsPage/helpers/Label/Label.module.css b/app/components/views/SettingsPage/helpers/Label/Label.module.css
new file mode 100644
index 0000000000..5420954dc0
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/Label/Label.module.css
@@ -0,0 +1,7 @@
+.label {
+ color: var(--grey-7);
+}
+
+.label button {
+ margin-right: 0;
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Label/index.js b/app/components/views/SettingsPage/helpers/Label/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/helpers/Label/index.js
rename to app/components/views/SettingsPage/helpers/Label/index.js
diff --git a/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.jsx b/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.jsx
new file mode 100644
index 0000000000..26f55c7f0d
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.jsx
@@ -0,0 +1,12 @@
+import styles from "./Wrapper.module.css";
+import { classNames } from "pi-ui";
+
+const Wrapper = ({ className, children }) => (
+ {children}
+);
+
+Wrapper.propTypes = {
+ children: PropTypes.node.isRequired
+};
+
+export default Wrapper;
diff --git a/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.module.css b/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.module.css
new file mode 100644
index 0000000000..b9da7adffc
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.module.css
@@ -0,0 +1,18 @@
+.wrapper {
+ font-size: 13px;
+ display: grid;
+ grid-template-columns: repeat(2, 73.7rem);
+ grid-gap: 3rem;
+}
+
+@media screen and (max-width: 1920px) {
+ .wrapper {
+ grid-template-columns: repeat(1, 76.4rem);
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .wrapper {
+ grid-template-columns: repeat(1, 35.5rem);
+ }
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/index.js b/app/components/views/SettingsPage/helpers/Wrapper/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/index.js
rename to app/components/views/SettingsPage/helpers/Wrapper/index.js
diff --git a/app/components/views/SettingsPage/helpers/index.js b/app/components/views/SettingsPage/helpers/index.js
new file mode 100644
index 0000000000..f45ba98e04
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/index.js
@@ -0,0 +1,5 @@
+export { default as Wrapper } from "./Wrapper";
+export { default as Group } from "./Group";
+export { default as Label } from "./Label";
+export { default as Box } from "./Box";
+export { default as ConfirmRestartModal } from "./ConfirmRestartModal";
diff --git a/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.jsx b/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.jsx
index f30fed9225..bbd95105f7 100644
--- a/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.jsx
+++ b/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.jsx
@@ -1,8 +1,7 @@
-import Select from "react-select";
import { FormattedMessage as T, defineMessages } from "react-intl";
import { classNames } from "pi-ui";
import { KeyBlueButton, InfoModalButton } from "buttons";
-import { PathBrowseInput, FileBrowserFilters } from "inputs";
+import { PathBrowseInput, FileBrowserFilters, Select } from "inputs";
import { Subtitle } from "shared";
import styles from "./ExportPage.module.css";
@@ -66,21 +65,12 @@ const ExportPage = ({
}
/>
- {
- // `selectWithBigFont` className is
- // temp solution to skinning from ReactSelectGlobal.css.
- // When react-select will be replaced by the `pi-ui` component,
- // this className can be deleted.
- }
-
+