Type and font updates (#6020)

2026-02-04 03:01:23 +01:00 · 2021-09-22 08:47:52 +03:00
parent bc2460d040
commit 6511e4e465
23 changed files with 170 additions and 146 deletions
--- a/cypress.e2e.json
+++ b/cypress.e2e.json
@@ -5,5 +5,6 @@
    "requestTimeout": 8000,
    "pageLoadTimeout": 80000,
    "projectId": "twojfp",
-    "retries": 2
+    "retries": 2,
+    "viewportWidth": 1200
 }
--- a/frontend/public/GoshaSans-Bold.woff
+++ b/frontend/public/GoshaSans-Bold.woff
--- a/frontend/public/GoshaSans-Bold.woff2
+++ b/frontend/public/GoshaSans-Bold.woff2
--- a/frontend/public/Inter.woff
+++ b/frontend/public/Inter.woff
--- a/frontend/public/Inter.woff2
+++ b/frontend/public/Inter.woff2
--- a/frontend/src/layout.ejs
+++ b/frontend/src/layout.ejs
@@ -1,122 +1,121 @@
 <%/* DJANGO login/signup form layout! */%>
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta name="robots" content="noindex">
-    <title>PostHog</title>
-    {% include "head.html" %}
+    <head>
+        <meta name="robots" content="noindex" />
+        <title>PostHog</title>
+        {% include "head.html" %}

-    <script>
-        !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
-        posthog.init({{js_posthog_api_key | safe}}, {api_host: {{js_posthog_host | safe}}})
-    </script>
-    <%= htmlWebpackPlugin.tags.headTags %><%/* This adds the main.css file! */%>
-    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
-        crossorigin="anonymous" />
+        <script>
+            !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+            posthog.init({{js_posthog_api_key | safe}}, {api_host: {{js_posthog_host | safe}}})
+        </script>
+        <%= htmlWebpackPlugin.tags.headTags %><%/* This adds the main.css file! */%>
+        <link
+            href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+            rel="stylesheet"
+            crossorigin="anonymous"
+        />

-<style>
-    html,
-body {
-  height: 100%;
-}
+        <style>
+            html,
+            body {
+                height: 100%;
+            }

-body {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: center;
-  align-items: center;
-  padding-top: 40px;
-  padding-bottom: 40px;
-}
+            body {
+                display: -ms-flexbox;
+                display: flex;
+                -ms-flex-align: center;
+                align-items: center;
+                padding-top: 40px;
+                padding-bottom: 40px;
+            }

-.form-signin {
-  width: 100%;
-  max-width: 400px;
-  padding: 15px;
-  margin: auto;
-}
-.form-signin .checkbox {
-  font-weight: 400;
-}
-.form-signin .form-control {
-  position: relative;
-  box-sizing: border-box;
-  height: auto;
-  padding: 10px;
-  font-size: 16px;
-}
-.form-signin .form-control:focus {
-  z-index: 2;
-}
-.form-signin-inputs input {
-    border-radius: 0;
-    margin-bottom: -1px;
-}
-.form-signin-inputs input:first-child {
-  border-radius: 0.25rem 0.25rem 0 0;
-}
-.form-signin input:last-child {
-  border-radius: 0 0 0.25rem 0.25rem;
-}
+            .form-signin {
+                width: 100%;
+                max-width: 400px;
+                padding: 15px;
+                margin: auto;
+            }
+            .form-signin .checkbox {
+                font-weight: normal;
+            }
+            .form-signin .form-control {
+                position: relative;
+                box-sizing: border-box;
+                height: auto;
+                padding: 10px;
+                font-size: 16px;
+            }
+            .form-signin .form-control:focus {
+                z-index: 2;
+            }
+            .form-signin-inputs input {
+                border-radius: 0;
+                margin-bottom: -1px;
+            }
+            .form-signin-inputs input:first-child {
+                border-radius: 0.25rem 0.25rem 0 0;
+            }
+            .form-signin input:last-child {
+                border-radius: 0 0 0.25rem 0.25rem;
+            }

