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

50
packages/react/components/Account/Sets.mjs
View file

@ -85,19 +85,19 @@ export const Sets = ({ Link = false }) => {
}
return (
<div className="tw-max-w-7xl xl:tw-pl-4">
<p className="tw-text-center md:tw-text-right">
<div className="tw:max-w-7xl tw:xl:pl-4">
<p className="tw:text-center tw:md:text-right">
<Link
className="tw-daisy-btn tw-daisy-btn-primary tw-daisy-btn-outline tw-capitalize tw-w-full md:tw-w-auto tw-mr-2 tw-mb-2 hover:tw-no-underline hover:tw-text-primary-content"
className="tw:daisy-btn tw:daisy-btn-secondary tw:capitalize tw:w-full tw:md:w-auto tw:mr-2 tw:hover:no-underline tw:hover:text-primary-content no-hover-decoration"
bottom
primary
href="/account/import"
>
<UploadIcon />
Import Measurements Sets
<UploadIcon className="tw:w-6 tw:h-6 tw:text-secondary-content" />
<span className="tw:text-secondary-content">Import Measurements Sets</span>
</Link>
<button
className="tw-daisy-btn tw-daisy-btn-primary tw-capitalize tw-w-full md:tw-w-auto hover:tw-no-underline hover:tw-text-primary-content"
className="tw:daisy-btn tw:daisy-btn-primary tw:capitalize tw:w-full tw:md:w-auto tw:hover:no-underline tw:hover:text-primary-content"
onClick={() =>
setModal(
<ModalWrapper keepOpenOnClick>
@ -110,41 +110,41 @@ export const Sets = ({ Link = false }) => {
Create a new Measurements Set
</button>
</p>
<div className="tw-flex tw-flex-row tw-gap-2 tw-border-b-2 tw-mb-4 tw-pb-4 tw-mt-8 tw-h-14 tw-items-center">
<div className="tw:flex tw:flex-row tw:gap-2 tw:border-b-2 tw:mb-4 tw:pb-4 tw:mt-8 tw:h-14 tw:items-center">
<input
type="checkbox"
className="tw-daisy-checkbox tw-daisy-checkbox-secondary"
className="tw:daisy-checkbox tw:daisy-checkbox-secondary"
onClick={toggleSelectAll}
checked={sets.length === selCount}
/>
<button
className="tw-daisy-btn tw-daisy-btn-error"
className="tw:daisy-btn tw:daisy-btn-error"
onClick={removeSelectedSets}
disabled={selCount < 1}
>
<TrashIcon /> {selCount} Measurements Sets
</button>
</div>
<div className="tw-grid tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-2">
<div className="tw:grid tw:grid-cols-2 tw:lg:grid-cols-4 tw:gap-2">
{sets.map((set, i) => (
<div
key={i}
className={`tw-flex tw-flex-row tw-items-start tw-gap-1 tw-border-2
className={`tw:flex tw:flex-row tw:items-start tw:gap-1 tw:border-2
${
selected[set.id]
? 'tw-border-solid tw-border-secondary'
: 'tw-border-dotted tw-border-base-300'
} tw-rounded-lg p-2`}
? 'tw:border-solid tw:border-secondary'
: 'tw:border-dotted tw:border-base-300'
} tw:rounded-lg p-2`}
>
<label className="tw-w-8 tw-h-full tw-shrink-0">
<label className="tw:w-8 tw:h-full tw:shrink-0">
<input
type="checkbox"
checked={selected[set.id] ? true : false}
className="tw-daisy-checkbox tw-daisy-checkbox-secondary"
className="tw:daisy-checkbox tw:daisy-checkbox-secondary"
onClick={() => toggleSelect(set.id)}
/>
</label>
<div className="tw-w-full">
<div className="tw:w-full">
<MsetCard
control={control}
href={`/account/data/sets/set?id=${set.id}`}
@ -189,9 +189,9 @@ export const MsetCard = ({
const s = sizes[size]
const wrapperProps = {
className: `tw-bg-base-300 tw-aspect-square tw-h-${s} tw-w-${s} tw-mb-2 tw-grow tw-w-full
hover:tw-cursor-pointer tw-border-0 tw-opacity-80 hover:tw-opacity-100
tw-mx-auto tw-flex tw-flex-col tw-items-start tw-text-center tw-justify-between tw-rounded-none md:tw-rounded shadow`,
className: `tw:bg-base-300 tw:aspect-square tw:h-${s} tw:w-${s} tw:mb-2 tw:grow tw:w-full
tw:hover:cursor-pointer tw:border-0 tw:opacity-80 tw:hover:opacity-100
tw:mx-auto tw:flex tw:flex-col tw:items-start tw:text-center tw:justify-between tw:rounded-none tw:md:rounded shadow`,
style: {
backgroundImage: `url(${cloudflareImageUrl({ type: 'w500', id: set.img })})`,
backgroundSize: 'cover',
@ -212,11 +212,11 @@ export const MsetCard = ({
set.measies,
true
)
const iconClasses = 'tw-w-8 tw-h-8 tw-p-1 tw-rounded-full tw--mt-2 tw--ml-2 tw-shadow'
const iconClasses = 'tw:w-8 tw:h-8 tw:p-1 tw:rounded-full tw:-mt-2 tw:-ml-2 tw:shadow'
icon = hasMeasies ? (
<OkIcon className={`${iconClasses} tw-bg-success tw-text-success-content`} stroke={4} />
<OkIcon className={`${iconClasses} tw:bg-success tw:text-success-content`} stroke={4} />
) : (
<NoIcon className={`${iconClasses} tw-bg-error tw-text-error-content`} stroke={3} />
<NoIcon className={`${iconClasses} tw:bg-error tw:text-error-content`} stroke={3} />
)
if (missing.length > 0) {
const translated = missing.map((m) => measurementsTranslations[m])
@ -225,7 +225,7 @@ export const MsetCard = ({
const lastSpace = missingString.lastIndexOf(', ', maxLength)
missingString = missingString.substring(0, lastSpace) + ', and more...'
}
const measieClasses = 'tw-font-normal tw-text-xs'
const measieClasses = 'tw:font-normal tw:text-xs'
missingMeasies = <span className={`${measieClasses}`}>{missingString}</span>
linebreak = <br />
}
@ -234,7 +234,7 @@ export const MsetCard = ({
const inner = (
<>
{icon}
<span className="tw-bg-neutral tw-text-neutral-content tw-px-4 tw-w-full tw-bg-opacity-50 tw-py-2 tw-rounded tw-rounded-t-none tw-font-bold tw-leading-5">
<span className="tw:bg-neutral/50 tw:text-neutral-content tw:px-4 tw:w-full tw:py-2 tw:rounded tw:rounded-t-none tw:font-bold tw:leading-5">
{set.name}
{linebreak}
{missingMeasies}