Fix general UI issues according to proposal

e2e/features/account/AddAccount.feature

@@ -61,34 +61,34 @@ Feature: AddAccount
     Then I should be redirected to route: "account/add"
     Given I click on a button with text "Restore from backup"
     And I upload from file "encrypted_json" with json content:
-            """
-            {
-                "crypto": {
-                    "ciphertext": "7bbe2ede0c0263eeeefe604eeb6a05ad694739344cfa83b264cf5bac30b38d5e8cfd9ad1e592b1ea61a2621bbf692eca7f55331358a61fe5019616ff78a067899221df98b49ec7228be78e7225927c77a6059885784d25e33ef0ddab293f52612c4fc7539ca7d651747da32931749b491eca066ac4b07a47394296512fc5f3e5ff1fd5cebb1625026b6ccfc04db8f442af02da9519124c706f9286e897b615371103687492adea81dde453da98d11179153b62c002a6e0241131ebc1bdd94187383708f30bf50736aa35e0de69ff0154b48a2a6eca0a27103118e057195affd52943f0ddb01602d293853a410b491c",
-                    "mac": "44efae34755f67be152c3de325e9b1a48ae97dee004733c76d2de875ea381597",
-                    "kdf": "argon2id",
-                    "kdfparams": {
-                        "parallelism": 4,
-                        "iterations": 1,
-                        "memorySize": 2024,
-                        "salt": "3cb7451bbeb502f6078aa0dddb6cd0c1"
-                    },
-                    "cipher": "aes-256-gcm",
-                    "cipherparams": {
-                        "iv": "007d68ce332797775b31da65",
-                        "tag": "84c8b824b27f26fb80a3ace0a005e900"
-                    },
-                    "version": "1"
-                },
-                "metadata": {
-                    "name": "test_account",
-                    "pubkey": "0fe9a3f1a21b5530f27f87a414b549e79a940bf24fdf2b2f05e7f22aeeecc86a",
-                    "address": "lskdxc4ta5j43jp9ro3f8zqbxta9fn6jwzjucw7yt",
-                    "creationTime": "2023-05-21T23:21:46.922Z"
-                },
-                "version": 1
-            }
-            """
+      """
+      {
+        "crypto": {
+          "ciphertext": "7bbe2ede0c0263eeeefe604eeb6a05ad694739344cfa83b264cf5bac30b38d5e8cfd9ad1e592b1ea61a2621bbf692eca7f55331358a61fe5019616ff78a067899221df98b49ec7228be78e7225927c77a6059885784d25e33ef0ddab293f52612c4fc7539ca7d651747da32931749b491eca066ac4b07a47394296512fc5f3e5ff1fd5cebb1625026b6ccfc04db8f442af02da9519124c706f9286e897b615371103687492adea81dde453da98d11179153b62c002a6e0241131ebc1bdd94187383708f30bf50736aa35e0de69ff0154b48a2a6eca0a27103118e057195affd52943f0ddb01602d293853a410b491c",
+          "mac": "44efae34755f67be152c3de325e9b1a48ae97dee004733c76d2de875ea381597",
+          "kdf": "argon2id",
+          "kdfparams": {
+            "parallelism": 4,
+            "iterations": 1,
+            "memorySize": 2024,
+            "salt": "3cb7451bbeb502f6078aa0dddb6cd0c1"
+          },
+          "cipher": "aes-256-gcm",
+          "cipherparams": {
+            "iv": "007d68ce332797775b31da65",
+            "tag": "84c8b824b27f26fb80a3ace0a005e900"
+          },
+          "version": "1"
+        },
+        "metadata": {
+          "name": "test_account",
+          "pubkey": "0fe9a3f1a21b5530f27f87a414b549e79a940bf24fdf2b2f05e7f22aeeecc86a",
+          "address": "lskdxc4ta5j43jp9ro3f8zqbxta9fn6jwzjucw7yt",
+          "creationTime": "2023-05-21T23:21:46.922Z"
+        },
+        "version": 1
+      }
+      """
     And I click on a button with text "Continue"
     Then I should be on the password collection step having address: "lskdxc4ta5j43jp9ro3f8zqbxta9fn6jwzjucw7yt" and account name "test_account"
     And button with text 'Continue' should be disabled
@@ -99,33 +99,33 @@ Feature: AddAccount
   Scenario: Add account by file with a malformed encrypted account
     Given I click on a button with text "Restore from backup"
     And I upload from file "encrypted_json" with json content:
