mirror of
https://github.com/plausible/analytics.git
synced 2024-09-11 09:56:02 +03:00
Update Tailwind to latest v3.3.3 (#3320)
* Update Tailwind to latest v3.3.3 * Upgrade autoprefixer and postcss * Move tailwindcss plugins to devDependencies * Remove unused tailwind rules * Remove obsolete 'transform' rules Ref: https://tailwindcss.com/docs/upgrade-guide#automatic-transforms-and-filters * Use the current yellow, update gray to slate * Move webpack to devdependencies * Go more minimal with package.json changes * Update autoprefixer version * Update postcss version * Adjust dark style colors * Use proper node version is asdf config
This commit is contained in:
parent
ae0019afe5
commit
275335071b
@ -1,4 +1,4 @@
|
|||||||
erlang 25.2.3
|
erlang 25.2.3
|
||||||
elixir 1.14.3-otp-25
|
elixir 1.14.3-otp-25
|
||||||
nodejs 16.3.0
|
nodejs 18.17.1
|
||||||
python 3.9.12
|
python 3.9.12
|
||||||
|
@ -166,11 +166,11 @@ const ComparisonInput = function({ site, query, history }) {
|
|||||||
<Transition
|
<Transition
|
||||||
as={Fragment}
|
as={Fragment}
|
||||||
enter="transition ease-out duration-100"
|
enter="transition ease-out duration-100"
|
||||||
enterFrom="transform opacity-0 scale-95"
|
enterFrom="opacity-0 scale-95"
|
||||||
enterTo="transform opacity-100 scale-100"
|
enterTo="opacity-100 scale-100"
|
||||||
leave="transition ease-in duration-75"
|
leave="transition ease-in duration-75"
|
||||||
leaveFrom="transform opacity-100 scale-100"
|
leaveFrom="opacity-100 scale-100"
|
||||||
leaveTo="transform opacity-0 scale-95">
|
leaveTo="opacity-0 scale-95">
|
||||||
<Menu.Items className="py-1 text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10" static>
|
<Menu.Items className="py-1 text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10" static>
|
||||||
{ Object.keys(COMPARISON_MODES).map((key) => ComparisonModeOption({ label: COMPARISON_MODES[key], value: key, isCurrentlySelected: key == query.comparison, updateMode, setUiMode })) }
|
{ Object.keys(COMPARISON_MODES).map((key) => ComparisonModeOption({ label: COMPARISON_MODES[key], value: key, isCurrentlySelected: key == query.comparison, updateMode, setUiMode })) }
|
||||||
{ query.comparison !== "custom" && <span>
|
{ query.comparison !== "custom" && <span>
|
||||||
|
@ -50,11 +50,11 @@ export default function FilterTypeSelector(props) {
|
|||||||
show={open}
|
show={open}
|
||||||
as={Fragment}
|
as={Fragment}
|
||||||
enter="transition ease-out duration-100"
|
enter="transition ease-out duration-100"
|
||||||
enterFrom="transform opacity-0 scale-95"
|
enterFrom="opacity-0 scale-95"
|
||||||
enterTo="transform opacity-100 scale-100"
|
enterTo="opacity-100 scale-100"
|
||||||
leave="transition ease-in duration-75"
|
leave="transition ease-in duration-75"
|
||||||
leaveFrom="transform opacity-100 scale-100"
|
leaveFrom="opacity-100 scale-100"
|
||||||
leaveTo="transform opacity-0 scale-95"
|
leaveTo="opacity-0 scale-95"
|
||||||
>
|
>
|
||||||
<Menu.Items
|
<Menu.Items
|
||||||
static
|
static
|
||||||
@ -72,4 +72,4 @@ export default function FilterTypeSelector(props) {
|
|||||||
</Menu>
|
</Menu>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -416,11 +416,11 @@ function DatePicker({ query, site, history }) {
|
|||||||
show={open}
|
show={open}
|
||||||
as={Fragment}
|
as={Fragment}
|
||||||
enter="transition ease-out duration-100"
|
enter="transition ease-out duration-100"
|
||||||
enterFrom="transform opacity-0 scale-95"
|
enterFrom="opacity-0 scale-95"
|
||||||
enterTo="transform opacity-100 scale-100"
|
enterTo="opacity-100 scale-100"
|
||||||
leave="transition ease-in duration-75"
|
leave="transition ease-in duration-75"
|
||||||
leaveFrom="transform opacity-100 scale-100"
|
leaveFrom="opacity-100 scale-100"
|
||||||
leaveTo="transform opacity-0 scale-95"
|
leaveTo="opacity-0 scale-95"
|
||||||
>
|
>
|
||||||
{renderDropDownContent()}
|
{renderDropDownContent()}
|
||||||
</Transition>
|
</Transition>
|
||||||
|
@ -250,11 +250,11 @@ class Filters extends React.Component {
|
|||||||
show={open}
|
show={open}
|
||||||
as={Fragment}
|
as={Fragment}
|
||||||
enter="transition ease-out duration-100"
|
enter="transition ease-out duration-100"
|
||||||
enterFrom="transform opacity-0 scale-95"
|
enterFrom="opacity-0 scale-95"
|
||||||
enterTo="transform opacity-100 scale-100"
|
enterTo="opacity-100 scale-100"
|
||||||
leave="transition ease-in duration-75"
|
leave="transition ease-in duration-75"
|
||||||
leaveFrom="transform opacity-100 scale-100"
|
leaveFrom="opacity-100 scale-100"
|
||||||
leaveTo="transform opacity-0 scale-95"
|
leaveTo="opacity-0 scale-95"
|
||||||
>
|
>
|
||||||
<Menu.Items
|
<Menu.Items
|
||||||
static
|
static
|
||||||
|
@ -249,10 +249,10 @@ export default class SiteSwitcher extends React.Component {
|
|||||||
|
|
||||||
<Transition
|
<Transition
|
||||||
show={this.state.open}
|
show={this.state.open}
|
||||||
enter="transition ease-out duration-100 transform"
|
enter="transition ease-out duration-100"
|
||||||
enterFrom="opacity-0 scale-95"
|
enterFrom="opacity-0 scale-95"
|
||||||
enterTo="opacity-100 scale-100"
|
enterTo="opacity-100 scale-100"
|
||||||
leave="transition ease-in duration-75 transform"
|
leave="transition ease-in duration-75"
|
||||||
leaveFrom="opacity-100 scale-100"
|
leaveFrom="opacity-100 scale-100"
|
||||||
leaveTo="opacity-0 scale-95"
|
leaveTo="opacity-0 scale-95"
|
||||||
>
|
>
|
||||||
|
@ -33,7 +33,7 @@ export default function Behaviours(props) {
|
|||||||
|
|
||||||
const [funnelNames, _setFunnelNames] = useState(site.funnels.map(({ name }) => name))
|
const [funnelNames, _setFunnelNames] = useState(site.funnels.map(({ name }) => name))
|
||||||
const [selectedFunnel, setSelectedFunnel] = useState(storage.getItem(funnelKey))
|
const [selectedFunnel, setSelectedFunnel] = useState(storage.getItem(funnelKey))
|
||||||
|
|
||||||
const [showingPropsForGoalFilter, setShowingPropsForGoalFilter] = useState(false)
|
const [showingPropsForGoalFilter, setShowingPropsForGoalFilter] = useState(false)
|
||||||
|
|
||||||
const onGoalFilterClick = useCallback((e) => {
|
const onGoalFilterClick = useCallback((e) => {
|
||||||
@ -88,11 +88,11 @@ export default function Behaviours(props) {
|
|||||||
<Transition
|
<Transition
|
||||||
as={Fragment}
|
as={Fragment}
|
||||||
enter="transition ease-out duration-100"
|
enter="transition ease-out duration-100"
|
||||||
enterFrom="transform opacity-0 scale-95"
|
enterFrom="opacity-0 scale-95"
|
||||||
enterTo="transform opacity-100 scale-100"
|
enterTo="opacity-100 scale-100"
|
||||||
leave="transition ease-in duration-75"
|
leave="transition ease-in duration-75"
|
||||||
leaveFrom="transform opacity-100 scale-100"
|
leaveFrom="opacity-100 scale-100"
|
||||||
leaveTo="transform opacity-0 scale-95"
|
leaveTo="opacity-0 scale-95"
|
||||||
>
|
>
|
||||||
<Menu.Items className="text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
|
<Menu.Items className="text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
|
||||||
<div className="py-1">
|
<div className="py-1">
|
||||||
|
@ -79,11 +79,11 @@ export function IntervalPicker({ graphData, query, site, updateInterval }) {
|
|||||||
as={Fragment}
|
as={Fragment}
|
||||||
show={open}
|
show={open}
|
||||||
enter="transition ease-out duration-100"
|
enter="transition ease-out duration-100"
|
||||||
enterFrom="transform opacity-0 scale-95"
|
enterFrom="opacity-0 scale-95"
|
||||||
enterTo="transform opacity-100 scale-100"
|
enterTo="opacity-100 scale-100"
|
||||||
leave="transition ease-in duration-75"
|
leave="transition ease-in duration-75"
|
||||||
leaveFrom="transform opacity-100 scale-100"
|
leaveFrom="opacity-100 scale-100"
|
||||||
leaveTo="transform opacity-0 scale-95">
|
leaveTo="opacity-0 scale-95">
|
||||||
<Menu.Items className="py-1 text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10" static>
|
<Menu.Items className="py-1 text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10" static>
|
||||||
{options.map((option) => DropdownItem({ option, currentInterval, updateInterval }))}
|
{options.map((option) => DropdownItem({ option, currentInterval, updateInterval }))}
|
||||||
</Menu.Items>
|
</Menu.Items>
|
||||||
|
@ -110,11 +110,11 @@ export default function SourceList(props) {
|
|||||||
<Transition
|
<Transition
|
||||||
as={Fragment}
|
as={Fragment}
|
||||||
enter="transition ease-out duration-100"
|
enter="transition ease-out duration-100"
|
||||||
enterFrom="transform opacity-0 scale-95"
|
enterFrom="opacity-0 scale-95"
|
||||||
enterTo="transform opacity-100 scale-100"
|
enterTo="opacity-100 scale-100"
|
||||||
leave="transition ease-in duration-75"
|
leave="transition ease-in duration-75"
|
||||||
leaveFrom="transform opacity-100 scale-100"
|
leaveFrom="opacity-100 scale-100"
|
||||||
leaveTo="transform opacity-0 scale-95"
|
leaveTo="opacity-0 scale-95"
|
||||||
>
|
>
|
||||||
<Menu.Items className="text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
|
<Menu.Items className="text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
|
||||||
<div className="py-1">
|
<div className="py-1">
|
||||||
|
1271
assets/package-lock.json
generated
1271
assets/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -20,11 +20,11 @@
|
|||||||
"@kunukn/react-collapse": "^2.2.9",
|
"@kunukn/react-collapse": "^2.2.9",
|
||||||
"@popperjs/core": "^2.11.6",
|
"@popperjs/core": "^2.11.6",
|
||||||
"@tailwindcss/aspect-ratio": "^0.4.2",
|
"@tailwindcss/aspect-ratio": "^0.4.2",
|
||||||
"@tailwindcss/forms": "^0.3.2",
|
"@tailwindcss/forms": "^0.5.6",
|
||||||
"@tailwindcss/typography": "^0.4.1",
|
"@tailwindcss/typography": "^0.4.1",
|
||||||
"abortcontroller-polyfill": "^1.7.3",
|
"abortcontroller-polyfill": "^1.7.3",
|
||||||
"alpinejs": "^2.8.2",
|
"alpinejs": "^2.8.2",
|
||||||
"autoprefixer": "^10.2.6",
|
"autoprefixer": "^10.4.15",
|
||||||
"babel-loader": "^8.2.2",
|
"babel-loader": "^8.2.2",
|
||||||
"chart.js": "^3.3.2",
|
"chart.js": "^3.3.2",
|
||||||
"chartjs-plugin-datalabels": "^2.2.0",
|
"chartjs-plugin-datalabels": "^2.2.0",
|
||||||
@ -40,7 +40,7 @@
|
|||||||
"phoenix": "^1.7.2",
|
"phoenix": "^1.7.2",
|
||||||
"phoenix_html": "^3.3.1",
|
"phoenix_html": "^3.3.1",
|
||||||
"phoenix_live_view": "^0.18.18",
|
"phoenix_live_view": "^0.18.18",
|
||||||
"postcss": "^8.3.0",
|
"postcss": "^8.4.29",
|
||||||
"postcss-loader": "^6.1.1",
|
"postcss-loader": "^6.1.1",
|
||||||
"react": "^16.13.1",
|
"react": "^16.13.1",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
@ -50,7 +50,7 @@
|
|||||||
"react-popper": "^2.3.0",
|
"react-popper": "^2.3.0",
|
||||||
"react-router-dom": "^5.2.0",
|
"react-router-dom": "^5.2.0",
|
||||||
"react-transition-group": "^4.4.2",
|
"react-transition-group": "^4.4.2",
|
||||||
"tailwindcss": "^2.1.2",
|
"tailwindcss": "^3.3.3",
|
||||||
"terser-webpack-plugin": "^5.1.2",
|
"terser-webpack-plugin": "^5.1.2",
|
||||||
"url-search-params-polyfill": "^8.1.1",
|
"url-search-params-polyfill": "^8.1.1",
|
||||||
"webpack": "5.88.1",
|
"webpack": "5.88.1",
|
||||||
|
@ -1,20 +1,18 @@
|
|||||||
const colors = require('tailwindcss/colors')
|
const colors = require('tailwindcss/colors')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
purge: {
|
content: [
|
||||||
content: [
|
'./js/**/*.js',
|
||||||
'./js/**/*.js',
|
'../lib/plausible_web/templates/**/*.html.eex',
|
||||||
'../lib/plausible_web/templates/**/*.html.eex',
|
'../lib/plausible_web/templates/**/*.html.heex',
|
||||||
'../lib/plausible_web/templates/**/*.html.heex',
|
'../lib/plausible_web/live/**/*.ex',
|
||||||
'../lib/plausible_web/live/**/*.ex',
|
'../lib/plausible_web/components/**/*.ex',
|
||||||
'../lib/plausible_web/components/**/*.ex',
|
],
|
||||||
],
|
safelist: [
|
||||||
safelist: [
|
// PlausibleWeb.StatsView.stats_container_class/1 uses this class
|
||||||
// PlausibleWeb.StatsView.stats_container_class/1 uses this class
|
// it's not used anywhere else in the templates or scripts
|
||||||
// it's not used anywhere else in the templates or scripts
|
"max-w-screen-xl"
|
||||||
"max-w-screen-xl"
|
],
|
||||||
]
|
|
||||||
},
|
|
||||||
darkMode: 'class',
|
darkMode: 'class',
|
||||||
theme: {
|
theme: {
|
||||||
container: {
|
container: {
|
||||||
@ -23,7 +21,8 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
orange: colors.orange,
|
yellow: colors.amber, // We started usign `yellow` in v2 but it was renamed to `amber` in v3 https://tailwindcss.com/docs/upgrade-guide#removed-color-aliases
|
||||||
|
gray: colors.slate,
|
||||||
'gray-950': 'rgb(13, 18, 30)',
|
'gray-950': 'rgb(13, 18, 30)',
|
||||||
'gray-850': 'rgb(26, 32, 44)',
|
'gray-850': 'rgb(26, 32, 44)',
|
||||||
'gray-825': 'rgb(37, 47, 63)'
|
'gray-825': 'rgb(37, 47, 63)'
|
||||||
@ -32,7 +31,6 @@ module.exports = {
|
|||||||
'44': '11rem'
|
'44': '11rem'
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
'31percent': '31%',
|
|
||||||
'content': 'fit-content'
|
'content': 'fit-content'
|
||||||
},
|
},
|
||||||
opacity: {
|
opacity: {
|
||||||
@ -50,23 +48,8 @@ module.exports = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
variants: {
|
|
||||||
textColor: ['responsive', 'hover', 'focus', 'group-hover'],
|
|
||||||
display: ['responsive', 'hover', 'focus', 'group-hover'],
|
|
||||||
extend: {
|
|
||||||
textColor: ['dark'],
|
|
||||||
borderWidth: ['dark'],
|
|
||||||
backgroundOpacity: ['dark'],
|
|
||||||
display: ['dark'],
|
|
||||||
cursor: ['hover'],
|
|
||||||
justifyContent: ['responsive'],
|
|
||||||
backgroundColor: ['odd', 'even'],
|
|
||||||
shadow: ['dark']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
plugins: [
|
plugins: [
|
||||||
require('@tailwindcss/forms'),
|
require('@tailwindcss/forms'),
|
||||||
require('@tailwindcss/typography'),
|
|
||||||
require('@tailwindcss/aspect-ratio'),
|
require('@tailwindcss/aspect-ratio'),
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
<div class="grid grid-cols-4 gap-6">
|
<div class="grid grid-cols-4 gap-6">
|
||||||
<div class="col-span-4 sm:col-span-2">
|
<div class="col-span-4 sm:col-span-2">
|
||||||
<%= label nil, "Domain", class: "block text-sm font-medium leading-5 text-gray-700 dark:text-gray-300" %>
|
<%= label nil, "Domain", class: "block text-sm font-medium leading-5 text-gray-700 dark:text-gray-300" %>
|
||||||
<%= text_input nil, :domain, value: @site.domain, disabled: "disabled", class: "dark:bg-gray-900 w-full mt-1 block pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:text-gray-500 text-gray-500" %>
|
<%= text_input nil, :domain, value: @site.domain, disabled: "disabled", class: "dark:bg-gray-900 w-full mt-1 block pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:text-gray-100 text-gray-500" %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="inline-flex rounded-md shadow-sm">
|
<span class="inline-flex rounded-md shadow-sm">
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">
|
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">
|
||||||
<%= membership.user.name %>
|
<%= membership.user.name %>
|
||||||
</p>
|
</p>
|
||||||
<p class="text-sm text-gray-500 truncate">
|
<p class="text-sm text-gray-400 truncate">
|
||||||
<%= membership.user.email %>
|
<%= membership.user.email %>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user