From 1dec2598c48ee067bdfb31a57add27b8c2bef979 Mon Sep 17 00:00:00 2001 From: Ben White Date: Mon, 9 Oct 2023 16:59:31 +0200 Subject: [PATCH] Added link specific styles --- frontend/src/layout/navigation/TopBar/SitePopover.tsx | 2 +- frontend/src/lib/components/HoqQLPropertyInfo.tsx | 2 +- .../components/Subscriptions/views/ManageSubscriptions.tsx | 2 +- frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss | 6 +++--- frontend/src/lib/lemon-ui/Link/Link.scss | 2 +- .../DataTable/ColumnConfigurator/ColumnConfigurator.tsx | 2 +- .../src/scenes/authentication/signup/SignupContainer.tsx | 2 +- frontend/src/scenes/billing/BillingLimitInput.tsx | 2 +- .../src/scenes/dashboard/dashboards/DashboardsTable.tsx | 2 +- .../src/scenes/data-management/events/DefinitionHeader.tsx | 2 +- .../organization/Settings/Permissions/Roles/Roles.tsx | 2 +- frontend/src/scenes/paths/PathNodeCardButton.tsx | 2 +- .../project-homepage/ProjectHomePageCompactListItem.tsx | 2 +- .../player/controller/PlayerController.tsx | 7 ++----- .../playlist/SessionRecordingPreview.tsx | 2 +- .../playlist/SessionRecordingsPlaylistItem.tsx | 2 +- frontend/src/styles/global.scss | 7 +++++++ frontend/src/styles/utilities.stories.tsx | 2 +- frontend/src/styles/vars.scss | 6 ++++-- 19 files changed, 31 insertions(+), 25 deletions(-) diff --git a/frontend/src/layout/navigation/TopBar/SitePopover.tsx b/frontend/src/layout/navigation/TopBar/SitePopover.tsx index 46226e03c1a9d..c59fb8b443ec5 100644 --- a/frontend/src/layout/navigation/TopBar/SitePopover.tsx +++ b/frontend/src/layout/navigation/TopBar/SitePopover.tsx @@ -190,7 +190,7 @@ function InstanceSettings(): JSX.Element | null { return ( - } onClick={closeSitePopover} fullWidth> + } onClick={closeSitePopover} fullWidth> Instance settings diff --git a/frontend/src/lib/components/HoqQLPropertyInfo.tsx b/frontend/src/lib/components/HoqQLPropertyInfo.tsx index 1c461c8f12245..16f0167eecdf4 100644 --- a/frontend/src/lib/components/HoqQLPropertyInfo.tsx +++ b/frontend/src/lib/components/HoqQLPropertyInfo.tsx @@ -6,7 +6,7 @@ type HoqQLPropertyInfoProps = { export const HoqQLPropertyInfo = ({ value }: HoqQLPropertyInfoProps): JSX.Element => { return ( - + {midEllipsis(value, 60)} ) diff --git a/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx b/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx index dde4fc5d06f26..6707c6a097c55 100644 --- a/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx +++ b/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx @@ -46,7 +46,7 @@ export function SubscriptionListItem({ subscription, onClick, onDelete }: Subscr >
-
{subscription.title}
+
{subscription.title}
{capitalizeFirstLetter(subscription.summary)}
{subscription.target_type === 'email' ? ( diff --git a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss index 593b266b88605..1f224b3e30eb6 100644 --- a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss +++ b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss @@ -33,7 +33,7 @@ height: 0.125rem; width: var(--lemon-tabs-slider-width); transform: translateX(var(--lemon-tabs-slider-offset)); - background: var(--primary); + background: var(--link); .LemonTabs--transitioning & { transition: width 200ms ease, transform 200ms ease; } @@ -48,13 +48,13 @@ margin-right: 2rem; } &:hover { - color: var(--primary); + color: var(--link); } &:active { color: var(--primary-dark); } &.LemonTabs__tab--active { - color: var(--primary); + color: var(--link); text-shadow: 0 0 0.25px currentColor; // Simulate increased weight without affecting width } a { diff --git a/frontend/src/lib/lemon-ui/Link/Link.scss b/frontend/src/lib/lemon-ui/Link/Link.scss index 556b5b293a68b..a07b371b26d90 100644 --- a/frontend/src/lib/lemon-ui/Link/Link.scss +++ b/frontend/src/lib/lemon-ui/Link/Link.scss @@ -1,7 +1,7 @@ .Link { transition: color 200ms ease, opacity 200ms ease; background: none; - color: var(--primary); + color: var(--link); border: none; outline: none; padding: 0; diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx index bc33d6f298b78..0670b5c664c28 100644 --- a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx +++ b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx @@ -71,7 +71,7 @@ export function ColumnConfigurator({ query, setQuery }: ColumnConfiguratorProps) } + icon={} onClick={showModal} > Configure columns diff --git a/frontend/src/scenes/authentication/signup/SignupContainer.tsx b/frontend/src/scenes/authentication/signup/SignupContainer.tsx index acd12adef63ea..6dce9f08abe6d 100644 --- a/frontend/src/scenes/authentication/signup/SignupContainer.tsx +++ b/frontend/src/scenes/authentication/signup/SignupContainer.tsx @@ -100,7 +100,7 @@ export function SignupLeftContainer(): JSX.Element { {productBenefits.map((benefit, i) => (
- +

{benefit.benefit}

diff --git a/frontend/src/scenes/billing/BillingLimitInput.tsx b/frontend/src/scenes/billing/BillingLimitInput.tsx index 801e10f4557f4..f644f22dd8f86 100644 --- a/frontend/src/scenes/billing/BillingLimitInput.tsx +++ b/frontend/src/scenes/billing/BillingLimitInput.tsx @@ -82,7 +82,7 @@ export const BillingLimitInput = ({ product }: { product: BillingProductV2Type } {!isEditingBillingLimit ? ( <>
setIsEditingBillingLimit(true)} > ${customLimitUsd} diff --git a/frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx b/frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx index bf49e2d424bf7..31e4eb0f8a471 100644 --- a/frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx +++ b/frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx @@ -90,7 +90,7 @@ export function DashboardsTable({ {is_shared && ( - + )} {!canEditDashboard && ( diff --git a/frontend/src/scenes/data-management/events/DefinitionHeader.tsx b/frontend/src/scenes/data-management/events/DefinitionHeader.tsx index 9d9ce66751f5c..cc34e2f364f9e 100644 --- a/frontend/src/scenes/data-management/events/DefinitionHeader.tsx +++ b/frontend/src/scenes/data-management/events/DefinitionHeader.tsx @@ -108,7 +108,7 @@ function RawDefinitionHeader({ const isLink = asLink && fullDetailUrl const innerContent = ( - + ) diff --git a/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx b/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx index 35b4524c1a9a0..50ca6b37b6214 100644 --- a/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx +++ b/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx @@ -23,7 +23,7 @@ export function Roles({ isRestricted }: RestrictedComponentProps): JSX.Element { render: function RoleNameRender(_, role) { return (
{ setRoleInFocus(role) }} diff --git a/frontend/src/scenes/paths/PathNodeCardButton.tsx b/frontend/src/scenes/paths/PathNodeCardButton.tsx index d849df0694458..9923b6f2eac19 100644 --- a/frontend/src/scenes/paths/PathNodeCardButton.tsx +++ b/frontend/src/scenes/paths/PathNodeCardButton.tsx @@ -53,7 +53,7 @@ export function PathNodeCardButton({
- + {count} diff --git a/frontend/src/scenes/project-homepage/ProjectHomePageCompactListItem.tsx b/frontend/src/scenes/project-homepage/ProjectHomePageCompactListItem.tsx index 393d27fd174cd..c61ac0e2bcc8c 100644 --- a/frontend/src/scenes/project-homepage/ProjectHomePageCompactListItem.tsx +++ b/frontend/src/scenes/project-homepage/ProjectHomePageCompactListItem.tsx @@ -22,7 +22,7 @@ export function ProjectHomePageCompactListItem({ {prefix ? {prefix} : null}
-
{title}
+
{title}
{subtitle}
diff --git a/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx b/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx index a56d8a3737768..01ecedbea8709 100644 --- a/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx +++ b/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx @@ -83,10 +83,7 @@ export function PlayerController(): JSX.Element { }} > @@ -100,7 +97,7 @@ export function PlayerController(): JSX.Element { }} > diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx index 5132c0ddb5e9d..69eee1490531b 100644 --- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx +++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx @@ -203,7 +203,7 @@ export function SessionRecordingPreview({
-
+
{asDisplay(recording.person)}
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistItem.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistItem.tsx index 3a2a662c2419b..9cabfffcd83bb 100644 --- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistItem.tsx +++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistItem.tsx @@ -203,7 +203,7 @@ export function SessionRecordingPlaylistItem({
-
+
{asDisplay(recording.person)}
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss index c52cd20889b28..78cc67f3c46db 100644 --- a/frontend/src/styles/global.scss +++ b/frontend/src/styles/global.scss @@ -571,6 +571,7 @@ body { --glass-bg-3000: var(--bg-light); --glass-border-3000: var(--border); --bg-light: #fff; + --link: var(--link-3000); &.posthog-3000[theme='light'] { --text-3000: var(--text-3000-light); @@ -587,6 +588,7 @@ body { --glass-bg-3000: var(--glass-bg-3000-light); --glass-border-3000: var(--glass-border-3000-light); --bg-light: #fff; + --link-3000: var(--link-3000-light); } &.posthog-3000[theme='dark'] { @@ -605,6 +607,7 @@ body { --glass-border-3000: var(--glass-border-3000-dark); --bg-light: var(--accent-3000); --brand-key: #fff; // In dark mode the black in PostHog's logo is replaced with white for proper contrast + --link-3000: var(--link-3000-dark); } &.posthog-3000 { @@ -661,6 +664,10 @@ body { font-family: var(--font-mono); } + a { + color: var(--link); + } + // AntD uses its own border color for the bottom of tab lists, but we want to use `var(--border)` .ant-tabs-top, .ant-tabs-bottom { diff --git a/frontend/src/styles/utilities.stories.tsx b/frontend/src/styles/utilities.stories.tsx index 93d359b7b7a89..324b4e0bba76a 100644 --- a/frontend/src/styles/utilities.stories.tsx +++ b/frontend/src/styles/utilities.stories.tsx @@ -16,7 +16,7 @@ export const Overview = (): JSX.Element => {
Hello there!
I'm an example of how you can use utility classes to build a{' '} - complex component without any custom CSS... + complex component without any custom CSS...
diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss index 64086c138c94f..7f18952abf6f0 100644 --- a/frontend/src/styles/vars.scss +++ b/frontend/src/styles/vars.scss @@ -101,7 +101,7 @@ $colors: ( 'border-bold': rgba(0, 0, 0, 0.24), 'border-active': rgba(0, 0, 0, 0.36), 'transparent': transparent, - + 'link': var(--link), // Colors of the PostHog logo 'brand-blue': #1d4aff, 'brand-red': #f54e00, @@ -123,7 +123,7 @@ $colors: ( 'border-bold-3000-light': #c1c2b9, 'glass-bg-3000-light': #e4e5deb3, 'glass-border-3000-light': #e4e5de, - + 'link-3000-light': var(--primary), 'text-3000-dark': #fff, 'muted-3000-dark': rgba(#fff, 0.5), 'trace-3000-dark': rgba(#fff, 0.25), @@ -137,6 +137,7 @@ $colors: ( 'border-bold-3000-dark': #3f4046, 'glass-bg-3000-dark': #1d1f27b3, 'glass-border-3000-dark': var(--border-3000-dark), + 'link-3000-dark': rgb(47, 129, 247), // The derived colors 'text-3000': var(--text-3000), 'muted-3000': var(--muted-3000), @@ -151,6 +152,7 @@ $colors: ( 'border-bold-3000': var(--border-bold-3000), 'glass-bg-3000': var(--glass-bg-3000), 'glass-border-3000': var(--glass-border-3000), + 'link-3000': var(--link-3000), // 'bg-light': var(--accent-3000), );