-.field {
-  display: flex;
-  flex-flow: column-reverse;
-  margin-bottom: 1em;
-}
-.field label, .field input {
-  transition: all 0.2s;
-  touch-action: manipulation;
-  color: #495057;
-}
+            .field {
+                display: flex;
+                flex-flow: column-reverse;
+                margin-bottom: 1em;
+            }
+            .field label,
+            .field input {
+                transition: all 0.2s;
+                touch-action: manipulation;
+                color: #495057;
+            }

-.field input {
-  font-size: 1.5em;
-  border: 0;
-  border-bottom: 1px solid #ccc;
-  font-family: inherit;
-  -webkit-appearance: none;
-  border-radius: 0;
-  padding: 0;
-  cursor: text;
-}
+            .field input {
+                font-size: 1.5em;
+                border: 0;
+                border-bottom: 1px solid #ccc;
+                font-family: inherit;
+                -webkit-appearance: none;
+                border-radius: 0;
+                padding: 0;
+                cursor: text;
+            }

-.field input:focus {
-  outline: 0;
-  border-bottom: 1px solid #666;
-}
+            .field input:focus {
+                outline: 0;
+                border-bottom: 1px solid #666;
+            }

-input:placeholder-shown + label {
-  cursor: text;
-  max-width: 66.66%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  transform-origin: left bottom;
-  transform: translate(0, 2.125rem) scale(1.5);
-}
-::-webkit-input-placeholder {
-  opacity: 0;
-  transition: inherit;
-}
-input:focus::-webkit-input-placeholder {
-  opacity: 1;
-}
-input:not(:placeholder-shown) + label,
-input:focus + label {
-  transform: translate(0, 0) scale(1);
-  cursor: pointer;
-color: var(--primary)
-}
-</style>
-  {% block head %}
-  {% endblock %}
-  </head>
-  <body>
-
-        {% include "overlays.html" %}
-        {% block content %}
-        {% endblock %}
-
-  </body>
+            input:placeholder-shown + label {
+                cursor: text;
+                max-width: 66.66%;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                transform-origin: left bottom;
+                transform: translate(0, 2.125rem) scale(1.5);
+            }
+            ::-webkit-input-placeholder {
+                opacity: 0;
+                transition: inherit;
+            }
+            input:focus::-webkit-input-placeholder {
+                opacity: 1;
+            }
+            input:not(:placeholder-shown) + label,
+            input:focus + label {
+                transform: translate(0, 0) scale(1);
+                cursor: pointer;
+                color: var(--primary);
+            }
+        </style>
+        {% block head %} {% endblock %}
+    </head>
+    <body>
+        {% include "overlays.html" %} {% block content %} {% endblock %}
+    </body>
 </html>
--- a/frontend/src/layout/navigation/Navigation.scss
+++ b/frontend/src/layout/navigation/Navigation.scss
@@ -85,7 +85,7 @@

        .menu-title {
            font-size: 14px;
-            font-weight: 500;
+            font-weight: medium;
            padding-left: 10px;
        }

--- a/frontend/src/lib/components/ResizableTable/index.scss
+++ b/frontend/src/lib/components/ResizableTable/index.scss
@@ -56,7 +56,7 @@
        max-height: 8rem;
        overflow: hidden;
        padding: 8px;