-            """
-            {
-            "ciphertext": "7bbe2ede0c0263eeeefe604eeb6a05ad694739344cfa83b264cf5bac30b38d5e8cfd9ad1e592b1ea61a2621bbf692eca7f55331358a61fe5019616ff78a067899221df98b49ec7228be78e7225927c77a6059885784d25e33ef0ddab293f52612c4fc7539ca7d651747da32931749b491eca066ac4b07a47394296512fc5f3e5ff1fd5cebb1625026b6ccfc04db8f442af02da9519124c706f9286e897b615371103687492adea81dde453da98d11179153b62c002a6e0241131ebc1bdd94187383708f30bf50736aa35e0de69ff0154b48a2a6eca0a27103118e057195affd52943f0ddb01602d293853a410b491c",
-            "mac": "44efae34755f67be152c3de325e9b1a48ae97dee004733c76d2de875ea381597",
-            "kdf": "argon2id",
-            "kdfparams": {
-            "parallelism": 4,
-            "iterations": 1,
-            "memorySize": 2024,
-            "salt": "3cb7451bbeb502f6078aa0dddb6cd0c1"
-            },
-            "cipher": "aes-256-gcm",
-            "cipherparams": {
-            "iv": "007d68ce332797775b31da65",
-            "tag": "84c8b824b27f26fb80a3ace0a005e900"
-            },
-            "version": "1"
-            },
-            "metadata": {
-            "name": "test_account",
-            "pubkey": "0fe9a3f1a21b5530f27f87a414b549e79a940bf24fdf2b2f05e7f22aeeecc86a",
-            "address": "lskdxc4ta5j43jp9ro3f8zqbxta9fn6jwzjucw7yt",
-            "creationTime": "2023-05-21T23:21:46.922Z"
-            },
-            "version": 1
-            }
-            """
+      """
+      {
+      "ciphertext": "7bbe2ede0c0263eeeefe604eeb6a05ad694739344cfa83b264cf5bac30b38d5e8cfd9ad1e592b1ea61a2621bbf692eca7f55331358a61fe5019616ff78a067899221df98b49ec7228be78e7225927c77a6059885784d25e33ef0ddab293f52612c4fc7539ca7d651747da32931749b491eca066ac4b07a47394296512fc5f3e5ff1fd5cebb1625026b6ccfc04db8f442af02da9519124c706f9286e897b615371103687492adea81dde453da98d11179153b62c002a6e0241131ebc1bdd94187383708f30bf50736aa35e0de69ff0154b48a2a6eca0a27103118e057195affd52943f0ddb01602d293853a410b491c",
+      "mac": "44efae34755f67be152c3de325e9b1a48ae97dee004733c76d2de875ea381597",
+      "kdf": "argon2id",
+      "kdfparams": {
+      "parallelism": 4,
+      "iterations": 1,
+      "memorySize": 2024,
+      "salt": "3cb7451bbeb502f6078aa0dddb6cd0c1"
+      },
+      "cipher": "aes-256-gcm",
+      "cipherparams": {
+      "iv": "007d68ce332797775b31da65",
+      "tag": "84c8b824b27f26fb80a3ace0a005e900"
+      },
+      "version": "1"
+      },
+      "metadata": {
+      "name": "test_account",
+      "pubkey": "0fe9a3f1a21b5530f27f87a414b549e79a940bf24fdf2b2f05e7f22aeeecc86a",
+      "address": "lskdxc4ta5j43jp9ro3f8zqbxta9fn6jwzjucw7yt",
+      "creationTime": "2023-05-21T23:21:46.922Z"
+      },
+      "version": 1
+      }
+      """
     Then I should possibly see "Unexpected non-whitespace character after JSON at position"
     And button with text 'Continue' should be disabled
 

src/locales/en/common.json

@@ -4,6 +4,7 @@
   " to complete the request.": " to complete the request.",
   "\"Lisk\" will be the default mainchain application, please enter your custom network to be added to the wallet.": "\"Lisk\" will be the default mainchain application, please enter your custom network to be added to the wallet.",
   "\"{{username}}\" is already taken.": "\"{{username}}\" is already taken.",
+  "(12-24 mnemonic phrases supported)": "(12-24 mnemonic phrases supported)",
   "64 bytes left": "64 bytes left",
   "A bit more. Make sure to type at least 3 characters.": "A bit more. Make sure to type at least 3 characters.",
   "A new management feature allows you to seamlessly add and switch between applications. The dedicated application tab provides a comprehensive overview of registered, active, and terminated blockchain applications, and statistics.": "A new management feature allows you to seamlessly add and switch between applications. The dedicated application tab provides a comprehensive overview of registered, active, and terminated blockchain applications, and statistics.",
