♻️ Refactor Code and styles

LiskHQ · Mar 26, 2018 · 819adca · 819adca
1 parent 8442719
commit 819adca
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 21 deletions.
diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json
@@ -2,7 +2,6 @@
   " Make sure that you are using the latest version of Lisk Hub.": " Make sure that you are using the latest version of Lisk Hub.",
   "About": "About",
   "Account initialization": "Account initialization",
-  "Account locked!": "Account locked!",
   "Activity": "Activity",
   "Add": "Add",
   "Add a Lisk ID": "Add a Lisk ID",

diff --git a/src/components/copyToClipboard/index.js b/src/components/copyToClipboard/index.js
@@ -28,11 +28,11 @@ class CopyToClipboard extends React.Component {
     return (
       <ReactCopyToClipboard text={value} onCopy={() => this.textIsCopied()}>
         {this.state.copied ? <span className={`${className} copied`}>
-          {t('Copied!')} <FontIcon value='copy-to-clipboard' className={copyClassName}></FontIcon>
+          <FontIcon value='copy-to-clipboard' className={copyClassName}></FontIcon> {t('Copied!')}
         </span> :
           <span className={`${className} ${styles.clickable} default`}>
-            <span className='copy-title'>{text || value}</span>
             <FontIcon value='copy-to-clipboard' className={copyClassName}></FontIcon>
+            <span className='copy-title'>{text || value}</span>
           </span>
         }
       </ReactCopyToClipboard>

diff --git a/src/components/copyToClipboard/index.test.js b/src/components/copyToClipboard/index.test.js
@@ -28,7 +28,7 @@ describe('CopyToClipboard', () => {
   });
 
   it('should click on span.default render "Copied!"', () => {
-    const expectValue = 'Copied! ';
+    const expectValue = ' Copied!';
     wrapper.find('span.default').simulate('click');
     expect(wrapper.find('span.copied').text()).to.be.equal(expectValue);
   });

diff --git a/src/components/header/customCountDown.css b/src/components/header/customCountDown.css
@@ -1,19 +1,18 @@
 .reset {
   margin-right: 10px;
-  padding: 0px 3px;
+  padding-left: 3px;
+  padding-right: 3px;
+  padding-bottom: 5px;
   cursor: pointer;
   color: white;
   border-bottom: solid 2px white;
   display: inline;
-
-  &:hover {
-    transition: all 0.3 ease-out;
-    transform: scale(1.1);
-  }
 }
 
 .timeout {
   color: red;
+  font-weight: 600;
+  font-size: 13px;
 }
 
 .timerRow {

diff --git a/src/components/header/customCountDown.js b/src/components/header/customCountDown.js
@@ -5,8 +5,8 @@ const CustomCountDown = ({ minutes, autoLog, seconds, resetTimer, t }) => {
   const min = minutes < 10 ? `0${minutes}` : minutes;
   const sec = seconds < 10 ? `0${seconds}` : seconds;
 
-  const resetCondition = (minutes <= 9 && seconds <= 50);
-  const timeoutCondition = (minutes <= 5 && seconds <= 0);
+  const resetCondition = (minutes < 5);
+  const timeoutCondition = (minutes === 0 && seconds === 0);
 
   const resetButton = resetCondition && !timeoutCondition ? <div onClick={() => {
     resetTimer();

diff --git a/src/components/header/header.css b/src/components/header/header.css
@@ -28,6 +28,13 @@
   }
 }
 
+.unlocked {
+  color: red;
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 1.1em; /* stylelint-disable-line */
+}
+
 .logoWrapper {
   width: 25%;
 }
@@ -120,18 +127,29 @@
     height: var(--avatar-height);
 
     & .balance {
-      font-size: var(--font-size-normal);
+      font-size: 29px;
       color: var(--color-white);
+      line-height: 0.5em; /* stylelint-disable-line */
+      padding-top: 7px;
+
+      & small {
+        font-size: var(--font-size-small);
+      }
     }
 
     & .address {
-      font-size: var(--font-size-normal);
+      font-size: var(--font-size-small);
       color: var(--color-grayscale-medium);
     }
 
+    & .copy {
+      font-size: var(--font-size-normal);
+    }
+
     & .timer {
       font-size: var(--font-size-small);
       color: var(--color-grayscale-medium);
+      line-height: 1.1em; /* stylelint-disable-line */
     }
   }
 

diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -48,7 +48,12 @@ class Header extends React.Component {
                       <LiskAmount val={this.props.account.balance}/>
                       <small> LSK</small>
                     </div>
-                    <CopyToClipboard value={this.props.account.address} className={`${styles.address} account-information-address`}/>
+                    <CopyToClipboard
+                      value={this.props.account.address}
+                      className={`${styles.address} account-information-address`}
+                      copyClassName={styles.copy}/>
+                    {!this.props.autoLog && this.props.account.passphrase ?
+                      <div className={styles.unlocked}>{this.props.t('Unlocked')}</div> : <div></div>}
                     {this.props.autoLog ? <div className={styles.timer}>
                       {((this.props.account.expireTime &&
                           this.props.account.expireTime !== 0) &&
@@ -69,12 +74,7 @@ class Header extends React.Component {
                           </Countdown>
                         </div> : <div></div>}
                     </div>
-                      : <div className={styles.timer}>
-                        {this.props.account.passphrase ? '' : <span>
-                          <FontIcon value='locked' className={styles.lock}/> {this.props.t('Account locked!')}
-                        </span>
-                        }
-                      </div>
+                      : <div></div>
                     }
                   </div>
                   <Link to={`${routes.accounts.path}`} className={styles.avatar}>