-        font-weight: 500;
+        font-weight: medium;
    }

    .resizable-handle {
--- a/frontend/src/scenes/authentication/InviteSignup.scss
+++ b/frontend/src/scenes/authentication/InviteSignup.scss
@@ -101,7 +101,6 @@

        .image-showcase-container {
            .company {
-                font-family: $gosha_sans;
                font-size: 2.7rem;
                margin-bottom: 0;
            }
--- a/frontend/src/scenes/authentication/authenticationShared.scss
+++ b/frontend/src/scenes/authentication/authenticationShared.scss
@@ -49,7 +49,6 @@

    .subtitle {
        color: $website_orange;
-        font-family: $gosha_sans;
    }
 }

@@ -69,7 +68,6 @@
 .rocket-button {
    background-color: $website_orange;
    text-transform: uppercase;
-    font-family: $gosha_sans;
    border-radius: 4px;
    color: $text_light;
    border: 0px;
--- a/frontend/src/scenes/events/VolumeTable.scss
+++ b/frontend/src/scenes/events/VolumeTable.scss
@@ -15,7 +15,7 @@
        padding-top: 0;

        span {
-            font-weight: 400;
+            font-weight: normal;
            font-size: 14px;
        }
    }
@@ -24,7 +24,7 @@
        .ant-select-selector {
            .ant-select-selection-placeholder {
                color: black;
-                font-weight: 400;
+                font-weight: normal;
            }
        }
    }
@@ -41,7 +41,7 @@
        }

        span {
-            font-weight: 400;
+            font-weight: normal;
            font-size: 14px;
        }
    }
