diff --git a/cypress.e2e.json b/cypress.e2e.json
index a0a3405f31..47b36559a1 100644
--- a/cypress.e2e.json
+++ b/cypress.e2e.json
@@ -5,5 +5,6 @@
"requestTimeout": 8000,
"pageLoadTimeout": 80000,
"projectId": "twojfp",
- "retries": 2
+ "retries": 2,
+ "viewportWidth": 1200
}
diff --git a/frontend/public/GoshaSans-Bold.woff b/frontend/public/GoshaSans-Bold.woff
deleted file mode 100644
index 0505f3b71a..0000000000
Binary files a/frontend/public/GoshaSans-Bold.woff and /dev/null differ
diff --git a/frontend/public/GoshaSans-Bold.woff2 b/frontend/public/GoshaSans-Bold.woff2
deleted file mode 100644
index 9c7f0f23ca..0000000000
Binary files a/frontend/public/GoshaSans-Bold.woff2 and /dev/null differ
diff --git a/frontend/public/Inter.woff b/frontend/public/Inter.woff
new file mode 100644
index 0000000000..2fc4f3d2fd
Binary files /dev/null and b/frontend/public/Inter.woff differ
diff --git a/frontend/public/Inter.woff2 b/frontend/public/Inter.woff2
new file mode 100644
index 0000000000..21d5159a61
Binary files /dev/null and b/frontend/public/Inter.woff2 differ
diff --git a/frontend/src/layout.ejs b/frontend/src/layout.ejs
index 1977894989..e206d3139e 100644
--- a/frontend/src/layout.ejs
+++ b/frontend/src/layout.ejs
@@ -1,122 +1,121 @@
<%/* DJANGO login/signup form layout! */%>
-
+
-
-
- PostHog
- {% include "head.html" %}
+
+
+ PostHog
+ {% include "head.html" %}
-
- <%= htmlWebpackPlugin.tags.headTags %><%/* This adds the main.css file! */%>
-
+
+ <%= htmlWebpackPlugin.tags.headTags %><%/* This adds the main.css file! */%>
+
-
- {% block head %}
- {% endblock %}
-
-
-
- {% include "overlays.html" %}
- {% block content %}
- {% endblock %}
-
-
+ 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);
+ }
+
+ {% block head %} {% endblock %}
+
+
+ {% include "overlays.html" %} {% block content %} {% endblock %}
+
diff --git a/frontend/src/layout/navigation/Navigation.scss b/frontend/src/layout/navigation/Navigation.scss
index a919b3efe4..1ddce991da 100644
--- 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;
}
diff --git a/frontend/src/lib/components/ResizableTable/index.scss b/frontend/src/lib/components/ResizableTable/index.scss
index 811f205f6c..11e2106947 100644
--- 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 {
diff --git a/frontend/src/scenes/authentication/InviteSignup.scss b/frontend/src/scenes/authentication/InviteSignup.scss
index 4e05bb854d..3971571ac9 100644
--- 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;
}
diff --git a/frontend/src/scenes/authentication/authenticationShared.scss b/frontend/src/scenes/authentication/authenticationShared.scss
index 624097f660..244f6dcab0 100644
--- 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;
diff --git a/frontend/src/scenes/events/VolumeTable.scss b/frontend/src/scenes/events/VolumeTable.scss
index 553eaaf5bd..e97f891bbf 100644
--- 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;
}
}
diff --git a/frontend/src/scenes/experimentation/FeatureFlag.scss b/frontend/src/scenes/experimentation/FeatureFlag.scss
index 09565ae656..0fa38cb1d9 100644
--- 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;
diff --git a/frontend/src/scenes/funnels/Funnel.scss b/frontend/src/scenes/funnels/Funnel.scss
index 54b44ea16d..a584dee456 100644
--- 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;
diff --git a/frontend/src/scenes/funnels/FunnelBarGraph.scss b/frontend/src/scenes/funnels/FunnelBarGraph.scss
index 63c7c2b888..648383ed98 100644
--- 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 {
diff --git a/frontend/src/scenes/ingestion/IngestionWizard.scss b/frontend/src/scenes/ingestion/IngestionWizard.scss
index f28af6eb20..49ad05ba28 100644
--- 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 {
diff --git a/frontend/src/scenes/sessions/SessionRecordingsButton.scss b/frontend/src/scenes/sessions/SessionRecordingsButton.scss
index 73d36ca462..1f4d07addf 100644
--- 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;
diff --git a/frontend/src/scenes/sessions/Sessions.scss b/frontend/src/scenes/sessions/Sessions.scss
index 8f6924e669..917489d898 100644
--- 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;
diff --git a/frontend/src/styles/antd.less b/frontend/src/styles/antd.less
index c113444ff9..2fcbfee0af 100644
--- 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;
diff --git a/frontend/src/styles/fonts.scss b/frontend/src/styles/fonts.scss
new file mode 100644
index 0000000000..acda559f9d
--- /dev/null
+++ 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;
+}
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index 97d8d3a849..29ce8d66e6 100644
--- 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 {
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index 1473494b38..9516232ca1 100644
--- 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;
diff --git a/frontend/src/toolbar/button/ToolbarButton.scss b/frontend/src/toolbar/button/ToolbarButton.scss
index 826afd4aff..770e8ff023 100644
--- 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;
diff --git a/frontend/src/vars.scss b/frontend/src/vars.scss
index bf3471fbe3..ee96672423 100644
--- 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;