Merge pull request #524 from LiskHQ/85-change-typographical-elements-…

…to-use-px

Change typographical elements to use px - Closes #85

config/webpack.config.react.js

@@ -45,7 +45,7 @@ module.exports = {
         extends: 'stylelint-config-standard',
         rules: {
           'selector-pseudo-class-no-unknown': null,
-          'unit-whitelist': ['px', 'deg', '%', 'em', 'ms'],
+          'unit-whitelist': ['px', 'deg', '%', 'ms'],
           'length-zero-no-unit': null,
           'at-rule-no-unknown': null,
         },

src/components/app/type.css

@@ -86,7 +86,7 @@ a,
 b,
 i,
 strong {
-  font-size: var(--font-size-h6);
+  font-size: var(--paragraph-font-size-l);
 }
 
 strong {
@@ -140,4 +140,8 @@ select {
   h5 {
     font-size: var(--font-size-h5-s);
   }
+
+  p {
+    font-size: var(--paragraph-font-size-s);
+  }
 }

src/components/app/variables.css

@@ -39,13 +39,13 @@ or "warn/action" ineastd of "red/green"
   /*************************
         Font
   *************************/
-  --font-size-h1: 6.854em;
-  --font-size-h2: 4.236em;
-  --font-size-h3: 2.618em;
-  --font-size-h4: 1.618em;
-  --font-size-h5: 1.32em;
-  --font-size-h6: 1em;
-  --font-size-small: 0.875em;
+  --font-size-h1: 65px;
+  --font-size-h2: 32px;
+  --font-size-h3: 28px;
+  --font-size-h4: 26px;
+  --font-size-h5: 20px;
+  --font-size-h6: 16px;
+  --font-size-small: 14px;
   --heading-font: 'gilroy', 'Open Sans', sans-serif;
   --content-font: 'Open Sans', sans-serif;
   --font-weight-normal: 400;
@@ -57,6 +57,7 @@ or "warn/action" ineastd of "red/green"
   --paragraph-font-size-l: 15px;
   --paragraph-font-size-s: 14px;
   --input-font-size: 16px;
+  --button-font-size: 16px;
 
   /* Font xl breakpoint */
   --font-size-h2-xl: 32px;

src/components/confirmVotes/confirmVotes.css

@@ -14,7 +14,6 @@
   text-align: center;
 
   & h2 {
-    font-size: var(--font-size-h2-xl);
     margin: 0;
   }
 

src/components/dashboard/currencyGraph.css

@@ -65,7 +65,6 @@
     min-height: 300px;
 
     & h2 {
-      font-size: var(--font-size-h2-l);
       margin: 45px var(--box-padding-left-M) 20px;
     }
   }

src/components/dashboard/styles.css

@@ -37,7 +37,6 @@
 @media (--xLarge-viewport) {
   .latestActivity {
     & h2 {
-      font-size: var(--font-size-h2-xl);
       margin: 45px var(--box-padding-left-L) 20px;
     }
   }
@@ -46,7 +45,6 @@
 @media (--large-viewport) {
   .latestActivity {
     & h2 {
-      font-size: var(--font-size-h2-l);
       margin: 45px var(--box-padding-left-L) 20px;
     }
   }
@@ -73,19 +71,12 @@
     height: auto;
 
     & h2 {
-      font-size: var(--font-size-h2-l);
       margin: 45px var(--box-padding-left-M) 20px;
     }
   }
 }
 
 @media (--small-viewport) {
-  .latestActivity {
-    & h2 {
-      font-size: var(--font-size-h2-s);
-    }
-  }
-
   .seeAllLink {
     display: block;
     margin-top: 16px;

src/components/delegateList/delegateList.css

@@ -146,7 +146,6 @@
     margin-bottom: 0;
     font-weight: 400;
     padding-bottom: 60px;
-    font-size: var(--main-header-font-size-XL);
 
     &.desktopTitle {
       display: block;
@@ -376,10 +375,6 @@
 @media (--large-viewport) {
   .header {
     padding: 20px var(--grid-padding-L);
-
-    & h2 {
-      font-size: var(--main-header-font-size-L);
-    }
   }
 
   .delegatesList {
@@ -508,10 +503,6 @@
   .header {
     padding: 20px var(--grid-padding-XS);
 
-    & h2 {
-      font-size: var(--main-header-font-size-XS);
-    }
-
     & .account {
       display: none;
     }

src/components/dialog/dialog.css

@@ -9,7 +9,7 @@
 
   & p {
     color: rgba(0, 0, 0, 0.87);
-    line-height: 1.4em;
+    line-height: 22px;
   }
 
   & header {

src/components/fontIcon/icons.css

@@ -14,8 +14,8 @@
   font-style: normal;
   font-size: 24px;
   display: inline-block;
-  width: 1em;
-  height: 1em;
+  width: 1em; /* stylelint-disable-line unit-whitelist */
+  height: 1em; /* stylelint-disable-line unit-whitelist */
   line-height: 1 !important;
   text-transform: none;
   letter-spacing: normal;

src/components/login/login.css

@@ -4,6 +4,8 @@
   --gradient: linear-gradient(45deg, rgba(0, 74, 255, 1) 0%, rgba(147, 244, 254, 1) 100%);
   --transition: all ease 300ms;
   --header-focused-font-size: 32px;
+  --arrow-font-size: 60px;
+  --arrow-focused-font-size: 40px;
   --rect-width: 200px;
   --login-box-padding-L: 48px;
   --login-box-padding-XL: 56px;
@@ -234,7 +236,7 @@
   }
 
   & .singUpArrow {
-    font-size: 1.2em;
+    font-size: var(--arrow-font-size);
   }
 
   & .subTitle {
@@ -243,6 +245,7 @@
 
   & a {
     text-decoration: none;
+    font-size: inherit;
   }
 
   & .shapes {
@@ -254,11 +257,17 @@
     transform: translateZ(0);
 
     & h2 {
-      font-size: var(--header-focused-font-size);
+      & a {
+        font-size: var(--header-focused-font-size);
+      }
+
+      & .singUpArrow {
+        font-size: var(--arrow-focused-font-size);
+      }
     }
 
     & .subTitle {
-      font-size: 1em;
+      font-size: var(--subtitle-font-size);
     }
 
     & .shape {
@@ -446,6 +455,7 @@
   .login,
   .signUp {
     & h2 {
+      font-size: var(--font-size-h2-l);
       margin-top: 28vh; /* stylelint-disable-line */
     }
   }
@@ -456,6 +466,10 @@
     border-radius: 0px;
     width: 60%;
     height: calc(100vh - var(--m-top-bar-height) - var(--m-menu-bar-height)); /* stylelint-disable-line */
+
+    & .singUpArrow {
+      font-size: var(--arrow-focused-font-size);
+    }
   }
 
   .login,
@@ -480,6 +494,9 @@
 
     & h2 {
       font-size: var(--font-size-h2-s);
+    }
+
+    & h2 a {
       margin-top: 12vh; /* stylelint-disable-line */
     }
   }

src/components/multiStep/multiStep.css

@@ -58,7 +58,7 @@
       height: 0;
       border-bottom: solid 2px var(--link-color);
       opacity: 0.5;
-      font-size: 0;
+      font-size: 0 !important;
     }
 
     & .icon {

src/components/passphrase/confirm/confirm.css

@@ -8,6 +8,7 @@
   --header-animation-duration: 450ms;
   --second-header-animation-delay: 1000ms;
   --steps-nav-height: 22px;
+  --header-font-size: var(--paragraph-font-size-l);
 }
 
 .table {
@@ -45,7 +46,7 @@
   }
 
   & header {
-    font-size: 0.959em;
+    font-size: var(--header-font-size);
 
     & h2,
     & h5 {

src/components/passphrase/create/create.css

@@ -236,7 +236,7 @@ hr {
       margin: 0;
 
       & p {
-        margin-bottom: 1em !important;
+        margin-bottom: 16px !important;
         font-size: 16px;
       }
 

src/components/passphrase/safekeeping/safekeeping.css

@@ -7,6 +7,7 @@
   --address-animation-duration: 1000ms;
   --header-animation-duration: 450ms;
   --second-header-animation-delay: 1000ms;
+  --header-font-size: var(--paragraph-font-size-l);
 }
 
 .table {
@@ -60,7 +61,7 @@
   }
 
   & header {
-    font-size: 0.959em;
+    font-size: var(--header-font-size);
 
     & h2,
     & h5 {

src/components/passphraseSteps/passphraseSteps.css

@@ -26,7 +26,6 @@
   & h2 {
     font-weight: var(--font-weight-semi-bold);
     margin-bottom: 0;
-    font-size: 2em;
   }
 }
 

src/components/resultBox/resultBox.css

@@ -5,10 +5,11 @@
   --paragraph-color: var(--color-grayscale-dark);
   --paragraph-line-height: 36px;
   --title-font-size: 32px;
+  --icon-font-size: 48px;
 }
 
 .icon {
-  font-size: 3em;
+  font-size: var(--icon-font-size);
   color: #ff6236;
 }
 
@@ -31,10 +32,6 @@
     line-height: var(--paragraph-line-height);
   }
 
-  & h2 {
-    font-size: var(--title-font-size);
-  }
-
   & .copy {
     color: var(--copy-color);
     cursor: pointer;

src/components/savedAccounts/savedAccounts.css

@@ -1,11 +1,13 @@
 @import '../app/variables.css';
 
 :root {
-  --font-size-ids-h1-xl: 4em;
-  --font-size-ids-h1-l: 3em;
-  --font-size-ids-h1-s: 2em;
-  --font-size-card-h2: 2em;
-  --font-size-card-h2-s: 1.5em;
+  --font-size-ids-h1-xl: 64px;
+  --font-size-ids-h1-l: 48px;
+  --font-size-ids-h1-s: 32px;
+  --font-size-card-h2: 32px;
+  --font-size-card-h2-s: 24px;
+  --address-font-size: 18px;
+  --small-font-size: 20px;
   --close-button-shadow: 0 20px 20px 0 rgba(0, 32, 68, 0.25);
   --h1-padding-xl: 85px;
   --h1-padding-l: 40px;
@@ -75,7 +77,7 @@
     color: var(--color-black);
 
     & > small {
-      font-size: 0.6875em;
+      font-size: var(--small-font-size);
     }
   }
 
@@ -116,7 +118,7 @@
 .address {
   margin-bottom: 40px;
   color: var(--color-grayscale-dark);
-  font-size: 1.125em;
+  font-size: var(--address-font-size);
 }
 
 .cardIcon {
@@ -184,7 +186,7 @@
 
 .network,
 .unlocked {
-  font-size: 1em;
+  font-size: var(--font-size-h6);
   position: absolute;
   top: 0;
   padding: 24px;

src/components/sendReadable/sendReadable.css

@@ -60,15 +60,6 @@ input:read-only {
   }
 }
 
-.temporarySuccessCheck {
-  /* values are not saved as variable since this will be deleted anyway */
-  position: absolute;
-  bottom: -20px;
-  left: 155px;
-  font-size: 3em;
-  color: #ff6236;
-}
-
 .headerWrapper {
   padding: 20px 0px;
 
@@ -82,7 +73,6 @@ input:read-only {
 
   & h2 {
     margin-bottom: 0;
-    font-size: 2em;
   }
 
   & h3 {