Merge branch 'develop' into fix/ddw-431-newsfeed-shadow

CHANGELOG.md

@@ -5,6 +5,7 @@ Changelog
 
 ### Features
 
+- Improved form field feedback UX ([PR 2241](https://github.com/input-output-hk/daedalus/pull/2241))
 - Implemented "Filter and CSV export" feature on the "Transactions" screen ([PR 2207](https://github.com/input-output-hk/daedalus/pull/2207))
 
 ### Chores

package.json

@@ -219,7 +219,7 @@
     "react-intl": "2.7.2",
     "react-lottie": "1.2.3",
     "react-markdown": "4.3.1",
-    "react-polymorph": "0.9.6-rc.3",
+    "react-polymorph": "0.9.7-rc.5",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-svg-inline": "2.1.1",

source/renderer/app/App.js

@@ -3,12 +3,13 @@ import React, { Component, Fragment } from 'react';
 import { Provider, observer } from 'mobx-react';
 import { ThemeProvider } from 'react-polymorph/lib/components/ThemeProvider';
 import { SimpleSkins } from 'react-polymorph/lib/skins/simple';
+import { SimpleDefaults } from 'react-polymorph/lib/themes/simple';
 import DevTools from 'mobx-react-devtools';
 import { Router } from 'react-router-dom';
 import { IntlProvider } from 'react-intl';
 import { Routes } from './Routes';
 import { daedalusTheme } from './themes/daedalus';
-import { themeOverrides } from './themes/overrides/index.js';
+import { themeOverrides } from './themes/overrides';
 import translations from './i18n/translations';
 import ThemeManager from './ThemeManager';
 import AboutDialog from './containers/static/AboutDialog';
@@ -54,6 +55,7 @@ export default class App extends Component<{
           <ThemeProvider
             theme={daedalusTheme}
             skins={SimpleSkins}
+            variables={SimpleDefaults}
             themeOverrides={themeOverrides}
           >
             <IntlProvider

source/renderer/app/components/wallet/settings/WalletRecoveryPhraseVerificationWidget.js

@@ -259,9 +259,9 @@ export default class WalletRecoveryPhraseVerificationWidget extends Component<Pr
               &nbsp;
               <PopOver
                 content={
-                  <span className={styles.paperWalletTooltip}>
+                  <div className={styles.paperWalletTooltip}>
                     {intl.formatMessage(messages.paperWalletDescription)}
-                  </span>
+                  </div>
                 }
               >
                 <div className={styles.paperWallet}>

source/renderer/app/components/wallet/settings/WalletRecoveryPhraseVerificationWidget.scss

@@ -105,4 +105,5 @@
 
 .paperWalletTooltip {
   line-height: 22px;
+  width: 600px;
 }

source/renderer/app/components/wallet/wallet-restore/ConfigurationDialog.js

@@ -229,14 +229,6 @@ export default class ConfigurationDialog extends Component<Props> {
       styles.walletName,
       'walletName',
     ]);
-    const spendingPasswordFieldClasses = classnames([
-      styles.spendingPasswordField,
-      'spendingPassword',
-    ]);
-    const repeatPasswordFieldClasses = classnames([
-      styles.spendingPasswordField,
-      'repeatPassword',
-    ]);
 
     const tooltipClasses = classnames([
       styles.tooltip,
@@ -283,7 +275,7 @@ export default class ConfigurationDialog extends Component<Props> {
             <div className={styles.spendingPasswordFields}>
               <div className={styles.spendingPasswordField}>
                 <PasswordInput
-                  className={spendingPasswordFieldClasses}
+                  className="spendingPassword"
                   onKeyPress={this.handleSubmitOnEnter}
                   {...spendingPasswordField.bind()}
                 />
@@ -300,7 +292,7 @@ export default class ConfigurationDialog extends Component<Props> {
               </div>
               <div className={styles.spendingPasswordField}>
                 <PasswordInput
-                  className={repeatPasswordFieldClasses}
+                  className="repeatPassword"
                   onKeyPress={this.handleSubmitOnEnter}
                   {...repeatPasswordField.bind()}
                   repeatPassword={spendingPasswordField.value}

source/renderer/app/components/widgets/DialogFullSizeOverride.scss

@@ -99,12 +99,12 @@
     }
 
     // Border Color
-    .AutocompleteOverrides_autocompleteContent,
+    .AutocompleteOverrides_autocompleteContent:not(.SimpleAutocomplete_errored),
     .SelectOverrides_selectInput input,
     .SimpleInput_customValueBlock,
     .SimpleInput_customValueWrapper .SimpleInput_input,
-    .SimpleInput_input:focus,
-    .SimpleInput_input:hover,
+    .SimpleInput_input:focus:not(.SimpleInput_errored),
+    .SimpleInput_input:hover:not(.SimpleInput_errored),
     .SimpleLink_root,
     .SimpleOptions_option:after {
       background-color: transparent !important;

storybook/stories/_support/StoryDecorator.js

@@ -1,9 +1,10 @@
 // @flow
-import React, { Component, Children, Fragment } from 'react';
+import React, { Component, Children } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { ThemeProvider } from 'react-polymorph/lib/components/ThemeProvider';
 import { SimpleSkins } from 'react-polymorph/lib/skins/simple';
+import { SimpleDefaults } from 'react-polymorph/lib/themes/simple';
 import { daedalusTheme } from '../../../source/renderer/app/themes/daedalus';
 import { themeOverrides } from '../../../source/renderer/app/themes/overrides';
 
@@ -24,14 +25,13 @@ export default class StoryDecorator extends Component<Props> {
       <ThemeProvider
         theme={daedalusTheme}
         skins={SimpleSkins}
+        variables={SimpleDefaults}
         themeOverrides={themeOverrides}
       >
-        <Fragment>
-          {Children.map(children, (child) => {
-            const childProps = child.type === 'div' ? {} : { propsForChildren };
-            return React.cloneElement(child, childProps);
-          })}
-        </Fragment>
+        {Children.map(children, (child) => {
+          const childProps = child.type === 'div' ? {} : { propsForChildren };
+          return React.cloneElement(child, childProps);
+        })}
       </ThemeProvider>
     );
   }

yarn.lock

@@ -11967,9 +11967,9 @@ react-modal@3.1.12:
     prop-types "^15.5.10"
     warning "^3.0.0"
 
-react-polymorph@0.9.6-rc.3:
-  version "0.9.6-rc.3"
-  resolved "https://registry.yarnpkg.com/react-polymorph/-/react-polymorph-0.9.6-rc.3.tgz#dceb56aa8e7d83dc8251d7459257d0934c45b104"
+react-polymorph@0.9.7-rc.5:
+  version "0.9.7-rc.5"
+  resolved "https://registry.yarnpkg.com/react-polymorph/-/react-polymorph-0.9.7-rc.5.tgz#410d57262f2c21bee082749df095d41c35f5394b"
   dependencies:
     "@tippyjs/react" "4.2.0"
     create-react-context "0.2.2"