From e55cec72cc3a6dec4491807a52e507c0f75035b8 Mon Sep 17 00:00:00 2001
From: Will Hill <email.will.in.china@gmail.com>
Date: Fri, 30 Nov 2018 16:51:01 +0800
Subject: [PATCH] account page css

---
 images/question.png                   | Bin 0 -> 961 bytes
 src/routes/dashboard/account-route.js |  40 +++++++++++++++++++-------
 2 files changed, 29 insertions(+), 11 deletions(-)
 create mode 100644 images/question.png

diff --git a/images/question.png b/images/question.png
new file mode 100644
index 0000000000000000000000000000000000000000..96fb5b42166cfc7b0cbb6d0708c1941f58116f52
GIT binary patch
literal 961
zcmV;y13vtTP)<h;3K|Lk000e1NJLTq000~S000~a1^@s6at+^<00004XF*Lt006O%
z3;baP000AcNkl<ZNDZx4OK2295UuJNldK!?;6+f32qJ>u_n?C4;)i5c(2F+@#@``o
zL=f?pIJoh15<mDMYTSbt1qH>d5j7D+MevJ)f}jKyFN)t}6U}t{YU0Rfc6W9p#rAeh
zRrPz*RXyF!1X;W1`tYuvp1n*o&lnmjw!so+dS!@i#49Sc9@#ekBYR}Io+ls}IankG
zaNfmZ6_ae4nNP;VKcPP}WORW+k<7qT7%&ldL(q>DF562Zo`g)5)3{SRQk{`dLxNW}
zwN~j~ekr8F#mgHmBgG!!qtofs)MDf7oQ}$z&TU{aGbPRt-;Jr*!J|&%d$Dn~4XqDB
zI7MP)%ASO!ag~!Dl{2}gplQMzrlg53Hu3p5`T8LCAHsZrL7Ud*I2ki0X!CT~w4q}I
z>;()Z5pLXnCx#hS3kH_?2U`u9B29F$8DnZBM)WYT!ve%_zV?>0Qgxy$)~`?OT=-b@
z6^+>rc$Y%8zIAntLH``BsFXx_z)5@tN^=kib(?`y)?nqx3hym*?KeSxA-yERe+LVh
zt4%xXUK)*}<6$e+$0(_Wez5eY7i&!!s2&;W*j7ccP2wv>BF}JD`pPUU^YH?XRNjsc
zrzK8(qOTM(iHSZ#&Eo>#XAjpWdjrp*YUCNVI5iodO8YN~Ot`$EZ8lTiGGQ}hpUI@F
zZ$)8_OsJ@D0*;b3LIV8(x=4hPYZzrV`C=7T+81%)=ooeGoU!r+1#Pw!zksw%_Zsw|
zFP|=$f-OGb;@Za6c6?h2&%k_<4YiTQ-8RLt%}&DGEB^(mb6Q7q6DO6cLrTKRFjWJ8
z@o)SN8=GSjxil9`fW?8GYB9NnesH(!m);rX6FQDjoo;qrPMh7>0V>0<1wg~EUl`mb
ztxh}1c4k%Ur`C4^aPl7=%1Y<z#7>>PgOC0oE?SjAUzqNt5*#hN7Ih%K{jz4?wP9{|
z-*j#CDS%dqHIrV%>knnizki?xyufDI<!*u_ie+axjFh~P=Yry8lwVmx?fcDJ7WixB
z?{Hi>?!z)otd_-dv`fwYRwg!(-7_|=&NQZQ`bU?dMR#4gDYX??{C&ely?wMw9&s8u
zynF@Tr6^&5?2=`vwI`kA+X6Txn+Fmy?xt83{lf3@p{{S)l{#NCVo2bCod&7PV9Y0_
j_-I+YY{FoY$-Ddl1`9&cd?#5u00000NkvXXu0mjff|$Q8

literal 0
HcmV?d00001

diff --git a/src/routes/dashboard/account-route.js b/src/routes/dashboard/account-route.js
index 07683dd..c0394d2 100644
--- a/src/routes/dashboard/account-route.js
+++ b/src/routes/dashboard/account-route.js
@@ -105,8 +105,8 @@ class AccountRoute extends PolymerElement {
         .comment {
           display: block;
           line-height: 18px;
-          color: #9da1ab;
-          padding: 9px 0 0;
+          color: #9D9FA9;
+          padding: 11px 0 0;
           margin: 0 0 -2px 0;
           font-size: 12px;
         }
@@ -149,6 +149,11 @@ class AccountRoute extends PolymerElement {
           color: #6681B5;
           text-decoration: none;
         }
+        .blue-info {
+          font-size: 12px;
+          color: #607DB4;
+          font-weight: 600;
+        }
 
       </style>
 
@@ -167,7 +172,9 @@ class AccountRoute extends PolymerElement {
                 <div class="form-inputs">
                   <label>Worbli Account Name </label>
                   <input id="worbliAccountName" value="{{worbliAccountName::input}}" name="worbliAccountName" type="text" class="lower">
-                  <small class="comment">Choose your desired Worbli account name (6-12 characters, must start with a letter and can only contain letters and numbers 1-5). Note: high profile trademarked names such as "google", "facebook", etc. are not allowed and accounts that have chosen such names will be frozen.</small></br>
+                  <small class="comment">Choose your desired Worbli account name</br>  
+                  <i>(6-12 characters, must start with a letter and can only contain letters and numbers 1-5).</br> </br> </i>
+                  <b>Note:</b> high profile trademarked names such as "google", "facebook", etc. are not allowed and accounts that have chosen such names will be frozen.</small></br>
                   <small class="comment error">[[worbliAccountNameError]]</small>
                 </div>
               </div>
@@ -175,17 +182,28 @@ class AccountRoute extends PolymerElement {
               <div class="input-area">
                 <div class="section-name">Keys</div>
                 <div class="form-inputs">
+                
+    
+                <div class="split" style="margin-bottom: 12px;">
+                  <div style="margin-right: 12px;">
+                    <img src="./images/question.png" style="margin-top: 3px;">
+                  </div>
+                  <div>
+                  <a href="https://worbli.zendesk.com/hc/en-us/articles/360019917571-How-can-I-generate-my-Owner-or-Active-key-using-Scatter-">
+                    <p class="blue-info">
+                      Not sure what public keys are? </br> 
+                      <u>Check out our FAQ on how to generate a public key with Scatter.</u>
+                    </p>
+                    </a>
+                  </div>
+                </div>
+
+                <label>Owner Public Key</label>
+                  <input id="publicKeyOwner" value="{{publicKeyOwner::input}}" name="publicKeyOwner" type="text" class="text">
+                  <small class="comment error">[[publicKeyOwnerError]]</small>
                   <label>Active Public Key</label>
-                  <small class="comment">You can put your shareable/active keys in both fields.</small></br>
                   <input id="publicKeyActive" value="{{publicKeyActive::input}}" name="publicKeyActive" type="text" class="text">
                   <small class="comment error">[[publicKeyActiveError]]</small>
-                  <label>Owner Public Key</label>
-                  <input id="publicKeyOwner" value="{{publicKeyOwner::input}}" name="publicKeyOwner" type="text" class="text">
-                  <small class="comment error">[[publicKeyOwnerError]]</small>
-                  <p>
-                  </br></br>
-                  <a href="https://worbli.zendesk.com/hc/en-us/articles/360019917571-How-can-I-generate-my-Owner-or-Active-key-using-Scatter-" target="_blank">How can I generate my Owner or Active key using Scatter?</a></br>
-                  </p>
                 </div>
               </div>
             </template>