From 0c317297715f77e4b37f684f46ceddadb51dab65 Mon Sep 17 00:00:00 2001 From: bgptr Date: Wed, 8 Dec 2021 19:46:43 +0100 Subject: [PATCH] split `SettingsPage/SettingsTab/Page.module.css` --- .../views/GetStartedPage/Logs/Logs.jsx | 2 +- .../CustomPrivacyOptions.jsx | 2 +- .../GetStartedPage/Settings/Settings.jsx | 84 ++-- .../Settings/Settings.module.css | 74 ++++ .../views/SettingsPage/LinksTab/LinksTab.jsx | 4 +- .../views/SettingsPage/LinksTab/index.js | 2 +- .../views/SettingsPage/LogsTab/LogsTab.jsx | 3 +- .../views/SettingsPage/LogsTab/index.js | 1 + .../views/SettingsPage/SettingsPage.jsx | 8 +- .../SettingsPage/SettingsTab/Settings.jsx | 69 ++- .../SettingsTab/Settings.module.css | 400 +----------------- .../SettingsPage/SettingsTab/SettingsTab.jsx | 8 +- .../MiscSettings}/MiscSettings.jsx | 39 +- .../MiscSettings/MiscSettings.module.css | 7 + .../SettingsTab/groups/MiscSettings/index.js | 1 + .../NetworkSettings}/NetworkSettings.jsx | 55 ++- .../NetworkSettings.module.css | 11 + .../groups/NetworkSettings/index.js | 1 + .../PrivacySettings}/PrivacySettings.jsx | 44 +- .../PrivacySettings.module.css | 110 +++++ .../groups/PrivacySettings/index.js | 1 + .../ProxySettings}/ProxySettings.jsx | 34 +- .../ProxySettings/ProxySettings.module.css | 11 + .../SettingsTab/groups/ProxySettings/index.js | 1 + .../TimezoneSettings}/TimezoneSettings.jsx | 37 +- .../TimezoneSettings.module.css | 11 + .../groups/TimezoneSettings/index.js | 1 + .../{ => groups/UISettings}/UISettings.jsx | 52 ++- .../groups/UISettings/UISettings.module.css | 11 + .../SettingsTab/groups/UISettings/index.js | 1 + .../SettingsPage/SettingsTab/groups/index.js | 6 + .../SettingsTab/helpers/Column/Column.jsx | 13 + .../helpers/Column/Column.module.css | 27 ++ .../SettingsTab/helpers/Column/index.js | 1 + .../helpers/ColumnTitle/ColumnTitle.jsx | 11 + .../ColumnTitle/ColumnTitle.module.css | 6 + .../SettingsTab/helpers/ColumnTitle/index.js | 1 + .../helpers/ColumnWrapper/ColumnWrapper.jsx | 11 + .../ColumnWrapper/ColumnWrapper.module.css | 35 ++ .../helpers/ColumnWrapper/index.js | 1 + .../SettingsTab/helpers/Group/Group.jsx | 13 + .../helpers/Group/Group.module.css | 37 ++ .../SettingsTab/helpers/Group/index.js | 1 + .../SettingsTab/helpers/Label/Label.jsx | 14 + .../helpers/Label/Label.module.css | 10 + .../SettingsTab/helpers/Label/index.js | 1 + .../SettingsTab/helpers/Row/Row.jsx | 13 + .../SettingsTab/helpers/Row/Row.module.css | 5 + .../SettingsTab/helpers/Row/index.js | 1 + .../SettingsTab/helpers/Wrapper/Wrapper.jsx | 11 + .../helpers/Wrapper/Wrapper.module.css | 33 ++ .../SettingsTab/helpers/Wrapper/index.js | 1 + .../SettingsPage/SettingsTab/helpers/index.js | 7 + .../views/SettingsPage/SettingsTab/index.js | 1 + .../TutorialsTab/TutorialsTab.jsx | 4 +- .../views/SettingsPage/TutorialsTab/index.js | 1 + app/components/views/SettingsPage/index.js | 1 + app/containers/Wallet/Wallet.jsx | 2 +- .../views/SettingsPage/SettingsPage.spec.js | 2 +- 59 files changed, 736 insertions(+), 619 deletions(-) create mode 100644 app/components/views/SettingsPage/LogsTab/index.js rename app/components/views/SettingsPage/SettingsTab/{ => groups/MiscSettings}/MiscSettings.jsx (77%) create mode 100644 app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/MiscSettings.module.css create mode 100644 app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/index.js rename app/components/views/SettingsPage/SettingsTab/{ => groups/NetworkSettings}/NetworkSettings.jsx (84%) create mode 100644 app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.module.css create mode 100644 app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/index.js rename app/components/views/SettingsPage/SettingsTab/{ => groups/PrivacySettings}/PrivacySettings.jsx (89%) create mode 100644 app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.module.css create mode 100644 app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/index.js rename app/components/views/SettingsPage/SettingsTab/{ => groups/ProxySettings}/ProxySettings.jsx (74%) create mode 100644 app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/ProxySettings.module.css create mode 100644 app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/index.js rename app/components/views/SettingsPage/SettingsTab/{ => groups/TimezoneSettings}/TimezoneSettings.jsx (51%) create mode 100644 app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.module.css create mode 100644 app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/index.js rename app/components/views/SettingsPage/SettingsTab/{ => groups/UISettings}/UISettings.jsx (77%) create mode 100644 app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.module.css create mode 100644 app/components/views/SettingsPage/SettingsTab/groups/UISettings/index.js create mode 100644 app/components/views/SettingsPage/SettingsTab/groups/index.js create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.jsx create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.module.css create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/Column/index.js create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.jsx create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.module.css create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/index.js create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.jsx create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.module.css create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/index.js create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.jsx create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.module.css create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/Group/index.js create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.jsx create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.module.css create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/Label/index.js create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.jsx create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.module.css create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/Row/index.js create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.jsx create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.module.css create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/index.js create mode 100644 app/components/views/SettingsPage/SettingsTab/helpers/index.js create mode 100644 app/components/views/SettingsPage/SettingsTab/index.js create mode 100644 app/components/views/SettingsPage/TutorialsTab/index.js create mode 100644 app/components/views/SettingsPage/index.js diff --git a/app/components/views/GetStartedPage/Logs/Logs.jsx b/app/components/views/GetStartedPage/Logs/Logs.jsx index 0a65fd3bc8..30e55e545f 100644 --- a/app/components/views/GetStartedPage/Logs/Logs.jsx +++ b/app/components/views/GetStartedPage/Logs/Logs.jsx @@ -1,5 +1,5 @@ import { Tooltip } from "pi-ui"; -import { LogsTab } from "views/SettingsPage/LogsTab/LogsTab"; +import LogsTab from "views/SettingsPage/LogsTab/LogsTab"; import { GoBackMsg } from "../messages"; import { BackButton, BackButtonArea } from "../helpers"; import styles from "./Logs.module.css"; diff --git a/app/components/views/GetStartedPage/PrivacyPage/CustomPrivacyOptions/CustomPrivacyOptions.jsx b/app/components/views/GetStartedPage/PrivacyPage/CustomPrivacyOptions/CustomPrivacyOptions.jsx index 26ff0122f8..8b6a46bb92 100644 --- a/app/components/views/GetStartedPage/PrivacyPage/CustomPrivacyOptions/CustomPrivacyOptions.jsx +++ b/app/components/views/GetStartedPage/PrivacyPage/CustomPrivacyOptions/CustomPrivacyOptions.jsx @@ -1,5 +1,5 @@ import { FormattedMessage as T } from "react-intl"; -import PrivacySettings from "views/SettingsPage/SettingsTab/PrivacySettings"; +import { PrivacySettings } from "views/SettingsPage/SettingsTab/groups"; import { InvisibleButton, KeyBlueButton } from "buttons"; import { Title, SubTitle } from "../../helpers"; import styles from "./CustomPrivacyOptions.module.css"; diff --git a/app/components/views/GetStartedPage/Settings/Settings.jsx b/app/components/views/GetStartedPage/Settings/Settings.jsx index a46430ad94..2afaceb537 100644 --- a/app/components/views/GetStartedPage/Settings/Settings.jsx +++ b/app/components/views/GetStartedPage/Settings/Settings.jsx @@ -1,13 +1,13 @@ import { useCallback } from "react"; import { FormattedMessage as T } from "react-intl"; -import { classNames, Tooltip } from "pi-ui"; -// XXX add index.js in SettingsTab dir to have one import statement for all -// settings components. -import NetworkSettings from "views/SettingsPage/SettingsTab/NetworkSettings"; -import ProxySettings from "views/SettingsPage/SettingsTab/ProxySettings"; -import PrivacySettings from "views/SettingsPage/SettingsTab/PrivacySettings"; -import UISettings from "views/SettingsPage/SettingsTab/UISettings"; -import TimezoneSettings from "views/SettingsPage/SettingsTab/TimezoneSettings"; +import { Tooltip } from "pi-ui"; +import { + NetworkSettings, + ProxySettings, + PrivacySettings, + UISettings, + TimezoneSettings +} from "views/SettingsPage/SettingsTab/groups"; import { Subtitle } from "shared"; import { KeyBlueButton } from "buttons"; import { GoBackMsg } from "../messages"; @@ -17,10 +17,12 @@ import { DEFAULT_LIGHT_THEME_NAME, DEFAULT_DARK_THEME_NAME } from "pi-ui"; -// XXX we shouldn't import other view css module here, this is breaking -// css modules encapsulation principle - instead the shared classes should be -// moved to a separate components and used in both places. -import settingsTabStyles from "views/SettingsPage/SettingsTab/Settings.module.css"; +import { + Wrapper, + Group, + ColumnWrapper, + Column +} from "views/SettingsPage/SettingsTab//helpers"; import { useSettings } from "hooks"; import { BackButton, BackButtonArea } from "../helpers"; import styles from "./Settings.module.css"; @@ -63,57 +65,45 @@ const SetttingsForm = ({ onSendBack }) => { } /> -
-
+ + } /> -
-
+ + -
-
+ + -
-
-
+ + + -
+ } /> -
-
+ + -
-
+ + -
-
-
+ + + -
+ { /> } /> -
+ { changePassphraseRequestAttempt }} /> -
-
-
+ + + -
+
( +const LinksTab = () => ( <> } />
@@ -69,3 +69,5 @@ export const LinksTab = () => (
); + +export default LinksTab; diff --git a/app/components/views/SettingsPage/LinksTab/index.js b/app/components/views/SettingsPage/LinksTab/index.js index bd506e0062..ae5c36a750 100644 --- a/app/components/views/SettingsPage/LinksTab/index.js +++ b/app/components/views/SettingsPage/LinksTab/index.js @@ -1 +1 @@ -export * from "./LinksTab"; +export { default } from "./LinksTab"; diff --git a/app/components/views/SettingsPage/LogsTab/LogsTab.jsx b/app/components/views/SettingsPage/LogsTab/LogsTab.jsx index b4d5977bb2..b8fd47634a 100644 --- a/app/components/views/SettingsPage/LogsTab/LogsTab.jsx +++ b/app/components/views/SettingsPage/LogsTab/LogsTab.jsx @@ -110,4 +110,5 @@ const LogsTabBody = ({ setInterval, clearInterval }) => { ); }; -export const LogsTab = ReactTimeout(LogsTabBody); +const LogsTab = ReactTimeout(LogsTabBody); +export default LogsTab; diff --git a/app/components/views/SettingsPage/LogsTab/index.js b/app/components/views/SettingsPage/LogsTab/index.js new file mode 100644 index 0000000000..cfa7e6d0a3 --- /dev/null +++ b/app/components/views/SettingsPage/LogsTab/index.js @@ -0,0 +1 @@ +export { default } from "./LogsTab"; diff --git a/app/components/views/SettingsPage/SettingsPage.jsx b/app/components/views/SettingsPage/SettingsPage.jsx index 821a6740e9..155d37e6cc 100644 --- a/app/components/views/SettingsPage/SettingsPage.jsx +++ b/app/components/views/SettingsPage/SettingsPage.jsx @@ -1,10 +1,10 @@ import { FormattedMessage as T } from "react-intl"; import { CloseWalletModalButton } from "buttons"; import { TabbedPage, TitleHeader, DescriptionHeader } from "layout"; -import { LinksTab } from "./LinksTab"; -import { LogsTab } from "./LogsTab/LogsTab"; -import { TutorialsTab } from "./TutorialsTab/TutorialsTab"; -import { SettingsTab } from "./SettingsTab/SettingsTab"; +import LinksTab from "./LinksTab"; +import LogsTab from "./LogsTab"; +import TutorialsTab from "./TutorialsTab"; +import SettingsTab from "./SettingsTab"; import { useSettings } from "hooks"; import styles from "./SettingsPage.module.css"; import { SETTINGS_ICON } from "constants"; diff --git a/app/components/views/SettingsPage/SettingsTab/Settings.jsx b/app/components/views/SettingsPage/SettingsTab/Settings.jsx index eae0beceef..37bb2ab55b 100644 --- a/app/components/views/SettingsPage/SettingsTab/Settings.jsx +++ b/app/components/views/SettingsPage/SettingsTab/Settings.jsx @@ -1,21 +1,20 @@ import { useCallback } from "react"; -import { - classNames, - DEFAULT_DARK_THEME_NAME, - DEFAULT_LIGHT_THEME_NAME -} from "pi-ui"; +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 from "./NetworkSettings"; -import ProxySettings from "./ProxySettings"; -import PrivacySettings from "./PrivacySettings"; -import UISettings from "./UISettings"; -import MiscSettings from "./MiscSettings"; -import TimezoneSettings from "./TimezoneSettings"; +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, @@ -46,8 +45,8 @@ const SettingsPage = ({ return ( <> -
-
+ + } /> -
-
+ + -
-
+ + -
-
-
+ + + -
+ } /> -
-
+ + -
-
+ + -
+ {walletReady && ( -
+ -
+ )} -
-
+ + -
+ } /> -
+ -
-
-
+ + +
diff --git a/app/components/views/SettingsPage/SettingsTab/Settings.module.css b/app/components/views/SettingsPage/SettingsTab/Settings.module.css index e43196bf3f..f2d787101b 100644 --- a/app/components/views/SettingsPage/SettingsTab/Settings.module.css +++ b/app/components/views/SettingsPage/SettingsTab/Settings.module.css @@ -1,198 +1,13 @@ -.wrapper { - display: flex; - justify-content: space-between; - width: 1481px; - flex-direction: row; - font-size: 13px; - flex-wrap: wrap; -} - -.languageSelectInput { - width: 150px; - margin-right: 0; -} - -.group { - display: flex; - flex-direction: column; - margin-bottom: 37px; - width: 720px; -} - .privacy, .security, .timezone { float: left; } -.privacy .columnTitle, -.security .columnTitle, -.timezone .columnTitle { - text-align: left; -} - -.row { - display: flex; - margin-bottom: 20px; - justify-content: flex-end; -} - -.rowChecklist { - flex-wrap: wrap; - justify-content: flex-start; - flex-direction: column; -} - -.rowChecklist .label { - text-align: left; - margin-left: 8px; - margin-right: 0; -} - -.label { - display: inline-block; - margin-right: 14px; - text-align: right; -} - -.restart { - font-weight: bold; -} - -.group.general { +.general { order: 3; } -.columnWrapper { - padding: 30px 40px; - display: flex; - justify-content: space-between; - flex-wrap: wrap; - background: var(--background-back-color); - min-height: 190px; -} - -.columnWrapper .column { - width: 300px; -} - -.columnTitle { - font-size: 19px; - text-transform: capitalize; - margin-bottom: 14px; - line-height: 24px; -} - -.columnWrapper .column .proxy .label { - width: 100px; -} - -.privacy .columnContent { - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} - -.privacy .columnContent .row { - width: 300px; -} - -.privacy .columnContent .row .label { - width: 130px; -} - -.wrapper .label { - width: 116px; -} - -.wrapper .label button { - margin-right: 0; -} -.wrapper .label.gapLimitLabel { - display: flex; - justify-content: flex-end; -} -.wrapper .label.gapLimitLabel label { - margin-right: 0; -} -.wrapper .label.gapLimitLabel button { - width: 24px; -} - -.wrapper .label .infoLabel, -.wrapper .label .infoFieldModalButton { - display: inline; -} - -.infoFieldModalButton { - float: initial; - background-image: var(--info-icon); - background-size: 16px; - margin-right: 5px; -} - -.changePasswordDefaultIcon { - background: var(--change-password-default-icon) no-repeat center; - background-color: var(--input-color); - background-size: 16px; - cursor: pointer; - width: 20px; - height: 20px; - margin-left: 10px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - border: 1px solid transparent; - box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.13); - outline: none; -} - -.changePasswordDefaultIcon:hover { - background-color: var(--input-color-hover); - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08); -} - -.changePasswordDisbledIcon, -.changePasswordLoading { - background: var(--password-inactive-icon) no-repeat center; - background-color: var(--disabled-background-color); - cursor: default; -} - -.changePasswordDisbledIcon:hover, -.changePasswordLoading:hover { - background-color: var(--disabled-background-color) !important; - box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.13) !important; -} - -.input { - display: inline-block; - vertical-align: middle; - width: 150px; - min-width: 150px; - margin-right: 0; -} - -.textInput { - width: 136px; - min-width: 136px; - height: 23px; - padding: 0px 4px 1px 10px; -} - -.settingsTextInput { - width: 150px !important; -} - -.inputError { - width: 290px; - float: right; - height: 100%; - text-align: left; - color: var(--error-red); - padding-top: 5px; -} - .saveButtonWrapper { width: 1481px; text-align: right; @@ -203,121 +18,21 @@ margin-right: 0; } -.closeWalletButton { - float: right; -} - -.updatePassphraseButton { - font-size: 13px; - float: left; - line-height: 23px; - margin-bottom: 26px; -} - -.updatePassphraseButton button { - margin-left: 0; - margin-right: 10px; -} - -.updatePassphraseButton span { - float: left; - margin-top: 1px; - font-size: 13px; - line-height: 17px; -} - -.getStartedContentNewSeed .general { - max-width: 400px; -} - -.hasWarning strong { - color: var(--error-text-color); -} - -.timezoneOption { - margin: 0 0 1rem 0 !important; -} - -.timezoneOption label { - color: var(--input-color-default); -} - @media screen and (min-width: 1680px) and (max-width: 1920px) { - .wrapper { - width: 1240px; - } - - .group { - width: 600px; - } - - .column { - width: 100%; - } - - .group .columnWrapper { - padding-left: 30px; - padding-right: 40px; - } - - .group .columnWrapper .privacy .columnContent .row { - width: 250px; - } - - .group .columnWrapper:nth-of-type(1), - .group .columnWrapper:nth-of-type(3) { - width: 280px; - } - - .group .columnWrapper:nth-of-type(1) .columnTitle, - .group .columnWrapper:nth-of-type(3) .columnTitle { - margin-left: 0; - } - - .group .columnWrapper .column { - width: 245px; - } - .saveButtonWrapper { width: 1240px; } } -@media screen and (min-width: 1400px) and (max-width: 1680px) { - .wrapper { - flex-direction: column; - } - - .group { - width: 1000px; - } - - .group .privacy .columnContent .row { - width: 220px; - flex-wrap: wrap; - margin-right: 200px; - } - .group.privacy { +@media screen and (min-width: 1400px) and (max-width: 1680px) { + .privacy { order: 3; } - .group.privacy .columnWrapper { - padding: 30px 40px; - } - - .group.general { + .general { order: 2; } - .columnWrapper .column { - width: 420px; - } - - .group .wrapper .column.timezone .columnContent .row { - width: 220px; - flex-wrap: wrap; - } - .saveButtonWrapper { width: 1000px; } @@ -329,129 +44,30 @@ } @media screen and (max-width: 1400px) { - .wrapper { - flex-direction: column; - } - - .wrapper .group { - width: 739px; - } - - .wrapper .group.privacy { + .privacy { order: 3; } - .wrapper .group.general { + .general { order: 2; } - .wrapper .group .columnWrapper { - min-height: initial; - padding: 30px 40px; - } - - .wrapper .group .columnWrapper .column { - width: 248px; - } - - .wrapper .group .columnWrapper .column:nth-of-type(1), - .wrapper .group .columnWrapper .column:nth-of-type(3) { - width: 280px; - } - - .wrapper .group .columnWrapper .column:nth-of-type(1) .columnTitle, - .wrapper .group .columnWrapper .column:nth-of-type(3) .columnTitle { - margin-left: 20px; - } - .saveButtonWrapper { width: 740px; } } @media screen and (max-width: 1180px) { - .group { - width: 649px; - } - - .group .columnWrapper { - padding-left: 20px; - } - - .group .columnWrapper .privacy .columnContent .row { - width: 250px; - } - - .group .columnWrapper .column { - width: 248px; - } - - .wrapper .group .columnWrapper .column:nth-of-type(1), - .wrapper .group .columnWrapper .column:nth-of-type(3) { - width: 280px; - } - - .wrapper .group .columnWrapper .column:nth-of-type(1) .columnTitle, - .wrapper .group .columnWrapper .column:nth-of-type(3) .columnTitle { - margin-left: 20px; - } .saveButtonWrapper { - width: 740px; - } - - .app-modal.about-modal, - .app-modal-reduced-bar.about-modal, - .app-modal-standalone.about-modal { - margin-top: 30px; - } - - .privacy .columnTitle, - .security .columnTitle { - text-align: left; + width: 649px; } } @media screen and (max-width: 768px) { - .wrapper { - margin-top: 0; - flex-direction: column; - } - - .wrapper .group { - width: 355px; - margin-bottom: 27px; - } - - .wrapper .group.privacy .columnWrapper { - padding-left: 15px; - padding-right: 35px; - } - - .wrapper .group .columnWrapper { - padding-left: 15px; - padding-right: 35px; - } - - .wrapper .group .columnWrapper .column:nth-of-type(1), - .wrapper .group .columnWrapper .column:nth-of-type(3), - .wrapper .group .columnWrapper .column { - width: 100%; - } - - .wrapper .group .columnWrapper .column:nth-of-type(1) .columnTitle, - .wrapper .group .columnWrapper .column:nth-of-type(3) .columnTitle { - margin-left: 0; - } - - .wrapper .group .columnWrapper .column.timezone { + .timezone { order: 3; } - .wrapper .group .columnWrapper .privacy .columnContent .row { - width: 250px; - margin-right: initial; - } - .saveButtonWrapper { width: 355px; text-align: center; diff --git a/app/components/views/SettingsPage/SettingsTab/SettingsTab.jsx b/app/components/views/SettingsPage/SettingsTab/SettingsTab.jsx index bccdbe95a0..086e483313 100644 --- a/app/components/views/SettingsPage/SettingsTab/SettingsTab.jsx +++ b/app/components/views/SettingsPage/SettingsTab/SettingsTab.jsx @@ -2,7 +2,7 @@ import ErrorScreen from "ErrorScreen"; import SettingsPage from "./Settings"; import { useSettings, useService } from "hooks"; -export const SettingsTab = ({ setThemeName }) => { +const SettingsTab = ({ setThemeName }) => { const { tempSettings, onSaveSettings, @@ -44,3 +44,9 @@ export const SettingsTab = ({ setThemeName }) => { /> ); }; + +SettingsTab.propTypes = { + setThemeName: PropTypes.func +}; + +export default SettingsTab; diff --git a/app/components/views/SettingsPage/SettingsTab/MiscSettings.jsx b/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/MiscSettings.jsx similarity index 77% rename from app/components/views/SettingsPage/SettingsTab/MiscSettings.jsx rename to app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/MiscSettings.jsx index 9516ecafbe..65754fb9d6 100644 --- a/app/components/views/SettingsPage/SettingsTab/MiscSettings.jsx +++ b/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/MiscSettings.jsx @@ -1,15 +1,10 @@ import { FormattedMessage as T } from "react-intl"; import { SettingsInput } from "inputs"; -import styles from "./Settings.module.css"; +import styles from "./MiscSettings.module.css"; import { DiscoverUsageModal } from "modals"; import { KeyBlueButton } from "buttons"; import { useSettings } from "hooks"; - -const propTypes = { - tempSettings: PropTypes.object.isRequired, - currencies: PropTypes.array.isRequired, - onChangeTempSettings: PropTypes.func.isRequired -}; +import { Row, Label, ColumnTitle } from "../../helpers"; const MiscSettings = ({ tempSettings, @@ -29,17 +24,16 @@ const MiscSettings = ({ discoverUsageAttempt, rescanRunning } = useSettings(); + return ( -
-
- -
-
+ <> + } /> +
{walletReady && ( -
- -
+ )} {walletReady && ( -
+ -
+ )}
-
+ ); }; -MiscSettings.propTypes = propTypes; +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 new file mode 100644 index 0000000000..99fd4eaa05 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/MiscSettings.module.css @@ -0,0 +1,7 @@ +.input { + display: inline-block; + vertical-align: middle; + width: 150px; + min-width: 150px; + margin-right: 0; +} diff --git a/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/index.js b/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/index.js new file mode 100644 index 0000000000..c0612ed5a9 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/index.js @@ -0,0 +1 @@ +export { default } from "./MiscSettings"; diff --git a/app/components/views/SettingsPage/SettingsTab/NetworkSettings.jsx b/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.jsx similarity index 84% rename from app/components/views/SettingsPage/SettingsTab/NetworkSettings.jsx rename to app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.jsx index 73f452b811..68fddcc8c1 100644 --- a/app/components/views/SettingsPage/SettingsTab/NetworkSettings.jsx +++ b/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.jsx @@ -2,12 +2,8 @@ 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 "./Settings.module.css"; - -const propTypes = { - tempSettings: PropTypes.object.isRequired, - onChangeTempSettings: PropTypes.func.isRequired -}; +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 }) => ( -
-
- -
-
-
-
-
+ ); -NetworkSettings.propTypes = propTypes; +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 new file mode 100644 index 0000000000..265d2e7107 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.module.css @@ -0,0 +1,11 @@ +.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/NetworkSettings/index.js b/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/index.js new file mode 100644 index 0000000000..447e59de8d --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/index.js @@ -0,0 +1 @@ +export { default } from "./NetworkSettings"; diff --git a/app/components/views/SettingsPage/SettingsTab/PrivacySettings.jsx b/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.jsx similarity index 89% rename from app/components/views/SettingsPage/SettingsTab/PrivacySettings.jsx rename to app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.jsx index 4fe0a088be..82bff8bfd1 100644 --- a/app/components/views/SettingsPage/SettingsTab/PrivacySettings.jsx +++ b/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.jsx @@ -9,15 +9,8 @@ import { import { ChangePassphraseButton } from "buttons"; import { WatchOnlyWarnNotification } from "shared"; import { classNames, Checkbox } from "pi-ui"; -import styles from "./Settings.module.css"; - -const propTypes = { - tempSettings: PropTypes.object.isRequired, - onAttemptChangePassphrase: PropTypes.func, - isChangePassPhraseDisabled: PropTypes.bool.isRequired, - changePassphraseRequestAttempt: PropTypes.bool.isRequired, - onChangeTempSettings: PropTypes.func.isRequired -}; +import styles from "./PrivacySettings.module.css"; +import { Row } from "../../helpers"; const PrivacySettings = ({ tempSettings, @@ -43,7 +36,7 @@ const PrivacySettings = ({
{walletReady && ( -
+
@@ -75,9 +68,9 @@ const PrivacySettings = ({ />
-
+ )} -
+ -
-
+ + -
+
-
+ @@ -146,8 +139,8 @@ const PrivacySettings = ({ } onChange={toggle(EXTERNALREQUEST_UPDATE_CHECK)} /> -
-
+ + } id="politeia" @@ -164,8 +157,8 @@ const PrivacySettings = ({ } onChange={toggle(EXTERNALREQUEST_POLITEIA)} /> -
-
+ + -
+
); }; -PrivacySettings.propTypes = propTypes; +PrivacySettings.propTypes = { + tempSettings: PropTypes.object.isRequired, + onAttemptChangePassphrase: PropTypes.func, + isChangePassPhraseDisabled: PropTypes.bool.isRequired, + changePassphraseRequestAttempt: PropTypes.bool.isRequired, + onChangeTempSettings: PropTypes.func.isRequired, + walletReady: PropTypes.bool.isRequired +}; export default PrivacySettings; diff --git a/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.module.css b/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.module.css new file mode 100644 index 0000000000..babc38fee6 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.module.css @@ -0,0 +1,110 @@ +.column { + width: 300px; +} + +.row { + justify-content: flex-start; + flex-direction: column; +} + +.updatePassphraseButton { + font-size: 13px; + float: left; + line-height: 23px; + margin-bottom: 26px; +} + +.updatePassphraseButton button { + margin-left: 0; + margin-right: 10px; +} + +.updatePassphraseButton span { + float: left; + margin-top: 1px; + font-size: 13px; + line-height: 17px; +} + +.changePasswordDefaultIcon { + background: var(--change-password-default-icon) no-repeat center; + background-color: var(--input-color); + background-size: 16px; + cursor: pointer; + width: 20px; + height: 20px; + margin-left: 10px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + border: 1px solid transparent; + box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.13); + outline: none; +} + +.changePasswordDefaultIcon:hover { + background-color: var(--input-color-hover); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08); +} + +.changePasswordDisbledIcon, +.changePasswordLoading { + background: var(--password-inactive-icon) no-repeat center; + background-color: var(--disabled-background-color); + cursor: default; +} + +.changePasswordDisbledIcon:hover, +.changePasswordLoading:hover { + background-color: var(--disabled-background-color) !important; + box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.13) !important; +} + +@media screen and (min-width: 1680px) and (max-width: 1920px) { + .column { + width: 245px; + } + + .row { + width: 250px; + } +} + +@media screen and (min-width: 1400px) and (max-width: 1680px) { + .row { + width: 220px; + flex-wrap: wrap; + margin-right: 200px; + } + + .column { + width: 420px; + } +} + +@media screen and (max-width: 1400px) { + .column { + width: 248px; + } +} + +@media screen and (max-width: 1180px) { + .row { + width: 250px; + } + + .column { + width: 248px; + } +} + +@media screen and (max-width: 768px) { + .column { + width: 100%; + } + + .row { + width: 250px; + margin-right: initial; + } +} diff --git a/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/index.js b/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/index.js new file mode 100644 index 0000000000..f470e4acdf --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/index.js @@ -0,0 +1 @@ +export { default } from "./PrivacySettings"; diff --git a/app/components/views/SettingsPage/SettingsTab/ProxySettings.jsx b/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/ProxySettings.jsx similarity index 74% rename from app/components/views/SettingsPage/SettingsTab/ProxySettings.jsx rename to app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/ProxySettings.jsx index 389271becb..64854b0535 100644 --- a/app/components/views/SettingsPage/SettingsTab/ProxySettings.jsx +++ b/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/ProxySettings.jsx @@ -6,7 +6,8 @@ import { PROXYTYPE_SOCKS4, PROXYTYPE_SOCKS5 } from "constants"; -import styles from "./Settings.module.css"; +import styles from "./ProxySettings.module.css"; +import { Row, Label, ColumnTitle } from "../../helpers"; const availableProxyTypes = [ { name: , value: null }, @@ -17,15 +18,13 @@ const availableProxyTypes = [ ]; const ProxySettings = ({ tempSettings, onChangeTempSettings }) => ( -
-
- -
-
-
-
-
+ ); +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 new file mode 100644 index 0000000000..265d2e7107 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/ProxySettings.module.css @@ -0,0 +1,11 @@ +.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/ProxySettings/index.js b/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/index.js new file mode 100644 index 0000000000..93ec86ace1 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/index.js @@ -0,0 +1 @@ +export { default } from "./ProxySettings"; diff --git a/app/components/views/SettingsPage/SettingsTab/TimezoneSettings.jsx b/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.jsx similarity index 51% rename from app/components/views/SettingsPage/SettingsTab/TimezoneSettings.jsx rename to app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.jsx index 3e89613367..3dd91839c8 100644 --- a/app/components/views/SettingsPage/SettingsTab/TimezoneSettings.jsx +++ b/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.jsx @@ -1,11 +1,11 @@ import { FormattedMessage as T } from "react-intl"; import { RadioButtonGroup } from "pi-ui"; -import styles from "./Settings.module.css"; +import styles from "./TimezoneSettings.module.css"; +import { ColumnTitle } from "../../helpers"; const TimezoneSettings = ({ tempSettings, onChangeTempSettings }) => { - const update = (value) => { - onChangeTempSettings({ timezone: value }); - }; + const update = (value) => onChangeTempSettings({ timezone: value }); + const timezoneOptions = [ { value: "local", @@ -30,21 +30,22 @@ const TimezoneSettings = ({ tempSettings, onChangeTempSettings }) => { ]; return ( -
-
- -
-
- update(option.value)} - value={tempSettings.timezone} - vertical - optionsClassName={styles.timezoneOption} - /> -
-
+ <> + } /> + update(option.value)} + value={tempSettings.timezone} + vertical + optionsClassName={styles.timezoneOption} + /> + ); }; +TimezoneSettings.propTypes = { + tempSettings: PropTypes.object.isRequired, + onChangeTempSettings: PropTypes.func.isRequired +}; + export default TimezoneSettings; diff --git a/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.module.css b/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.module.css new file mode 100644 index 0000000000..a4d4fc36ed --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.module.css @@ -0,0 +1,11 @@ +.timezoneOption { + margin: 0 0 1rem 0 !important; +} + +.timezoneOption > label > span:nth-child(1) { + border-color: var(--input-color); +} + +.timezoneOption > label > span:nth-child(2) { + background-color: var(--input-color); +} diff --git a/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/index.js b/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/index.js new file mode 100644 index 0000000000..061607559c --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/index.js @@ -0,0 +1 @@ +export { default } from "./TimezoneSettings"; diff --git a/app/components/views/SettingsPage/SettingsTab/UISettings.jsx b/app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.jsx similarity index 77% rename from app/components/views/SettingsPage/SettingsTab/UISettings.jsx rename to app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.jsx index af3520ed7a..614619c057 100644 --- a/app/components/views/SettingsPage/SettingsTab/UISettings.jsx +++ b/app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.jsx @@ -1,15 +1,9 @@ import { FormattedMessage as T } from "react-intl"; import { SettingsInput, LanguageSelectInput } from "inputs"; import { InfoDocFieldModalButton } from "buttons"; -import { classNames } from "pi-ui"; -import styles from "./Settings.module.css"; +import styles from "./UISettings.module.css"; import { DEFAULT_DARK_THEME_NAME, DEFAULT_LIGHT_THEME_NAME } from "pi-ui"; - -const propTypes = { - tempSettings: PropTypes.object.isRequired, - locales: PropTypes.array.isRequired, - onChangeTempSettings: PropTypes.func.isRequired -}; +import { Row, Label, ColumnTitle } from "../../helpers"; const availableUIThemeTypes = [ { @@ -23,15 +17,13 @@ const availableUIThemeTypes = [ ]; const UISettings = ({ tempSettings, locales, onChangeTempSettings }) => ( -
-
- -
-
-
-
-
+ ); -UISettings.propTypes = propTypes; +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 new file mode 100644 index 0000000000..57dda2ad8a --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.module.css @@ -0,0 +1,11 @@ +.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/UISettings/index.js b/app/components/views/SettingsPage/SettingsTab/groups/UISettings/index.js new file mode 100644 index 0000000000..87c2637bf8 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/groups/UISettings/index.js @@ -0,0 +1 @@ +export { default } from "./UISettings"; diff --git a/app/components/views/SettingsPage/SettingsTab/groups/index.js b/app/components/views/SettingsPage/SettingsTab/groups/index.js new file mode 100644 index 0000000000..3c18dbad16 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/groups/index.js @@ -0,0 +1,6 @@ +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 new file mode 100644 index 0000000000..3ee79f163a --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.jsx @@ -0,0 +1,13 @@ +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 new file mode 100644 index 0000000000..9978ce2338 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.module.css @@ -0,0 +1,27 @@ +.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 new file mode 100644 index 0000000000..5adccd4886 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/Column/index.js @@ -0,0 +1 @@ +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 new file mode 100644 index 0000000000..0bb0e64137 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.jsx @@ -0,0 +1,11 @@ +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 new file mode 100644 index 0000000000..c9385865ae --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.module.css @@ -0,0 +1,6 @@ +.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 new file mode 100644 index 0000000000..ba83bb52b4 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/index.js @@ -0,0 +1 @@ +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 new file mode 100644 index 0000000000..4203fab461 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.jsx @@ -0,0 +1,11 @@ +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 new file mode 100644 index 0000000000..567c194fa8 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.module.css @@ -0,0 +1,35 @@ +.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 new file mode 100644 index 0000000000..b5318c917d --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/index.js @@ -0,0 +1 @@ +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 new file mode 100644 index 0000000000..df40d42033 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.jsx @@ -0,0 +1,13 @@ +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 new file mode 100644 index 0000000000..42a14325f4 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.module.css @@ -0,0 +1,37 @@ +.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 new file mode 100644 index 0000000000..867468fee1 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/Group/index.js @@ -0,0 +1 @@ +export { default } from "./Group"; diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.jsx b/app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.jsx new file mode 100644 index 0000000000..e0f96a2289 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.jsx @@ -0,0 +1,14 @@ +import styles from "./Label.module.css"; + +const Label = ({ id, children }) => ( +
+ {children} +
+); + +Label.propTypes = { + id: PropTypes.string.isRequired, + children: PropTypes.node.isRequired +}; + +export default Label; diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.module.css b/app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.module.css new file mode 100644 index 0000000000..3eb76f19a0 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.module.css @@ -0,0 +1,10 @@ +.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/Label/index.js b/app/components/views/SettingsPage/SettingsTab/helpers/Label/index.js new file mode 100644 index 0000000000..8c8faebf85 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/Label/index.js @@ -0,0 +1 @@ +export { default } from "./Label"; diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.jsx b/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.jsx new file mode 100644 index 0000000000..e8dcae2199 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.jsx @@ -0,0 +1,13 @@ +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 new file mode 100644 index 0000000000..f3da300152 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.module.css @@ -0,0 +1,5 @@ +.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 new file mode 100644 index 0000000000..74ea459f62 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/Row/index.js @@ -0,0 +1 @@ +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 new file mode 100644 index 0000000000..30be6165de --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.jsx @@ -0,0 +1,11 @@ +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 new file mode 100644 index 0000000000..f65467757e --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.module.css @@ -0,0 +1,33 @@ +.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/Wrapper/index.js b/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/index.js new file mode 100644 index 0000000000..08bb7582d2 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/index.js @@ -0,0 +1 @@ +export { default } from "./Wrapper"; diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/index.js b/app/components/views/SettingsPage/SettingsTab/helpers/index.js new file mode 100644 index 0000000000..7de531a4ea --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/helpers/index.js @@ -0,0 +1,7 @@ +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 new file mode 100644 index 0000000000..a1fbd9d339 --- /dev/null +++ b/app/components/views/SettingsPage/SettingsTab/index.js @@ -0,0 +1 @@ +export { default } from "./SettingsTab"; diff --git a/app/components/views/SettingsPage/TutorialsTab/TutorialsTab.jsx b/app/components/views/SettingsPage/TutorialsTab/TutorialsTab.jsx index 3037cfeadd..f3fdc8ef5b 100644 --- a/app/components/views/SettingsPage/TutorialsTab/TutorialsTab.jsx +++ b/app/components/views/SettingsPage/TutorialsTab/TutorialsTab.jsx @@ -3,7 +3,7 @@ import { Subtitle } from "shared"; import { Link } from "react-router-dom"; import styles from "./TutorialsTab.module.css"; -export const TutorialsTab = () => ( +const TutorialsTab = () => ( <> } />
@@ -20,3 +20,5 @@ export const TutorialsTab = () => (
); + +export default TutorialsTab; diff --git a/app/components/views/SettingsPage/TutorialsTab/index.js b/app/components/views/SettingsPage/TutorialsTab/index.js new file mode 100644 index 0000000000..d28ef00780 --- /dev/null +++ b/app/components/views/SettingsPage/TutorialsTab/index.js @@ -0,0 +1 @@ +export { default } from "./TutorialsTab"; diff --git a/app/components/views/SettingsPage/index.js b/app/components/views/SettingsPage/index.js new file mode 100644 index 0000000000..dc66a8b5dd --- /dev/null +++ b/app/components/views/SettingsPage/index.js @@ -0,0 +1 @@ +export { default } from "./SettingsPage"; diff --git a/app/containers/Wallet/Wallet.jsx b/app/containers/Wallet/Wallet.jsx index 7c8d1604aa..bbb5c13628 100644 --- a/app/containers/Wallet/Wallet.jsx +++ b/app/containers/Wallet/Wallet.jsx @@ -2,7 +2,7 @@ import ReactTimeout from "react-timeout"; import { Route } from "react-router-dom"; import { StaticSwitch } from "shared"; import HomePage from "components/views/HomePage/"; -import SettingsPage from "components/views/SettingsPage/SettingsPage"; +import SettingsPage from "components/views/SettingsPage"; import AccountsPage from "components/views/AccountsPage"; import WalletError from "components/views/WalletError"; import ErrorScreen from "components/ErrorScreen"; diff --git a/test/unit/components/views/SettingsPage/SettingsPage.spec.js b/test/unit/components/views/SettingsPage/SettingsPage.spec.js index 6f398c8fd9..764ad77b78 100644 --- a/test/unit/components/views/SettingsPage/SettingsPage.spec.js +++ b/test/unit/components/views/SettingsPage/SettingsPage.spec.js @@ -1,4 +1,4 @@ -import SettingsPage from "components/views/SettingsPage/SettingsPage"; +import SettingsPage from "components/views/SettingsPage"; import { render } from "test-utils.js"; import user from "@testing-library/user-event"; import { screen } from "@testing-library/react";