@@ -574,7 +575,7 @@
   "Search token": "Search token",
   "Search within the network...": "Search within the network...",
   "Secret recovery phrase": "Secret recovery phrase",
-  "Secret recovery phrase (12-24 mnemonic phrases supported)": "Secret recovery phrase (12-24 mnemonic phrases supported)",
+  "Secret recovery phrase ": "Secret recovery phrase ",
   "Security": "Security",
   "Select All": "Select All",
   "Select account": "Select account",
@@ -613,9 +614,10 @@
   "Site permissions": "Site permissions",
   "Sorry, we couldn’t find the page you were looking for. We suggest that you return to your wallet.": "Sorry, we couldn’t find the page you were looking for. We suggest that you return to your wallet.",
   "Stake": "Stake",
-  "Stake added to queue": "Stake added to queue",
+  "Stake added": "Stake added",
   "Stake amount": "Stake amount",
   "Stake amount can't be zero or negative.": "Stake amount can't be zero or negative.",
+  "Stake has been added to your staking queue": "Stake has been added to your staking queue",
   "Stake now": "Stake now",
   "Stake validator": "Stake validator",
   "Staked": "Staked",
@@ -763,7 +765,6 @@
   "Username is too short.": "Username is too short.",
   "Validator": "Validator",
   "Validator #{{rank}}": "Validator #{{rank}}",
-  "Validator commission: ": "Validator commission: ",
   "Validator details": "Validator details",
   "Validator name": "Validator name",
   "Validator registration submitted": "Validator registration submitted",
@@ -827,7 +828,6 @@
   "Your name": "Your name",
   "Your signature was successful": "Your signature was successful",
   "Your signature will replace one optional signature.": "Your signature will replace one optional signature.",
-  "Your stake has been added to your staking queue": "Your stake has been added to your staking queue",
   "Your tokens and passphrase are safe.": "Your tokens and passphrase are safe.",
   "Your tokens associated with your secret recovery phrase are available to be reclaimed.": "Your tokens associated with your secret recovery phrase are available to be reclaimed.",
   "Your tokens will be deposited to your account.": "Your tokens will be deposited to your account.",

src/modules/account/components/AddAccountForm/AddAccountForm.css

@@ -37,13 +37,15 @@
 
     display: flex;
     justify-content: center;
-    margin: 0 0 10px;
+    margin: 0 0 16px;
+    font-size: var(--font-size-h3);
+    line-height: var(--font-size-h3);
   }
 
   & > p {
     @mixin contentLargest;
 
-    color: var(--color-black);
+    color: var(--color-slate-gray);
     margin: 0;
     letter-spacing: 1px;
   }
@@ -75,6 +77,11 @@
     & > label {
       margin-bottom: 7px;
       color: var(--color-maastricht-blue);
+      font-size: var(--font-size-small-secondary);
+
+      & .notice {
+        color: var(--color-ultramarine-blue);
+      }
     }
   }
 

src/modules/account/components/AddAccountForm/AddAccountForm.js

@@ -67,7 +67,10 @@ const AddAccountFormContainer = ({
         <form onSubmit={onFormSubmit}>
           <div className={styles.inputFields}>
             <fieldset>
-              <label>{t('Secret recovery phrase (12-24 mnemonic phrases supported)')}</label>
+              <label>
+                <span>{t('Secret recovery phrase ')}</span>
+                <span className={styles.notice}>{t('(12-24 mnemonic phrases supported)')}</span>
+              </label>
               <PassphraseInput
                 inputsLength={passphraseArray?.length > 12 ? 24 : 12}
                 maxInputsLength={24}

src/modules/account/components/AddAccountOptions/AddAccountOptions.css

@@ -40,7 +40,14 @@
 
     display: flex;
     justify-content: center;
-    margin: 0 0 10px;
+    margin: 0;
+    font-size: var(--font-size-h3);
+  }
+
+  & > p {
+    margin: 16px 0 32px;
+    font-size: var(--font-size-h6);
+    color: var(--color-slate-gray);
   }
 
   & > div {
@@ -49,6 +56,7 @@
     color: var(--color-slate-gray);
     margin: 0;
     letter-spacing: 1px;
+    font-size: var(--font-size-h6);
 
     & > a {
       margin: 20px 0px;
@@ -104,3 +112,12 @@
   justify-content: center;
   align-items: center;
 }
+
+.footer {
+  margin-top: 32px !important;
+
+  & div > button {
+    font-size: var(--paragraph-font-size-s) !important;
+    font-weight: var(--font-weight-semi-bold) !important;
+  }
+}

src/modules/account/components/AddAccountOptions/AddAccountOptions.js

@@ -55,7 +55,7 @@ const AddAccountOptions = () => {
                 />
               ))}
             </div>
