GetStarted & Settings Pages: functional components, css module & custom hooks

app/components/buttons/EnableExternalRequestButton.js

@@ -1,4 +1,4 @@
-import { settings } from "connectors";
+import { settings } from "connectors"; // use useSettings hook
 import KeyBlueButton from "./KeyBlueButton";
 
 const EnableExternalRequestButton = ({

app/components/indicators/AnimatedLinearProgressFull.js → app/components/indicators/AnimatedLinearProgressFull.jsx

@@ -4,6 +4,8 @@ import { HeaderTimeMsg } from "views/GetStartedPage/messages";
 import { FormattedRelative } from "shared";
 import { FormattedMessage as T } from "react-intl";
 import ReactTimeout from "react-timeout";
+import { classNames } from "pi-ui";
+import styles from "./indicators.module.css";
 
 @autobind
 class AnimatedLinearProgressFull extends React.Component {
@@ -49,10 +51,9 @@ class AnimatedLinearProgressFull extends React.Component {
       );
     }
     const { lastDcrwalletLogLine } = this.state;
-
     return (
       <>
-        <div className={"linear-progress " + animationType}>
+        <div className={classNames("linear-progress", animationType)}>
           {getDaemonSynced || isSPV ? (
             <div
               className={"linear-progress-bar " + (error ? "error" : null)}
@@ -110,12 +111,12 @@ class AnimatedLinearProgressFull extends React.Component {
         </div>
         <div>
           {getCurrentBlockCount && !getDaemonSynced && (
-            <div className="loader-bar-estimation">
+            <div className={styles.loaderBarEstimation}>
               <T
                 id="getStarted.chainLoading.syncEstimation"
                 m="Blockchain download estimated complete: "
               />
-              <span className="bold">
+              <span className={styles.bold}>
                 {finishDateEstimation && (
                   <FormattedRelative value={finishDateEstimation} />
                 )}
@@ -124,18 +125,16 @@ class AnimatedLinearProgressFull extends React.Component {
             </div>
           )}
           {selectedWalletSelector && syncFetchHeadersLastHeaderTime && (
-            <div className="loader-bar-estimation">
+            <div className={styles.loaderBarEstimation}>
               <HeaderTimeMsg />
-              <span className="bold">
+              <span className={styles.bold}>
                 <FormattedRelative value={syncFetchHeadersLastHeaderTime} />
               </span>
             </div>
           )}
           {selectedWalletSelector && lastDcrwalletLogLine && (
-            <div className="get-started-last-log-lines">
-              <div className="last-dcrwallet-log-line">
-                {lastDcrwalletLogLine}
-              </div>
+            <div className={styles.lastLogLines}>
+              <div>{lastDcrwalletLogLine}</div>
             </div>
           )}
         </div>

app/components/indicators/indicators.module.css

@@ -14,3 +14,23 @@
   font-size: 120%;
   padding: 1em;
 }
+
+.lastLogLines {
+  font-size: 9px;
+}
+
+.loaderBarEstimation {
+  text-align: left;
+  font-size: 9px;
+}
+
+.loaderBarEstimation .bold {
+  opacity: 1;
+  font-weight: 700;
+}
+
+@media screen and (max-width: 768px) {
+  .loaderBarEstimation {
+    display: none;
+  }
+}

app/components/inputs/LanguageSelect.js → app/components/inputs/LanguageSelectInput/LanguageSelectInput.jsx

@@ -1,9 +1,13 @@
 import Select from "react-select";
 import { injectIntl } from "react-intl";
-import "style/Input.less";
+import "style/Input.less"; // XXXXXX: consider ditching this dep isit still working with the new css module ? :thinking:
+import { classNames } from "pi-ui";
+import styles from "./LanguageSelectInput.module.css";
+
+// XXX: functional component
 
 @autobind
-class SettingsInput extends React.Component {
+class LanguageSelectInput extends React.Component {
   static propTypes = {
     className: PropTypes.string
   };
@@ -23,10 +27,10 @@ class SettingsInput extends React.Component {
   }
 
   render() {
-    const { className, valueKey, labelKey, options } = this.props;
+    const { valueKey, labelKey, options } = this.props;
 
     return (
-      <div className={className}>
+      <div className={styles.input}>
         <Select
           clearable={false}
           multi={false}
@@ -54,9 +58,9 @@ class SettingsInput extends React.Component {
 
   valueRenderer(option) {
     return (
-      <div className="language-label">
-        <div className={"flag " + option.language} />
-        <div className="name">{option.description}</div>
+      <div className={styles.label}>
+        <div className={classNames(styles.flag, styles[option.language])} />
+        <div className={styles.name}>{option.description}</div>
       </div>
     );
   }
@@ -67,4 +71,4 @@ class SettingsInput extends React.Component {
   }
 }
 
-export default injectIntl(SettingsInput);
+export default injectIntl(LanguageSelectInput);

app/components/inputs/LanguageSelectInput/LanguageSelectInput.module.css

@@ -0,0 +1,82 @@
+.input {
+  width: 200px;
+  margin-right: 0.5em;
+}
+
+.input .selectControl {
+  border: 1px solid var(--select-border);
+  border-radius: 5px;
+  height: 29px;
+  padding-top: 5px;
+  padding-right: 5px;
+}
+
+.input .selectControl:hover {
+  border: 1px solid var(--disabled-color);
+}
+
+.button {
+  padding: 5px 16px 10px 16px;
+}
+
+.label {
+  display: flex;
+}
+
+.label .flag {
+  margin: 5px 5px 0 0;
+}
+
+.flag {
+  flex-grow: 2;
+  background-repeat: no-repeat;
+  background-size: 20px;
+  width: 20px;
+  height: 20px;
+  margin-left: 10px;
+  margin-top: 2px;
+}
+
+.flag.en-AU {
+  background-image: var(--flag-au);
+}
+
+.flag.de {
+  background-image: var(--flag-de);
+}
+
+.flag.en {
+  background-image: var(--flag-en);
+}
+
+.flag.en-GB {
+  background-image: var(--flag-gb);
+}
+
+.flag.es {
+  background-image: var(--flag-es);
+}
+
+.flag.fr {
+  background-image: var(--flag-fr);
+}
+
+.flag.ja {
+  background-image: var(--flag-ja);
+}
+
+.flag.pt-BR {
+  background-image: var(--flag-ptbr);
+}
+
+.flag.zh {
+  background-image: var(--flag-zh);
+}
+
+.name {
+  flex-grow: 4;
+  width: 100px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

app/components/inputs/ReceiveAccountsSelect.js → app/components/inputs/ReceiveAccountsSelect.jsx

@@ -1,18 +1,25 @@
+import { useCallback } from "react";
 import AccountsSelect from "./AccountsSelect";
 import { useSelector, useDispatch } from "react-redux";
 import * as ca from "actions/ControlActions";
 import * as sel from "selectors";
 
 function ReceiveAccountsSelect({ onChange }) {
   const dispatch = useDispatch();
-  const getNextAddressAttempt = (value) =>
-    dispatch(ca.getNextAddressAttempt(value));
   const mixedAccount = useSelector(sel.getMixedAccount);
   const account = useSelector(sel.nextAddressAccount);
-  const onChangeAccount = (account) => {
-    onChange && onChange(account);
-    getNextAddressAttempt(account.value);
-  };
+
+  const getNextAddressAttempt = useCallback(
+    (value) => dispatch(ca.getNextAddressAttempt(value)),
+    [dispatch]
+  );
+  const onChangeAccount = useCallback(
+    (account) => {
+      onChange && onChange(account);
+      getNextAddressAttempt(account.value);
+    },
+    [getNextAddressAttempt, onChange]
+  );
 
   return (
     <AccountsSelect

app/components/inputs/index.js

@@ -4,7 +4,7 @@ export { default as BlocksInput } from "./BlocksInput";
 export { default as DcrInput } from "./DcrInput";
 export { default as FeeInput } from "./FeeInput";
 export { default as Input } from "./Input";
-export { default as LanguageSelect } from "./LanguageSelect";
+export { default as LanguageSelectInput } from "./LanguageSelectInput/LanguageSelectInput";
 export { default as NumericInput } from "./NumericInput";
 export { default as NumTicketsInput } from "./NumTicketsInput";
 export { default as PasswordInput } from "./PasswordInput";

app/components/shared/CreatePassPhrase/CreatePassPhrase.module.css

@@ -0,0 +1,24 @@
+.passphraseRow {
+  height: 50px;
+}
+
+.passphrase .confirmSeedLabel {
+  margin-top: 1px;
+}
+
+.confirmSeedLabel {
+  margin-top: 8px;
+  margin-right: 10px;
+  font-size: 13px;
+  line-height: 17px;
+  width: 150px;
+  margin-left: -160px;
+  color: var(--wallet-tutorial-text);
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.inputPrivatePassword {
+  width: 288px;
+  padding-bottom: 3px;
+}

app/components/shared/CreatePassPhrase/PassPhraseInputs.js → app/components/shared/CreatePassPhrase/PassPhraseInputs.jsx

@@ -1,7 +1,8 @@
 import { FormattedMessage as T, injectIntl, defineMessages } from "react-intl";
 import { PasswordInput } from "inputs";
 import { InfoDocFieldModalButton } from "buttons";
-import "style/CreateWalletForm.less";
+import { classNames } from "pi-ui";
+import styles from "./CreatePassPhrase.module.css";
 
 const messages = defineMessages({
   passphrasePlaceholder: {
@@ -46,15 +47,20 @@ const PassPhraseInputs = ({
   isValid
 }) => (
   <>
-    <div className="is-row passphrase">
-      <div className="confirm-seed-label-text passphrase is-row">
+    <div className={classNames("is-row", styles.passphraseRow)}>
+      <div
+        className={classNames(
+          "is-row",
+          styles.confirmSeedLabel,
+          styles.passphraseRow
+        )}>
         <InfoDocFieldModalButton document="PassphraseInfo" />
         <div>{passPhraseLabel}</div>
       </div>
       <form>
         <PasswordInput
           required
-          className="input-private-password"
+          className={styles.inputPrivatePassword}
           placeholder={intl.formatMessage(messages.passphrasePlaceholder)}
           value={passPhrase}
           onKeyDown={onKeyDown}
@@ -64,13 +70,14 @@ const PassPhraseInputs = ({
         />
       </form>
     </div>
-    <div className="is-row passphrase">
-      <div className="confirm-seed-label-text passphrase">
+    <div className={classNames("is-row", styles.passphraseRow)}>
+      <div
+        className={classNames(styles.confirmSeedLabel, styles.passphraseRow)}>
         {passPhraseVerificationLabel}
       </div>
       <form>
         <PasswordInput
-          className="input-private-password"
+          className={styles.inputPrivatePassword}
           invalid={!isValid}
           invalidMessage={passPhraseVerificationError}
           placeholder={intl.formatMessage(messages.verifyPassphrasePlaceholder)}

app/components/shared/Subtitle.jsx

@@ -0,0 +1,8 @@
+import { classNames } from "pi-ui";
+
+export default ({ title, children, className }) => (
+  <div className={classNames("tabbed-page-subtitle", className)}>
+    {title}
+    {children}
+  </div>
+);

app/components/shared/index.js

@@ -15,7 +15,7 @@ export { default as PoliteiaLink } from "./PoliteiaLink";
 export { default as WatchOnlyWarnNotification } from "./WatchOnlyWarnNotification";
 export { default as Subtitle } from "./Subtitle";
 export { default as FormattedRelative } from "./FormattedRelative";
-export { default as CreatePassPhrase } from "./CreatePassPhrase";
+export { default as CreatePassPhrase } from "./CreatePassPhrase/CreatePassPhrase";
 export { default as UnsignedTx } from "./UnsignedTx";
 export { default as TxHistory } from "./TxHistory/TxHistory";
 export { default as LoadingError } from "./LoadingError";

app/components/views/GetStartedPage/AdvancedStartup/index.js → app/components/views/GetStartedPage/AdvancedStartup/AdvancedStartup.jsx

@@ -6,6 +6,8 @@ import {
   setRemoteCredentials
 } from "config.js";
 
+// XXX: FIUNCTIONAL COMPONENT!!!
+
 @autobind
 class AdvancedStartupHeader extends React.Component {
   render() {

app/components/views/GetStartedPage/AdvancedStartup/AppDataForm.js → app/components/views/GetStartedPage/AdvancedStartup/AppDataForm.jsx

@@ -1,5 +1,7 @@
+import { classNames } from "pi-ui";
 import { FormattedMessage as T, defineMessages } from "react-intl";
 import { PathBrowseInput } from "inputs";
+import styles from "../GetStarted.module.css";
 
 const messages = defineMessages({
   appdataFieldPlaceholder: {
@@ -15,11 +17,11 @@ const AppDataForm = ({
   intl
 }) => (
   <>
-    <div className="advanced-daemon-row appdataform">
-      <div className="advanced-daemon-label">
+    <div className={classNames(styles.advancedDeamonRow, styles.dataForm)}>
+      <div className={styles.daemonLabel}>
         <T id="login.form.appdata.label" m="Daemon Data Directory" />:
       </div>
-      <div className="advanced-daemon-input">
+      <div className={styles.daemonInput}>
         <PathBrowseInput
           required
           type="directory"