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-alt: $black;
+$button-color: $white;
+$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;
-    text-align: center;
-    @include padding($space-large $space-medium);
+    @include padding($space-large $space-larger 0);
     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>