-            <div>
+            <div className={styles.footer}>
               {t('Don’t have a Lisk account yet?')}{' '}
               <DropdownButton
                 className={`${styles.dropdownWrapper} input-with-dropdown-dropdown`}

src/modules/auth/components/SetPasswordForm/SetPasswordForm.css

@@ -13,7 +13,7 @@
 
 .titleHolder {
   text-align: center;
-  margin-bottom: 23px;
+  margin-bottom: 16px;
 
   & > .stepsLabel {
     @mixin contentSmallest;
@@ -28,7 +28,8 @@
     @mixin headingLarge very-bold;
 
     display: inline-block;
-    margin: 10px 0px;
+    margin: 10px 0px 16px;
+    font-size: var(--font-size-h3);
   }
 
   & button {
@@ -41,6 +42,7 @@
   & > p {
     @mixin contentLargest;
 
+    font-size: var(--font-size-small-secondary);
     color: var(--color-slate-gray);
     margin: 0;
     letter-spacing: 1px;
@@ -59,22 +61,24 @@
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
-  padding: 16px 30px 13px 0px;
-}
+  padding: 16px 32px 24px 0px;
 
-.checkBoxWrapper > span {
-  @mixin contentNormal;
+  & > span {
+    @mixin contentNormal;
 
-  color: var(--color-slate-gray);
-  cursor: pointer;
-  user-select: none;
-  margin-left: 10px;
+    color: var(--color-slate-gray);
+    cursor: pointer;
+    user-select: none;
+    margin-left: 10px;
+    font-size: var(--subtitle-font-size-s);
+    text-align: left;
+  }
 }
 
 form {
   & > .password-label-wrapper {
-    display: 'flex';
-    align-items: 'center';
+    display: flex;
+    align-items: center;
   }
 }
 
@@ -86,6 +90,14 @@ form {
 }
 
 .submitWrapper {
-  width: '100%';
-  box-sizing: 'border-box';
+  width: 100%;
+  box-sizing: border-box;
+
+  & button {
+    width: 100%;
+
+    &.submitButton {
+      margin-bottom: 8px;
+    }
+  }
 }

src/modules/auth/components/SetPasswordForm/SetPasswordForm.js

@@ -9,7 +9,6 @@ import Input from '@theme/Input';
 import { PrimaryButton, TertiaryButton } from '@theme/buttons';
 import CheckBox from '@theme/CheckBox';
 import Tooltip from '@theme/Tooltip';
-import Icon from '@theme/Icon';
 import { regex } from 'src/const/regex';
 import { useAccounts } from '@account/hooks';
 import styles from './SetPasswordForm.css';
@@ -118,12 +117,7 @@ function SetPasswordForm({
     <div data-testid="setPasswordFormContainer" className={styles.container}>
       <div className={`${styles.titleHolder} ${grid['col-xs-12']}`}>
         <div className={grid.row}>
-          <div className={grid['col-xs-1']}>
-            <TertiaryButton onClick={() => prevStep()}>
-              <Icon name="arrowLeftTailed" />
-            </TertiaryButton>
-          </div>
-          <div className={grid['col-xs-11']}>
+          <div className={grid['col-xs-12']}>
             <h1>{t('Set up your account password')}</h1>
           </div>
         </div>
@@ -185,11 +179,12 @@ function SetPasswordForm({
           <PrimaryButton
             isLoading={isLoading}
             type="submit"
-            style={{ width: '100%' }}
+            className={styles.submitButton}
             disabled={isButtonDisabled}
           >
             {t('Save Account')}
           </PrimaryButton>
+          <TertiaryButton onClick={() => prevStep()}>{t('Go back')}</TertiaryButton>
         </div>
       </form>
     </div>

src/modules/auth/components/SetPasswordForm/SetPasswordForm.test.js

@@ -75,7 +75,7 @@ const makeSubmitActive = () => {
 
 describe('Set Password Form validation should work', () => {
   it('returns to previous page if the back button is clicked', () => {
-    fireEvent.click(screen.getByAltText('arrowLeftTailed'));
+    fireEvent.click(screen.getByText('Go back'));
     expect(props.prevStep).toHaveBeenCalled();
   });