diff --git a/frontend/src/layout/lemonade/SideBar/SideBar.scss b/frontend/src/layout/lemonade/SideBar/SideBar.scss index b9e5e97533229..ed50655bb3885 100644 --- a/frontend/src/layout/lemonade/SideBar/SideBar.scss +++ b/frontend/src/layout/lemonade/SideBar/SideBar.scss @@ -13,7 +13,7 @@ position: absolute; flex-shrink: 0; height: 100%; - width: 15rem; + width: 15.5rem; background: var(--bg-side); border-right: 1px solid var(--border); .SideBar--hidden & { diff --git a/frontend/src/scenes/App.tsx b/frontend/src/scenes/App.tsx index acead52a28fbe..f029d6df23c97 100644 --- a/frontend/src/scenes/App.tsx +++ b/frontend/src/scenes/App.tsx @@ -154,14 +154,14 @@ function AppScene(): JSX.Element | null { return ( <> {featureFlags[FEATURE_FLAGS.LEMONADE] ? ( - + {!sceneConfig.hideTopNav && } {layoutContent} ) : ( - + {!sceneConfig.hideTopNav && } {layoutContent} diff --git a/frontend/src/scenes/funnels/FunnelCanvasLabel.scss b/frontend/src/scenes/funnels/FunnelCanvasLabel.scss index 2ff89c7e3df90..11a3c083d8721 100644 --- a/frontend/src/scenes/funnels/FunnelCanvasLabel.scss +++ b/frontend/src/scenes/funnels/FunnelCanvasLabel.scss @@ -5,9 +5,7 @@ margin-top: 0 !important; margin-bottom: 0 !important; padding: 8px 24px; - border-right: 1px solid $border; - border-left: 1px solid $border; - border-bottom: 1px solid $border; + border-bottom: 1px solid var(--border); } .funnel-canvas-label { diff --git a/frontend/src/scenes/insights/InsightTabs/FunnelTab/FunnelStepTable.scss b/frontend/src/scenes/insights/InsightTabs/FunnelTab/FunnelStepTable.scss index b57ea8ddc66eb..639bc356189cc 100644 --- a/frontend/src/scenes/insights/InsightTabs/FunnelTab/FunnelStepTable.scss +++ b/frontend/src/scenes/insights/InsightTabs/FunnelTab/FunnelStepTable.scss @@ -30,6 +30,9 @@ &.dividing-column { border-right: 1px solid $border; } + &:last-of-type.dividing-column { + border-right: none; + } &.axis-labels-column { z-index: 2; diff --git a/frontend/src/scenes/insights/Insights.scss b/frontend/src/scenes/insights/Insights.scss index 77d47b2759bb5..482cc3396d663 100644 --- a/frontend/src/scenes/insights/Insights.scss +++ b/frontend/src/scenes/insights/Insights.scss @@ -34,7 +34,7 @@ $funnel_canvas_background: #fafafa; } .ant-card-bordered { - @extend .mixin-base-bordered-card; + @extend %mixin-base-bordered-card; } .ant-tabs-tab { @@ -55,7 +55,6 @@ $funnel_canvas_background: #fafafa; overflow: visible; position: relative; margin-bottom: $default_spacing / 2; - border: 1px solid $border_light; .ant-card-body { padding: $default_spacing * 0.8 $default_spacing; @@ -75,17 +74,12 @@ $funnel_canvas_background: #fafafa; .tabs-inner { display: none; } - - .collapse-control { - top: 50%; - transform: translateY(-50%); - } } } .insights-graph-container { .ant-card-head { - border: 1px solid $border; + border-bottom: 1px solid var(--border); min-height: unset; background-color: $bg_mid; padding-right: $default_spacing / 4; diff --git a/frontend/src/scenes/sceneTypes.ts b/frontend/src/scenes/sceneTypes.ts index 565bbe61b3f9a..ccd6b218bd01d 100644 --- a/frontend/src/scenes/sceneTypes.ts +++ b/frontend/src/scenes/sceneTypes.ts @@ -79,8 +79,6 @@ export interface SceneConfig { onlyUnauthenticated?: boolean /** Route **can** be accessed when logged out (i.e. can be accessed when logged in too; should be added to posthog/urls.py too) */ allowUnauthenticated?: boolean - /** Background is $bg_mid */ - dark?: boolean /** Only keeps the main content and the top navigation bar */ plain?: boolean /** Hides the top navigation bar (regardless of whether `plain` is `true` or not) */ diff --git a/frontend/src/scenes/scenes.ts b/frontend/src/scenes/scenes.ts index aee4f294e9ce5..4b33fc8f3ad7a 100644 --- a/frontend/src/scenes/scenes.ts +++ b/frontend/src/scenes/scenes.ts @@ -34,7 +34,6 @@ export const sceneConfigurations: Partial> = { }, [Scene.Insights]: { projectBased: true, - dark: true, }, [Scene.Cohorts]: { projectBased: true, @@ -78,7 +77,6 @@ export const sceneConfigurations: Partial> = { }, [Scene.InsightRouter]: { projectBased: true, - dark: true, }, [Scene.Personalization]: { projectBased: true, diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss index dff8fb33b041c..ff782b6f601c5 100644 --- a/frontend/src/styles/global.scss +++ b/frontend/src/styles/global.scss @@ -294,7 +294,7 @@ code.code { .main-app-content { min-width: 0; - padding: 0 $default_spacing * 3 $default_spacing * 3; + padding: 0 2rem 2rem; @media (min-width: 480px) and (max-width: 639px) { padding: $default_spacing $default_spacing * 2 !important; diff --git a/frontend/src/vars.scss b/frontend/src/vars.scss index cb82072d6bf66..d297de4fe5c0a 100644 --- a/frontend/src/vars.scss +++ b/frontend/src/vars.scss @@ -33,10 +33,10 @@ $bg_overlay: #333333; $bg_shaded: rgba(0, 0, 0, 0.05); // Border colors -$border_light: #f0f0f0; +$border_light: rgba(0, 0, 0, 0.08); $border: rgba(0, 0, 0, 0.15); -$border_dark: #bdbdbd; -$border_active: #969696; +$border_dark: rgba(0, 0, 0, 0.24); +$border_active: rgba(0, 0, 0, 0.36); // Lfecycle series $lifecycle_new: #99c5ff; @@ -57,10 +57,6 @@ $antd_table_background_dark: #fafafa; $recording_player_container_bg: #797973; $recording_buffer_bg: #faaf8c; -.bg-mid { - background-color: $bg_mid !important; -} - // Blue Swatch $blue_700: #35416b; $blue_500: #597dce; @@ -93,9 +89,10 @@ $space: linear-gradient(180deg, #0a092a 0%, #271955 100%); $medium: 500; // Additional style configurations -.mixin-base-bordered-card { - border-radius: 4px; - box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.04); +%mixin-base-bordered-card { + border-radius: var(--radius); + box-shadow: none; + border: 1px solid var(--border); } %mixin-elevated { @@ -123,7 +120,7 @@ $medium: 500; bottom: 0; } -$default_spacing: 16px; +$default_spacing: 1rem; $radius: 4px; $top_nav_height: 50px;