♻️ Refactor account component styles

LiskHQ · Mar 27, 2018 · ea5596d · ea5596d
1 parent 819adca
commit ea5596d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/src/components/header/customCountDown.css b/src/components/header/customCountDown.css
@@ -1,21 +1,29 @@
 .reset {
-  margin-right: 10px;
+  margin-right: 18px;
   padding-left: 3px;
   padding-right: 3px;
-  padding-bottom: 5px;
+  padding-bottom: 3px;
   cursor: pointer;
   color: white;
   border-bottom: solid 2px white;
   display: inline;
+  font-family: 'Open Sans';
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.default {
+  color: #FFFFFF;
 }
 
 .timeout {
   color: red;
-  font-weight: 600;
-  font-size: 13px;
 }
 
 .timerRow {
   display: flex;
   justify-content: flex-end;
+  font-weight: 600;
+  font-size: 12px;
+  font-family: 'Open Sans';
 }
diff --git a/src/components/header/customCountDown.js b/src/components/header/customCountDown.js
@@ -12,7 +12,7 @@ const CustomCountDown = ({ minutes, autoLog, seconds, resetTimer, t }) => {
     resetTimer();
   }} className={`${styles.reset} reset`}> {t('Reset')} </div> : <div></div>;
 
-  const resetStyle = resetCondition ? styles.timeout : {};
+  const resetStyle = resetCondition ? styles.timeout : styles.default;
   const timer = !timeoutCondition &&
     <span className={resetStyle}>{t('ID lock in')} {min}:{sec}</span>;
 

diff --git a/src/components/header/header.css b/src/components/header/header.css
@@ -11,7 +11,7 @@
   --menu-icon-height-XL: 39px;
   --menu-icon-height-M: 34px;
   --font-size-normal: 16px;
-  --font-size-small: 13px;
+  --font-size-small: 12px;
 }
 
 .wrapper {
@@ -30,9 +30,10 @@
 
 .unlocked {
   color: red;
+  font-family: 'Open Sans';
   font-weight: 600;
-  font-size: 13px;
-  line-height: 1.1em; /* stylelint-disable-line */
+  font-size: var(--font-size-small);
+  line-height: 1.5em; /* stylelint-disable-line */
 }
 
 .logoWrapper {
@@ -125,31 +126,36 @@
     line-height: 25px;
     padding-right: 20px;
     height: var(--avatar-height);
+    font-family: 'Open Sans';
+    font-weight: 600;
 
     & .balance {
-      font-size: 29px;
+      font-size: 24px;
+      font-family: var(--heading-font);
       color: var(--color-white);
       line-height: 0.5em; /* stylelint-disable-line */
       padding-top: 7px;
 
       & small {
+        padding-left: 5px;
         font-size: var(--font-size-small);
       }
     }
 
     & .address {
-      font-size: var(--font-size-small);
+      font-size: 14px;
       color: var(--color-grayscale-medium);
     }
 
     & .copy {
-      font-size: var(--font-size-normal);
+      font-size: 24px;
+      padding-right: 5px;
     }
 
     & .timer {
       font-size: var(--font-size-small);
       color: var(--color-grayscale-medium);
-      line-height: 1.1em; /* stylelint-disable-line */
+      line-height: 1.5em; /* stylelint-disable-line */
     }
   }