From 91363a2825b5681b94e945d217811ddd2ac84f46 Mon Sep 17 00:00:00 2001 From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com> Date: Tue, 28 Oct 2025 03:28:15 -0500 Subject: [PATCH] Improve dark mode (#5819) * Improve dark mode - Switch from `slate` to `zinc` for the gray color palette - Darken overall dark mode UI - Switch from `green` to `emerald` for the green color palette - Update a few previously missed instances of title case to sentence case - Consolidate button styles and change naming from `bright` to `secondary` - Update button disabled styles - Fix tooltip not adjusting to content width - Update graph tooltip layout and typography - Add transition effects to hover states - Reduce footer logo size * Fix oversights - Update funnel graph colors - Update graph grid colors - Improve focus styles - Improve disabled input styles * Fix more oversights in relation to dashboard filtering - Improve consistency of input, button, combobox and modal components in relation to settings area - Fix segment tooltip color * Fix search input style in funnel and segments dropdowns * Add white background to favicon images in dark mode - The GitHub and ChatGPT favicons are hard to see in dark mode, so we add a white background to them. * Fix tooltip color to fit all backgrounds in dark mode * Fix tests * Fixed more tests * Extract SourceFavicon component to eliminate favicon duplication * Fix regression on installation page after rebase * Fix formatting issues * Fix favicon test failure in CI by reading placeholder icon at compile time * Undo previous commit --- assets/css/app.css | 79 +++++++----- assets/css/chartjs.css | 10 -- assets/js/dashboard/components/combobox.js | 12 +- .../components/filter-operator-selector.js | 2 +- assets/js/dashboard/components/notice.js | 17 +-- assets/js/dashboard/components/popover.tsx | 11 +- .../js/dashboard/components/search-input.tsx | 2 +- assets/js/dashboard/components/tabs.tsx | 7 +- assets/js/dashboard/extra/funnel.js | 14 +-- assets/js/dashboard/index.tsx | 2 +- assets/js/dashboard/keybinding.tsx | 2 +- assets/js/dashboard/nav-menu/filters-bar.tsx | 4 +- .../nav-menu/nav-menu-components.tsx | 2 +- .../query-periods/move-period-arrows.tsx | 28 +++-- assets/js/dashboard/nav-menu/top-bar.tsx | 2 +- .../js/dashboard/segments/segment-modals.tsx | 30 +++-- assets/js/dashboard/stats/behaviours/index.js | 2 +- assets/js/dashboard/stats/behaviours/props.js | 2 +- .../js/dashboard/stats/graph/graph-tooltip.js | 40 +++--- assets/js/dashboard/stats/graph/line-graph.js | 9 +- assets/js/dashboard/stats/graph/top-stats.js | 4 +- .../js/dashboard/stats/graph/visitor-graph.js | 2 +- assets/js/dashboard/stats/locations/map.tsx | 16 +-- .../stats/modals/breakdown-table.tsx | 2 +- .../js/dashboard/stats/modals/filter-modal.js | 2 +- assets/js/dashboard/stats/modals/modal.js | 2 +- .../stats/modals/referrer-drilldown.js | 8 +- assets/js/dashboard/stats/modals/sources.js | 8 +- assets/js/dashboard/stats/more-link.js | 2 +- .../dashboard/stats/sources/referrer-list.js | 9 +- .../stats/sources/source-favicon.tsx | 26 ++++ .../js/dashboard/stats/sources/source-list.js | 9 +- assets/js/dashboard/util/tooltip.tsx | 2 +- .../customer_support/team/components/audit.ex | 6 +- .../team/components/billing.ex | 2 +- .../live/funnel_settings/form.ex | 10 +- .../live/funnel_settings/list.ex | 2 +- .../components/billing/billing.ex | 6 +- .../components/billing/plan_box.ex | 10 +- lib/plausible_web/components/flow_progress.ex | 8 +- lib/plausible_web/components/generic.ex | 60 ++++----- lib/plausible_web/components/layout.ex | 6 +- lib/plausible_web/components/two_factor.ex | 2 +- lib/plausible_web/live/choose_plan.ex | 23 +++- .../live/components/combo_box.ex | 6 +- lib/plausible_web/live/components/form.ex | 10 +- lib/plausible_web/live/components/modal.ex | 2 +- .../live/components/verification.ex | 2 +- lib/plausible_web/live/csv_import.ex | 6 +- lib/plausible_web/live/goal_settings/form.ex | 115 ++++++++---------- lib/plausible_web/live/goal_settings/list.ex | 10 +- .../live/imports_exports_settings.ex | 2 +- lib/plausible_web/live/installation.ex | 19 ++- .../live/installation/instructions.ex | 18 +-- .../live/plugins/api/token_form.ex | 11 +- lib/plausible_web/live/props_settings/form.ex | 6 +- lib/plausible_web/live/props_settings/list.ex | 2 +- .../live/shields/country_rules.ex | 6 +- .../live/shields/hostname_rules.ex | 6 +- lib/plausible_web/live/shields/ip_rules.ex | 8 +- lib/plausible_web/live/shields/page_rules.ex | 6 +- lib/plausible_web/live/sites.ex | 30 ++--- lib/plausible_web/live/team_management.ex | 6 +- .../templates/error/404_error.html.heex | 2 +- .../google_analytics/confirm.html.heex | 2 +- .../templates/layout/_footer.html.heex | 4 +- .../templates/layout/_header.html.heex | 12 +- .../templates/layout/app.html.heex | 2 +- .../templates/layout/settings.html.heex | 2 +- .../templates/layout/site_settings.html.heex | 2 +- .../templates/settings/invoices.html.heex | 7 +- .../templates/settings/subscription.html.heex | 4 +- .../membership/invite_member_form.html.heex | 13 +- .../templates/site/new.html.heex | 2 +- .../templates/site/new_shared_link.html.heex | 2 +- .../site/settings_email_reports.html.heex | 2 +- .../templates/site/settings_general.html.heex | 2 +- .../site/settings_integrations.html.heex | 2 +- .../templates/site/settings_people.html.heex | 6 +- .../templates/site/settings_props.html.heex | 4 +- .../site/settings_visibility.html.heex | 4 +- priv/globe_favicon.svg | 8 +- priv/link_favicon.svg | 2 +- storybook/button.story.exs | 6 +- .../controllers/site_controller_test.exs | 2 +- .../live/goal_settings/form_test.exs | 4 +- .../live/props_settings_test.exs | 4 +- 87 files changed, 472 insertions(+), 403 deletions(-) delete mode 100644 assets/css/chartjs.css create mode 100644 assets/js/dashboard/stats/sources/source-favicon.tsx diff --git a/assets/css/app.css b/assets/css/app.css index 8628eb16aa..f5f64fe524 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -4,7 +4,6 @@ @import './loader.css' layer(components); @import './tooltip.css' layer(components); @import './flatpickr-colors.css' layer(components); -@import './chartjs.css' layer(components); @plugin "@tailwindcss/forms"; @@ -28,6 +27,24 @@ [role='button']:not(:disabled) { cursor: pointer; } + + *:focus-visible { + @apply ring-2 ring-indigo-500 ring-offset-2 dark:ring-offset-gray-900 outline-none; + } +} + +@layer components { + /* Replace Tailwind form plugin's focus with focus-visible */ + [type='checkbox']:focus, + [type='radio']:focus { + outline: none; + box-shadow: none; + } + + [type='checkbox']:focus-visible, + [type='radio']:focus-visible { + @apply ring-2 ring-indigo-500 ring-offset-2 outline-none; + } } @theme { @@ -45,28 +62,40 @@ --color-yellow-800: var(--color-amber-800); --color-yellow-900: var(--color-amber-900); --color-yellow-950: var(--color-amber-950); + --color-green-50: var(--color-emerald-50); + --color-green-100: var(--color-emerald-100); + --color-green-200: var(--color-emerald-200); + --color-green-300: var(--color-emerald-300); + --color-green-400: var(--color-emerald-400); + --color-green-500: var(--color-emerald-500); + --color-green-600: var(--color-emerald-600); + --color-green-700: var(--color-emerald-700); + --color-green-800: var(--color-emerald-800); + --color-green-900: var(--color-emerald-900); + --color-green-950: var(--color-emerald-950); /* gray: colors.slate - Map gray to slate colors */ - --color-gray-50: var(--color-slate-50); - --color-gray-100: var(--color-slate-100); - --color-gray-200: var(--color-slate-200); - --color-gray-300: var(--color-slate-300); - --color-gray-400: var(--color-slate-400); - --color-gray-500: var(--color-slate-500); - --color-gray-600: var(--color-slate-600); - --color-gray-700: var(--color-slate-700); - --color-gray-800: var(--color-slate-800); - --color-gray-900: var(--color-slate-900); + --color-gray-50: var(--color-zinc-50); + --color-gray-100: var(--color-zinc-100); + --color-gray-200: var(--color-zinc-200); + --color-gray-300: var(--color-zinc-300); + --color-gray-400: var(--color-zinc-400); + --color-gray-500: var(--color-zinc-500); + --color-gray-600: var(--color-zinc-600); + --color-gray-700: var(--color-zinc-700); + --color-gray-800: var(--color-zinc-800); + --color-gray-900: var(--color-zinc-900); + --color-gray-950: var(--color-zinc-950); /* Custom gray shades from config (override some slate values) */ - --color-gray-150: rgb(234 238 244); - --color-gray-825: rgb(37 47 63); - --color-gray-850: rgb(26 32 44); - --color-gray-950: rgb(13 18 30); + --color-gray-150: rgb(236 236 238); + --color-gray-750: rgb(50 50 54); + --color-gray-825: rgb(35 35 38); + --color-gray-850: rgb(34 34 38); /* Set v3 default ring behavior */ - --default-ring-width: 3px; - --default-ring-color: var(--color-blue-500); + --default-ring-width: 2px; + --default-ring-color: var(--color-indigo-500); } @media print { @@ -91,7 +120,7 @@ } .button { - @apply inline-flex justify-center px-3.5 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md leading-5 transition hover:bg-indigo-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500; + @apply inline-flex justify-center px-3.5 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md leading-5 transition hover:bg-indigo-700; } .button[disabled] { @@ -264,15 +293,15 @@ blockquote { } .table-striped tbody tr:nth-child(odd) { - background-color: #f1f5f8; + background-color: var(--color-gray-100); } .dark .table-striped tbody tr:nth-child(odd) { - background-color: rgb(37 47 63); + background-color: var(--color-gray-800); } .dark .table-striped tbody tr:nth-child(even) { - background-color: rgb(26 32 44); + background-color: var(--color-gray-900); } .fade-enter { @@ -298,10 +327,6 @@ blockquote { background-color: inherit; } -.dark .fullwidth-shadow::before { - box-shadow: 0 4px 2px -2px rgb(200 200 200 / 10%); -} - iframe[hidden] { display: none; } @@ -316,10 +341,6 @@ iframe[hidden] { .date-option-group { } /* stylelint-enable */ -.popper-tooltip { - background-color: rgba(25 30 56); -} - .tooltip-arrow, .tooltip-arrow::before { position: absolute; diff --git a/assets/css/chartjs.css b/assets/css/chartjs.css deleted file mode 100644 index 608b938622..0000000000 --- a/assets/css/chartjs.css +++ /dev/null @@ -1,10 +0,0 @@ -.chartjs-tooltip { - background-color: rgb(25 30 56); - position: absolute; - font-size: 14px; - font-style: normal; - padding: 10px 12px; - pointer-events: none; - border-radius: 5px; - z-index: 100; -} diff --git a/assets/js/dashboard/components/combobox.js b/assets/js/dashboard/components/combobox.js index 5c01c5a7c4..17670f2180 100644 --- a/assets/js/dashboard/components/combobox.js +++ b/assets/js/dashboard/components/combobox.js @@ -12,10 +12,9 @@ import { useMountedEffect, useDebounce } from '../custom-hooks' function Option({ isHighlighted, onClick, onMouseEnter, text, id }) { const className = classNames( - 'relative cursor-pointer select-none py-2 px-3', + 'relative cursor-pointer select-none py-2 px-3 text-gray-900 dark:text-gray-300', { - 'text-gray-900 dark:text-gray-300': !isHighlighted, - 'bg-indigo-600 text-white': isHighlighted + 'bg-gray-100 dark:bg-gray-700': isHighlighted } ) @@ -340,9 +339,10 @@ export default function PlausibleCombobox({ } const defaultBoxClass = - 'pl-2 pr-8 py-1 w-full dark:bg-gray-900 dark:text-gray-300 rounded-md shadow-xs border border-gray-300 dark:border-gray-700 focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500' + 'pl-2 pr-8 py-1 w-full dark:bg-gray-750 dark:text-gray-300 rounded-md shadow-xs border border-gray-300 dark:border-gray-750' const finalBoxClass = classNames(boxClass || defaultBoxClass, { - 'border-indigo-500 ring-1 ring-indigo-500': isOpen + 'ring-3 ring-indigo-500/20 dark:ring-indigo-500/25 border !border-indigo-500': + isOpen }) return ( @@ -365,7 +365,7 @@ export default function PlausibleCombobox({ > diff --git a/assets/js/dashboard/components/filter-operator-selector.js b/assets/js/dashboard/components/filter-operator-selector.js index e5f67a8214..1e0a29610d 100644 --- a/assets/js/dashboard/components/filter-operator-selector.js +++ b/assets/js/dashboard/components/filter-operator-selector.js @@ -28,7 +28,7 @@ export default function FilterOperatorSelector(props) { {FILTER_OPERATIONS_DISPLAY_NAMES[props.selectedType]} -

- {callToAction.action} -

+ +

{callToAction.action}

Hide this report @@ -71,11 +72,11 @@ export function FeatureSetupNotice({ return (
-
+
{title}
-
+
{info}
diff --git a/assets/js/dashboard/components/popover.tsx b/assets/js/dashboard/components/popover.tsx index 381e0077dd..d457348047 100644 --- a/assets/js/dashboard/components/popover.tsx +++ b/assets/js/dashboard/components/popover.tsx @@ -32,14 +32,15 @@ const panel = { const toggleButton = { classNames: { - rounded: 'flex items-center rounded text-sm leading-tight h-9', + rounded: + 'flex items-center rounded text-sm leading-tight h-9 transition-all duration-150', shadow: - 'bg-white dark:bg-gray-800 shadow-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-900', + 'bg-white dark:bg-gray-750 shadow-sm text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700', ghost: 'text-gray-700 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-900', truncatedText: 'truncate block font-medium', linkLike: - 'text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-600' + 'text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-150' } } @@ -54,12 +55,12 @@ const items = { hoverLink: classNames( 'hover:bg-gray-100', 'hover:text-gray-900', - 'dark:hover:bg-gray-900', + 'dark:hover:bg-gray-700', 'dark:hover:text-gray-100', 'focus-within:bg-gray-100', 'focus-within:text-gray-900', - 'dark:focus-within:bg-gray-900', + 'dark:focus-within:bg-gray-700', 'dark:focus-within:text-gray-100' ), roundedStart: 'first-of-type:rounded-t-md', diff --git a/assets/js/dashboard/components/search-input.tsx b/assets/js/dashboard/components/search-input.tsx index 59c65c5c53..68dc848ada 100644 --- a/assets/js/dashboard/components/search-input.tsx +++ b/assets/js/dashboard/components/search-input.tsx @@ -66,7 +66,7 @@ export const SearchInput = ({ type="text" placeholder={isFocused ? placeholderFocused : placeholderUnfocused} className={classNames( - 'shadow-sm dark:bg-gray-900 dark:text-gray-100 focus:ring-indigo-500 focus:border-indigo-500 block border-gray-300 dark:border-gray-500 rounded-md dark:bg-gray-800 w-48', + 'dark:text-gray-100 block border-gray-300 dark:border-gray-750 rounded-md dark:bg-gray-750 w-48 dark:placeholder:text-gray-400 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500', className )} onChange={debouncedOnSearchInputChange} diff --git a/assets/js/dashboard/components/tabs.tsx b/assets/js/dashboard/components/tabs.tsx index bc7f384635..081f66ef7e 100644 --- a/assets/js/dashboard/components/tabs.tsx +++ b/assets/js/dashboard/components/tabs.tsx @@ -32,9 +32,10 @@ const TabButtonText = ({ active: boolean }) => ( diff --git a/assets/js/dashboard/extra/funnel.js b/assets/js/dashboard/extra/funnel.js index e2988791c5..af74eed7d2 100644 --- a/assets/js/dashboard/extra/funnel.js +++ b/assets/js/dashboard/extra/funnel.js @@ -97,11 +97,11 @@ export default function Funnel({ funnelName, tabs }) { const getPalette = () => { if (isDarkMode()) { return { - dataLabelBackground: 'rgba(25, 30, 56, 0.97)', - dataLabelTextColor: 'rgb(243, 244, 246)', + dataLabelBackground: 'rgb(9, 9, 11)', + dataLabelTextColor: 'rgb(244, 244, 245)', visitorsBackground: 'rgb(99, 102, 241)', - dropoffBackground: '#2F3949', - dropoffStripes: 'rgb(25, 30, 56)', + dropoffBackground: 'rgb(63, 63, 70)', + dropoffStripes: 'rgb(9, 9, 11)', stepNameLegendColor: 'rgb(228, 228, 231)', visitorsLegendClass: 'bg-indigo-500', dropoffLegendClass: 'bg-gray-600', @@ -109,12 +109,12 @@ export default function Funnel({ funnelName, tabs }) { } } else { return { - dataLabelBackground: 'rgba(25, 30, 56, 0.97)', - dataLabelTextColor: 'rgb(243, 244, 246)', + dataLabelBackground: 'rgb(39, 39, 42)', + dataLabelTextColor: 'rgb(244, 244, 245)', visitorsBackground: 'rgb(99, 102, 241)', dropoffBackground: 'rgb(224, 231, 255)', dropoffStripes: 'rgb(255, 255, 255)', - stepNameLegendColor: 'rgb(12, 24, 39)', + stepNameLegendColor: 'rgb(24, 24, 27)', visitorsLegendClass: 'bg-indigo-500', dropoffLegendClass: 'bg-indigo-100', smallBarClass: 'bg-indigo-300' diff --git a/assets/js/dashboard/index.tsx b/assets/js/dashboard/index.tsx index 887398e54e..24f467a842 100644 --- a/assets/js/dashboard/index.tsx +++ b/assets/js/dashboard/index.tsx @@ -17,7 +17,7 @@ function DashboardStats({ updateImportedDataInView?: (v: boolean) => void }) { const statsBoxClass = - 'relative min-h-[436px] w-full mt-5 p-4 flex flex-col bg-white dark:bg-gray-825 shadow-sm rounded-md md:min-h-initial md:h-27.25rem md:w-[calc(50%-10px)] md:ml-[10px] md:mr-[10px] first:ml-0 last:mr-0' + 'relative min-h-[436px] w-full mt-5 p-4 flex flex-col bg-white dark:bg-gray-900 shadow-sm rounded-md md:min-h-initial md:h-27.25rem md:w-[calc(50%-10px)] md:ml-[10px] md:mr-[10px] first:ml-0 last:mr-0' return ( <> diff --git a/assets/js/dashboard/keybinding.tsx b/assets/js/dashboard/keybinding.tsx index 636b6c952b..eea3626ee4 100644 --- a/assets/js/dashboard/keybinding.tsx +++ b/assets/js/dashboard/keybinding.tsx @@ -145,7 +145,7 @@ export function KeybindHint({ return ( diff --git a/assets/js/dashboard/nav-menu/filters-bar.tsx b/assets/js/dashboard/nav-menu/filters-bar.tsx index cce111689f..c34e7aeafd 100644 --- a/assets/js/dashboard/nav-menu/filters-bar.tsx +++ b/assets/js/dashboard/nav-menu/filters-bar.tsx @@ -290,7 +290,7 @@ const SeeMoreMenu = ({
{showSomeActions && ( -
+
)} )} diff --git a/assets/js/dashboard/nav-menu/nav-menu-components.tsx b/assets/js/dashboard/nav-menu/nav-menu-components.tsx index 2f82c63ff4..3f3b19bac7 100644 --- a/assets/js/dashboard/nav-menu/nav-menu-components.tsx +++ b/assets/js/dashboard/nav-menu/nav-menu-components.tsx @@ -1,5 +1,5 @@ import React from 'react' export const MenuSeparator = () => ( -
+
) diff --git a/assets/js/dashboard/nav-menu/query-periods/move-period-arrows.tsx b/assets/js/dashboard/nav-menu/query-periods/move-period-arrows.tsx index 78a73ee8a7..ad41fe725a 100644 --- a/assets/js/dashboard/nav-menu/query-periods/move-period-arrows.tsx +++ b/assets/js/dashboard/nav-menu/query-periods/move-period-arrows.tsx @@ -37,10 +37,21 @@ const ArrowKeybind = ({ ) } -function ArrowIcon({ direction }: { direction: 'left' | 'right' }) { +function ArrowIcon({ + direction, + disabled = false +}: { + direction: 'left' | 'right' + disabled?: boolean +}) { return ( @@ -102,7 +114,7 @@ export function MovePeriodArrows({ className }: { className?: string }) { : (search) => search } > - + search } > - + {!!dashboardRouteMatch && } {!!dashboardRouteMatch && } diff --git a/assets/js/dashboard/nav-menu/top-bar.tsx b/assets/js/dashboard/nav-menu/top-bar.tsx index 58c95dac8e..eeefb337fe 100644 --- a/assets/js/dashboard/nav-menu/top-bar.tsx +++ b/assets/js/dashboard/nav-menu/top-bar.tsx @@ -33,7 +33,7 @@ function TopBarStickyWrapper({ children }: { children: ReactNode }) { 'relative top-0 py-2 sm:py-3 z-10', !site.embedded && !inView && - 'sticky fullwidth-shadow bg-gray-50 dark:bg-gray-850' + 'sticky fullwidth-shadow bg-gray-50 dark:bg-gray-950' )} > {children} diff --git a/assets/js/dashboard/segments/segment-modals.tsx b/assets/js/dashboard/segments/segment-modals.tsx index 558b2b2916..75a03e94b8 100644 --- a/assets/js/dashboard/segments/segment-modals.tsx +++ b/assets/js/dashboard/segments/segment-modals.tsx @@ -42,13 +42,13 @@ interface SegmentModalProps { const primaryNeutralButtonClassName = 'button !px-3' const primaryNegativeButtonClassName = classNames( - 'button !px-3', + 'button !px-3.5', 'items-center !bg-red-500 dark:!bg-red-500 hover:!bg-red-600 dark:hover:!bg-red-700 whitespace-nowrap' ) const secondaryButtonClassName = classNames( - 'button !px-3', - 'border !border-gray-300 dark:!border-gray-500 !text-gray-700 dark:!text-gray-300 !bg-transparent hover:!bg-gray-100 dark:hover:!bg-gray-850' + 'button !px-3.5', + 'border !border-gray-300 dark:!border-gray-700 !bg-white dark:!bg-gray-700 !text-gray-800 dark:!text-gray-100 hover:!text-gray-900 hover:!shadow-sm dark:hover:!bg-gray-600 dark:hover:!text-white' ) const SegmentActionModal = ({ @@ -200,7 +200,9 @@ export const DeleteSegmentModal = ({ } const FormTitle = ({ children }: { children?: ReactNode }) => ( -

{children}

+

+ {children} +

) const ButtonsRow = ({ @@ -210,7 +212,7 @@ const ButtonsRow = ({ className?: string children?: ReactNode }) => ( -
+
{children}
) @@ -228,7 +230,7 @@ const SegmentNameInput = ({ <> @@ -238,7 +240,7 @@ const SegmentNameInput = ({ onChange={(e) => onChange(e.target.value)} placeholder={namePlaceholder} id="name" - className="block mt-2 p-2 w-full dark:bg-gray-900 dark:text-gray-300 rounded-md shadow-xs border border-gray-300 dark:border-gray-700 focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500" + className="block px-3.5 py-2.5 w-full text-sm dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-750 dark:bg-gray-750 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500" /> ) @@ -265,7 +267,7 @@ const SegmentTypeSelector = ({ ] return ( -
+
{options.map(({ type, name, description }) => (
@@ -275,14 +277,16 @@ const SegmentTypeSelector = ({ type="radio" value="" onChange={() => onChange(type)} - className="mt-4 w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:border-gray-600" + className="mt-px size-4.5 cursor-pointer text-indigo-600 dark:bg-transparent border-gray-400 dark:border-gray-600 checked:border-indigo-600 dark:checked:border-white" />
@@ -531,7 +535,7 @@ export const SegmentModal = ({ id }: { id: SavedSegment['id'] }) => { {data?.segment_data ? SEGMENT_TYPE_LABELS[data.type] : false}
-
+
{!!data?.segment_data && ( <> diff --git a/assets/js/dashboard/stats/behaviours/index.js b/assets/js/dashboard/stats/behaviours/index.js index 0d6b0c4ad3..e2a5880b08 100644 --- a/assets/js/dashboard/stats/behaviours/index.js +++ b/assets/js/dashboard/stats/behaviours/index.js @@ -347,7 +347,7 @@ export default function Behaviours({ importedDataInView }) { return (
-
+

diff --git a/assets/js/dashboard/stats/behaviours/props.js b/assets/js/dashboard/stats/behaviours/props.js index 11ccdf7b5b..0a9bbc559c 100644 --- a/assets/js/dashboard/stats/behaviours/props.js +++ b/assets/js/dashboard/stats/behaviours/props.js @@ -155,7 +155,7 @@ export default function Properties({ afterFetchData }) { : '' const comboboxValues = propKey ? [{ value: propKey, label: propKey }] : [] const boxClass = classNames( - 'pl-2 pr-8 py-1 bg-transparent dark:text-gray-300 rounded-md shadow-sm border border-gray-300 dark:border-gray-500', + 'pl-2 pr-8 py-1 bg-transparent dark:text-gray-300 rounded-md shadow-sm border border-gray-300 dark:bg-gray-750 dark:border-gray-750', { 'pointer-events-none': comboboxDisabled } diff --git a/assets/js/dashboard/stats/graph/graph-tooltip.js b/assets/js/dashboard/stats/graph/graph-tooltip.js index f412422bcf..25a7f135c3 100644 --- a/assets/js/dashboard/stats/graph/graph-tooltip.js +++ b/assets/js/dashboard/stats/graph/graph-tooltip.js @@ -5,6 +5,11 @@ import { METRIC_LABELS, hasMultipleYears } from './graph-util' import { MetricFormatterShort } from '../reports/metric-formatter' import { ChangeArrow } from '../reports/change-arrow' +// Function to detect if dark mode is active +const isDarkMode = () => { + return document.documentElement.classList.contains('dark') +} + const renderBucketLabel = function ( query, graphData, @@ -117,6 +122,9 @@ export default function GraphTooltip(graphData, metric, query) { tooltipRoot = createRoot(tooltipEl) } + const bgClass = isDarkMode() ? 'bg-gray-950' : 'bg-gray-800' + tooltipEl.className = `absolute text-sm font-normal py-3 px-4 pointer-events-none rounded-md z-[100] min-w-[180px] ${bgClass}` + if (tooltipEl && offset && window.innerWidth < 768) { tooltipEl.style.top = offset.y + offset.height + window.scrollY + 15 + 'px' @@ -139,9 +147,9 @@ export default function GraphTooltip(graphData, metric, query) { ) tooltipRoot.render( -

-
+
{ return ( - ) }, []) diff --git a/assets/js/dashboard/stats/modals/sources.js b/assets/js/dashboard/stats/modals/sources.js index ea0d9313eb..9b992a7a73 100644 --- a/assets/js/dashboard/stats/modals/sources.js +++ b/assets/js/dashboard/stats/modals/sources.js @@ -11,6 +11,7 @@ import { addFilter } from '../../query' import { useQueryContext } from '../../query-context' import { useSiteContext } from '../../site-context' import { SortDirection } from '../../hooks/use-order-by' +import { SourceFavicon } from '../sources/source-favicon' const VIEWS = { sources: { @@ -23,10 +24,9 @@ const VIEWS = { }, renderIcon: (listItem) => { return ( - ) } diff --git a/assets/js/dashboard/stats/more-link.js b/assets/js/dashboard/stats/more-link.js index c5495aba25..13c91782ae 100644 --- a/assets/js/dashboard/stats/more-link.js +++ b/assets/js/dashboard/stats/more-link.js @@ -25,7 +25,7 @@ export default function MoreLink({ linkProps, list, className, onClick }) {
{detailsIcon()} diff --git a/assets/js/dashboard/stats/sources/referrer-list.js b/assets/js/dashboard/stats/sources/referrer-list.js index 1a56ab5866..8f7269d886 100644 --- a/assets/js/dashboard/stats/sources/referrer-list.js +++ b/assets/js/dashboard/stats/sources/referrer-list.js @@ -8,6 +8,7 @@ import ImportedQueryUnsupportedWarning from '../../stats/imported-query-unsuppor import { useQueryContext } from '../../query-context' import { useSiteContext } from '../../site-context' import { referrersDrilldownRoute } from '../../router' +import { SourceFavicon } from './source-favicon' const NO_REFERRER = 'Direct / None' @@ -52,11 +53,9 @@ export default function Referrers({ source }) { function renderIcon(listItem) { return ( - ) } diff --git a/assets/js/dashboard/stats/sources/source-favicon.tsx b/assets/js/dashboard/stats/sources/source-favicon.tsx new file mode 100644 index 0000000000..9c0bdd0082 --- /dev/null +++ b/assets/js/dashboard/stats/sources/source-favicon.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import classNames from 'classnames' + +interface SourceFaviconProps { + name: string + className?: string +} + +export const SourceFavicon = ({ name, className }: SourceFaviconProps) => { + const sourceName = name.toLowerCase() + const needsWhiteBg = + sourceName.includes('github') || sourceName.includes('chatgpt.com') + + return ( + + ) +} diff --git a/assets/js/dashboard/stats/sources/source-list.js b/assets/js/dashboard/stats/sources/source-list.js index a7abc45c4c..ff0a706d7e 100644 --- a/assets/js/dashboard/stats/sources/source-list.js +++ b/assets/js/dashboard/stats/sources/source-list.js @@ -13,6 +13,7 @@ import { import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning' import { useQueryContext } from '../../query-context' import { useSiteContext } from '../../site-context' +import { SourceFavicon } from './source-favicon' import { sourcesRoute, channelsRoute, @@ -63,13 +64,7 @@ function AllSources({ afterFetchData }) { } function renderIcon(listItem) { - return ( - - ) + return } function chooseMetrics() { diff --git a/assets/js/dashboard/util/tooltip.tsx b/assets/js/dashboard/util/tooltip.tsx index b22e151b60..641f695682 100644 --- a/assets/js/dashboard/util/tooltip.tsx +++ b/assets/js/dashboard/util/tooltip.tsx @@ -99,7 +99,7 @@ function TooltipMessage({ ref={setPopperElement} style={popperStyle} {...popperAttributes} - className="z-50 p-2 rounded-sm text-sm text-gray-100 font-bold popper-tooltip" + className="z-50 p-2 rounded-sm text-sm text-gray-100 font-bold bg-gray-800 dark:bg-gray-700" role="tooltip" > {children} diff --git a/extra/lib/plausible_web/live/customer_support/team/components/audit.ex b/extra/lib/plausible_web/live/customer_support/team/components/audit.ex index a2cf198255..729e103c8d 100644 --- a/extra/lib/plausible_web/live/customer_support/team/components/audit.ex +++ b/extra/lib/plausible_web/live/customer_support/team/components/audit.ex @@ -74,7 +74,7 @@ defmodule PlausibleWeb.CustomerSupport.Team.Components.Audit do class="float-right pt-4 text-sm" > ← Return - + ESC @@ -131,7 +131,7 @@ defmodule PlausibleWeb.CustomerSupport.Team.Components.Audit do phx-value-before={@audit_page.metadata.before} phx-value-limit={@current_limit} phx-target={@myself} - theme="bright" + theme="secondary" > ← Prev @@ -143,7 +143,7 @@ defmodule PlausibleWeb.CustomerSupport.Team.Components.Audit do phx-value-after={@audit_page.metadata.after} phx-value-limit={@current_limit} phx-target={@myself} - theme="bright" + theme="secondary" > Next → diff --git a/extra/lib/plausible_web/live/customer_support/team/components/billing.ex b/extra/lib/plausible_web/live/customer_support/team/components/billing.ex index e4df2505dd..e4e7a4c88c 100644 --- a/extra/lib/plausible_web/live/customer_support/team/components/billing.ex +++ b/extra/lib/plausible_web/live/customer_support/team/components/billing.ex @@ -237,7 +237,7 @@ defmodule PlausibleWeb.CustomerSupport.Team.Components.Billing do value={@cost_estimate} /> - <.button theme="bright" phx-click="hide-plan-form" phx-target={@myself}> + <.button theme="secondary" phx-click="hide-plan-form" phx-target={@myself}> Cancel diff --git a/extra/lib/plausible_web/live/funnel_settings/form.ex b/extra/lib/plausible_web/live/funnel_settings/form.ex index fd5f152c19..fa18248be0 100644 --- a/extra/lib/plausible_web/live/funnel_settings/form.ex +++ b/extra/lib/plausible_web/live/funnel_settings/form.ex @@ -64,10 +64,10 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do phx-target="#funnel-form" phx-click-away="cancel-add-funnel" onkeydown="return event.key != 'Enter';" - class="bg-white dark:bg-gray-800 shadow-md rounded px-8 pt-6 pb-8 mb-4 mt-8" + class="bg-white dark:bg-gray-900 shadow-md rounded px-8 pt-6 pb-8 mb-4 mt-8" > <.title class="mb-6"> - {if @funnel, do: "Edit", else: "Add"} Funnel + {if @funnel, do: "Edit", else: "Add"} funnel <.input @@ -76,12 +76,12 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do autocomplete="off" placeholder="e.g. From Blog to Purchase" autofocus - label="Funnel Name" + label="Funnel name" />
<.label> - Funnel Steps + Funnel steps
@@ -139,7 +139,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do length(@step_ids) > map_size(@selections_made) } > - {if @funnel, do: "Update", else: "Add"} Funnel + {if @funnel, do: "Update", else: "Add"} funnel
diff --git a/extra/lib/plausible_web/live/funnel_settings/list.ex b/extra/lib/plausible_web/live/funnel_settings/list.ex index 18958dc16f..0087569116 100644 --- a/extra/lib/plausible_web/live/funnel_settings/list.ex +++ b/extra/lib/plausible_web/live/funnel_settings/list.ex @@ -14,7 +14,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.List do
<.filter_bar filter_text={@filter_text} placeholder="Search Funnels"> <.button id="add-funnel-button" phx-click="add-funnel" mt?={false}> - Add Funnel + Add funnel diff --git a/lib/plausible_web/components/billing/billing.ex b/lib/plausible_web/components/billing/billing.ex index 3cb7561200..6316260a6d 100644 --- a/lib/plausible_web/components/billing/billing.ex +++ b/lib/plausible_web/components/billing/billing.ex @@ -178,7 +178,7 @@ defmodule PlausibleWeb.Components.Billing do def usage_and_limits_table(assigns) do ~H""" - + {render_slot(@inner_block)}
@@ -209,7 +209,7 @@ defmodule PlausibleWeb.Components.Billing do ~H"""

Monthly quota

@@ -276,7 +276,7 @@ defmodule PlausibleWeb.Components.Billing do id={@id} onclick={"if (#{@confirmed}) {#{@js_action_expr}}"} class={[ - "text-sm w-full mt-6 block rounded-md py-2 px-3 text-center font-semibold leading-6 text-white", + "text-sm w-full mt-6 block rounded-md py-2 px-3 text-center font-semibold leading-6 text-white transition-colors duration-150", !@checkout_disabled && "bg-indigo-600 hover:bg-indigo-500", @checkout_disabled && "pointer-events-none bg-gray-400 dark:bg-gray-600" ]} diff --git a/lib/plausible_web/components/billing/plan_box.ex b/lib/plausible_web/components/billing/plan_box.ex index 4e88e04b9d..c9fb44c071 100644 --- a/lib/plausible_web/components/billing/plan_box.ex +++ b/lib/plausible_web/components/billing/plan_box.ex @@ -26,7 +26,7 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do
/year @@ -205,7 +205,7 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do
{@monthly_cost} @@ -214,7 +214,7 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do
- + /month
diff --git a/lib/plausible_web/components/flow_progress.ex b/lib/plausible_web/components/flow_progress.ex index b3528511b9..53288065fe 100644 --- a/lib/plausible_web/components/flow_progress.ex +++ b/lib/plausible_web/components/flow_progress.ex @@ -26,19 +26,19 @@ defmodule PlausibleWeb.Components.FlowProgress do
- +
{idx + 1}
@current_step_idx} - class="w-5 h-5 bg-gray-300 text-white dark:bg-gray-800 rounded-full flex items-center justify-center" + class="size-6 bg-gray-300 text-xs text-white font-bold dark:bg-gray-800 rounded-full flex items-center justify-center" > {idx + 1}
diff --git a/lib/plausible_web/components/generic.ex b/lib/plausible_web/components/generic.ex index c18e286f5c..0c0d263ce6 100644 --- a/lib/plausible_web/components/generic.ex +++ b/lib/plausible_web/components/generic.ex @@ -6,7 +6,7 @@ defmodule PlausibleWeb.Components.Generic do @notice_themes %{ gray: %{ - bg: "bg-gray-150 dark:bg-gray-700/50", + bg: "bg-gray-100 dark:bg-gray-800", icon: "text-gray-600 dark:text-gray-300", title_text: "text-sm text-gray-900 dark:text-gray-100", body_text: "text-sm text-gray-600 dark:text-gray-300 leading-5" @@ -18,22 +18,23 @@ defmodule PlausibleWeb.Components.Generic do body_text: "text-sm text-gray-600 dark:text-gray-100/60 leading-5" }, red: %{ - bg: "bg-red-100 dark:bg-red-900/50", - icon: "text-red-600", + bg: "bg-red-100 dark:bg-red-900/30", + icon: "text-red-600 dark:text-red-500", title_text: "text-sm text-gray-900 dark:text-gray-100", body_text: "text-sm text-gray-600 dark:text-gray-100/60 leading-5" } } @button_themes %{ - "primary" => "bg-indigo-600 text-white hover:bg-indigo-700 focus-visible:outline-indigo-600", - "bright" => - "border border-gray-200 bg-gray-100 dark:bg-gray-300 text-gray-800 hover:bg-gray-200 focus-visible:outline-gray-100", + "primary" => + "bg-indigo-600 text-white hover:bg-indigo-700 focus-visible:outline-indigo-600 disabled:bg-indigo-400/60 disabled:dark:bg-indigo-600/30 disabled:dark:text-white/35", + "secondary" => + "border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:text-gray-900 hover:shadow-sm dark:hover:bg-gray-600 dark:hover:text-white disabled:text-gray-700/40 disabled:hover:shadow-none dark:disabled:text-gray-500 dark:disabled:bg-gray-800 dark:disabled:border-gray-800", "danger" => - "border border-gray-300 dark:border-gray-500 text-red-700 bg-white dark:bg-gray-900 hover:text-red-500 dark:hover:text-red-400 focus:border-blue-300 dark:text-red-500 active:text-red-800" + "border border-gray-300 dark:border-gray-800 text-red-600 bg-white dark:bg-gray-800 hover:text-red-700 hover:shadow-sm dark:hover:text-red-400 dark:text-red-500 active:text-red-800 disabled:text-red-700/40 disabled:hover:shadow-none dark:disabled:text-red-500/35 dark:disabled:bg-gray-800" } - @button_base_class "whitespace-nowrap truncate inline-flex items-center justify-center gap-x-2 font-medium rounded-md px-3.5 py-2.5 text-sm shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:bg-gray-400 dark:disabled:text-white dark:disabled:text-gray-400 dark:disabled:bg-gray-700" + @button_base_class "whitespace-nowrap truncate inline-flex items-center justify-center gap-x-2 font-medium rounded-md px-3.5 py-2.5 text-sm transition-all duration-150 cursor-pointer disabled:cursor-not-allowed" attr(:type, :string, default: "button") attr(:theme, :string, default: "primary") @@ -94,7 +95,7 @@ defmodule PlausibleWeb.Components.Generic do theme_class = if assigns.disabled do - "bg-gray-400 text-white dark:text-white dark:text-gray-400 dark:bg-gray-700 cursor-not-allowed" + "bg-gray-400 text-white transition-colors duration-150 dark:text-white dark:text-gray-400 dark:bg-gray-700 cursor-not-allowed" else @button_themes[assigns.theme] end @@ -141,7 +142,12 @@ defmodule PlausibleWeb.Components.Generic do <:tooltip_content> Learn more - + @@ -157,9 +163,9 @@ defmodule PlausibleWeb.Components.Generic do def upgrade(assigns) do ~H""" -
+
-
+
{render_slot(@icon)}
@@ -315,7 +321,7 @@ defmodule PlausibleWeb.Components.Generic do slot(:inner_block, required: true) @base_class "block rounded-md text-sm/6 text-gray-900 ui-disabled:text-gray-500 dark:text-gray-100 dark:ui-disabled:text-gray-400 px-3 py-1.5" - @clickable_class "hover:bg-gray-100 dark:hover:bg-gray-700" + @clickable_class "hover:bg-gray-100 dark:hover:bg-gray-700/80" def dropdown_item(assigns) do assigns = if assigns[:disabled] do @@ -451,12 +457,12 @@ defmodule PlausibleWeb.Components.Generic do > @@ -484,7 +490,7 @@ defmodule PlausibleWeb.Components.Generic do def tile(assigns) do ~H""" -
+
<.title> {render_slot(@title)} @@ -542,10 +548,8 @@ defmodule PlausibleWeb.Components.Generic do "top-0", "-translate-y-full", "z-[1000]", - "sm:min-w-48", "sm:max-w-72", - "whitespace-normal", - "break-words" + "w-max" ] tooltip_position_classes = @@ -582,7 +586,7 @@ defmodule PlausibleWeb.Components.Generic do x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" > -
+
{render_slot(@tooltip_content)}
@@ -700,7 +704,7 @@ defmodule PlausibleWeb.Components.Generic do def focus_box(assigns) do ~H"""
@@ -725,7 +729,7 @@ defmodule PlausibleWeb.Components.Generic do :if={@footer != []} class="flex flex-col dark:text-gray-200 border-t border-gray-300 dark:border-gray-700" > -
+
{render_slot(@footer)}
@@ -832,8 +836,8 @@ defmodule PlausibleWeb.Components.Generic do