--- a/frontend/src/scenes/experimentation/FeatureFlag.scss
+++ b/frontend/src/scenes/experimentation/FeatureFlag.scss
@@ -23,7 +23,7 @@
    }
    .label-row {
        margin-bottom: 4px;
-        font-weight: 700;
+        font-weight: bold;

        .ant-col {
            min-height: 32px;
--- a/frontend/src/scenes/funnels/Funnel.scss
+++ b/frontend/src/scenes/funnels/Funnel.scss
@@ -3,13 +3,13 @@
 .funnels-empty-state {
    text-align: center;
    h2.funnels-empty-state__title {
-        font-weight: 600;
+        font-weight: bold;
        font-size: 1.5rem;
        line-height: 1.6rem;
    }

    .funnels-empty-state__description {
-        font-weight: 500;
+        font-weight: medium;
        font-size: 1rem;
        line-height: 1.7rem;
        color: $text_muted;
--- a/frontend/src/scenes/funnels/FunnelBarGraph.scss
+++ b/frontend/src/scenes/funnels/FunnelBarGraph.scss
@@ -187,7 +187,7 @@ $funnel_canvas_background: #fafafa;
                position: absolute;
                top: 8px;
                line-height: 16px;
-                font-weight: 500;
+                font-weight: bold;
                color: #fff;

                &.inside {
--- a/frontend/src/scenes/ingestion/IngestionWizard.scss
+++ b/frontend/src/scenes/ingestion/IngestionWizard.scss
@@ -4,7 +4,7 @@

 .prompt-text {
    font-size: 16px;
-    font-weight: 600;
+    font-weight: bold;
 }

 .platform-item {
--- a/frontend/src/scenes/sessions/SessionRecordingsButton.scss
+++ b/frontend/src/scenes/sessions/SessionRecordingsButton.scss
@@ -33,7 +33,7 @@
 }

 .session-recordings-popup__label {
-    font-weight: 500;
+    font-weight: medium;

    .anticon {
        font-size: 1.25rem;
--- a/frontend/src/scenes/sessions/Sessions.scss
+++ b/frontend/src/scenes/sessions/Sessions.scss
@@ -197,7 +197,7 @@
        height: 1.1rem;
        min-width: 1.1rem;
        line-height: 1.1rem;
-        font-weight: 600;
+        font-weight: bold;
        white-space: nowrap;
        text-align: center;
        border-radius: 10px;
--- a/frontend/src/styles/antd.less
+++ b/frontend/src/styles/antd.less
@@ -18,6 +18,8 @@ with SASS, leading to duplicated config. When changing any variable here, please
@border-color-base: #d9d9d9;
@body-background:  #fff;
@layout-body-background: #fff;
+@font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

 .hide-gte-lg {
    display: none !important;
--- a/frontend/src/styles/fonts.scss
+++ b/frontend/src/styles/fonts.scss
@@ -0,0 +1,31 @@
+/* Inter; bold (700); latin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('../../public/Inter.woff2') format('woff2'), url('../../public/Inter.woff') format('woff');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('../../public/Inter.woff2') format('woff2'), url('../../public/Inter.woff') format('woff');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Inter; normal (400); latin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('../../public/Inter.woff2') format('woff2'), url('../../public/Inter.woff') format('woff');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
--- a/frontend/src/styles/global.scss
+++ b/frontend/src/styles/global.scss
@@ -1,16 +1,15 @@
 /* Only styles that are shared across multiple components (i.e. global) should go here, trying to keep this file
 nimble to simplify maintenance. We separate variables and mixins in vars.scss to be able to import those into local
-style files without adding already imported styles. */
+style files without adding already imported styles.
+
+Font weights: only `normal` (400), `medium` (500) or `bold` (700) should be used.
+
+*/

 // Global components
@import 'react-toastify/dist/ReactToastify';
@import '~/vars';
-
-@font-face {
-    font-family: 'GoshaSans-Bold';
-    src: url('../../public/GoshaSans-Bold.woff2') format('woff2'),
-        url('../../public/GoshaSans-Bold.woff') format('woff');
-}
+@import 'fonts';

 :root {
    --primary: #{$primary};
@@ -88,9 +87,7 @@ style files without adding already imported styles. */
    font-size: 28px;
    line-height: 34px;
    margin-top: 0.5em;
-    font-weight: 700;
-    color: $text_default;
-    font-family: $gosha_sans;
+    font-weight: bold;
 }

 .page-caption {
@@ -109,7 +106,7 @@ style files without adding already imported styles. */
    margin-top: 12px;
    font-size: 22px;
    line-height: 26px;
-    font-weight: 700;
+    font-weight: bold;

    &.highlighted {
        padding: $default_spacing $default_spacing $default_spacing $default_spacing / 2;
@@ -119,18 +116,18 @@ style files without adding already imported styles. */
 .l3 {
    /* Level 3 title (ideally H3) */
    font-size: 16px;
-    font-weight: 700;
+    font-weight: bold;
    line-height: 19px;
 }

 .l4 {
    font-size: 14px;
-    font-weight: 700;
+    font-weight: bold;
 }

 .l5 {
    font-size: 13px;
-    font-weight: 700;
+    font-weight: bold;
 }

 .text-right {
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -92,7 +92,7 @@ pre.code {
    font-size: 13px;
    letter-spacing: 1px;
    opacity: 0.7;
-    font-weight: 500;
+    font-weight: medium;
    text-transform: uppercase;
    border: 0;
    background: none;
--- a/frontend/src/toolbar/button/ToolbarButton.scss
+++ b/frontend/src/toolbar/button/ToolbarButton.scss
@@ -19,7 +19,7 @@
    }

    .circle-label {
-        font-weight: 700;
+        font-weight: bold;
        text-shadow: black 0 0 1px, black 0 0 2px, rgba(0, 0, 0, 0.25) 0 0.3px 0.7px, rgba(0, 0, 0, 0.18) 0 0.8px 1.6px,
            rgba(0, 0, 0, 0.15) 0 1.5px 3px, rgba(0, 0, 0, 0.125) 0 2.7px 5.4px, rgba(0, 0, 0, 0.1) 0 5px 10px,
            rgba(0, 0, 0, 0.07) 0 12px 24px;
--- a/frontend/src/vars.scss
+++ b/frontend/src/vars.scss
@@ -82,9 +82,6 @@ $dusk_sky: linear-gradient(180deg, #20305a 0%, #373088 33.85%, #d05783 100%);
 $night_sky: linear-gradient(180deg, #200c39 0%, #373088 75%, #4a3587 100%);
 $space: linear-gradient(180deg, #0a092a 0%, #271955 100%);

-// Fonts
-$gosha_sans: 'GoshaSans-Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue';
-
 // Additional style configurations
 .mixin-base-bordered-card {
    border-radius: 4px;