Merge pull request #1388 from LiskHQ/1375-improve-design-bookmarks

Improve design bookmarks - Close #1375
LiskHQ · Oct 25, 2018 · 329cb73 · 329cb73
2 parents 9c54916 + 59b13d1
commit 329cb73
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/src/components/bookmark/bookmark.css b/src/components/bookmark/bookmark.css
@@ -7,6 +7,19 @@
   padding: 0 20px;
 }
 
+.label {
+  margin-top: 25px;
+}
+
+.inputElement:focus:not([disabled]):not([readonly]) ~ .label:not(.fixed),
+.inputElement.filled ~ .label:not(.fixed) {
+  margin-top: 0px;
+}
+
+.inputElement:focus:not([disabled]):not([readonly]) ~ .label:not(.fixed) {
+  color: var(--color-primary-standard);
+}
+
 .resultList {
   list-style-type: none;
   display: flex;
@@ -26,7 +39,7 @@
 }
 
 .accountVisual {
-  padding: 12px 20px 5px;
+  padding: 10px 12px;
 }
 
 .smallAccountVisual {
@@ -35,6 +48,7 @@
 }
 
 .bigAccountVisual {
+  padding-top: 25px;
   position: absolute;
 }
 
@@ -62,8 +76,9 @@
   z-index: 20;
 
   & input:not(:focus) {
-    padding-left: 40px;
-    padding-top: 5px;
+    padding-left: 50px;
+    padding-top: 30px !important;
+    font-family: var(--content-font);
   }
 }
 
@@ -81,6 +96,7 @@
 
   & label {
     padding-left: 60px;
+    padding-top: 20px !important;
   }
 }
 
@@ -157,10 +173,12 @@
 }
 
 .children {
-  padding-left: 40px;
+  padding-left: 50px;
   top: 25px;
   font-weight: 600;
   position: absolute;
+  color: var(--color-grayscale-dark);
+  font-family: var(--content-font);
 }
 
 .inputChildren {
@@ -171,6 +189,7 @@
     padding-top: 25px !important;
     position: absolute;
     font-size: 10px !important;
+    color: var(--color-grayscale-dark);
   }
 
   & label {

diff --git a/src/components/bookmark/bookmark.js b/src/components/bookmark/bookmark.js
@@ -122,7 +122,7 @@ class Bookmark extends React.Component {
           {isValidAddress && !this.state.show && !!isAddressFollowedAccounts ? <AccountVisual
             className={styles.smallAccountVisual}
             address={address.value}
-            size={35}
+            size={40}
           /> : null}
 
           {isValidAddress && !this.state.show && !isAddressFollowedAccounts ? <AccountVisual
@@ -181,7 +181,7 @@ class Bookmark extends React.Component {
                       <AccountVisual
                         className={styles.accountVisual}
                         address={account.address}
-                        size={35}
+                        size={40}
                       />
                       <div className={styles.text}>
                         <div className={styles.title}>{account.title}</div>

diff --git a/src/components/sendReadable/send.js b/src/components/sendReadable/send.js
@@ -120,7 +120,7 @@ class SendReadable extends React.Component {
                 <AccountVisual
                   className={styles.accountVisual}
                   address={this.state.recipient.value}
-                  size={35}
+                  size={40}
                 />
                 <div className={styles.text}>
                   <div className={styles.title}>{followedAccount && followedAccount.title}</div>

diff --git a/src/components/sendReadable/sendReadable.css b/src/components/sendReadable/sendReadable.css
@@ -97,7 +97,7 @@ input:read-only {
 }
 
 .smallAddress {
-  margin-top: 5px;
+  margin-top: 9px;
   font-size: 12px;
   font-weight: 400;
 }