Merge branch '0.3.0' into development

src/components/app/variables.css

@@ -46,13 +46,17 @@ or "warn/action" ineastd of "red/green"
   --font-size-h5: 1.32em;
   --font-size-h6: 1em;
   --font-size-small: 0.875em;
-  --font-size-medium: 1.125em;
   --heading-font: 'gilroy', 'Open Sans', sans-serif;
   --content-font: 'Open Sans', sans-serif;
   --font-weight-normal: 400;
   --font-weight-semi-bold: 500;
   --font-weight-bold: 600;
   --font-weight-very-bold: 700;
+  --subtitle-font-size: 16px;
+  --main-menu-font-size: 18px;
+  --paragraph-font-size-l: 15px;
+  --paragraph-font-size-s: 14px;
+  --input-font-size: 16px;
 
   /* Font xl breakpoint */
   --font-size-h2-xl: 32px;

src/components/box/box.css

@@ -22,7 +22,7 @@
 
     & :global .subTitle {
       margin-top: 20px;
-      font-size: 1em;
+      font-size: var(--subtitle-font-size);
       color: var(--color-grayscale-dark);
       height: 22px;
     }

src/components/confirmVotes/confirmVotes.css

@@ -14,12 +14,11 @@
   text-align: center;
 
   & h2 {
-    font-size: 32px;
+    font-size: var(--font-size-h2-xl);
     margin: 0;
   }
 
   & p {
-    font-size: 18px;
     line-height: 36px;
     margin: 32px 0;
   }

src/components/dashboard/currencyGraph.css

@@ -1,5 +1,9 @@
 @import '../app/variables';
 
+:root {
+  --stepSwitch-font-size: 15px;
+}
+
 .wrapper {
   height: 100%;
   min-height: 200px;
@@ -28,7 +32,7 @@
 .stepSwitch {
   padding: 10px 16px;
   cursor: pointer;
-  font-size: 15px;
+  font-size: var(--stepSwitch-font-size);
   font-weight: 500;
   color: var(--color-grayscale-medium);
 
@@ -61,7 +65,7 @@
     min-height: 300px;
 
     & h2 {
-      font-size: 28px;
+      font-size: var(--font-size-h2-l);
       margin: 45px var(--box-padding-left-M) 20px;
     }
   }

src/components/dialog/dialog.css

@@ -10,7 +10,6 @@
   & p {
     color: rgba(0, 0, 0, 0.87);
     line-height: 1.4em;
-    font-size: 1em;
   }
 
   & header {

src/components/emptyState/emptyState.css

@@ -30,7 +30,6 @@
   }
 
   & p {
-    font-size: 16px;
     line-height: 26px;
     color: var(--color-grayscale-dark);
   }

src/components/mainMenu/mainMenu.css

@@ -7,6 +7,9 @@
   --more-menu-color: var(--color-grayscale-medium);
   --offcanvas-menu-border-color: var(--color-grayscale-light);
   --more-menu-border-color: var(--color-grayscale-medium);
+  --read-more-font-size: 17px;
+  --read-more-icon-font-size: 65px;
+  --close-icon-font-size: 35px;
 }
 
 .sideBarWrapper {
@@ -90,7 +93,7 @@
 }
 
 .close {
-  font-size: 35px;
+  font-size: var(--close-icon-font-size);
   display: flex;
   width: auto;
   cursor: pointer;
@@ -118,7 +121,7 @@
 
 .label {
   padding: 4.5vh 10px; /* stylelint-disable-line */
-  font-size: 1.125em;
+  font-size: var(--main-menu-font-size);
   color: var(--color-black);
   font-weight: bold;
   font-family: var(--heading-font);
@@ -203,14 +206,14 @@
 }
 
 .readMoreText {
-  font-size: 17px;
+  font-size: var(--read-more-font-size);
   font-weight: bold;
   text-transform: capitalize;
   font-family: 'gilroy', 'Open Sans', sans-serif;
 }
 
 .readMoreIcon {
-  font-size: 65px;
+  font-size: var(--read-more-icon-font-size);
   width: 100%;
 }
 

src/components/menuBar/menuBar.css

@@ -2,6 +2,8 @@
 
 :root {
   --menu-bar-padding: 20px;
+  --menu-bar-font-size-m: 24px;
+  --menu-bar-font-size-s: 18px;
 }
 
 .menuBar {
@@ -34,7 +36,7 @@
     left: 0;
     box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.12), 0 -2px 24px 0 rgba(0, 0, 0, 0.24);
     font-weight: bold;
-    font-size: 24px;
+    font-size: var(--menu-bar-font-size-m);
     font-family: var(--heading-font);
     background-color: var(--color-white);
     z-index: 1;
@@ -58,7 +60,7 @@
 @media (--small-viewport) {
   .menuBar {
     height: var(--s-menu-bar-height);
-    font-size: 18px;
+    font-size: var(--menu-bar-font-size-s);
   }
 
   .setting {

src/components/resultBox/resultBox.css

@@ -27,7 +27,6 @@
   }
 
   & p {
-    font-size: 1.125em;
     color: var(--paragraph-color);
     line-height: var(--paragraph-line-height);
   }

src/components/sendReadable/sendReadable.css

@@ -50,7 +50,6 @@ input:read-only {
   }
 
   & p {
-    font-size: 1.125em;
     color: var(--color-grayscale-dark);
     line-height: 36px;
   }

src/components/sendWritable/sendWritable.css

@@ -4,7 +4,7 @@
   --tab-inactive-color: var(--color-grayscale-dark);
   --grid-padding-left: 30px;
   --header-line-height: 36px;
-  --header-subtitle-font-size: var(--font-size-medium);
+  --header-subtitle-font-size: var(--subtitle-font-size);
   --font-weight-bold: 500;
   --fee-color: var(--color-grayscale-dark);
 }

src/components/setting/setting.css

@@ -33,7 +33,6 @@
     }
 
     & p {
-      font-size: 16px;
       margin-bottom: 48px;
     }
   }

src/components/toolbox/inputs/input.css

@@ -5,7 +5,6 @@
   --input-focus-color: var(--color-primary-standard);
   --input-color: var(--color-grayscale-dark);
   --label-font-size: var(--font-size-small);
-  --input-font-size: 1.06066em;
   --placeholder-color: var(--color-grayscale-light);
 }
 

src/components/votesPreview/votesPreview.css

@@ -3,9 +3,9 @@
 :root {
   --danger-color: var(--color-error);
   --link-color: #0077bd;
-  --main-header-font-size-XL: 32px;
-  --main-header-font-size-L: 28px;
-  --main-header-font-size-XS: 24px;
+  --main-header-font-size-XL: var(--font-size-h2-xl);
+  --main-header-font-size-L: var(--font-size-h2-l);
+  --main-header-font-size-XS: var(--font-size-h2-s);
   --header-font-size: 28px;
   --link-font-size: 15px;
   --progress-bar-text-font-size: 13px;
@@ -17,11 +17,12 @@
   --error-font-size-XL: 16px;
   --error-font-size-L: 14px;
   --button-height: 55px;
+  --error-font-size: var(--subtitle-font-size);
 }
 
 .errorMessage {
   color: var(--color-error);
-  height: 20px;
+  height: var(--error-font-size);
   font-weight: var(--font-weight-semi-bold);
   padding-top: 10px;
 }
@@ -152,7 +153,7 @@
   background-color: var(--color-error);
   color: var(--color-white);
   z-index: 4;
-  font-size: 16px;
+  font-size: var(--error-font-size);
   padding: 15px 24px !important;
   box-sizing: border-box;
   line-height: var(--message-line-height);