From 492fac5152b7e53ad56d127435d2fe3fa679375e Mon Sep 17 00:00:00 2001
From: Raquel Smith <raquelmsmith@users.noreply.github.com>
Date: Fri, 26 Jan 2024 08:26:29 -0800
Subject: [PATCH] fix dark mode colors

---
 .../onboarding/OnboardingProductIntroduction.tsx     | 12 +++++-------
 frontend/src/scenes/onboarding/onboarding.scss       | 11 -----------
 2 files changed, 5 insertions(+), 18 deletions(-)
 delete mode 100644 frontend/src/scenes/onboarding/onboarding.scss

diff --git a/frontend/src/scenes/onboarding/OnboardingProductIntroduction.tsx b/frontend/src/scenes/onboarding/OnboardingProductIntroduction.tsx
index f4ffcaf03ec7c..59f541bf89574 100644
--- a/frontend/src/scenes/onboarding/OnboardingProductIntroduction.tsx
+++ b/frontend/src/scenes/onboarding/OnboardingProductIntroduction.tsx
@@ -1,5 +1,3 @@
-import './onboarding.scss'
-
 import { IconCheck, IconMap, IconMessage, IconStack } from '@posthog/icons'
 import { LemonButton, Link, Spinner } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
@@ -37,7 +35,7 @@ export const Feature = ({ name, description, images }: BillingV2FeatureType): JS
 
 export const Subfeature = ({ name, description, icon_key }: BillingV2FeatureType): JSX.Element => {
     return (
-        <li className="rounded-lg p-4 sm:p-6 sm:pb-8">
+        <li className="rounded-lg p-4 sm:p-6 sm:pb-8 bg-primary-alt-highlight">
             <span className="inline-block text-2xl mb-2 opacity-75">{getProductIcon(icon_key)}</span>
             <h3 className="text-[17px] mb-1 leading-tight">{name}</h3>
             <p className="m-0 text-[15px]">{description}</p>
@@ -168,7 +166,7 @@ export function OnboardingProductIntroduction(): JSX.Element | null {
                     </div>
                 )}
 
-                <div className="features p-8 py-8 border-t border-border flex justify-center">
+                <div className="p-8 py-8 border-t border-border flex justify-center">
                     <div className="max-w-screen-xl">
                         <h3 className="mb-6 text-2xl font-bold">Features</h3>
                         <ul className="list-none p-0 grid grid-cols-2 md:grid-cols-3 gap-8 mb-8 ">
@@ -183,7 +181,7 @@ export function OnboardingProductIntroduction(): JSX.Element | null {
                                 })}
                         </ul>
 
-                        <ul className="subfeatures list-none p-0 grid grid-cols-2 md:grid-cols-3 gap-4">
+                        <ul className="list-none p-0 grid grid-cols-2 md:grid-cols-3 gap-4">
                             {product.features
                                 .filter((feature) => feature.type == 'secondary')
                                 .map((subfeature, i) => {
@@ -225,13 +223,13 @@ export function OnboardingProductIntroduction(): JSX.Element | null {
                         </div>
                     </div>
                 </div>
-                <div className="features p-8 py-12 border-t border-border">
+                <div className="p-8 py-12 border-t border-border">
                     <div className="max-w-screen-xl m-auto">
                         <PricingSection product={product} />
                     </div>
                 </div>
                 <div className="mb-12 flex justify-center px-8">
-                    <div className="w-full max-w-screen-xl rounded bg-white border border-border p-6 flex justify-between items-center gap-x-12">
+                    <div className="w-full max-w-screen-xl rounded bg-primary-alt-highlight border border-border p-6 flex justify-between items-center gap-x-12">
                         <div>
                             <h3 className="mb-4 text-2xl font-bold">Get started with {product.name}</h3>
                             <p className="text-sm max-w-2xl">{product.description}</p>
diff --git a/frontend/src/scenes/onboarding/onboarding.scss b/frontend/src/scenes/onboarding/onboarding.scss
deleted file mode 100644
index 8b124d12c13f2..0000000000000
--- a/frontend/src/scenes/onboarding/onboarding.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.unsubscribed-product-landing-page {
-    .features {
-        border-top: solid 1px var(--border);
-    }
-
-    .subfeatures {
-        li {
-            background: var(--primary-alt-highlight);
-        }
-    }
-}