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
2019-11-28 11:03:01 +05:30
parent 6c653e9ef3
commit 6e911e69f8
26 changed files with 82 additions and 16 deletions
@@ -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,
@@ -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
@@ -1,3 +1,5 @@
+@import 'shared/assets/fonts/inter';
+
@import 'variables';

@import '~spinkit/scss/spinners/7-three-bounce';
@@ -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;
    }
@@ -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>
@@ -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');
+}
@@ -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;
@@ -21,7 +21,6 @@ time, mark, audio, video {
  padding: 0;
  border: 0;
  font-size: 100%;
-  font: inherit;
  vertical-align: baseline;
 }

@@ -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;
@@ -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%;
 }
@@ -39,6 +39,7 @@ export default {

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

  .title {
    font-size: $font-size-mega;
+    font-weight: $font-weight-medium;
    margin-bottom: $space-two;
  }