[redesign] Settings view

app/actions/SettingsActions.js

@@ -181,6 +181,13 @@ export function updateStateSettingsChanged(settings, norestart) {
   };
 }
 
+export const resetSettingsState = () => {
+  return (dispatch, getState) => {
+    const { currentSettings } = getState().settings;
+    dispatch({ tempSettings: currentSettings, type: SETTINGS_UNCHANGED });
+  };
+};
+
 export const updateStateVoteSettingsChanged = (settings) => (
   dispatch,
   getState

app/components/buttons/index.js

@@ -118,8 +118,17 @@ export const InfoDocFieldModalButton = mbb(
   styles.infoFieldModalButton,
   DocumentationInfoModal
 );
+export const InfoDocFieldModalInvisibleButton = mbb(
+  null,
+  DocumentationInfoModal,
+  InvisibleButton
+);
 export const DiscoverUsageButton = mbb(null, DiscoverUsageModal);
-export const ChangePassphraseButton = mbb(null, ChangePassphraseModal);
+export const ChangePassphraseButton = mbb(
+  null,
+  ChangePassphraseModal,
+  PiUiButton
+);
 export const InvisiblePassphraseModalButton = mbb(
   null,
   PassphraseModal,

app/components/inputs/AccountsSelect/AccountsSelect.jsx

@@ -1,24 +1,24 @@
-import Select from "react-select";
 import { useAccountsSelect } from "./hooks";
 import { Balance } from "shared";
 import styles from "./AccountsSelect.module.css";
 import { classNames } from "pi-ui";
+import { Select } from "inputs";
 import LinkToAccounts from "./LinkToAccounts";
+import { components } from "react-select";
 
 const AccountsSelect = ({
   accountsType,
   className,
   selectClassName,
   showAccountsButton,
-  disabled,
   hideSpendable,
   filterAccounts,
   account: accountProp,
+  customStyles,
+  customComponents,
   onChange,
-  onKeyDown,
-  valueRenderer,
-  optionRenderer,
-  searchable
+  selectWithBigFont,
+  ...props
 }) => {
   const { account, accounts, placeholder } = useAccountsSelect({
     accountProp,
@@ -27,49 +27,54 @@ const AccountsSelect = ({
     onChange
   });
 
-  const selectKeyDown = (e) => {
-    switch (e.keyCode) {
-      case 8:
-      case 46:
-        e.preventDefault();
-        break;
-    }
-    onKeyDown?.(e);
+  const SingleValue = (props) => {
+    return (
+      <components.SingleValue {...props}>
+        <div
+          className={classNames(
+            styles.value,
+            selectWithBigFont && styles.selectWithBigFont
+          )}>
+          <div className={styles.name}>{props.data.name}</div>
+          {!hideSpendable && (
+            <div className={styles.spendable}>
+              <Balance flat amount={props.data.spendable} />
+            </div>
+          )}
+        </div>
+      </components.SingleValue>
+    );
   };
 
-  if (!valueRenderer) {
-    valueRenderer = (option) => (
-      <div className={styles.value}>
-        <div className={styles.name}>{option.name}</div>
-        {!hideSpendable && (
-          <div className={styles.spendable}>
-            <Balance flat amount={option.spendable} />
-          </div>
-        )}
-      </div>
+  const Option = (props) => {
+    return (
+      <components.Option {...props}>
+        <div className={styles.label}>
+          <div className={styles.name}>{props.data.name}</div>
+          {!hideSpendable && (
+            <div className={styles.spendable}>
+              <Balance flat amount={props.data.spendable} />
+            </div>
+          )}
+        </div>
+      </components.Option>
     );
-  }
+  };
 
   return (
     <div
-      className={classNames(styles.isRow, className)}
+      className={classNames(styles.container, className)}
       data-testid="accountsSelect">
       <Select
-        disabled={disabled}
-        clearable={false}
-        style={{ zIndex: "9" }}
         placeholder={placeholder}
-        multi={false}
         value={account}
-        valueKey="value"
-        labelKey="label"
         options={accounts}
-        valueRenderer={valueRenderer}
-        optionRenderer={optionRenderer ?? valueRenderer}
+        customComponents={{ SingleValue, Option, ...customComponents }}
+        className={selectClassName}
+        styles={customStyles}
+        selectWithBigFont={selectWithBigFont}
         onChange={(acc) => onChange?.(acc)}
-        className={classNames(styles.select, selectClassName)}
-        onInputKeyDown={selectKeyDown}
-        searchable={searchable}
+        {...props}
       />
       {showAccountsButton && <LinkToAccounts />}
     </div>
@@ -79,8 +84,7 @@ const AccountsSelect = ({
 AccountsSelect.propTypes = {
   accountsType: PropTypes.oneOf(["spending", "visible"]),
   className: PropTypes.string,
-  showAccountsButton: PropTypes.bool,
-  getAddressForSelected: PropTypes.bool
+  showAccountsButton: PropTypes.bool
 };
 
 export default AccountsSelect;

app/components/inputs/AccountsSelect/AccountsSelect.module.css

@@ -1,11 +1,16 @@
-.isRow {
+.container {
+  display: inline-block;
+  width: 100%;
+}
+.value {
   display: flex;
-  flex-direction: row;
+  justify-content: space-between;
 }
-.select {
-  width: 300px;
+.value.selectWithBigFont {
+  font-size: 1.6rem;
+  line-height: 2.1rem;
 }
-.value {
+.label {
   display: flex;
   justify-content: space-between;
 }

app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.jsx

@@ -3,71 +3,79 @@ import styles from "./DetailedAccountsSelect.module.css";
 import { Balance } from "shared";
 import { useDetailedAccountsSelect } from "./hooks";
 import { classNames } from "pi-ui";
+import { components } from "react-select";
 
 // default account's number equals 2^31-1.
 // source https://github.com/decred/dcrwallet/blob/master/wallet/udb/addressmanager.go#L43
 const isImported = ({ value }) => value === Math.pow(2, 31) - 1;
 
-const DetailedAccountsSelect = ({ selectClassName, ...props }) => {
+const DetailedAccountsSelect = (props) => {
   const { mixedAccount, changeAccount } = useDetailedAccountsSelect();
-  const valueRenderer = (option) => {
-    const isMixed = option.value === mixedAccount;
-    const isChange = option.value === changeAccount;
+  const SingleValue = (props) => {
+    const isMixed = props.data.value === mixedAccount;
+    const isChange = props.data.value === changeAccount;
     return (
-      <div className={styles.value}>
-        <div
-          className={classNames(
-            styles.name,
-            styles.icon,
-            isImported(option) && styles.imported,
-            isMixed && styles.mixed,
-            isChange && styles.unmixed
-          )}>
-          {option.name}
+      <components.SingleValue {...props}>
+        <div className={styles.value}>
+          <div
+            className={classNames(
+              styles.name,
+              styles.icon,
+              isImported(props.data) && styles.imported,
+              isMixed && styles.mixed,
+              isChange && styles.unmixed
+            )}>
+            {props.data.name}
+          </div>
+          <div className={styles.spendable}>
+            <span className={styles.balanceLabel}>Balance:</span>
+            <Balance
+              flat
+              amount={props.data.spendable}
+              classNameAmount={styles.balanceAmount}
+              classNameUnit={styles.balanceUnit}
+              classNameSecondary={styles.balanceSecondary}
+            />
+          </div>
         </div>
-        <div className={styles.spendable}>
-          <span className={styles.balanceLabel}>Balance:</span>
-          <Balance
-            flat
-            amount={option.spendable}
-            classNameAmount={styles.balanceAmount}
-            classNameUnit={styles.balanceUnit}
-            classNameSecondary={styles.balanceSecondary}
-          />
+      </components.SingleValue>
+    );
+  };
+
+  const Option = (props) => {
+    return (
+      <components.Option {...props}>
+        <div className={classNames(styles.value, styles.option)}>
+          <div className={styles.name}>{props.data.name}</div>
+          <div className={styles.spendable}>
+            <Balance flat amount={props.data.spendable} />
+          </div>
         </div>
-      </div>
+      </components.Option>
     );
   };
-  const optionRenderer = (option) => (
-    <div className={classNames(styles.value, styles.option)}>
-      <div className={styles.name}>{option.name}</div>
-      <div className={styles.spendable}>
-        <Balance flat amount={option.spendable} />
-      </div>
-    </div>
-  );
 
-  // `detailedAccountSelect` and `selectWithBigFont` classNames are
-  // temp solution to skinning from ReactSelectGlobal.css.
-  // When react-select will be replaced by the `pi-ui` component,
-  // this className can be deleted.
+  const customStyles = {
+    control: () => ({
+      padding: 0,
+      border: "none"
+    }),
+    indicatorsContainer: () => ({
+      alignItems: "flex-start",
+      marginTop: "0.3rem"
+    })
+  };
+
   return (
     <AccountsSelect
-      className={classNames("detailedAccountSelect", "selectWithBigFont")}
-      valueRenderer={valueRenderer}
-      optionRenderer={optionRenderer}
-      selectClassName={classNames(styles.select, selectClassName)}
-      searchable={false}
+      selectWithBigFont
+      className={styles.detailedAccountSelect}
+      selectClassName={styles.select}
+      customStyles={customStyles}
+      customComponents={{ SingleValue, Option }}
       {...props}
     />
   );
 };
 
-DetailedAccountsSelect.propTypes = {
-  accountsType: PropTypes.oneOf(["spending", "visible"]),
-  className: PropTypes.string,
-  showAccountsButton: PropTypes.bool,
-  getAddressForSelected: PropTypes.bool
-};
-
 export default DetailedAccountsSelect;

app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.module.css

@@ -1,7 +1,4 @@
-.isRow {
-  display: flex;
-  flex-direction: row;
-}
+.detailedAccountSelect,
 .select {
   width: auto;
 }

app/components/inputs/Input/Input.module.css

@@ -19,12 +19,12 @@
 
 .newBiggerFontStyleInput {
   font-family: var(--font-family-regular);
-  font-size: 16px !important;
-  line-height: 16px !important;
+  font-size: 1.6rem !important;
+  line-height: 2.2rem !important;
 }
 .newBiggerFontStyleInput::placeholder {
-  font-size: 16px !important;
-  line-height: 16px !important;
+  font-size: 1.6rem !important;
+  line-height: 2.2rem !important;
   color: var(--grey-5) !important;
 }
 

app/components/inputs/LEGACY_StakePoolSelect.jsx

@@ -1,8 +1,7 @@
-import { Creatable } from "react-select";
-import Select from "react-select";
 import { FormattedMessage as T, defineMessages } from "react-intl";
 import { useIntl } from "react-intl";
 import { useState } from "react";
+import { Select } from "inputs";
 
 const messages = defineMessages({
   placeholder: {
@@ -55,15 +54,6 @@ const StakePoolSelect = ({
     );
   };
 
-  const newOptionCreator = () => {
-    return {
-      value: { Host: lastInput },
-      label: lastInput,
-      Host: lastInput,
-      newOption: true
-    };
-  };
-
   const onInputChange = (input) => {
     setLastInput(input);
   };
@@ -84,16 +74,25 @@ const StakePoolSelect = ({
     return true;
   };
 
-  const Component = creatable ? Creatable : Select;
-
   return (
-    <Component
+    <Select
+      isCreatable={creatable}
+      isSearchable
       {...props}
       options={getOptions()}
       placeholder={intl.formatMessage(messages.placeholder)}
       promptTextCreator={addStakePoolLabel}
       onChange={onChangeLocal}
-      newOptionCreator={newOptionCreator}
+      onCreateOption={(option) =>
+        onChangeLocal({
+          value: {
+            value: { Host: option }
+          },
+          label: option,
+          Host: option,
+          newOption: true
+        })
+      }
       onInputChange={onInputChange}
       isValidNewOption={isValidNewOption}
     />