Unify Insight page background/shadow/border style with rest of app (#…

…6943) * Unify Insight page background/shadow/border style with rest of app * Reduce main area padding to 32px
PostHog · Nov 8, 2021 · edf6c9b · edf6c9b
1 parent 06bdd1d
commit edf6c9b
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 30 deletions.
diff --git 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
@@ -154,14 +154,14 @@ function AppScene(): JSX.Element | null {
     return (
         <>
             {featureFlags[FEATURE_FLAGS.LEMONADE] ? (
-                <Layout className={`${sceneConfig.dark ? 'bg-mid' : ''}`} style={{ minHeight: '100vh' }}>
+                <Layout style={{ minHeight: '100vh' }}>
                     {!sceneConfig.hideTopNav && <TopNavigation />}
                     <SideBar>{layoutContent}</SideBar>
                 </Layout>
             ) : (
                 <Layout>
                     <MainNavigation />
-                    <Layout className={`${sceneConfig.dark ? 'bg-mid' : ''}`} style={{ minHeight: '100vh' }}>
+                    <Layout style={{ minHeight: '100vh' }}>
                         {!sceneConfig.hideTopNav && <TopNavigation />}
                         {layoutContent}
                     </Layout>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -34,7 +34,6 @@ export const sceneConfigurations: Partial<Record<Scene, SceneConfig>> = {
     },
     [Scene.Insights]: {
         projectBased: true,
-        dark: true,
     },
     [Scene.Cohorts]: {
         projectBased: true,
@@ -78,7 +77,6 @@ export const sceneConfigurations: Partial<Record<Scene, SceneConfig>> = {
     },
     [Scene.InsightRouter]: {
         projectBased: true,
-        dark: true,
     },
     [Scene.Personalization]: {
         projectBased: true,

diff --git 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
@@ -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;