Merge pull request #557 from LiskHQ/488-account-switcher-wording

Improve account switcher wording - Closes #488
LiskHQ · Mar 14, 2018 · 293ec61 · 293ec61
2 parents 266108a + 62601d0
commit 293ec61
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 19 deletions.
diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json
@@ -144,7 +144,7 @@
   "Register Second Passphrase": "Register Second Passphrase",
   "Register as delegate": "Register as delegate",
   "Reload": "Reload",
-  "Remove from Favorites": "Remove from Favorites",
+  "Remove": "Remove",
   "Remove vote from": "Remove vote from",
   "Report Issue...": "Report Issue...",
   "Required": "Required",
@@ -222,7 +222,7 @@
   "You can vote for up to {{count}} delegates in total._plural": "You can vote for up to {{count}} delegates in total.",
   "You have already registered as a delegate.": "You have already registered as a delegate.",
   "You've received {{value}} LSK.": "You've received {{value}} LSK.",
-  "Your favorite Lisk IDs": "Your favorite Lisk IDs",
+  "Your Lisk IDs": "Your Lisk IDs",
   "You’re votes are being processed and will be confirmed. It may take up to 10 minutes to be secured in the blockchain.": "You’re votes are being processed and will be confirmed. It may take up to 10 minutes to be secured in the blockchain.",
   "Zero not allowed": "Zero not allowed",
   "more": "more",

diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css
@@ -12,9 +12,6 @@
   --h1-padding-xl: 85px;
   --h1-padding-l: 40px;
   --h1-padding-m: 25px;
-  --h1-width: 300px;
-  --h1-width-m: 400px;
-  --h1-width-s: 260px;
   --add-button-margin: 200px;
   --card-width: 347px;
   --card-height: 436px;
@@ -36,9 +33,9 @@
     text-align: center;
     padding-top: var(--h1-padding-l);
     margin: 0;
-    width: var(--h1-width);
     left: 50%;
     transform: translateX(-50%);
+    white-space: nowrap;
   }
 }
 
@@ -217,7 +214,7 @@
 .closeButton {
   box-shadow: var(--close-button-shadow);
   position: absolute !important;
-  top: 85px;
+  top: var(--h1-padding-l);
   right: 85px;
 }
 
@@ -259,14 +256,17 @@
       padding-top: var(--h1-padding-xl);
     }
   }
+
+  .closeButton {
+    top: var(--h1-padding-xl);
+  }
 }
 
 @media (--medium-viewport) {
   .wrapper {
     & > h1 {
       font-size: var(--font-size-ids-h1-l);
       padding: var(--h1-padding-m);
-      width: var(--h1-width-m);
     }
   }
 
@@ -294,7 +294,7 @@
   }
 
   .closeButton {
-    top: 35px;
+    top: var(--h1-padding-m);
     right: 35px;
   }
 
@@ -318,10 +318,14 @@
   .wrapper {
     & > h1 {
       font-size: var(--font-size-ids-h1-s);
-      width: var(--h1-width-s);
     }
   }
 
+  .closeButton {
+    top: 15px;
+    right: 15px;
+  }
+
   .cardsWrapper {
     padding: 0;
   }
@@ -356,10 +360,3 @@
     }
   }
 }
-
-@media (--xSmall-viewport) {
-  .closeButton {
-    top: 15px;
-    right: 15px;
-  }
-}
diff --git a/src/components/savedAccounts/savedAccounts.js b/src/components/savedAccounts/savedAccounts.js
@@ -77,7 +77,7 @@ class SavedAccounts extends React.Component {
       <div className={`${styles.wrapper} save-account`}>
         <BackgroundMaker className={styles.background} />
         <h1>
-          {t('Your favorite Lisk IDs')}
+          {t('Your Lisk IDs')}
         </h1>
         <ul className={styles.cardsWrapper} >
           <li>
@@ -134,7 +134,7 @@ class SavedAccounts extends React.Component {
                     { button: styles.removeButton }
                   }
                   onClick={this.handleRemove.bind(this, account)}
-                  label={this.isSelectedForRemove(account) ? t('Confirm') : t('Remove from Favorites')}/> :
+                  label={this.isSelectedForRemove(account) ? t('Confirm') : t('Remove')}/> :
                 null
               }
             </li>