Split SettingsPage/SettingsTab/Settings.module.css

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";

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";

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 }) => {
           </Tooltip>
         </BackButtonArea>
         <Subtitle title={<T id="settings.subtitle" m="Settings" />} />
-        <div className={settingsTabStyles.wrapper}>
-          <div className={settingsTabStyles.group}>
+        <Wrapper>
+          <Group>
             <Subtitle
               title={
                 <T id="settings.group-title.connectivity" m="Connectivity" />
               }
             />
-            <div className={settingsTabStyles.columnWrapper}>
-              <div className={settingsTabStyles.column}>
+            <ColumnWrapper>
+              <Column>
                 <NetworkSettings
                   {...{
                     tempSettings,
                     onChangeTempSettings
                   }}
                 />
-              </div>
-              <div className={settingsTabStyles.column}>
+              </Column>
+              <Column>
                 <ProxySettings {...{ tempSettings, onChangeTempSettings }} />
-              </div>
-            </div>
-          </div>
+              </Column>
+            </ColumnWrapper>
+          </Group>
 
-          <div
-            className={classNames(
-              settingsTabStyles.group,
-              settingsTabStyles.general
-            )}>
+          <Group className={styles.general}>
             <Subtitle
               title={<T id="settings.group-title.general" m="General" />}
             />
-            <div className={settingsTabStyles.columnWrapper}>
-              <div className={settingsTabStyles.column}>
+            <ColumnWrapper>
+              <Column>
                 <UISettings
                   {...{ tempSettings, locales, onChangeTempSettings }}
                 />
-              </div>
-              <div
-                className={classNames(
-                  settingsTabStyles.column,
-                  settingsTabStyles.timezone
-                )}>
+              </Column>
+              <Column className={styles.timezone}>
                 <TimezoneSettings {...{ tempSettings, onChangeTempSettings }} />
-              </div>
-            </div>
-          </div>
+              </Column>
+            </ColumnWrapper>
+          </Group>
 
-          <div
-            className={classNames(
-              settingsTabStyles.group,
-              settingsTabStyles.privacy
-            )}>
+          <Group className={styles.privacy}>
             <Subtitle
               title={
                 <T
@@ -122,7 +112,7 @@ const SetttingsForm = ({ onSendBack }) => {
                 />
               }
             />
-            <div className={settingsTabStyles.columnWrapper}>
+            <ColumnWrapper>
               <PrivacySettings
                 {...{
                   tempSettings,
@@ -133,11 +123,11 @@ const SetttingsForm = ({ onSendBack }) => {
                   changePassphraseRequestAttempt
                 }}
               />
-            </div>
-          </div>
-        </div>
+            </ColumnWrapper>
+          </Group>
+        </Wrapper>
       </div>
-      <div className={settingsTabStyles.formSaveButtonWrapper}>
+      <div className={styles.saveButtonWrapper}>
         <KeyBlueButton
           disabled={!areSettingsDirty}
           size="large"

app/components/views/GetStartedPage/Settings/Settings.module.css

@@ -5,6 +5,26 @@
   right: initial;
 }
 
+.privacy,
+.security,
+.timezone {
+  float: left;
+}
+
+.general {
+  order: 3;
+}
+
+.saveButtonWrapper {
+  width: 1481px;
+  text-align: right;
+}
+
+.saveButton {
+  display: inline-block;
+  margin-right: 0;
+}
+
 @media screen and (max-width: 1920px) {
   .backButtonArea {
     left: 1230px;
@@ -17,15 +37,69 @@
   }
 }
 
+@media screen and (min-width: 1680px) and (max-width: 1920px) {
+  .saveButtonWrapper {
+    width: 1240px;
+  }
+}
+
+@media screen and (min-width: 1400px) and (max-width: 1680px) {
+  .privacy {
+    order: 3;
+  }
+
+  .general {
+    order: 2;
+  }
+
+  .saveButtonWrapper {
+    width: 1000px;
+  }
+
+  .timezone {
+    margin-left: 20px;
+  }
+}
+
 @media screen and (max-width: 1400px) {
   .backButtonArea {
     left: 726px;
   }
+
+  .privacy {
+    order: 3;
+  }
+
+  .general {
+    order: 2;
+  }
+
+  .saveButtonWrapper {
+    width: 740px;
+  }
+}
+
+@media screen and (max-width: 1180px) {
+  .saveButtonWrapper {
+    width: 649px;
+  }
+  .backButtonArea {
+    left: 638px;
+  }
 }
 
 @media screen and (max-width: 768px) {
   .backButtonArea {
     top: 40px;
     left: 342px;
   }
+
+  .timezone {
+    order: 3;
+  }
+
+  .saveButtonWrapper {
+    width: 355px;
+    text-align: center;
+  }
 }

app/components/views/SettingsPage/LinksTab/LinksTab.jsx

@@ -3,7 +3,7 @@ import { HelpLink, HelpLinkInfoModal, HelpLinkAboutModal } from "buttons";
 import { Subtitle } from "shared";
 import styles from "./LinksTab.module.css";
 
-export const LinksTab = () => (
+const LinksTab = () => (
   <>
     <Subtitle title={<T id="help.subtitle.project" m="Project Related" />} />
     <div className={styles.list}>
@@ -69,3 +69,5 @@ export const LinksTab = () => (
     </div>
   </>
 );
+
+export default LinksTab;

app/components/views/SettingsPage/LinksTab/index.js

@@ -1 +1 @@
-export * from "./LinksTab";
+export { default } from "./LinksTab";

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;

app/components/views/SettingsPage/LogsTab/index.js

@@ -0,0 +1 @@
+export { default } from "./LogsTab";

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";