1
0
Fork 0

feat: Upgrade to TailwindCSS 4 & DaisyUI 5 (#263)

Also fixes #251

Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/263
Co-authored-by: joostdecock <joost@joost.at>
Co-committed-by: joostdecock <joost@joost.at>
This commit is contained in:
joostdecock 2025-04-18 08:07:13 +00:00 committed by Joost De Cock
parent a2863e5158
commit 44e04a4cef
164 changed files with 2361 additions and 2658 deletions

View file

@ -36,13 +36,13 @@ export const LoadingStatus = ({ state, update }) => {
if (!state._.loading || Object.keys(state._.loading).length < 1) return null
const colorClasses = {
info: 'tw-bg-info tw-text-info-content',
primary: 'tw-bg-primary tw-text-primary-content',
info: 'tw:bg-info tw:text-info-content',
primary: 'tw:bg-primary tw:text-primary-content',
}
return (
<div className="tw-fixed tw-bottom-4 md:tw-buttom-28 tw-left-0 tw-w-full tw-z-30 md:tw-px-4 md:tw-mx-auto mb-4">
<div className="tw-flex tw-flex-col tw-gap-2">
<div className="tw:fixed tw:bottom-4 md:tw:buttom-28 tw:left-0 tw:w-full tw:z-30 tw:md:px-4 tw:md:mx-auto mb-4">
<div className="tw:flex tw:flex-col tw:gap-2">
{Object.entries(state._.loading).map(([id, custom]) => {
const conf = {
...config.defaults,
@ -52,20 +52,20 @@ export const LoadingStatus = ({ state, update }) => {
return (
<div
key={id}
className={`tw-w-full md:tw-max-w-2xl tw-m-auto tw-bg-${
className={`tw:w-full tw:md:max-w-2xl tw:m-auto tw:bg-${
conf.color
} tw-text-${conf.color}-content tw-flex tw-flex-row tw-items-center tw-gap-4 tw-p-4 tw-px-4 ${
conf.fading ? 'tw-opacity-0' : 'tw-opacity-100'
} tw:text-${conf.color}-content tw:flex tw:flex-row tw:items-center tw:gap-4 tw:p-4 tw:px-4 ${
conf.fading ? 'tw:opacity-0' : 'tw:opacity-100'
}
tw-transition-opacity tw-delay-[${config.timeout * 1000 - 400}ms] tw-duration-300
md:tw-rounded-lg tw-shadow tw-text-secondary-content tw-text-lg lg:tw-text-xl tw-font-medium md:tw-bg-opacity-90
${conf.color === 'info' ? 'tw-text-neutral' : ''}
tw:transition-opacity tw:delay-[${config.timeout * 1000 - 400}ms] tw:duration-300
tw:md:rounded-lg tw:shadow tw:text-secondary-content tw:text-lg tw:lg:text-xl tw:font-medium
${conf.color === 'info' ? 'tw:text-neutral' : ''}
`}
>
<span className={`tw-shrink-0 tw-text-${conf.color}-content`}>
<span className={`tw:shrink-0 tw:text-${conf.color}-content`}>
<Icon />
</span>
<div className={conf.color === 'info' ? 'tw-text-neutral tw-w-full' : 'tw-w-full'}>
<div className={conf.color === 'info' ? 'tw:text-neutral tw:w-full' : 'tw:w-full'}>
{conf.msg}
</div>
</div>