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/dashboard/assets/scss/_foundation-settings.scss

@@ -62,7 +62,7 @@ $black: #000000;
 $white: #fff;
 $body-background: $white;
 $body-font-color: $color-body;
-$body-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+$body-font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
   Roboto, "Helvetica Neue", Arial, sans-serif;
 $body-antialiased: true;
 $global-margin: $space-one;
@@ -269,8 +269,8 @@ $button-margin: 0 0 $global-margin 0;
 $button-fill: solid;
 $button-background: $primary-color;
 $button-background-hover: scale-color($button-background, $lightness: -15%);
-$button-color: $black;
+$button-color: $white;
-$button-color-alt: $black;
+$button-color-alt: $white;
 $button-radius: $global-radius;
 $button-sizes: (
   tiny: $font-size-micro,

app/javascript/dashboard/assets/scss/_variables.scss

@@ -51,7 +51,6 @@ $color-background-light: #F9FAFC;
 $color-white: #FFF;
 $color-body: #3C4858;
 $color-heading: #1F2D3D;
-$color-modal-header: #f1f1f1;
 $color-extra-light-blue: #F5F7F9;
 
 // Thumbnail

app/javascript/dashboard/assets/scss/app.scss

@@ -1,3 +1,5 @@
+@import 'shared/assets/fonts/inter';
+
 @import 'variables';
 
 @import '~spinkit/scss/spinners/7-three-bounce';

app/javascript/dashboard/assets/scss/widgets/_modal.scss

@@ -17,6 +17,7 @@
   overflow: scroll;
   position: relative;
   background-color: $color-white;
+  border-radius: $space-small;
 
   .modal--close {
     font-size: $font-size-large;
@@ -28,9 +29,7 @@
   }
 
   .page-top-bar {
-    background: $color-modal-header;
+    @include padding($space-large $space-larger 0);
-    text-align: center;
-    @include padding($space-large $space-medium);
     img {
       max-height: 6rem;
     }

app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue

@@ -6,12 +6,12 @@
       <span>{{ headerTitle }}</span>
     </h1>
     <router-link
-      :to="buttonRoute"
-      class="button icon success"
       v-if="showNewButton && showButton && currentRole"
+      :to="buttonRoute"
+      class="button icon success nice"
     >
       <i class="icon ion-android-add-circle"></i>
-      {{buttonText}}
+      {{ buttonText }}
     </router-link>
   </div>
 </template>
@@ -20,6 +20,9 @@ import BackButton from '../../../components/widgets/BackButton';
 import Auth from '../../../api/auth';
 
 export default {
+  components: {
+    BackButton,
+  },
   props: {
     headerTitle: String,
     buttonRoute: String,
@@ -43,8 +46,5 @@ export default {
       return role === 'administrator';
     },
   },
-  components: {
-    BackButton,
-  },
 };
 </script>

app/javascript/shared/assets/fonts/inter.scss

@@ -0,0 +1,62 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-Thin-BETA.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-Thin-BETA.woff?v=3.11') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-Light-BETA.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-Light-BETA.woff?v=3.11') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-Regular.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-Regular.woff?v=3.11') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-Italic.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-Italic.woff?v=3.11') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-Medium.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-Medium.woff?v=3.11') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-SemiBold.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-SemiBold.woff?v=3.11') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-Bold.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-Bold.woff?v=3.11') format('woff');
+}

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;
   }