diff --git a/frontend/src/scenes/notebooks/IconNotebook.tsx b/frontend/src/scenes/notebooks/IconNotebook.tsx
deleted file mode 100644
index 4c403dcf30109..0000000000000
--- a/frontend/src/scenes/notebooks/IconNotebook.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { IconNotebook as IconNotebook3000 } from '@posthog/icons'
-import { LemonIconProps } from 'lib/lemon-ui/icons'
-
-export function IconNotebook(props: LemonIconProps): JSX.Element {
- return
-}
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx
index 6a34c08235f49..e173cea6c5a12 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx
@@ -12,8 +12,7 @@ import { useValues } from 'kea'
import { notebookLogic } from '../Notebook/notebookLogic'
import { openNotebook } from '~/models/notebooksModel'
-import { IconNotebook } from '../IconNotebook'
-import { IconChat, IconDashboard, IconLogomark, IconRewindPlay } from '@posthog/icons'
+import { IconChat, IconDashboard, IconLogomark, IconNotebook, IconRewindPlay } from '@posthog/icons'
import { useEffect } from 'react'
type BackLinkMapper = {
diff --git a/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx b/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx
index 1e73aabf0ab8b..a0b15fd676175 100644
--- a/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx
+++ b/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx
@@ -1,3 +1,4 @@
+import { IconNotebook } from '@posthog/icons'
import { LemonDivider, LemonDropdown, ProfilePicture } from '@posthog/lemon-ui'
import { BuiltLogic, useActions, useValues } from 'kea'
import { dayjs } from 'lib/dayjs'
@@ -15,7 +16,6 @@ import {
import { notebooksModel, openNotebook } from '~/models/notebooksModel'
import { NotebookListItemType, NotebookTarget } from '~/types'
-import { IconNotebook } from '../IconNotebook'
import { notebookNodeLogicType } from '../Nodes/notebookNodeLogicType'
import { notebookLogicType } from '../Notebook/notebookLogicType'
diff --git a/frontend/src/scenes/session-recordings/player/PlayerMetaLinks.tsx b/frontend/src/scenes/session-recordings/player/PlayerMetaLinks.tsx
index acab1e5ce8426..bb7e4614c9e2a 100644
--- a/frontend/src/scenes/session-recordings/player/PlayerMetaLinks.tsx
+++ b/frontend/src/scenes/session-recordings/player/PlayerMetaLinks.tsx
@@ -1,8 +1,8 @@
+import { IconNotebook } from '@posthog/icons'
import { useActions, useValues } from 'kea'
import { IconComment, IconDelete, IconLink, IconPinFilled, IconPinOutline } from 'lib/lemon-ui/icons'
import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
-import { IconNotebook } from 'scenes/notebooks/IconNotebook'
import { useNotebookNode } from 'scenes/notebooks/Nodes/NotebookNodeContext'
import { NotebookSelectButton } from 'scenes/notebooks/NotebookSelectButton/NotebookSelectButton'
import {
diff --git a/frontend/src/scenes/surveys/SurveyAppearance.scss b/frontend/src/scenes/surveys/SurveyAppearance.scss
index 7da24c3955ad3..1ac9aca5439e6 100644
--- a/frontend/src/scenes/surveys/SurveyAppearance.scss
+++ b/frontend/src/scenes/surveys/SurveyAppearance.scss
@@ -121,7 +121,15 @@
.description {
margin-top: 5px;
font-size: 13px;
- opacity: 0.6;
+ color: rgba(var(--survey-text-color), 0.6);
+
+ a {
+ color: rgb(var(--survey-text-color));
+
+ &:hover {
+ color: rgba(var(--survey-text-color), 0.6);
+ }
+ }
}
.ratings-number {
diff --git a/frontend/src/scenes/surveys/SurveyAppearance.tsx b/frontend/src/scenes/surveys/SurveyAppearance.tsx
index dbf5349ad3f8f..697fa7b661d2b 100644
--- a/frontend/src/scenes/surveys/SurveyAppearance.tsx
+++ b/frontend/src/scenes/surveys/SurveyAppearance.tsx
@@ -23,6 +23,7 @@ import {
check,
dissatisfiedEmoji,
getTextColor,
+ getTextColorComponents,
neutralEmoji,
posthogLogoSVG,
satisfiedEmoji,
@@ -285,7 +286,7 @@ export function BaseAppearance({
preview?: boolean
isWidgetSurvey?: boolean
}): JSX.Element {
- const [textColor, setTextColor] = useState('black')
+ const [textColor, setTextColor] = useState<'white' | 'black'>('black')
const ref = useRef(null)
useEffect(() => {
@@ -300,11 +301,14 @@ export function BaseAppearance({
ref={ref}
className={`survey-form ${isWidgetSurvey ? 'widget-survey' : ''}`}
// eslint-disable-next-line react/forbid-dom-props
- style={{
- backgroundColor: appearance.backgroundColor,
- border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
- color: textColor,
- }}
+ style={
+ {
+ backgroundColor: appearance.backgroundColor,
+ border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
+ color: textColor,
+ '--survey-text-color': getTextColorComponents(textColor),
+ } as React.CSSProperties
+ }
>
{!preview && (
diff --git a/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx b/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx
index 36ab91e0ed681..fe973bbff140a 100644
--- a/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx
+++ b/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx
@@ -101,7 +101,7 @@ export const posthogLogoSVG = (
)
-export function getTextColor(el: never): string {
+export function getTextColor(el: Element): 'white' | 'black' {
const backgroundColor = window.getComputedStyle(el).backgroundColor
if (backgroundColor === 'rgba(0, 0, 0, 0)') {
return 'black'
@@ -116,6 +116,10 @@ export function getTextColor(el: never): string {
hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b))
return hsp > 127.5 ? 'black' : 'white'
}
+/** Return the rgb-components for usage within css rgb(). */
+export function getTextColorComponents(color: 'white' | 'black'): string {
+ return color === 'white' ? '255, 255, 255' : '0, 0, 0'
+}
export function PresentationTypeCard({
title,