From 6cdf8016e789124e99f171ca30b258bff3ea308c Mon Sep 17 00:00:00 2001 From: Uku Taht Date: Mon, 29 Sep 2025 18:21:15 +0300 Subject: [PATCH] Tailwind v4 (#5756) * WIP * Add tailwind migration script * Change deprecated classes via migration script * Manual fixes * Restore color configuration with CSS variables * Convert the rest of the config * Fix dropdown ring opacity * Remove migration script * Fix stylelint errors * NPM run format * Fix shadow and rounded variant usage * Add custom CSS to components layer * Fix dark: and hover: conflict in settings_tab * Fix funnel form background opacity * Fix final bg-opacity * Bring back cursor-pointer for buttons by default * npm run format --- .claude/settings.local.json | 9 ++ assets/.claude/settings.local.json | 11 +++ assets/.stylelintrc.json | 2 +- assets/css/app.css | 99 ++++++++++++++++--- assets/css/storybook.css | 6 +- assets/js/dashboard/components/combobox.js | 8 +- .../components/filter-operator-selector.js | 2 +- assets/js/dashboard/components/popover.tsx | 4 +- assets/js/dashboard/components/tabs.tsx | 2 +- assets/js/dashboard/index.tsx | 2 +- assets/js/dashboard/nav-menu/filters-bar.tsx | 2 +- .../nav-menu/segments/segment-menu.tsx | 2 +- .../js/dashboard/segments/segment-modals.tsx | 2 +- assets/js/dashboard/stats/behaviours/index.js | 2 +- assets/js/dashboard/stats/graph/top-stats.js | 2 +- assets/js/dashboard/stats/modals/modal.js | 2 +- assets/js/dashboard/stats/reports/list.tsx | 8 +- .../dashboard/stats/sources/referrer-list.js | 2 +- .../dashboard/stats/sources/search-terms.tsx | 6 +- assets/js/dashboard/util/tooltip.tsx | 2 +- assets/package-lock.json | 18 ++-- assets/package.json | 5 +- assets/tailwind.config.js | 60 ----------- config/config.exs | 16 ++- .../customer_support/components/layout.ex | 2 +- .../live/funnel_settings/form.ex | 2 +- extra/lib/plausible_web/live/verification.ex | 4 +- .../components/billing/billing.ex | 2 +- .../components/billing/pageview_slider.ex | 2 +- .../first_dashboard_launch_banner.ex | 2 +- lib/plausible_web/components/generic.ex | 16 +-- lib/plausible_web/components/google.ex | 2 +- lib/plausible_web/components/layout.ex | 2 +- lib/plausible_web/components/two_factor.ex | 6 +- lib/plausible_web/live/choose_plan.ex | 2 +- .../live/components/combo_box.ex | 8 +- lib/plausible_web/live/components/form.ex | 4 +- lib/plausible_web/live/components/modal.ex | 10 +- lib/plausible_web/live/flash.ex | 8 +- lib/plausible_web/live/goal_settings/form.ex | 2 +- lib/plausible_web/live/installation.ex | 2 +- .../live/plugins/api/token_form.ex | 4 +- lib/plausible_web/live/props_settings/form.ex | 4 +- lib/plausible_web/live/register_form.ex | 10 +- lib/plausible_web/live/reset_password_form.ex | 4 +- lib/plausible_web/live/sites.ex | 26 ++--- lib/plausible_web/live/team_management.ex | 6 +- .../templates/auth/activate.html.heex | 2 +- .../password_reset_request_success.html.heex | 2 +- .../templates/auth/verify_2fa.html.heex | 2 +- ...change_enterprise_plan_contact_us.html.eex | 2 +- .../billing/change_plan_preview.html.heex | 10 +- .../upgrade_to_enterprise_plan.html.heex | 6 +- .../templates/debug/clickhouse.html.heex | 2 +- .../templates/error/server_error.html.heex | 6 +- .../server_error_report_thanks.html.heex | 2 +- .../google_analytics/confirm.html.heex | 2 +- .../templates/layout/_flash.html.heex | 16 +-- .../templates/layout/_header.html.heex | 10 +- .../templates/settings/subscription.html.heex | 6 +- .../templates/site/settings_people.html.heex | 2 +- .../site/settings_visibility.html.heex | 2 +- .../templates/stats/site_locked.html.heex | 2 +- .../templates/stats/stats.html.heex | 12 +-- mix.exs | 2 +- mix.lock | 4 +- 66 files changed, 259 insertions(+), 237 deletions(-) create mode 100644 .claude/settings.local.json create mode 100644 assets/.claude/settings.local.json delete mode 100644 assets/tailwind.config.js diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000000..008680e95e --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,9 @@ +{ + "permissions": { + "allow": [ + "Bash(iex:*)" + ], + "deny": [], + "ask": [] + } +} diff --git a/assets/.claude/settings.local.json b/assets/.claude/settings.local.json new file mode 100644 index 0000000000..eac2820576 --- /dev/null +++ b/assets/.claude/settings.local.json @@ -0,0 +1,11 @@ +{ + "permissions": { + "allow": [ + "Bash(grep:*)", + "Read(//Users/ukutaht/plausible/analytics/lib/**)", + "Bash(node:*)" + ], + "deny": [], + "ask": [] + } +} diff --git a/assets/.stylelintrc.json b/assets/.stylelintrc.json index 799642a7b8..51fbcf990f 100644 --- a/assets/.stylelintrc.json +++ b/assets/.stylelintrc.json @@ -3,7 +3,7 @@ "ignoreFiles": ["./node_modules/**/*.*"], "rules": { "import-notation": "string", - "at-rule-no-unknown": [true, { "ignoreAtRules": ["apply", "screen"] }], + "at-rule-no-unknown": [true, { "ignoreAtRules": ["apply", "screen", "plugin", "source", "theme", "utility", "custom-variant"] }], "at-rule-empty-line-before": [ "always", { "except": ["blockless-after-same-name-blockless"], "ignoreAtRules": ["apply"] } diff --git a/assets/css/app.css b/assets/css/app.css index 9295bd0fee..75fa7e8272 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -1,15 +1,72 @@ -@import 'tailwindcss/base'; -@import 'flatpickr/dist/flatpickr.min.css'; -@import './modal.css'; -@import './loader.css'; -@import './tooltip.css'; -@import './flatpickr-colors.css'; -@import './chartjs.css'; -@import 'tailwindcss/components'; -@import 'tailwindcss/utilities'; +@import 'tailwindcss' source(none); +@import 'flatpickr/dist/flatpickr.min.css' layer(components); +@import './modal.css' layer(components); +@import './loader.css' layer(components); +@import './tooltip.css' layer(components); +@import './flatpickr-colors.css' layer(components); +@import './chartjs.css' layer(components); -[x-cloak] { - display: none; +@plugin "@tailwindcss/forms"; + +@source "../css"; +@source "../js"; +@source "../../lib/plausible_web"; +@source "../../extra/lib/plausible_web"; + +/* Tailwind v3 compatibility: restore v3 default border and ring styling */ + +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentColor); + } + + button:not(:disabled), + [role='button']:not(:disabled) { + cursor: pointer; + } +} + +@theme { + /* Color aliases from tailwind.config.js */ + + /* yellow: colors.amber - Map yellow to amber colors */ + --color-yellow-50: var(--color-amber-50); + --color-yellow-100: var(--color-amber-100); + --color-yellow-200: var(--color-amber-200); + --color-yellow-300: var(--color-amber-300); + --color-yellow-400: var(--color-amber-400); + --color-yellow-500: var(--color-amber-500); + --color-yellow-600: var(--color-amber-600); + --color-yellow-700: var(--color-amber-700); + --color-yellow-800: var(--color-amber-800); + --color-yellow-900: var(--color-amber-900); + --color-yellow-950: var(--color-amber-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); + + /* 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); + + /* Set v3 default ring behavior */ + --default-ring-width: 3px; + --default-ring-color: var(--color-blue-500); } @media print { @@ -19,8 +76,22 @@ } } +@utility container { + margin-inline: auto; + padding-inline: 1rem; +} + +@custom-variant dark (&:where(.dark, .dark *)); +@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &); +@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &); +@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &); + +[x-cloak] { + display: none; +} + .button { - @apply inline-flex justify-center px-4 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-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500; + @apply inline-flex justify-center px-4 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; } .button[disabled] { @@ -58,7 +129,7 @@ blockquote { @apply px-4 py-2 my-4 border-l-4 border-gray-500; } -@screen xl { +@media (width >= 1280px) { .container { max-width: 70rem; } @@ -68,7 +139,7 @@ blockquote { height: 920px; } -@screen md { +@media (width >= 768px) { .pricing-table { height: auto; } diff --git a/assets/css/storybook.css b/assets/css/storybook.css index e78c04fc7d..2764e94fa3 100644 --- a/assets/css/storybook.css +++ b/assets/css/storybook.css @@ -1,10 +1,8 @@ -@import 'tailwindcss/base'; -@import 'tailwindcss/components'; -@import 'tailwindcss/utilities'; +@import 'tailwindcss' source(none); /* * Put your component styling within the Tailwind utilities layer. - * See the https://hexdocs.pm/phoenix_storybook/sandboxing.html guide for more info. +* See the https://hexdocs.pm/phoenix_storybook/sandboxing.html guide for more info. */ @layer utilities { diff --git a/assets/js/dashboard/components/combobox.js b/assets/js/dashboard/components/combobox.js index c414ad8c88..5c01c5a7c4 100644 --- a/assets/js/dashboard/components/combobox.js +++ b/assets/js/dashboard/components/combobox.js @@ -221,7 +221,7 @@ export default function PlausibleCombobox({ }, [isEmpty, singleOption, autoFocus]) const searchBoxClass = - 'border-none py-1 px-0 w-full inline-block rounded-md focus:outline-none focus:ring-0 text-sm' + 'border-none py-1 px-0 w-full inline-block rounded-md focus:outline-hidden focus:ring-0 text-sm' const containerClass = classNames('relative w-full', { [className]: !!className, @@ -264,7 +264,7 @@ export default function PlausibleCombobox({ return (
{value.label}
    {renderDropDownContent()}
diff --git a/assets/js/dashboard/components/filter-operator-selector.js b/assets/js/dashboard/components/filter-operator-selector.js index 91c0853443..e5f67a8214 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]} {children} diff --git a/assets/js/dashboard/index.tsx b/assets/js/dashboard/index.tsx index 62493770fc..887398e54e 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 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-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' return ( <> diff --git a/assets/js/dashboard/nav-menu/filters-bar.tsx b/assets/js/dashboard/nav-menu/filters-bar.tsx index 5bb9150825..cce111689f 100644 --- a/assets/js/dashboard/nav-menu/filters-bar.tsx +++ b/assets/js/dashboard/nav-menu/filters-bar.tsx @@ -265,7 +265,7 @@ const SeeMoreMenu = ({ aria-hidden="true" className="absolute flex justify-end left-0 right-0 bottom-0 translate-y-1/4 pr-[3px]" > -
+
+{filtersInMenuCount}
diff --git a/assets/js/dashboard/nav-menu/segments/segment-menu.tsx b/assets/js/dashboard/nav-menu/segments/segment-menu.tsx index 3165d1fdcb..b84cc5356d 100644 --- a/assets/js/dashboard/nav-menu/segments/segment-menu.tsx +++ b/assets/js/dashboard/nav-menu/segments/segment-menu.tsx @@ -59,7 +59,7 @@ export const SegmentMenu = () => { } return ( -
+
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-sm border border-gray-300 dark:border-gray-700 focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500" + 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" /> ) diff --git a/assets/js/dashboard/stats/behaviours/index.js b/assets/js/dashboard/stats/behaviours/index.js index 9e427f36d6..0d6b0c4ad3 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/graph/top-stats.js b/assets/js/dashboard/stats/graph/top-stats.js index 3df7be524c..adb9d6c3b1 100644 --- a/assets/js/dashboard/stats/graph/top-stats.js +++ b/assets/js/dashboard/stats/graph/top-stats.js @@ -126,7 +126,7 @@ export default function TopStats({ const [statDisplayName, statExtraName] = stat.name.split(/(\(.+\))/g) const statDisplayNameClass = classNames( - 'text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400 whitespace-nowrap flex w-content border-b', + 'text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400 whitespace-nowrap flex w-fit border-b', { 'text-indigo-700 dark:text-indigo-500 border-indigo-700 dark:border-indigo-500': isSelected, diff --git a/assets/js/dashboard/stats/modals/modal.js b/assets/js/dashboard/stats/modals/modal.js index 97e166bcad..668ed37364 100644 --- a/assets/js/dashboard/stats/modals/modal.js +++ b/assets/js/dashboard/stats/modals/modal.js @@ -81,7 +81,7 @@ class Modal extends React.Component {
{renderReportHeader()}
- + {state.list.slice(0, MAX_ITEMS).map(renderRow)}
@@ -237,7 +237,7 @@ export default function ListReport< return (
- {keyLabel} + {keyLabel} {metricLabels}
) @@ -262,12 +262,12 @@ export default function ListReport< const metricToPlot = metrics.find((metric) => metric.meta.plot)?.key return ( -
+
diff --git a/assets/js/dashboard/stats/sources/referrer-list.js b/assets/js/dashboard/stats/sources/referrer-list.js index 1552016a60..1a56ab5866 100644 --- a/assets/js/dashboard/stats/sources/referrer-list.js +++ b/assets/js/dashboard/stats/sources/referrer-list.js @@ -69,7 +69,7 @@ export default function Referrers({ source }) { } return ( -
+

Top Referrers

@@ -188,7 +188,7 @@ export function SearchTerms() { return (

Search Terms

-
+
{loading && (
@@ -196,7 +196,7 @@ export function SearchTerms() {
)} - + {searchTerms && searchTerms.length > 0 && renderList()} {searchTerms && searchTerms.length === 0 && renderNoDataYet()} diff --git a/assets/js/dashboard/util/tooltip.tsx b/assets/js/dashboard/util/tooltip.tsx index 64f8217607..b22e151b60 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 text-sm text-gray-100 font-bold popper-tooltip" + className="z-50 p-2 rounded-sm text-sm text-gray-100 font-bold popper-tooltip" role="tooltip" > {children} diff --git a/assets/package-lock.json b/assets/package-lock.json index 69c303df35..8d72ff10ff 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -14,8 +14,7 @@ "@jsonurl/jsonurl": "^1.1.7", "@juggle/resize-observer": "^3.3.1", "@popperjs/core": "^2.11.6", - "@tailwindcss/aspect-ratio": "^0.4.2", - "@tailwindcss/forms": "^0.5.6", + "@tailwindcss/forms": "^0.5.10", "@tailwindcss/typography": "^0.4.1", "@tanstack/react-query": "^5.51.1", "abortcontroller-polyfill": "^1.7.3", @@ -1630,21 +1629,16 @@ "@sinonjs/commons": "^3.0.0" } }, - "node_modules/@tailwindcss/aspect-ratio": { - "version": "0.4.2", - "license": "MIT", - "peerDependencies": { - "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1" - } - }, "node_modules/@tailwindcss/forms": { - "version": "0.5.6", + "version": "0.5.10", + "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.10.tgz", + "integrity": "sha512-utI1ONF6uf/pPNO68kmN1b8rEwNXv3czukalo8VtJH8ksIkZXr3Q3VYudZLkCsDd4Wku120uF02hYK25XGPorw==", "license": "MIT", "dependencies": { "mini-svg-data-uri": "^1.2.3" }, "peerDependencies": { - "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1" + "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1" } }, "node_modules/@tailwindcss/typography": { @@ -8097,6 +8091,8 @@ }, "node_modules/mini-svg-data-uri": { "version": "1.4.4", + "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz", + "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==", "license": "MIT", "bin": { "mini-svg-data-uri": "cli.js" diff --git a/assets/package.json b/assets/package.json index 00c2a64d6e..b48778a56a 100644 --- a/assets/package.json +++ b/assets/package.json @@ -4,7 +4,7 @@ "license": "AGPL-3.0-or-later", "scripts": { "test": "TZ=UTC jest", - "format": "prettier --write", + "format": "prettier --write \"**/*.{js,css,ts,tsx}\"", "check-format": "prettier --check \"**/*.{js,css,ts,tsx}\"", "eslint": "eslint js/**", "stylelint": "stylelint css/**", @@ -18,8 +18,7 @@ "@jsonurl/jsonurl": "^1.1.7", "@juggle/resize-observer": "^3.3.1", "@popperjs/core": "^2.11.6", - "@tailwindcss/aspect-ratio": "^0.4.2", - "@tailwindcss/forms": "^0.5.6", + "@tailwindcss/forms": "^0.5.10", "@tailwindcss/typography": "^0.4.1", "@tanstack/react-query": "^5.51.1", "abortcontroller-polyfill": "^1.7.3", diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js deleted file mode 100644 index 235be3667a..0000000000 --- a/assets/tailwind.config.js +++ /dev/null @@ -1,60 +0,0 @@ -const colors = require('tailwindcss/colors') -const plugin = require('tailwindcss/plugin') - -module.exports = { - content: [ - "./js/**/*.{js,ts,tsx}", - "../lib/*_web.ex", - "../lib/*_web/**/*.*ex", - "../extra/**/*.*ex", - ], - safelist: [ - // PlausibleWeb.StatsView.stats_container_class/1 uses this class - // it's not used anywhere else in the templates or scripts - "max-w-screen-xl" - ], - darkMode: 'class', - theme: { - container: { - center: true, - padding: '1rem', - }, - extend: { - colors: { - yellow: colors.amber, // We started using `yellow` in v2 but it was renamed to `amber` in v3 https://tailwindcss.com/docs/upgrade-guide#removed-color-aliases - gray: colors.slate, - 'gray-150': 'rgb(234, 238, 244)', - 'gray-950': 'rgb(13, 18, 30)', - 'gray-850': 'rgb(26, 32, 44)', - 'gray-825': 'rgb(37, 47, 63)' - }, - spacing: { - '44': '11rem' - }, - width: { - 'content': 'fit-content' - }, - opacity: { - '15': '0.15', - }, - zIndex: { - '9': 9, - }, - maxWidth: { - '2xs': '15rem', - '3xs': '12rem', - }, - transitionProperty: { - 'padding': 'padding', - } - }, - }, - plugins: [ - require('@tailwindcss/forms'), - require('@tailwindcss/aspect-ratio'), - plugin(({ addVariant }) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])), - plugin(({ addVariant }) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])), - plugin(({ addVariant }) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])), - plugin(({ addVariant }) => addVariant("ui-disabled", ["&[data-ui-state~=\"disabled\"]", ":where([data-ui-state~=\"disabled\"]) &"])), - ] -} diff --git a/config/config.exs b/config/config.exs index be5ae85b79..abe2969b88 100644 --- a/config/config.exs +++ b/config/config.exs @@ -26,22 +26,20 @@ config :esbuild, ] config :tailwind, - version: "3.4.7", + version: "4.1.12", default: [ args: ~w( - --config=tailwind.config.js - --input=css/app.css - --output=../priv/static/css/app.css + --input=assets/css/app.css + --output=priv/static/css/app.css ), - cd: Path.expand("../assets", __DIR__) + cd: Path.expand("..", __DIR__) ], storybook: [ args: ~w( - --config=tailwind.config.js - --input=css/storybook.css - --output=../priv/static/css/storybook.css + --input=assets/css/storybook.css + --output=priv/static/css/storybook.css ), - cd: Path.expand("../assets", __DIR__) + cd: Path.expand("..", __DIR__) ] config :ua_inspector, diff --git a/extra/lib/plausible_web/live/customer_support/components/layout.ex b/extra/lib/plausible_web/live/customer_support/components/layout.ex index 47ca132bc8..6af98ce2a5 100644 --- a/extra/lib/plausible_web/live/customer_support/components/layout.ex +++ b/extra/lib/plausible_web/live/customer_support/components/layout.ex @@ -52,7 +52,7 @@ defmodule PlausibleWeb.CustomerSupport.Components.Layout do id="help" x-show="openHelp" x-cloak - class="p-16 fixed top-0 left-0 w-full h-full bg-gray-800 text-gray-300 bg-opacity-95 z-50 flex items-center justify-center" + class="p-16 fixed top-0 left-0 w-full h-full bg-gray-800/95 text-gray-300 z-50 flex items-center justify-center" >
Prefix your searches with:

diff --git a/extra/lib/plausible_web/live/funnel_settings/form.ex b/extra/lib/plausible_web/live/funnel_settings/form.ex index bccb82348d..30370b894b 100644 --- a/extra/lib/plausible_web/live/funnel_settings/form.ex +++ b/extra/lib/plausible_web/live/funnel_settings/form.ex @@ -48,7 +48,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do def render(assigns) do ~H"""
diff --git a/extra/lib/plausible_web/live/verification.ex b/extra/lib/plausible_web/live/verification.ex index 898aad7c88..aa4e2ccbde 100644 --- a/extra/lib/plausible_web/live/verification.ex +++ b/extra/lib/plausible_web/live/verification.ex @@ -288,14 +288,14 @@ defmodule PlausibleWeb.Live.Verification do name="custom_url" id="custom_url" required - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:text-white" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-xs focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:text-white" placeholder={"https://#{@domain}"} value={"https://#{@domain}"} />
diff --git a/lib/plausible_web/components/billing/billing.ex b/lib/plausible_web/components/billing/billing.ex index 1073adaff6..3cb7561200 100644 --- a/lib/plausible_web/components/billing/billing.ex +++ b/lib/plausible_web/components/billing/billing.ex @@ -209,7 +209,7 @@ defmodule PlausibleWeb.Components.Billing do ~H"""

Monthly quota

diff --git a/lib/plausible_web/components/billing/pageview_slider.ex b/lib/plausible_web/components/billing/pageview_slider.ex index 819ac09810..e46524e113 100644 --- a/lib/plausible_web/components/billing/pageview_slider.ex +++ b/lib/plausible_web/components/billing/pageview_slider.ex @@ -46,7 +46,7 @@ defmodule PlausibleWeb.Components.Billing.PageviewSlider do phx-change="slide" id="slider" name="slider" - class="shadow dark:bg-gray-600 dark:border-none" + class="shadow-sm dark:bg-gray-600 dark:border-none" type="range" min="0" max={length(@available_volumes)} diff --git a/lib/plausible_web/components/first_dashboard_launch_banner.ex b/lib/plausible_web/components/first_dashboard_launch_banner.ex index 1f624745e5..108535837f 100644 --- a/lib/plausible_web/components/first_dashboard_launch_banner.ex +++ b/lib/plausible_web/components/first_dashboard_launch_banner.ex @@ -22,7 +22,7 @@ defmodule PlausibleWeb.Components.FirstDashboardLaunchBanner do