VSinerva/freesewing
1
0
Fork 0
Code Activity

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

20
packages/react/context/LoadingStatus/index.mjs
View file

@ -16,7 +16,7 @@ const timeout = 2
* The React component displaying the loading status
*/
const LoadingStatus = ({ loadingStatus }) => {
const [fade, setFade] = useState('tw-opacity-100')
const [fade, setFade] = useState('tw:opacity-100')
const [timer, setTimer] = useState(false)
useEffect(() => {
@ -40,23 +40,23 @@ const LoadingStatus = ({ loadingStatus }) => {
if (loadingStatus[2]) {
color = loadingStatus[3] ? 'success' : 'error'
icon = loadingStatus[3] ? (
<OkIcon stroke={4} className="tw-w-8 tw-h-8" />
<OkIcon stroke={4} className="tw:w-8 tw:h-8" />
) : (
<WarningIcon className="tw-w-8 tw-h-8" stroke={2} />
<WarningIcon className="tw:w-8 tw:h-8" stroke={2} />
)
}
return (
<div
className="tw-fixed tw-bottom-14 md:tw-top-28 tw-left-0 tw-w-full tw-z-50 md:tw-px-4 md:tw-mx-auto"
className="tw:fixed tw:bottom-14 tw:md:top-28 tw:left-0 tw:w-full tw:z-50 tw:md:px-4 tw:md:mx-auto"
style={{ zIndex: 500 }}
>
<div
className={`tw-w-full md:tw-max-w-2xl tw-m-auto tw-bg-${color} tw-flex tw-flex-row tw-items-center tw-gap-4 tw-p-4 tw-px-4 ${fade}
tw-transition-opacity tw-delay-[${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`}
className={`tw:w-full tw:md:max-w-2xl tw:m-auto tw:bg-${color} tw:flex tw:flex-row tw:items-center tw:gap-4 tw:p-4 tw:px-4 ${fade}
tw:transition-opacity tw:delay-[${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 tw:md:bg-${color}/90`}
>
<span className="tw-shrink-0">{icon}</span>
<span className="tw:shrink-0">{icon}</span>
{loadingStatus[1]}
</div>
</div>
@ -67,9 +67,9 @@ const LoadingStatus = ({ loadingStatus }) => {
* An animated loading state
*/
const LoadingProgress = ({ val = 0, max = 1, msg }) => (
<div className="tw-flex tw-flex-col tw-gap-2 tw-w-full tw-grow-0">
<div className="tw:flex tw:flex-col tw:gap-2 tw:w-full tw:grow-0">
{msg}
<progress className="tw-progress tw-progress-white" value={val} max={max}></progress>
<progress className="tw:progress tw:progress-white" value={val} max={max}></progress>
</div>
)