Update font family to make design consistent in all platforms (#318)

* Add inter font, remove modal header bg

* Remove unnecessary font files

* Fix codeclimate issues, remove letter-spacing attribute

app/javascript/widget/assets/scss/_forms.scss

@@ -13,6 +13,7 @@ $input-height: $space-two * 2;
   box-sizing: border-box;
   color: $color-body;
   display: block;
+  font-family: $font-family;
   font-size: $font-size-default;
   height: $input-height;
   line-height: 1.3;

app/javascript/widget/assets/scss/_reset.scss

@@ -21,7 +21,6 @@ time, mark, audio, video {
   padding: 0;
   border: 0;
   font-size: 100%;
-  font: inherit;
   vertical-align: baseline;
 }
 

app/javascript/widget/assets/scss/_variables.scss

@@ -57,7 +57,6 @@ $color-background-light: #fafafa;
 $color-white: #fff;
 $color-body: #3c4858;
 $color-heading: #1f2d3d;
-$color-modal-header: #f1f1f1;
 // Thumbnail
 $thumbnail-radius: 4rem;
 
@@ -88,3 +87,5 @@ $border-radius: 3px;
 $line-height: 1;
 $footer-height: 11.2rem;
 $header-expanded-height: $space-medium * 10;
+
+$font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

app/javascript/widget/assets/scss/woot.scss

@@ -3,10 +3,11 @@
 @import 'buttons';
 @import 'mixins';
 @import 'forms';
+@import 'shared/assets/fonts/inter';
 
 html,
 body {
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-family: $font-family;
   font-size: 10px;
   height: 100%;
 }

app/javascript/widget/components/ChatHeader.vue

@@ -39,6 +39,7 @@ export default {
 
   .title {
     font-size: $font-size-big;
+    font-weight: $font-weight-medium;
   }
 }
 </style>

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -47,6 +47,7 @@ export default {
 
   .title {
     font-size: $font-size-mega;
+    font-weight: $font-weight-medium;
     margin-bottom: $space-two;
   }