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:
parent
a2863e5158
commit
44e04a4cef
164 changed files with 2361 additions and 2658 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue