LiskHQ · yasharAyari · Feb 16, 2018 · Feb 16, 2018 · Feb 16, 2018 · Feb 16, 2018
diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json
@@ -99,6 +99,7 @@
   "Lisk Forum": "Lisk Forum",
   "Lisk Hub": "Lisk Hub",
   "Lisk ID": "Lisk ID",
+  "Lisk IDs": "Lisk IDs",
   "Lisk Website": "Lisk Website",
   "Loading...": "Loading...",
   "Lock ID’s automatically after 10 minutes.": "Lock ID’s automatically after 10 minutes.",
@@ -235,7 +236,7 @@
   "You have not forged any blocks yet": "You have not forged any blocks yet",
   "You need to become a delegate to start forging. If you already registered to become a delegate, your registration hasn't been processed, yet.": "You need to become a delegate to start forging. If you already registered to become a delegate, your registration hasn't been processed, yet.",
   "You've received {{value}} LSK.": "You've received {{value}} LSK.",
-  "Your favorite Lisk IDs": "Your favorite Lisk IDs",
+  "Your favorite": "Your favorite",
   "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/header/header.css b/src/components/header/header.css
@@ -16,7 +16,7 @@
 }
 
 .wrapper {
-  margin: 5vh 0px;  /* stylelint-disable-line */
+  margin: 0 0 30px;
   text-align: right;
 
   & .noPadding {

diff --git a/src/components/mainMenu/mainMenu.css b/src/components/mainMenu/mainMenu.css
@@ -35,6 +35,7 @@
   text-align: center;
   box-shadow: none;
   width: 100% !important;
+  max-width: 100% !important;
   border: none !important;
   padding: 20px 10px !important;
 }
@@ -118,6 +119,7 @@
   border-right: 1px solid var(--offcanvas-menu-border-color);
   border-bottom: 1px solid var(--offcanvas-menu-border-color);
   background: #fff;
+  max-width: 50%;
 
   &:nth-child(2n) {
     border-right: none !important;

diff --git a/src/components/mainMenu/mainMenu.js b/src/components/mainMenu/mainMenu.js
@@ -9,7 +9,7 @@ import { FontIcon } from '../fontIcon';
 import Setting from '../setting';
 
 const getIndex = (history, tabs) => {
-  if (history.location.pathname.includes('explorer')) return tabs.length - 1;
+  if (history.location.pathname.includes('explorer')) return 2;
 
   let index = -1;
   tabs.map(t => new RegExp(`${t.route}(\\/?)`)).forEach((item, i) => {
@@ -87,15 +87,15 @@ class MainMenu extends React.Component {
         image: menuLogos.sidechains,
       }, {
       */
-        label: t('Sidechains'),
-        route: '/main/sidechains',
-        id: 'sidechains',
-        image: menuLogos.sidechains,
-      }, {
         label: t('Explorer'),
         route: '/explorer/search',
         id: 'explorer',
         image: menuLogos.search,
+      }, {
+        label: t('Sidechains'),
+        route: '/main/sidechains',
+        id: 'sidechains',
+        image: menuLogos.sidechains,
       },
     ];
 
@@ -124,7 +124,7 @@ class MainMenu extends React.Component {
                   className={styles.tab}
                   id={id}
                   disabled={
-                    (isCurrent(history, index, tabs) || !account.address) && index < tabs.length - 1
+                    (isCurrent(history, index, tabs) || !account.address) && index !== 2
                   }
                 />)}
             </ToolboxTabs>
@@ -152,7 +152,8 @@ class MainMenu extends React.Component {
                       key={index}
                       label={<TabTemplate label={label} img={image} />}
                       id={id}
-                      disabled={(isCurrent(history, index, tabs) || !account.address) && index > 0 }
+                      disabled={(isCurrent(history, index, tabs) || !account.address) &&
+                        index !== 2 }
                     />)}
                 </ToolboxTabs>
               </div>

diff --git a/src/components/mainMenu/mainMenu.test.js b/src/components/mainMenu/mainMenu.test.js
@@ -103,7 +103,7 @@ describe('MainMenu', () => {
       <MainMenu {...props} account={{}} />
     </MemoryRouter>, options);
     expect(wrapper.find(Tab).at(0).props().disabled).to.be.equal(true);
-    expect(wrapper.find(Tab).at(3).props().disabled).to.be.equal(false);
+    expect(wrapper.find(Tab).at(2).props().disabled).to.be.equal(false);
   });
 
   it('should allow to change active menu item', () => {

diff --git a/src/components/passphrase/create/create.css b/src/components/passphrase/create/create.css
@@ -66,6 +66,7 @@
   width: 100%;
   height: 100%;
   z-index: 0;
+  overflow: hidden;
 }
 
 hr {

diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css
@@ -1,13 +1,14 @@
 @import '../app/variables.css';
 
 :root {
-  --font-size-ids-h1: 4em;
-  --font-size-ids-h1-m: 3em;
+  --font-size-ids-h1-xl: 4em;
+  --font-size-ids-h1-l: 3em;
   --font-size-ids-h1-s: 2.5em;
   --font-size-card-h2: 2em;
-  --font-size-card-h2-m: 1.5em;
+  --font-size-card-h2-s: 1.5em;
   --close-button-shadow: 0 20px 20px 0 rgba(0, 32, 68, 0.25);
-  --h1-padding: 85px;
+  --h1-padding-xl: 85px;
+  --h1-padding-l: 40px;
   --h1-padding-m: 25px;
   --h1-width: 600px;
   --h1-width-m: 400px;
@@ -29,9 +30,9 @@
   & > h1 {
     position: absolute;
     color: var(--color-white);
-    font-size: var(--font-size-ids-h1);
+    font-size: var(--font-size-ids-h1-l);
     text-align: center;
-    padding: var(--h1-padding);
+    padding-top: var(--h1-padding-l);
     margin: 0;
     width: var(--h1-width);
     left: 50%;
@@ -249,10 +250,19 @@
   margin-top: -5px;
 }
 
+@media (min-height: 1000px) {
+  .wrapper {
+    & > h1 {
+      font-size: var(--font-size-ids-h1-xl);
+      padding-top: var(--h1-padding-xl);
+    }
+  }
+}
+
 @media (--medium-viewport) {
   .wrapper {
     & > h1 {
-      font-size: var(--font-size-ids-h1-m);
+      font-size: var(--font-size-ids-h1-l);
       padding: var(--h1-padding-m);
       width: var(--h1-width-m);
     }
@@ -267,7 +277,7 @@
     height: var(--card-height-m);
 
     & h2 {
-      font-size: var(--font-size-card-h2-m);
+      font-size: var(--font-size-card-h2);
     }
   }
 

diff --git a/src/components/savedAccounts/savedAccounts.js b/src/components/savedAccounts/savedAccounts.js
@@ -76,7 +76,10 @@ class SavedAccounts extends React.Component {
     return (
       <div className={`${styles.wrapper} save-account`}>
         <BackgroundMaker />
-        <h1>{t('Your favorite Lisk IDs')}</h1>
+        <h1>
+          {t('Your favorite')}
+          <div>{t('Lisk IDs')}</div>
+        </h1>
         <div className={styles.cardsWrapper} >
           <Link to={`${routes.addAccount.url}?referrer=/main/dashboard/`} >
             <div className={`add-lisk-id-card ${styles.card} ${styles.addNew}`} >

diff --git a/src/components/toolbox/buttons/css/base.css b/src/components/toolbox/buttons/css/base.css
@@ -64,7 +64,7 @@
 @define-mixin buttonAction {
   color: var(--color-white) !important;
   background: var(--gradient-action-blue);
-  min-width: 140px;
+  width: 140px;
 
   &:hover {
     background: var(--gradient-action-blue-hover) !important;