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
|
||||
elixir 1.14.3-otp-25
|
||||
nodejs 16.3.0
|
||||
nodejs 18.17.1
|
||||
python 3.9.12
|
||||
|
@ -166,11 +166,11 @@ const ComparisonInput = function({ site, query, history }) {
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95">
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
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>
|
||||
{ Object.keys(COMPARISON_MODES).map((key) => ComparisonModeOption({ label: COMPARISON_MODES[key], value: key, isCurrentlySelected: key == query.comparison, updateMode, setUiMode })) }
|
||||
{ query.comparison !== "custom" && <span>
|
||||
|
@ -50,11 +50,11 @@ export default function FilterTypeSelector(props) {
|
||||
show={open}
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
static
|
||||
|
@ -416,11 +416,11 @@ function DatePicker({ query, site, history }) {
|
||||
show={open}
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
{renderDropDownContent()}
|
||||
</Transition>
|
||||
|
@ -250,11 +250,11 @@ class Filters extends React.Component {
|
||||
show={open}
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
static
|
||||
|
@ -249,10 +249,10 @@ export default class SiteSwitcher extends React.Component {
|
||||
|
||||
<Transition
|
||||
show={this.state.open}
|
||||
enter="transition ease-out duration-100 transform"
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75 transform"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
|
@ -88,11 +88,11 @@ export default function Behaviours(props) {
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
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">
|
||||
<div className="py-1">
|
||||
|
@ -79,11 +79,11 @@ export function IntervalPicker({ graphData, query, site, updateInterval }) {
|
||||
as={Fragment}
|
||||
show={open}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95">
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
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>
|
||||
{options.map((option) => DropdownItem({ option, currentInterval, updateInterval }))}
|
||||
</Menu.Items>
|
||||
|
@ -110,11 +110,11 @@ export default function SourceList(props) {
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
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">
|
||||
<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",
|
||||
"@popperjs/core": "^2.11.6",
|
||||
"@tailwindcss/aspect-ratio": "^0.4.2",
|
||||
"@tailwindcss/forms": "^0.3.2",
|
||||
"@tailwindcss/forms": "^0.5.6",
|
||||
"@tailwindcss/typography": "^0.4.1",
|
||||
"abortcontroller-polyfill": "^1.7.3",
|
||||
"alpinejs": "^2.8.2",
|
||||
"autoprefixer": "^10.2.6",
|
||||
"autoprefixer": "^10.4.15",
|
||||
"babel-loader": "^8.2.2",
|
||||
"chart.js": "^3.3.2",
|
||||
"chartjs-plugin-datalabels": "^2.2.0",
|
||||
@ -40,7 +40,7 @@
|
||||
"phoenix": "^1.7.2",
|
||||
"phoenix_html": "^3.3.1",
|
||||
"phoenix_live_view": "^0.18.18",
|
||||
"postcss": "^8.3.0",
|
||||
"postcss": "^8.4.29",
|
||||
"postcss-loader": "^6.1.1",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
@ -50,7 +50,7 @@
|
||||
"react-popper": "^2.3.0",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-transition-group": "^4.4.2",
|
||||
"tailwindcss": "^2.1.2",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"terser-webpack-plugin": "^5.1.2",
|
||||
"url-search-params-polyfill": "^8.1.1",
|
||||
"webpack": "5.88.1",
|
||||
|
@ -1,20 +1,18 @@
|
||||
const colors = require('tailwindcss/colors')
|
||||
|
||||
module.exports = {
|
||||
purge: {
|
||||
content: [
|
||||
'./js/**/*.js',
|
||||
'../lib/plausible_web/templates/**/*.html.eex',
|
||||
'../lib/plausible_web/templates/**/*.html.heex',
|
||||
'../lib/plausible_web/live/**/*.ex',
|
||||
'../lib/plausible_web/components/**/*.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"
|
||||
]
|
||||
},
|
||||
content: [
|
||||
'./js/**/*.js',
|
||||
'../lib/plausible_web/templates/**/*.html.eex',
|
||||
'../lib/plausible_web/templates/**/*.html.heex',
|
||||
'../lib/plausible_web/live/**/*.ex',
|
||||
'../lib/plausible_web/components/**/*.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: {
|
||||
@ -23,7 +21,8 @@ module.exports = {
|
||||
},
|
||||
extend: {
|
||||
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-850': 'rgb(26, 32, 44)',
|
||||
'gray-825': 'rgb(37, 47, 63)'
|
||||
@ -32,7 +31,6 @@ module.exports = {
|
||||
'44': '11rem'
|
||||
},
|
||||
width: {
|
||||
'31percent': '31%',
|
||||
'content': 'fit-content'
|
||||
},
|
||||
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: [
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/typography'),
|
||||
require('@tailwindcss/aspect-ratio'),
|
||||
]
|
||||
}
|
||||
|
@ -10,7 +10,7 @@
|
||||
<div class="grid grid-cols-4 gap-6">
|
||||
<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" %>
|
||||
<%= 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>
|
||||
<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">
|
||||
<%= membership.user.name %>
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 truncate">
|
||||
<p class="text-sm text-gray-400 truncate">
|
||||
<%= membership.user.email %>
|
||||
</p>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user