From 2bb1234ad371132fb9b570a1ef3a3c4faf1fe2e6 Mon Sep 17 00:00:00 2001 From: Michael Matloka Date: Mon, 27 Nov 2023 18:03:32 +0100 Subject: [PATCH] style(3000): Align border radius to 6px in 3000 (#18866) * style: Align border radius to 6px in 3000 * Only affect .posthog-3000 * Also tune some non-4px radii * Add radius comment Co-authored-by: David Newell * Fix missing warehouse mocks and strictly prevent toasts * Don't affect utility classes --------- Co-authored-by: David Newell --- .gitignore | 4 ++- frontend/src/layout.ejs | 2 +- frontend/src/layout.html | 2 +- .../components/KeyboardShortcut.scss | 3 +- .../Cards/InsightCard/InsightCard.scss | 2 +- .../DateFilter/RollingDateRangeFilter.scss | 2 +- .../SelectableElement.scss | 2 +- .../lemon-ui/LemonButton/LemonButton3000.scss | 4 +-- .../lemon-ui/LemonCheckbox/LemonCheckbox.scss | 6 +++- .../ColumnConfigurator.scss | 2 +- .../PropertyGroupFilters.scss | 2 +- .../CohortFilters/CohortCriteriaGroups.scss | 2 +- frontend/src/scenes/cohorts/Cohorts.scss | 2 +- .../src/scenes/experiments/Experiment.scss | 8 ++--- .../FunnelBarGraph/FunnelBarGraph.scss | 6 ++-- .../src/scenes/retention/RetentionTable.scss | 2 +- .../scenes/saved-insights/SavedInsights.scss | 2 +- .../player/controller/Seekbar.scss | 2 +- .../src/scenes/surveys/SurveyAppearance.scss | 8 ++--- frontend/src/styles/global.scss | 2 +- frontend/src/styles/utilities.scss | 30 +++++++++---------- frontend/src/styles/vars.scss | 3 +- frontend/src/toolbar/bar/Toolbar.scss | 2 +- posthog/templates/email/styles.html | 6 ++-- 24 files changed, 56 insertions(+), 50 deletions(-) diff --git a/.gitignore b/.gitignore index 95a429f2d24e1..a4650d2bded1a 100644 --- a/.gitignore +++ b/.gitignore @@ -13,9 +13,11 @@ debug.log node_modules/ *.code-workspace node_modules -frontend/.cache/ .mypy_cache +frontend/.cache/ frontend/dist/ +# Paid font +frontend/public/Matter*.woff* frontend/types/ frontend/__snapshots__/__diff_output__/ frontend/__snapshots__/__failures__/ diff --git a/frontend/src/layout.ejs b/frontend/src/layout.ejs index bfa813270d62f..fe1f77f7731cb 100644 --- a/frontend/src/layout.ejs +++ b/frontend/src/layout.ejs @@ -56,7 +56,7 @@ margin-bottom: -1px; } .form-signin-inputs input:first-child { - border-radius: 0.25rem 0.25rem 0 0; + border-radius: var(--radius) 0.25rem 0 0; } .form-signin input:last-child { border-radius: 0 0 0.25rem 0.25rem; diff --git a/frontend/src/layout.html b/frontend/src/layout.html index d87425d0848a7..73a3be28423f9 100644 --- a/frontend/src/layout.html +++ b/frontend/src/layout.html @@ -54,7 +54,7 @@ margin-bottom: -1px; } .form-signin-inputs input:first-child { - border-radius: 0.25rem 0.25rem 0 0; + border-radius: var(--radius) 0.25rem 0 0; } .form-signin input:last-child { border-radius: 0 0 0.25rem 0.25rem; diff --git a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss index 0b76b4e4996cf..0501126e792dd 100644 --- a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss +++ b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss @@ -14,14 +14,13 @@ user-select: none; background: var(--accent-3000); border-width: 1px; - border-radius: 0.125rem; + border-radius: 0.25rem; .posthog-3000 & { padding: 0.125rem 0.25rem; font-size: 0.625rem; border-color: var(--secondary-3000-button-border-hover); border-bottom-width: 2px; - border-radius: 0.25rem; } .KeyboardShortcut--muted > & { diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss b/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss index 810766197333c..9d1655445c66b 100644 --- a/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss +++ b/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss @@ -164,7 +164,7 @@ color: var(--bg-light); text-align: center; background: var(--primary-3000); - border-radius: 0.25rem; + border-radius: var(--radius); } } diff --git a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss index f67c035ec65e8..29351aad1d4b7 100644 --- a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss +++ b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss @@ -43,7 +43,7 @@ line-height: 1.25rem; background-color: var(--bg-light); border: 1px solid var(--border); - border-radius: 0.25rem; + border-radius: var(--radius); .LemonInput { width: 3rem; diff --git a/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss b/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss index 5c2ea1c991ac0..9bb52ae318d07 100644 --- a/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss +++ b/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss @@ -1,6 +1,6 @@ .SelectableElement { border: 1px solid transparent; - border-radius: 4px; + border-radius: var(--radius); transition: background-color 200ms ease, color 200ms ease, border 200ms ease; &.SelectableElement--selected { diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss index 3ca0be0c93ec1..8aa73435c7ceb 100644 --- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss +++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss @@ -12,7 +12,7 @@ border-color: transparent; border-style: solid; border-width: var(--lemon-button-border-width); - border-radius: 6px; + border-radius: var(--radius); outline: none; transition: var(--transition); @@ -35,7 +35,7 @@ border-color: transparent; border-style: solid; border-width: var(--lemon-button-border-width); - border-radius: 6px; + border-radius: var(--radius); transition: var(--transition); .LemonButton__icon { diff --git a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss index fd673586aecf1..12f4f17798fe7 100644 --- a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss +++ b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss @@ -31,9 +31,13 @@ height: 1rem; background: var(--bg-light); border: 1.5px solid var(--border-bold); - border-radius: 3px; // Intentionally a bit smaller than --radius + border-radius: 0.1875rem; // Intentionally a bit smaller than --radius transition: border 200ms ease, background 200ms ease; + &.posthog-3000 { + border-radius: 0.25rem; // Intentionally a bit smaller than --radius + } + path { stroke: var(--bg-light); stroke-dasharray: var(--tick-length); diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss index 78e48683ea698..5de86d1df4b50 100644 --- a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss +++ b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss @@ -5,7 +5,7 @@ width: 700px; padding: 0.5rem; background-color: var(--side); - border-radius: 0.25rem; + border-radius: var(--radius); @media (max-width: 960px) { display: block; diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss index ab9e265e13535..618d3c39bca1f 100644 --- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss +++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss @@ -2,7 +2,7 @@ .property-group { padding: 0.5rem; background-color: var(--side); - border-radius: 4px; + border-radius: var(--radius); .posthog-3000 & { border-width: 1px; diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.scss b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.scss index 5721f2ffc1c8d..05c542bc2dadb 100644 --- a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.scss +++ b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.scss @@ -3,7 +3,7 @@ padding-top: 1rem; margin: 0.5rem 0; border: 1px solid var(--border); - border-radius: 4px; + border-radius: var(--radius); &.CohortCriteriaGroups__matching-group--error { border: 1px solid var(--danger); diff --git a/frontend/src/scenes/cohorts/Cohorts.scss b/frontend/src/scenes/cohorts/Cohorts.scss index 660d792b068e3..5ea469b195613 100644 --- a/frontend/src/scenes/cohorts/Cohorts.scss +++ b/frontend/src/scenes/cohorts/Cohorts.scss @@ -19,7 +19,7 @@ margin-top: 1rem; background-color: transparent !important; border: 2px dashed var(--primary) !important; - border-radius: 4px !important; + border-radius: var(--radius) !important; &:hover { border-color: var(--primary-3000-hover) !important; diff --git a/frontend/src/scenes/experiments/Experiment.scss b/frontend/src/scenes/experiments/Experiment.scss index 07b55c45051f8..d2dcd3723da97 100644 --- a/frontend/src/scenes/experiments/Experiment.scss +++ b/frontend/src/scenes/experiments/Experiment.scss @@ -74,7 +74,7 @@ font-weight: 500; color: #fff; letter-spacing: 0.01em; - border-radius: 4px; + border-radius: var(--radius); } } @@ -150,10 +150,10 @@ } .ant-progress-inner { - border-radius: 4px; + border-radius: var(--radius); .ant-progress-bg { - border-radius: 4px; + border-radius: var(--radius); } } } @@ -203,5 +203,5 @@ padding: 8px 8px 8px 16px; margin-left: 0.5rem; border: 1px solid var(--border); - border-radius: 4px; + border-radius: var(--radius); } diff --git a/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss b/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss index 503a46db0cb97..e3d8957d13f91 100644 --- a/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss +++ b/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss @@ -115,7 +115,7 @@ $glyph_height: 23px; // Based on .funnel-step-glyph height: 32px; margin: 4px 0; background-color: var(--funnel-background); - border-radius: 4px; + border-radius: var(--radius); .funnel-bar { position: relative; @@ -124,7 +124,7 @@ $glyph_height: 23px; // Based on .funnel-step-glyph transition: width 0.2s ease, height 0.2s ease; &.first { - border-radius: 4px 0 0 4px; + border-radius: var(--radius) 0 0 4px; } &.last { @@ -132,7 +132,7 @@ $glyph_height: 23px; // Based on .funnel-step-glyph } &.only { - border-radius: 4px; + border-radius: var(--radius); } .funnel-bar-percentage { diff --git a/frontend/src/scenes/retention/RetentionTable.scss b/frontend/src/scenes/retention/RetentionTable.scss index ad12d2fdfe983..538647428859b 100644 --- a/frontend/src/scenes/retention/RetentionTable.scss +++ b/frontend/src/scenes/retention/RetentionTable.scss @@ -41,7 +41,7 @@ margin: 2px; text-align: right; background-color: var(--retention-table-color); // NOTE: This is usually overridden in JS - border-radius: 0.25rem; + border-radius: var(--radius); transition: transform 200ms ease-out; &:hover { diff --git a/frontend/src/scenes/saved-insights/SavedInsights.scss b/frontend/src/scenes/saved-insights/SavedInsights.scss index 23d127480e8c3..c6197ae4500b1 100644 --- a/frontend/src/scenes/saved-insights/SavedInsights.scss +++ b/frontend/src/scenes/saved-insights/SavedInsights.scss @@ -23,7 +23,7 @@ cursor: pointer; background-color: var(--primary-3000); border: 1px solid var(--border); - border-radius: 4px; + border-radius: var(--radius); } .saved-insight-empty-state { diff --git a/frontend/src/scenes/session-recordings/player/controller/Seekbar.scss b/frontend/src/scenes/session-recordings/player/controller/Seekbar.scss index 4e19e823e9a79..943f17aa977ba 100644 --- a/frontend/src/scenes/session-recordings/player/controller/Seekbar.scss +++ b/frontend/src/scenes/session-recordings/player/controller/Seekbar.scss @@ -160,7 +160,7 @@ white-space: nowrap; visibility: hidden; background-color: var(--tick-color); - border-radius: 0.25rem; + border-radius: var(--radius); opacity: 0; transition: opacity 150ms ease-in-out; transform: translateX(-50%); diff --git a/frontend/src/scenes/surveys/SurveyAppearance.scss b/frontend/src/scenes/surveys/SurveyAppearance.scss index e9da4385a2655..b65cb081bc5b4 100644 --- a/frontend/src/scenes/surveys/SurveyAppearance.scss +++ b/frontend/src/scenes/surveys/SurveyAppearance.scss @@ -31,7 +31,7 @@ font-size: 14px; color: black; background: white; - border-radius: 6px; + border-radius: var(--radius); outline: none; } @@ -54,7 +54,7 @@ cursor: pointer; user-select: none; border: 1.5px solid transparent; - border-radius: 6px; + border-radius: var(--radius); outline: 0; box-shadow: 0 2px 0 rgb(0 0 0 / 4.5%); } @@ -141,7 +141,7 @@ .rating-options-buttons { display: grid; overflow: hidden; - border-radius: 6px; + border-radius: var(--radius); } .rating-options-buttons > .ratings-number { @@ -241,7 +241,7 @@ cursor: pointer; background: white; border: 1.5px solid rgb(0 0 0 / 25%); - border-radius: 4px; + border-radius: var(--radius); } .multiple-choice-options .choice-option-open label { diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss index fae95c2fddb4a..da0f146d55a62 100644 --- a/frontend/src/styles/global.scss +++ b/frontend/src/styles/global.scss @@ -586,7 +586,7 @@ body { ::-webkit-scrollbar-thumb { background: var(--trace-3000); - border-radius: 0.25rem; + border-radius: var(--radius); &:hover { background: var(--muted-3000); diff --git a/frontend/src/styles/utilities.scss b/frontend/src/styles/utilities.scss index 3aa6535b3c326..89bdae8c21fdf 100644 --- a/frontend/src/styles/utilities.scss +++ b/frontend/src/styles/utilities.scss @@ -1008,27 +1008,27 @@ $decorations: underline, overline, line-through, no-underline; } .rounded { - border-radius: var(--radius); /* 4px */ + border-radius: 0.25rem; } .rounded-l { - border-top-left-radius: var(--radius); /* 4px */ - border-bottom-left-radius: var(--radius); /* 4px */ + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; } .rounded-r { - border-top-right-radius: var(--radius); /* 4px */ - border-bottom-right-radius: var(--radius); /* 4px */ + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; } .rounded-t { - border-top-left-radius: var(--radius); /* 4px */ - border-top-right-radius: var(--radius); /* 4px */ + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; } .rounded-b { - border-bottom-right-radius: var(--radius); /* 4px */ - border-bottom-left-radius: var(--radius); /* 4px */ + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; } .rounded-none { @@ -1050,27 +1050,27 @@ $decorations: underline, overline, line-through, no-underline; } .rounded-md { - border-radius: calc(var(--radius) * 1.5); /* 6px */ + border-radius: 0.375rem; } .rounded-lg { - border-radius: calc(var(--radius) * 2); /* 8px */ + border-radius: 0.5rem; } .rounded-xl { - border-radius: calc(var(--radius) * 3); /* 12px */ + border-radius: 0.75rem; } .rounded-2xl { - border-radius: calc(var(--radius) * 4); /* 16px */ + border-radius: 1rem; } .rounded-3xl { - border-radius: calc(var(--radius) * 6); /* 24px */ + border-radius: 1.5rem; } .rounded-4xl { - border-radius: calc(var(--radius) * 8); /* 32px */ + border-radius: 2rem; } .rounded-full { diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss index 74badea05a1ca..f79501c04b504 100644 --- a/frontend/src/styles/vars.scss +++ b/frontend/src/styles/vars.scss @@ -231,7 +231,7 @@ $_lifecycle_dormant: $_danger; --bg-bridge: #ebece8; // Non-color vars - --radius: 4px; + --radius: 0.25rem; --shadow-elevation: 0px 16px 16px -16px rgb(0 0 0 / 35%); --opacity-disabled: 0.6; --font-medium: 500; @@ -469,4 +469,5 @@ $_lifecycle_dormant: $_danger; --primary-alt-highlight: var(--primary-alt-highlight-3000); --data-color-1: #1d4aff; --data-color-10: #35416b; + --radius: 0.375rem; } diff --git a/frontend/src/toolbar/bar/Toolbar.scss b/frontend/src/toolbar/bar/Toolbar.scss index 51f5b206bb258..1ade520dcf9c4 100644 --- a/frontend/src/toolbar/bar/Toolbar.scss +++ b/frontend/src/toolbar/bar/Toolbar.scss @@ -21,7 +21,7 @@ ::-webkit-scrollbar-thumb { background: var(--trace-3000); - border-radius: 0.25rem; + border-radius: var(--radius); &:hover { background: var(--muted-3000); diff --git a/posthog/templates/email/styles.html b/posthog/templates/email/styles.html index a4504cb8862ac..7a32a471d98cc 100644 --- a/posthog/templates/email/styles.html +++ b/posthog/templates/email/styles.html @@ -118,7 +118,7 @@ font-size: 18px; font-weight: 600; border: none; - border-radius: 4px; + border-radius: var(--radius); } .button { @@ -127,11 +127,11 @@ padding-bottom: 16px; padding-left: 48px; padding-right: 48px; - border-radius: 4px; + border-radius: var(--radius); background-color: #1d4aff; font-weight: 500; color: #fff; - border-radius: 4px; + border-radius: var(--radius); text-decoration: none; }