passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/DisplayChangePassphraseIntroduction.js

@@ -125,12 +125,12 @@ class DisplayChangePassphraseIntroduction extends React.Component {
     return (
       <div className="grid grid-responsive-12 profile-passphrase">
         <div className="row">
-          <div className="col6">
+          <div className="col7">
             <form onSubmit={this.handleSubmit}>
               <h3><Trans>Before getting started...</Trans></h3>
               <div className="password-management-bg">
               </div>
-              <p><Trans>The passphrase is stored on your device and never sent server side.</Trans><br/>
+              <p><Trans>The passphrase is stored on your device and never sent server side.</Trans>&nbsp;
                 <Trans>Changing your passphrase will only change it locally.</Trans>&nbsp;
                 <Trans>If you have multiple browsers configured, the passphrase will need to be changed in all places individually.</Trans>
               </p>
@@ -140,19 +140,21 @@ class DisplayChangePassphraseIntroduction extends React.Component {
                 <label htmlFor="passphrase-update-understand"> <Trans>Ok, I understand what I need to do.</Trans></label>
               </div>
               <div className="submit-wrapper">
-                <button className="button big submit" type="submit" disabled={this.hasAllInputDisabled()}>
+                <button className="button primary medium submit" type="submit" disabled={this.hasAllInputDisabled()}>
                   <Trans>Start</Trans>
                 </button>
               </div>
             </form>
           </div>
-          <div className="col4 last passphrase-help">
-            <h3><Trans>What is the role of the passphrase?</Trans></h3>
-            <p><Trans>The passphrase is used to encrypt your secret key, which is required to decrypt your secrets, such as the passwords.</Trans></p>
-            <p><Trans>Without the private key and the passphrase it is not possible to decrypt!</Trans></p>
-            <a className="button big" href="https://help.passbolt.com/tech/auth.html" target="_blank" rel="noopener noreferrer">
-              <span><Trans>Learn more</Trans></span>
-            </a>
+          <div className="col4 last">
+            <div className="sidebar-help">
+              <h3><Trans>What is the role of the passphrase?</Trans></h3>
+              <p><Trans>The passphrase is used to encrypt your secret key, which is required to decrypt your secrets, such as the passwords.</Trans></p>
+              <p><Trans>Without the private key and the passphrase it is not possible to decrypt!</Trans></p>
+              <a className="button" href="https://help.passbolt.com/tech/auth.html" target="_blank" rel="noopener noreferrer">
+                <span><Trans>Learn more</Trans></span>
+              </a>
+            </div>
           </div>
         </div>
       </div>

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/DownloadRecoveryKit.js

@@ -17,6 +17,7 @@ import React from 'react';
 import PropTypes from "prop-types";
 import {withUserSettings} from "../../../contexts/UserSettingsContext";
 import {Trans, withTranslation} from "react-i18next";
+import AnimatedFeedback from "../../Common/Icons/AnimatedFeedback";
 
 /**
  * This component displays the user profile information
@@ -58,20 +59,13 @@ class DownloadRecoveryKit extends React.Component {
         <div className="row">
           <div className="col7 last">
             <h3><Trans>The passphrase was updated!</Trans></h3>
-            <div className="success success-large message animated">
-              <div className="illustration">
-                <svg id="successAnimation" className="animated" xmlns="http://www.w3.org/2000/svg" width="170" height="170" viewBox="0 0 70 70">
-                  <circle id="successAnimationCircle" cx="35" cy="35" r="24" stroke="#000000" strokeWidth="3"
-                    strokeLinecap="round" fill="transparent"/>
-                  <polyline id="successAnimationCheck" stroke="#000000" strokeWidth="3" points="23 34 34 43 47 27"
-                    linecap="round" fill="transparent"/>
-                </svg>
-              </div>
+            <div className="feedback-card">
+              <AnimatedFeedback name='success' />
               <div className="additional-information">
                 <p><Trans>Your passphrase has been changed. Make sure you keep a backup of your secret key encrypted with this new passphrase.</Trans></p>
                 <p><Trans>Keep this backup in a safe place, you will need it in case of emergency.</Trans></p>
                 <p>
-                  <a className="button big primary" role="button" onClick={this.handleDownloadBackup}><Trans>Download backup</Trans></a>
+                  <a className="button primary medium" role="button" onClick={this.handleDownloadBackup}><Trans>Download backup</Trans></a>
                 </p>
               </div>
             </div>

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/EnterNewPassphrase.js

@@ -24,6 +24,7 @@ import debounce from "debounce-promise";
 import SecurityComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import {Trans, withTranslation} from "react-i18next";
+import {withAppContext} from "../../../contexts/AppContext";
 
 /**
  * This component displays the user choose passphrase information
@@ -102,6 +103,8 @@ class EnterNewPassphrase extends React.Component {
   bindEventHandlers() {
     this.handlePassphraseChange = this.handlePassphraseChange.bind(this);
     this.handleToggleObfuscate = this.handleToggleObfuscate.bind(this);
+    this.handleFocusPassphrase = this.handleFocusPassphrase.bind(this);
+    this.handleBlurPassphrase = this.handleBlurPassphrase.bind(this);
     this.handleCancel = this.handleCancel.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
@@ -180,6 +183,48 @@ class EnterNewPassphrase extends React.Component {
     };
   }
 
+  /**
+   * Returns the security token code of the suer
+   */
+  get securityTokenCode() {
+    return this.props.context.userSettings.getSecurityTokenCode();
+  }
+
+  /**
+   * Returns the style of the security token (color and text color)
+   */
+  get securityTokenStyle() {
+    const {userSettings} = this.props.context;
+    const inverseStyle =  {background: userSettings.getSecurityTokenTextColor(), color: userSettings.getSecurityTokenBackgroundColor()};
+    const fullStyle =  {background: userSettings.getSecurityTokenBackgroundColor(), color: userSettings.getSecurityTokenTextColor()};
+    return this.state.hasPassphraseFocus ? inverseStyle : fullStyle;
+  }
+
+  /**
+   * Get the passphrase input style.
+   * @return {Object}
+   */
+  get passphraseInputStyle() {
+    const {userSettings} = this.props.context;
+    const emptyStyle =  {background: "", color: ""};
+    const fullStyle =  {background: userSettings.getSecurityTokenBackgroundColor(), color: userSettings.getSecurityTokenTextColor()};
+    return this.state.hasPassphraseFocus ? fullStyle : emptyStyle;
+  }
+
+  /**
+   * Whenever the user focus on the passphrase input
+   */
+  handleFocusPassphrase() {
+    this.setState({hasPassphraseFocus: true});
+  }
+
+  /**
+   * Whenever the user blurs on the passphrase input
+   */
+  handleBlurPassphrase() {
+    this.setState({hasPassphraseFocus: false});
+  }
+
   /**
    * Evaluate if the passphrase is in dictionary
    * @param passphrase The passphrase to evaluate
@@ -244,30 +289,23 @@ class EnterNewPassphrase extends React.Component {
     return (
       <div className="grid grid-responsive-12 profile-passphrase">
         <div className="row">
-          <div className="col6">
+          <div className="col7">
             <form className="enter-passphrase" onSubmit={this.handleSubmit}>
               <h3><Trans>Please enter a new passphrase</Trans></h3>
               <div className="form-content">
                 <div className="input text password required">
-                  {this.state.isObfuscated &&
                   <input
                     id="passphrase-input"
-                    type="password"
+                    type={this.state.isObfuscated ? "password" : "text"}
                     ref={this.passphraseInput}
                     value={this.state.passphrase}
+                    style={this.passphraseInputStyle}
                     onChange={this.handlePassphraseChange}
+                    onFocus={this.handleFocusPassphrase}
+                    onBlur={this.handleBlurPassphrase}
                     disabled={!this.areActionsAllowed}
-                    autoFocus={true}/>
-                  }
-                  {!this.state.isObfuscated &&
-                  <input
-                    id="passphrase-input"
-                    type="text"
-                    ref={this.passphraseInput}
-                    value={this.state.passphrase}
-                    onChange={this.handlePassphraseChange}
-                    disabled={!this.areActionsAllowed}/>
-                  }
+                    autoFocus={true}
+                    autoComplete="off"/>
                   <a
                     className={`password-view button-icon button button-toggle ${this.state.isObfuscated ? "" : "selected"}`}
                     role="button"
@@ -275,13 +313,15 @@ class EnterNewPassphrase extends React.Component {
                     <Icon name="eye-open"/>
                     <span className="visually-hidden">view</span>
                   </a>
+                  <span className="security-token" style={this.securityTokenStyle}>
+                    {this.securityTokenCode}
+                  </span>
                   <div className="password-complexity">
                     <span className="progress">
                       <span className={`progress-bar ${this.state.passphraseStrength.id}`}/>
                     </span>
                   </div>
                 </div>
-
                 <div className="password-hints">
                   <ul>
                     <li className={this.state.hintClassNames.enoughLength}>
@@ -303,20 +343,19 @@ class EnterNewPassphrase extends React.Component {
                 </div>
               </div>
               <div className="submit-wrapper">
-                <button className="button big" type="button" disabled={!this.areActionsAllowed} onClick={this.handleCancel}>
+                <button className="button cancel medium" type="button" disabled={!this.areActionsAllowed} onClick={this.handleCancel}>
                   <Trans>Cancel</Trans>
                 </button>
-                <FormSubmitButton big={true} disabled={this.mustBeDisabled} processing={this.isProcessing} value={this.translate('Update')}/>
+                <FormSubmitButton primary={true} medium={true} disabled={this.mustBeDisabled} processing={this.isProcessing} value={this.translate('Update')}/>
               </div>
             </form>
           </div>
-          <div className="col4 last passphrase-help">
-            <h3><Trans>Tips for choosing a good passphrase</Trans></h3>
-            <p><Trans>Make sure your passphrase is hard to guess but also that is long enough. For example you can use your favorite lyric from a song,
-              grab the first couple of characters from the words in your favorite line.</Trans></p>
-            <a className="button big">
-              <span><Trans>Learn more</Trans></span>
-            </a>
+          <div className="col4 last">
+            <div className="sidebar-help">
+              <h3><Trans>Tips for choosing a good passphrase</Trans></h3>
+              <p><Trans>Make sure your passphrase is hard to guess but also that is long enough. For example you can use your favorite lyric from a song,
+                grab the first couple of characters from the words in your favorite line.</Trans></p>
+            </div>
           </div>
         </div>
       </div>
@@ -325,9 +364,10 @@ class EnterNewPassphrase extends React.Component {
 }
 
 EnterNewPassphrase.propTypes = {
+  context: PropTypes.any, // The application context
   userSettingsContext: PropTypes.object, // The user settings context
   dialogContext: PropTypes.any, // The dialog context
   t: PropTypes.func, // The translation function
 };
 
-export default withDialog(withUserSettings(withTranslation('common')(EnterNewPassphrase)));
+export default withAppContext(withDialog(withUserSettings(withTranslation('common')(EnterNewPassphrase))));

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/EnterNewPassphrase.test.data.js

@@ -2,8 +2,14 @@
  * Default props
  * @returns {object}
  */
+import UserSettings from "../../../../shared/lib/Settings/UserSettings";
+import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
+
 export function defaultProps() {
   const props = {
+    context: {
+      userSettings: new UserSettings(userSettingsFixture)
+    },
     userSettingsContext: {
       onUpdatePassphraseRequested: jest.fn(),
       onGoToIntroductionPassphraseRequested: jest.fn(),

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/EnterNewPassphrase.test.js

@@ -146,7 +146,7 @@ describe("As LU I should see the user confirm passphrase page", () => {
 
     it('As LU I should see an error dialog if there is an api error', async() => {
       expect(page.updateButton.getAttribute("disabled")).not.toBeNull();
-      expect(page.updateButton.className).toBe('button primary disabled big');
+      expect(page.updateButton.className).toBe('button primary disabled medium');
 
       // Fill the form
       page.insertPassphrase("passphrase");

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/EnterNewPassphrase.test.page.js

@@ -62,7 +62,7 @@ export default class EnterNewPassphrasePage {
    * Returns the passphrase error message element
    */
   get passphraseErrorMessage() {
-    return this._page.container.querySelector('.message.error').innerHTML;
+    return this._page.container.querySelector('.error-message').innerHTML;
   }
 
   /**

package/src/react-extension/components/UserSetting/ChangeUserSecurityToken/ChangeUserSecurityToken.js

@@ -13,7 +13,6 @@
  */
 import React, {Component} from "react";
 import {CirclePicker} from "react-color";
-import Icon from "../../Common/Icons/Icon";
 import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 import {withDialog} from "../../../contexts/DialogContext";
 import PropTypes from "prop-types";
@@ -320,7 +319,7 @@ class ChangeUserSecurityToken extends Component {
     return (
       <div className="grid grid-responsive-12 profile-choose-security-token">
         <div className="row">
-          <div className="col6">
+          <div className="col7">
             <form onSubmit={this.handleSubmit}>
               <h3><Trans>Update the Security Token</Trans></h3>
               <div className={`input-security-token input required ${this.hasErrors ? "error" : ""}`}>
@@ -351,36 +350,38 @@ class ChangeUserSecurityToken extends Component {
                     className={`randomize-button ${this.isProcessing ? "disabled" : ""}`}
                     role="button"
                     onClick={this.handleRandomize}>
-                    <Icon name="magic-wand"/> <Trans>Randomize</Trans>
+                    <Trans>Randomize</Trans>
                   </a>
                 </div>
               </div>
               {this.state.hasBeenValidated &&
               <div className="input text">
                 {this.state.errors.emptyCode &&
-                <div className="empty-code message error"><Trans>The security token code should not be empty.</Trans>
+                <div className="empty-code error-message"><Trans>The security token code should not be empty.</Trans>
                 </div>
                 }
                 {this.state.errors.lengthCode &&
-                <div className="not-good-length-code message error"><Trans>The security token code should be 3
+                <div className="not-good-length-code error-message"><Trans>The security token code should be 3
                   characters long.</Trans></div>
                 }
               </div>
               }
               <div className="submit-wrapper">
-                <button className={`button big ${processingClassName}`} type="submit" disabled={this.isProcessing}>
+                <button className={`button primary medium ${processingClassName}`} type="submit" disabled={this.isProcessing}>
                   <Trans>Save</Trans>
                 </button>
               </div>
             </form>
           </div>
-          <div className="col4 last">
-            <h3><Trans>Why is this token needed?</Trans></h3>
-            <p>
-              <Trans>This security token will be displayed when your passphrase is requested,
-                so you can verify quickly the form is coming from passbolt.</Trans>&nbsp;
-              <Trans>This will help protect you from phishing attack</Trans>
-            </p>
+          <div className="col4 last ">
+            <div className="sidebar-help">
+              <h3><Trans>Why is this token needed?</Trans></h3>
+              <p>
+                <Trans>This security token will be displayed when your passphrase is requested,
+                  so you can verify quickly the form is coming from passbolt.</Trans>&nbsp;
+                <Trans>This will help protect you from phishing attacks</Trans>
+              </p>
+            </div>
           </div>
         </div>
       </div>

package/src/react-extension/components/UserSetting/ChangeUserSecurityToken/ChangeUserSecurityToken.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import ChangeUserSecurityToken from "./ChangeUserSecurityToken";
 
 
@@ -20,13 +19,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <ChangeUserSecurityToken {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <ChangeUserSecurityToken {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserSetting/DisplayUserGpgInformation/DisplayUserGpgInformation.js

@@ -94,13 +94,14 @@ class DisplayUserGpgInformation extends React.Component {
     // format the gpgkey info.
     const keyId = gpgkeyInfo.keyId;
     const type = this.gpgkeyType[gpgkeyInfo.algorithm];
+    const uIds = gpgkeyInfo.userIds;
     const created = this.formatDate(gpgkeyInfo.created);
     const expires = gpgkeyInfo.expires === "Never" ? "Never" : this.formatDate(gpgkeyInfo.expires);
     const armoredKey = gpgkeyInfo.key;
     const fingerprint = gpgkeyInfo.fingerprint;
     const length = gpgkeyInfo.length;
 
-    return {keyId, type, created, expires, armoredKey, fingerprint, length};
+    return {keyId, type, uIds, created, expires, armoredKey, fingerprint, length};
   }
 
   /**
@@ -154,11 +155,25 @@ class DisplayUserGpgInformation extends React.Component {
   }
 
   /**
-   * Get the user fullname
+   * Get fingerprint
+   * @returns {JSX.Element}
+   */
+  get fingerprint() {
+    let fingerprint = this.gpgKeyInfo.fingerprint;
+    if (fingerprint) {
+      fingerprint = fingerprint.toUpperCase().replace(/.{4}(?=.)/g, '$& ');
+      fingerprint = <>{fingerprint.substr(0, 24)}<br/>{fingerprint.substr(25)}</>;
+    }
+    return fingerprint;
+  }
+
+  /**
+   * Get the first uID of the GPG key
    * @returns {string}
    */
-  get userFullname() {
-    return this.user ? `${this.user.profile.first_name} ${this.user.profile.last_name}` : "";
+  get uId() {
+    const uId = this.gpgKeyInfo.uIds && this.gpgKeyInfo.uIds[0];
+    return uId ? `${uId.name} <${uId.email}>` : "";
   }
 
   /**
@@ -198,11 +213,11 @@ class DisplayUserGpgInformation extends React.Component {
                 </tr>
                 <tr>
                   <td><Trans>Uid</Trans></td>
-                  <td className="uid">{this.userFullname}</td>
+                  <td className="uid">{this.uId}</td>
                 </tr>
                 <tr>
                   <td><Trans>Fingerprint</Trans></td>
-                  <td className="fingerprint">{this.gpgKeyInfo.fingerprint}</td>
+                  <td className="fingerprint">{this.fingerprint}</td>
                 </tr>
                 <tr>
                   <td><Trans>Created</Trans></td>

package/src/react-extension/components/UserSetting/DisplayUserGpgInformation/DisplayUserGpgInformation.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DisplayUserGpgInformation from "./DisplayUserGpgInformation";
 
 
@@ -47,13 +46,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <DisplayUserGpgInformation {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DisplayUserGpgInformation {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserSetting/DisplayUserProfile/DisplayUserProfile.js

@@ -127,7 +127,7 @@ class DisplayUserProfile extends React.Component {
             </table>
             {this.canIUseLocale &&
             <>
-              <h3><Trans>Internationalization</Trans></h3>
+              <h3><Trans>Internationalisation</Trans></h3>
               <table className="table-info profile">
                 <tbody>
                   <tr className="locale">

package/src/react-extension/components/UserSetting/DisplayUserProfile/DisplayUserProfile.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DisplayUserProfile from "./DisplayUserProfile";
 
 
@@ -50,13 +49,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <DisplayUserProfile {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DisplayUserProfile {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserSetting/DisplayUserSettingsWorkspace/DisplayUserSettingsWorkspace.js

@@ -30,6 +30,7 @@ import DisplayUserGpgInformation from "../DisplayUserGpgInformation/DisplayUserG
 import SearchBar from "../../Common/Navigation/Search/SearchBar";
 import DisplayUserPassphrase from "../ChangeUserPassphrase/ChangeUserPassphrase";
 import DisplayUserChooseSecurityToken from "../ChangeUserSecurityToken/ChangeUserSecurityToken";
+import TransferToMobile from "../TransferToMobile/TransferToMobile";
 
 /**
  * This component is a container for all the user settings workspace features
@@ -43,6 +44,14 @@ class DisplayUserSettingsWorkspace extends React.Component {
     return this.props.context.siteSettings && this.props.context.siteSettings.canIUse('accountSettings');
   }
 
+  /**
+   * Can the user access the mobile transfer capability.
+   * @returns {bool}
+   */
+  get canIUseMobileTransferCapability() {
+    return this.props.context.siteSettings && this.props.context.siteSettings.canIUse('mobile');
+  }
+
   /**
    * Render the component
    * @return {JSX}
@@ -71,7 +80,10 @@ class DisplayUserSettingsWorkspace extends React.Component {
             {this.canIUseThemeCapability &&
             <Route path={`${path}/theme`} component={DisplayUserTheme}/>
             }
-            <Route path={`${path}/keys`} component={DisplayUserGpgInformation}/>
+            {this.canIUseMobileTransferCapability &&
+            <Route path={`${path}/mobile`} component={TransferToMobile}></Route>
+            }
+            <Route path={`${path}/keys`} component={DisplayUserGpgInformation}></Route>
           </div>
         </div>
       </div>

package/src/react-extension/components/UserSetting/DisplayUserSettingsWorkspaceBreadcrumb/DisplayUserSettingsWorkspaceBreadcrumb.js

@@ -56,7 +56,8 @@ class DisplayUserSettingsWorkspaceBreadcrumb extends Component {
       'security-token': this.translate("Security Token"),
       theme: this.translate("Theme"),
       mfa: this.translate("Multi Factor Authentication"),
-      keys: this.translate("Keys inspector")
+      keys: this.translate("Keys inspector"),
+      mobile: this.translate("Mobile transfer")
     };
     const matchedKey = Object.keys(names).find(matchPathSuffix);
     return names[matchedKey];

package/src/react-extension/components/UserSetting/DisplayUserSettingsWorkspaceBreadcrumb/DisplayUserSettingsWorkspaceBreadcrumb.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DisplayUserSettingsWorkspaceBreadcrumb from "./DisplayUserSettingsWorkspaceBreadcrumb";
 
 
@@ -44,13 +43,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/profile']}>
-        <Route component={routerProps => <DisplayUserSettingsWorkspaceBreadcrumb {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/profile']}>
+      <Route component={routerProps => <DisplayUserSettingsWorkspaceBreadcrumb {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserSetting/DisplayUserTheme/DisplayUserTheme.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DisplayUserTheme from "./DisplayUserTheme";
 
 
@@ -31,13 +30,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <DisplayUserTheme {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DisplayUserTheme {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserSetting/EditUserProfile/EditUserProfile.js

@@ -316,7 +316,7 @@ class EditUserProfile extends Component {
                 onChange={this.handleInputChange}
                 disabled={!this.areActionsAllowed}/>
               {this.state.errors.isFirstnameEmpty &&
-              <div className="first_name error message">
+              <div className="first_name error-message">
                 <Trans>A first name is required.</Trans>
               </div>
               }
@@ -336,7 +336,7 @@ class EditUserProfile extends Component {
                 onChange={this.handleInputChange}
                 disabled={!this.areActionsAllowed}/>
               {this.state.errors.isLastnameEmpty &&
-              <div className="last_name error message">
+              <div className="last_name error-message">
                 <Trans>A last name is required.</Trans>
               </div>
               }
@@ -355,7 +355,7 @@ class EditUserProfile extends Component {
             {this.canIUseLocale &&
             <div className="input select locale required">
               <label htmlFor="user-profile-locale-input"><Trans>Language</Trans></label>
-              <select className="large" id="user-profile-locale-input" name="locale" value={this.state.profile.locale}
+              <select id="user-profile-locale-input" name="locale" value={this.state.profile.locale}
                 disabled={!this.areActionsAllowed} onChange={this.handleInputChange}>
                 {this.supportedLocales.map(supportedLocale =>
                   <option key={supportedLocale.locale} value={supportedLocale.locale}>