antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed broken layouts

Browse Source
This commit is contained in:
Anton Tranelis 2025-03-20 13:41:50 +00:00
parent 7849414428
commit 9fcde51584
62 changed files with 239 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
rollup.config.js
View File

@ -55,11 +55,9 @@ export default [
'react-toastify',
'react-string-replace',
'react-toastify/dist/ReactToastify.css',
'tw-elements',
'react-router-dom',
'react-leaflet-cluster',
'@tanstack/react-query',
'tributejs',
'prop-types',
'leaflet/dist/leaflet.css',
'@heroicons/react/20/solid',

2
src/Components/AppShell/ContextWrapper.tsx
View File

@ -22,7 +22,7 @@ const ContextCheckContext = createContext(false)
const CloseButton = ({ closeToast }: CloseButtonProps) => (
<button
className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw:absolute tw:right-2 tw:top-2 tw:focus:outline-hidden'
className='tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-2 tw:top-2 tw:focus:outline-hidden'
onClick={closeToast}
>
✕

26
src/Components/AppShell/NavBar.tsx
View File

@ -69,9 +69,9 @@ export default function NavBar({ appName }: { appName: string }) {
if (showNav) {
return (
<>
<div className='tw-navbar tw:bg-base-100 tw:z-9998 tw:shadow-xl tw:relative'>
<div className='tw:navbar tw:bg-base-100 tw:z-9998 tw:shadow-xl tw:relative'>
<button
className='tw-btn tw-btn-square tw-btn-ghost'
className='tw:btn tw:btn-square tw:btn-ghost'
aria-controls='#sidenav'
aria-haspopup='true'
onClick={() => toggleSidebar()}
@ -84,7 +84,7 @@ export default function NavBar({ appName }: { appName: string }) {
style={{ maxWidth: nameWidth + 60 }}
>
<Link
className='tw-btn tw-btn-ghost tw:px-2 tw:normal-case tw:text-xl tw:flex-1 tw:truncate'
className='tw:btn tw:btn-ghost tw:px-2 tw:normal-case tw:text-xl tw:flex-1 tw:truncate'
to={'/'}
>
<h1 ref={nameRef} className='tw:truncate'>
@ -92,7 +92,7 @@ export default function NavBar({ appName }: { appName: string }) {
</h1>
</Link>
<button
className='tw-btn tw:px-2 tw-btn-ghost'
className='tw:btn tw:px-2 tw:btn-ghost'
onClick={() => window.my_modal_3.showModal()}
>
<QuestionMarkIcon className='tw:h-5 tw:w-5' />
@ -107,7 +107,7 @@ export default function NavBar({ appName }: { appName: string }) {
className='tw:flex tw:items-center'
>
{userProfile.image && (
<div className='tw-avatar'>
<div className='tw:avatar'>
<div className='tw:w-10 tw:rounded-full'>
<img src={appState.assetsApi.url + userProfile.image} />
</div>
@ -115,13 +115,13 @@ export default function NavBar({ appName }: { appName: string }) {
)}
<div className='tw:ml-2 tw:mr-2'>{userProfile.name || user?.first_name}</div>
</Link>
<div className='tw-dropdown tw-dropdown-end'>
<label tabIndex={0} className='tw-btn tw-btn-ghost tw-btn-square'>
<div className='tw:dropdown tw:dropdown-end'>
<label tabIndex={0} className='tw:btn tw:btn-ghost tw:btn-square'>
<EllipsisVerticalIcon className='tw:h-5 tw:w-5' />
</label>
<ul
tabIndex={0}
className='tw-menu tw-menu-compact tw-dropdown-content tw:mt-3 tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:w-52 tw:z-10000!'
className='tw:menu tw:menu-compact tw:dropdown-content tw:mt-3 tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:w-52 tw:z-10000!'
>
<li>
<Link to={`${userProfile.id && '/edit-item/' + userProfile.id}`}>Profile</Link>
@ -145,20 +145,20 @@ export default function NavBar({ appName }: { appName: string }) {
<div>
<div className='tw:hidden tw:md:flex'>
<Link to={'/login'}>
<div className='tw-btn tw-btn-ghost tw:mr-2'>Login</div>
<div className='tw:btn tw:btn-ghost tw:mr-2'>Login</div>
</Link>
<Link to={'/signup'}>
<div className='tw-btn tw-btn-ghost tw:mr-2'>Sign Up</div>
<div className='tw:btn tw:btn-ghost tw:mr-2'>Sign Up</div>
</Link>
</div>
<div className='tw-dropdown tw-dropdown-end'>
<label tabIndex={1} className='tw-btn tw-btn-ghost tw:md:hidden'>
<div className='tw:dropdown tw:dropdown-end'>
<label tabIndex={1} className='tw:btn tw:btn-ghost tw:md:hidden'>
<EllipsisVerticalIcon className='tw:h-5 tw:w-5' />
</label>
<ul
tabIndex={1}
className='tw-menu tw-dropdown-content tw:mt-3 tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:w-52 tw:z-10000!'
className='tw:menu tw:dropdown-content tw:mt-3 tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:w-52 tw:z-10000!'
>
<li>
<Link to={'/login'}>Login</Link>

4
src/Components/AppShell/SideBar.tsx
View File

@ -53,7 +53,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
className={`tw:flex tw:flex-col ${embedded ? 'tw:h-full' : 'tw:h-[calc(100dvh-64px)]'}`}
>
<ul
className='tw-menu tw:w-full tw:bg-base-100 tw:text-base-content tw:p-0'
className='tw:menu tw:w-full tw:bg-base-100 tw:text-base-content tw:p-0'
data-te-sidenav-menu-ref
>
{routes.map((route, k) => {
@ -102,7 +102,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
>
<div className='tw:w-full'>
<ul
className='tw-menu tw:w-full tw:bg-base-100 tw:text-base-content tw:p-0 tw:mb-0'
className='tw:menu tw:w-full tw:bg-base-100 tw:text-base-content tw:p-0 tw:mb-0'
data-te-sidenav-menu-ref
>
{bottomRoutes?.map((route, k) => {

12
src/Components/Auth/LoginPage.tsx
View File

@ -60,13 +60,13 @@ export function LoginPage() {
placeholder='E-Mail'
value={email}
onChange={(e) => setEmail(e.target.value)}
className='tw-input tw-input-bordered tw:w-full tw:max-w-xs'
className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
/>
<input
type='password'
placeholder='Password'
onChange={(e) => setPassword(e.target.value)}
className='tw-input tw-input-bordered tw:w-full tw:max-w-xs'
className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
/>
<div className='tw:text-right tw:text-primary'>
<Link to='/reset-password'>
@ -75,17 +75,17 @@ export function LoginPage() {
</span>
</Link>
</div>
<div className='tw-card-actions'>
<div className='tw:card-actions'>
<button
className={
loading
? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
: 'tw-btn tw-btn-primary tw-btn-block'
? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
: 'tw:btn tw:btn-primary tw:btn-block'
}
// eslint-disable-next-line @typescript-eslint/no-misused-promises
onClick={() => onLogin()}
>
{loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Login'}
{loading ? <span className='tw:loading tw:loading-spinner'></span> : 'Login'}
</button>
</div>
</MapOverlayPage>

10
src/Components/Auth/RequestPasswordPage.tsx
View File

@ -43,19 +43,19 @@ export function RequestPasswordPage({ resetUrl }: { resetUrl: string }) {
placeholder='E-Mail'
value={email}
onChange={(e) => setEmail(e.target.value)}
className='tw-input tw-input-bordered tw:w-full tw:max-w-xs'
className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
/>
<div className='tw-card-actions tw:mt-4'>
<div className='tw:card-actions tw:mt-4'>
<button
className={
loading
? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
: 'tw-btn tw-btn-primary tw-btn-block'
? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
: 'tw:btn tw:btn-primary tw:btn-block'
}
// eslint-disable-next-line @typescript-eslint/no-misused-promises
onClick={() => onReset()}
>
{loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Send'}
{loading ? <span className='tw:loading tw:loading-spinner'></span> : 'Send'}
</button>
</div>
</MapOverlayPage>

10
src/Components/Auth/SetNewPasswordPage.tsx
View File

@ -42,19 +42,19 @@ export function SetNewPasswordPage() {
type='password'
placeholder='Password'
onChange={(e) => setPassword(e.target.value)}
className='tw-input tw-input-bordered tw:w-full tw:max-w-xs'
className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
/>
<div className='tw-card-actions tw:mt-4'>
<div className='tw:card-actions tw:mt-4'>
<button
className={
loading
? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
: 'tw-btn tw-btn-primary tw-btn-block'
? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
: 'tw:btn tw:btn-primary tw:btn-block'
}
// eslint-disable-next-line @typescript-eslint/no-misused-promises
onClick={() => onReset()}
>
{loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Set'}
{loading ? <span className='tw:loading tw:loading-spinner'></span> : 'Set'}
</button>
</div>
</MapOverlayPage>

14
src/Components/Auth/SignupPage.tsx
View File

@ -62,32 +62,32 @@ export function SignupPage() {
placeholder='Name'
value={userName}
onChange={(e) => setUserName(e.target.value)}
className='tw-input tw-input-bordered tw:w-full tw:max-w-xs'
className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
/>
<input
type='email'
placeholder='E-Mail'
value={email}
onChange={(e) => setEmail(e.target.value)}
className='tw-input tw-input-bordered tw:w-full tw:max-w-xs'
className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
/>
<input
type='password'
placeholder='Password'
onChange={(e) => setPassword(e.target.value)}
className='tw-input tw-input-bordered tw:w-full tw:max-w-xs'
className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
/>
<div className='tw-card-actions tw:mt-4'>
<div className='tw:card-actions tw:mt-4'>
<button
className={
loading
? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
: 'tw-btn tw-btn-primary tw-btn-block'
? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
: 'tw:btn tw:btn-primary tw:btn-block'
}
// eslint-disable-next-line @typescript-eslint/no-misused-promises
onClick={() => onRegister()}
>
{loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Sign Up'}
{loading ? <span className='tw:loading tw:loading-spinner'></span> : 'Sign Up'}
</button>
</div>
</MapOverlayPage>

8
src/Components/Gaming/Modal.tsx
View File

@ -20,14 +20,14 @@ export function Modal({
return (
<>
{/* You can open the modal using ID.showModal() method */}
<dialog id='my_modal_3' className='tw-modal tw:transition-all tw:duration-300'>
<form method='dialog' className='tw-modal-box tw:transition-none'>
<button className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw:absolute tw:right-2 tw:top-2 tw:focus:outline-hidden'>
<dialog id='my_modal_3' className='tw:modal tw:transition-all tw:duration-300'>
<form method='dialog' className='tw:modal-box tw:transition-none'>
<button className='tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-2 tw:top-2 tw:focus:outline-hidden'>
✕
</button>
{children}
</form>
<form method='dialog' className='tw-modal-backdrop'>
<form method='dialog' className='tw:modal-backdrop'>
<button>close</button>
</form>
</dialog>

30
src/Components/Gaming/Quests.tsx
View File

@ -39,56 +39,56 @@ export function Quests() {
return (
<>
{questsOpen ? (
<div className='tw-card tw:w-48 tw:bg-base-100 tw:shadow-xl tw:absolute tw:bottom-4 tw:left-4 tw:z-2000'>
<div className='tw-card-body tw:p-4 tw:pt-0'>
<div className='tw-card-actions tw:justify-end'>
<div className='tw:card tw:w-48 tw:bg-base-100 tw:shadow-xl tw:absolute tw:bottom-4 tw:left-4 tw:z-2000'>
<div className='tw:card-body tw:p-4 tw:pt-0'>
<div className='tw:card-actions tw:justify-end'>
<label
className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw:absolute tw:right-1 tw:top-1'
className='tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-1 tw:top-1'
onClick={() => setQuestsOpen(false)}
>
✕
</label>
</div>
<h2 className='tw-card-title tw:m-auto '>
<h2 className='tw:card-title tw:m-auto '>
Level 1
<QuestionMarkCircleIcon />
</h2>
<ul className='tw:flex-row'>
<li>
<label className='tw-label tw:justify-normal tw:pt-1 tw:pb-0'>
<label className='tw:label tw:justify-normal tw:pt-1 tw:pb-0'>
<input
type='checkbox'
readOnly={true}
className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
checked={isAuthenticated || false}
/>
<span className='tw:text-sm tw-label-text tw:mx-2'>Sign Up</span>
<span className='tw:text-sm tw:label-text tw:mx-2'>Sign Up</span>
</label>
</li>
<li>
<label className='tw-label tw:justify-normal tw:pt-1 tw:pb-0'>
<label className='tw:label tw:justify-normal tw:pt-1 tw:pb-0'>
<input
type='checkbox'
readOnly={true}
className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
checked={!!profile?.text}
/>
<span className='tw:text-sm tw-label-text tw:mx-2'>Fill Profile</span>
<span className='tw:text-sm tw:label-text tw:mx-2'>Fill Profile</span>
</label>
</li>
<li>
<label className='tw-label tw:justify-normal tw:pt-1 tw:pb-0'>
<label className='tw:label tw:justify-normal tw:pt-1 tw:pb-0'>
<input
type='checkbox'
readOnly={true}
className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
checked={!!profile?.image}
/>
<span className='tw:text-sm tw-label-text tw:mx-2'>Upload Avatar</span>
<span className='tw:text-sm tw:label-text tw:mx-2'>Upload Avatar</span>
</label>
</li>
</ul>
{/** <button className='tw-btn tw-btn-xs tw-btn-neutral tw:w-fit tw:self-center tw:mt-1'>Next &gt;</button> */}{' '}
{/** <button className='tw:btn tw:btn-xs tw:btn-neutral tw:w-fit tw:self-center tw:mt-1'>Next &gt;</button> */}{' '}
</div>
</div>
) : (

2
src/Components/Input/ComboBoxInput.tsx
View File

@ -14,7 +14,7 @@ const ComboBoxInput = ({ id, options, value, onValueChange }: ComboBoxProps) =>
return (
<select
id={id}
className='tw-form-select tw:block tw:w-full tw:py-2 tw:px-4 tw:border tw:border-gray-300 rounded-md tw:shadow-sm tw:text-sm tw:focus:outline-hidden tw:focus:ring-indigo-500 tw:focus:border-indigo-500 tw:sm:text-sm'
className='tw:form-select tw:block tw:w-full tw:py-2 tw:px-4 tw:border tw:border-gray-300 rounded-md tw:shadow-sm tw:text-sm tw:focus:outline-hidden tw:focus:ring-indigo-500 tw:focus:border-indigo-500 tw:sm:text-sm'
onChange={handleChange}
defaultValue={value}
>

8
src/Components/Input/TextAreaInput.tsx
View File

@ -42,10 +42,10 @@ export function TextAreaInput({
}
return (
<div className={`tw-form-control tw:w-full ${containerStyle ?? ''}`}>
<div className={`tw:form-control tw:w-full ${containerStyle ?? ''}`}>
{labelTitle ? (
<label className='tw-label'>
<span className={`tw-label-text tw:text-base-content ${labelStyle ?? ''}`}>
<label className='tw:label'>
<span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
{labelTitle}
</span>
</label>
@ -55,7 +55,7 @@ export function TextAreaInput({
ref={ref}
value={inputValue}
name={dataField}
className={`tw-textarea tw-textarea-bordered tw:w-full tw:leading-5 ${inputStyle ?? ''}`}
className={`tw:textarea tw:textarea-bordered tw:w-full tw:leading-5 ${inputStyle ?? ''}`}
placeholder={placeholder ?? ''}
onChange={handleChange}
></textarea>

4
src/Components/Input/TextInput.cy.tsx
View File

@ -9,8 +9,8 @@ describe('<TextInput />', () => {
cy.get('input').should('have.attr', 'type', 'text')
cy.get('input').should('have.attr', 'placeholder', '')
cy.get('input').should('have.attr', 'required')
cy.get('input').should('have.class', 'tw-input')
cy.get('input').should('have.class', 'tw-input-bordered')
cy.get('input').should('have.class', 'input')
cy.get('input').should('have.class', 'input-bordered')
cy.get('input').should('have.class', 'tw:w-full')
})

8
src/Components/Input/TextInput.tsx
View File

@ -47,10 +47,10 @@ export function TextInput({
}
return (
<div className={`tw-form-control ${containerStyle ?? ''}`}>
<div className={`tw:form-control ${containerStyle ?? ''}`}>
{labelTitle ? (
<label className='tw-label'>
<span className={`tw-label-text tw:text-base-content ${labelStyle ?? ''}`}>
<label className='tw:label'>
<span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
{labelTitle}
</span>
</label>
@ -64,7 +64,7 @@ export function TextInput({
placeholder={placeholder ?? ''}
autoComplete={autocomplete}
onChange={handleChange}
className={`tw-input tw-input-bordered tw:w-full ${inputStyle ?? ''}`}
className={`tw:input tw:input-bordered tw:w-full ${inputStyle ?? ''}`}
/>
</div>
)

2
src/Components/Input/__snapshots__/ComboBoxInput.spec.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`<ComboBoxInput /> > renders properly 1`] = `
<select
class="tw-form-select tw-block tw-w-full tw-py-2 tw-px-4 tw-border tw-border-gray-300 rounded-md tw-shadow-sm tw-text-sm focus:tw-outline-none focus:tw-ring-indigo-500 focus:tw-border-indigo-500 sm:tw-text-sm"
class="form-select block w-full py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
>
<option
value="Option 1"

12
src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap
View File

@ -2,19 +2,19 @@
exports[`<TextAreaInput /> > labelTitle > sets label 1`] = `
<div
class="tw-form-control tw-w-full "
class="form-control w-full "
>
<label
class="tw-label"
class="label"
>
<span
class="tw-label-text tw-text-base-content "
class="label-text text-base-content "
>
My Title
</span>
</label>
<textarea
class="tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 "
class="textarea textarea-bordered w-full leading-5 "
placeholder=""
required=""
/>
@ -23,10 +23,10 @@ exports[`<TextAreaInput /> > labelTitle > sets label 1`] = `
exports[`<TextAreaInput /> > renders properly 1`] = `
<div
class="tw-form-control tw-w-full "
class="form-control w-full "
>
<textarea
class="tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 "
class="textarea textarea-bordered w-full leading-5 "
placeholder=""
required=""
/>

12
src/Components/Input/__snapshots__/TextInput.spec.tsx.snap
View File

@ -2,19 +2,19 @@
exports[`<TextInput /> > labelTitle > sets label 1`] = `
<div
class="tw-form-control "
class="form-control "
>
<label
class="tw-label"
class="label"
>
<span
class="tw-label-text tw-text-base-content "
class="label-text text-base-content "
>
My Title
</span>
</label>
<input
class="tw-input tw-input-bordered tw-w-full "
class="input input-bordered w-full "
placeholder=""
required=""
type="text"
@ -25,10 +25,10 @@ exports[`<TextInput /> > labelTitle > sets label 1`] = `
exports[`<TextInput /> > renders properly 1`] = `
<div
class="tw-form-control "
class="form-control "
>
<input
class="tw-input tw-input-bordered tw-w-full "
class="input input-bordered w-full "
placeholder=""
required=""
type="text"

10
src/Components/Map/Subcomponents/AddButton.tsx
View File

@ -31,11 +31,11 @@ export default function AddButton({
return (
<>
{canAddItems() ? (
<div className='tw-dropdown tw-dropdown-top tw-dropdown-end tw-dropdown-hover tw:z-500 tw:absolute tw:right-4 tw:bottom-4'>
<label tabIndex={0} className='tw:z-500 tw-btn tw-btn-circle tw:shadow tw:bg-base-100'>
<div className='tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-500 tw:absolute tw:right-4 tw:bottom-4'>
<label tabIndex={0} className='tw:z-500 tw:btn tw:btn-circle tw:shadow tw:bg-base-100'>
<SVG src={PlusSVG} className='tw:h-5 tw:w-5' />
</label>
<ul tabIndex={0} className='tw-dropdown-content tw:pr-1 tw:list-none'>
<ul tabIndex={0} className='tw:dropdown-content tw:pr-1 tw:list-none'>
{layers.map(
(layer) =>
layer.api?.createItem &&
@ -43,10 +43,10 @@ export default function AddButton({
layer.listed && (
<li key={layer.name}>
<a>
<div className='tw-tooltip tw-tooltip-left' data-tip={layer.menuText}>
<div className='tw:tooltip tw:tooltip-left' data-tip={layer.menuText}>
<button
tabIndex={0}
className='tw:z-500 tw:border-0 tw:pl-2 tw:p-0 tw:mb-3 tw:w-10 tw:h-10 tw:cursor-pointer tw:rounded-full tw-mouse tw:drop-shadow-md tw:transition tw:ease-in tw:duration-200 tw:focus:outline-hidden'
className='tw:z-500 tw:border-0 tw:pl-2 tw:p-0 tw:mb-3 tw:w-10 tw:h-10 tw:cursor-pointer tw:rounded-full tw:mouse tw:drop-shadow-md tw:transition tw:ease-in tw:duration-200 tw:focus:outline-hidden'
style={{ backgroundColor: layer.menuColor || '#777' }}
onClick={() => {
triggerAction(layer)

18
src/Components/Map/Subcomponents/Controls/FilterControl.tsx
View File

@ -28,11 +28,11 @@ export function FilterControl() {
const visibleGroupTypes = useVisibleGroupType()
return (
<div className='tw-card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
<div className='tw:card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
{open ? (
<div className='tw-card-body tw:pr-4 tw:min-w-[8rem] tw:p-2 tw:w-fit tw:transition-all tw:duration-300'>
<div className='tw:card-body tw:pr-4 tw:min-w-[8rem] tw:p-2 tw:w-fit tw:transition-all tw:duration-300'>
<label
className='tw-btn tw-btn-sm tw:rounded-2xl tw-btn-circle tw-btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
className='tw:btn tw:btn-sm tw:rounded-2xl tw:btn-circle tw:btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
onClick={() => {
setOpen(false)
}}
@ -44,16 +44,16 @@ export function FilterControl() {
<li key={groupType.value}>
<label
htmlFor={groupType.value}
className='tw-label tw:justify-normal tw:pt-1 tw:pb-1'
className='tw:label tw:justify-normal tw:pt-1 tw:pb-1'
>
<input
id={groupType.value}
onChange={() => toggleVisibleGroupType(groupType.value)}
type='checkbox'
className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
checked={isGroupTypeVisible(groupType.value)}
/>
<span className='tw:text-sm tw-label-text tw:mx-2 tw:cursor-pointer'>
<span className='tw:text-sm tw:label-text tw:mx-2 tw:cursor-pointer'>
{groupType.text}
</span>
</label>
@ -62,12 +62,12 @@ export function FilterControl() {
</ul>
</div>
) : (
<div className='tw-indicator'>
<div className='tw:indicator'>
{visibleGroupTypes.length < groupTypes.length && (
<span className='tw-indicator-item tw-badge tw-badge-success tw:h-4 tw:p-2 tw:translate-x-1/3 tw:-translate-y-1/3 tw:border-0'></span>
<span className='tw:indicator-item tw:badge tw:badge-success tw:h-4 tw:p-2 tw:translate-x-1/3 tw:-translate-y-1/3 tw:border-0'></span>
)}
<div
className='tw-card-body tw:hover:bg-slate-300 tw-card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
className='tw:card-body tw:hover:bg-slate-300 tw:card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
onClick={() => {
setOpen(true)
}}

4
src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx
View File

@ -9,10 +9,10 @@ export const GratitudeControl = () => {
if (isAuthenticated) {
return (
<div className='tw-card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
<div className='tw:card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
{
<div
className='tw-card-body tw:hover:bg-slate-300 tw-card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
className='tw:card-body tw:hover:bg-slate-300 tw:card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
onClick={() => {
navigate('/select-user')
}}

14
src/Components/Map/Subcomponents/Controls/LayerControl.tsx
View File

@ -14,11 +14,11 @@ export function LayerControl() {
const toggleVisibleLayer = useToggleVisibleLayer()
return (
<div className='tw-card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
<div className='tw:card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
{open ? (
<div className='tw-card-body tw:pr-4 tw:min-w-[8rem] tw:p-2 tw:transition-all tw:w-fit tw:duration-300'>
<div className='tw:card-body tw:pr-4 tw:min-w-[8rem] tw:p-2 tw:transition-all tw:w-fit tw:duration-300'>
<label
className='tw-btn tw-btn-sm tw:rounded-2xl tw-btn-circle tw-btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
className='tw:btn tw:btn-sm tw:rounded-2xl tw:btn-circle tw:btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
onClick={() => {
setOpen(false)
}}
@ -32,16 +32,16 @@ export function LayerControl() {
<li key={layer.name}>
<label
htmlFor={layer.name}
className='tw-label tw:justify-normal tw:pt-1 tw:pb-1'
className='tw:label tw:justify-normal tw:pt-1 tw:pb-1'
>
<input
id={layer.name}
onChange={() => toggleVisibleLayer(layer)}
type='checkbox'
className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
checked={isLayerVisible(layer)}
/>
<span className='tw:text-sm tw-label-text tw:mx-2 tw:cursor-pointer'>
<span className='tw:text-sm tw:label-text tw:mx-2 tw:cursor-pointer'>
{layer.name}
</span>
</label>
@ -52,7 +52,7 @@ export function LayerControl() {
</div>
) : (
<div
className='tw-card-body tw:hover:bg-slate-300 tw-card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
className='tw:card-body tw:hover:bg-slate-300 tw:card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
onClick={() => {
setOpen(true)
}}

6
src/Components/Map/Subcomponents/Controls/LocateControl.tsx
View File

@ -43,9 +43,9 @@ export const LocateControl = () => {
return (
<>
<div className='tw-card tw:h-12 tw:w-12 tw:bg-base-100 tw:shadow-xl tw:items-center tw:justify-center tw:hover:bg-slate-300 tw:hover:cursor-pointer tw:transition-all tw:duration-300 tw:ml-2'>
<div className='tw:card tw:h-12 tw:w-12 tw:bg-base-100 tw:shadow-xl tw:items-center tw:justify-center tw:hover:bg-slate-300 tw:hover:cursor-pointer tw:transition-all tw:duration-300 tw:ml-2'>
<div
className='tw-card-body tw-card tw:p-2 tw:h-10 tw:w-10 '
className='tw:card-body tw:card tw:p-2 tw:h-10 tw:w-10 '
onClick={() => {
if (active) {
lc.stop()
@ -57,7 +57,7 @@ export const LocateControl = () => {
}}
>
{loading ? (
<span className='tw-loading tw-loading-spinner tw-loading-md tw:mt-1'></span>
<span className='tw:loading tw:loading-spinner tw:loading-md tw:mt-1'></span>
) : (
<SVG
src={TargetSVG}

4
src/Components/Map/Subcomponents/Controls/QuestControl.tsx
View File

@ -11,11 +11,11 @@ export function QuestControl() {
''
) : (
<div
className='tw-card tw:bg-base-100 tw:shadow-xl tw:my-2 tw:w-10'
className='tw:card tw:bg-base-100 tw:shadow-xl tw:my-2 tw:w-10'
onClick={(e) => e.stopPropagation()}
>
<div
className='tw-card-body tw:hover:bg-slate-300 tw:rounded-2xl tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
className='tw:card-body tw:hover:bg-slate-300 tw:rounded-2xl tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
onClick={() => setQuestsOpen(true)}
>
<img src={FistSVG} alt='Quests' className='tw:h-[2em]' />

8
src/Components/Map/Subcomponents/Controls/SearchControl.tsx
View File

@ -118,7 +118,7 @@ export const SearchControl = () => {
placeholder='search ...'
autoComplete='off'
value={value}
className='tw-input tw-input-bordered tw:grow tw:shadow-xl tw:rounded-lg tw:pr-12'
className='tw:input tw:input-bordered tw:grow tw:shadow-xl tw:rounded-lg tw:pr-12'
ref={searchInput}
onChange={(e) => setValue(e.target.value)}
onFocus={() => {
@ -129,7 +129,7 @@ export const SearchControl = () => {
/>
{value.length > 0 && (
<button
className='tw-btn tw-btn-sm tw-btn-circle tw:absolute tw:right-2 tw:top-2'
className='tw:btn tw:btn-sm tw:btn-circle tw:absolute tw:right-2 tw:top-2'
onClick={() => setValue('')}
>
✕
@ -146,13 +146,13 @@ export const SearchControl = () => {
value.length === 0 ? (
''
) : (
<div className='tw-card tw-card-body tw:bg-base-100 tw:p-4 tw:mt-2 tw:shadow-xl tw:overflow-y-auto tw:max-h-[calc(100dvh-152px)] tw:absolute tw:z-3000'>
<div className='tw:card tw:card-body tw:bg-base-100 tw:p-4 tw:mt-2 tw:shadow-xl tw:overflow-y-auto tw:max-h-[calc(100dvh-152px)] tw:absolute tw:z-3000'>
{tagsResults.length > 0 && (
<div className='tw:flex tw:flex-wrap'>
{tagsResults.slice(0, 3).map((tag) => (
<div
key={tag.name}
className='tw:rounded-2xl tw:text-white tw:p-1 tw:px-4 tw:shadow-md tw-card tw:mr-2 tw:mb-2 tw:cursor-pointer'
className='tw:rounded-2xl tw:text-white tw:p-1 tw:px-4 tw:shadow-md tw:card tw:mr-2 tw:mb-2 tw:cursor-pointer'
style={{ backgroundColor: tag.color }}
onClick={() => {
addFilterTag(tag)

6
src/Components/Map/Subcomponents/Controls/SidebarControl.tsx
View File

@ -4,10 +4,10 @@ import Bars3Icon from '@heroicons/react/16/solid/Bars3Icon'
export const SidebarControl = () => {
return (
<>
<div className='tw-card tw:bg-base-100 tw:shadow-xl tw:items-center tw:justify-center tw:hover:bg-slate-300 tw:hover:cursor-pointer tw:transition-all tw:duration-300 tw:mr-2 tw:h-12 tw:w-12 '>
<div className='tw-card-body tw-card tw:p-0'>
<div className='tw:card tw:bg-base-100 tw:shadow-xl tw:items-center tw:justify-center tw:hover:bg-slate-300 tw:hover:cursor-pointer tw:transition-all tw:duration-300 tw:mr-2 tw:h-12 tw:w-12 '>
<div className='tw:card-body tw:card tw:p-0'>
<button
className='tw-btn tw-btn-square tw-btn-ghost tw:rounded-2xl'
className='tw:btn tw:btn-square tw:btn-ghost tw:rounded-2xl'
data-te-sidenav-toggle-ref
data-te-target='#sidenav'
aria-controls='#sidenav'

6
src/Components/Map/Subcomponents/Controls/TagsControl.tsx
View File

@ -10,12 +10,12 @@ export const TagsControl = () => {
{filterTags.map((tag) => (
<div
key={tag.id}
className='tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl tw-card tw:mr-2 tw:mb-2'
className='tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl tw:card tw:mr-2 tw:mb-2'
style={{ backgroundColor: tag.color }}
>
<div className='tw-card-actions tw:justify-end'>
<div className='tw:card-actions tw:justify-end'>
<label
className='tw-btn tw-btn-xs tw-btn-circle tw:absolute tw:-right-2 tw:-top-2 tw:bg-white tw:text-gray-600'
className='tw:btn tw:btn-xs tw:btn-circle tw:absolute tw:-right-2 tw:-top-2 tw:bg-white tw:text-gray-600'
onClick={() => removeFilterTag(tag.name)}
>
✕

6
src/Components/Map/Subcomponents/ItemFormPopup.tsx
View File

@ -199,12 +199,12 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
<button
className={
spinner
? 'tw-btn tw-btn-disabled tw:mt-5 tw:place-self-center'
: 'tw-btn tw:mt-5 tw:place-self-center'
? 'tw:btn tw:btn-disabled tw:mt-5 tw:place-self-center'
: 'tw:btn tw:mt-5 tw:place-self-center'
}
type='submit'
>
{spinner ? <span className='tw-loading tw-loading-spinner'></span> : 'Save'}
{spinner ? <span className='tw:loading tw:loading-spinner'></span> : 'Save'}
</button>
</div>
</form>

14
src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
View File

@ -78,7 +78,7 @@ export function HeaderView({
<div className={'tw:grow tw:max-w-[calc(100%-60px)] }'}>
<div className='flex items-center'>
{avatar && (
<div className='tw-avatar'>
<div className='tw:avatar'>
<div
className={`${
big ? 'tw:w-20' : 'tw:w-10'
@ -123,16 +123,16 @@ export function HeaderView({
(hasUserPermission(api?.collectionName!, 'delete', item) ||
hasUserPermission(api?.collectionName!, 'update', item)) &&
!hideMenu && (
<div className='tw-dropdown tw-dropdown-bottom'>
<div className='tw:dropdown tw:dropdown-bottom'>
<label
tabIndex={0}
className='tw:bg-base-100 tw-btn tw:m-1 tw:leading-3 tw:border-none tw:min-h-0 tw:h-6'
className='tw:bg-base-100 tw:btn tw:m-1 tw:leading-3 tw:border-none tw:min-h-0 tw:h-6'
>
<EllipsisVerticalIcon className='tw:h-5 tw:w-5' />
</label>
<ul
tabIndex={0}
className='tw-dropdown-content tw-menu tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:z-1000'
className='tw:dropdown-content tw:menu tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:z-1000'
>
{api?.updateItem &&
hasUserPermission(api.collectionName!, 'update', item) &&
@ -170,7 +170,7 @@ export function HeaderView({
<li>
<a className='tw:cursor-pointer tw:text-error!' onClick={openDeleteModal}>
{loading ? (
<span className='tw-loading tw-loading-spinner tw-loading-sm'></span>
<span className='tw:loading tw:loading-spinner tw:loading-sm'></span>
) : (
<TrashIcon className='tw:h-5 tw:w-5' />
)}
@ -195,7 +195,7 @@ export function HeaderView({
<div className='tw:grid'>
<div className='tw:flex tw:justify-between'>
<label
className='tw-btn tw:mt-4 tw-btn-error'
className='tw:btn tw:mt-4 tw:btn-error'
onClick={(e) => {
deleteCallback(e)
setModalOpen(false)
@ -203,7 +203,7 @@ export function HeaderView({
>
Yes
</label>
<label className='tw-btn tw:mt-4' onClick={() => setModalOpen(false)}>
<label className='tw:btn tw:mt-4' onClick={() => setModalOpen(false)}>
No
</label>
</div>

2
src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx
View File

@ -29,7 +29,7 @@ export const PopupButton = ({
style={{
backgroundColor: `${item?.color ?? (item && (getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : (item?.layer?.markerDefaultColor ?? '#000')))}`,
}}
className='tw-btn tw:text-white tw-btn-sm tw:float-right tw:mt-1'
className='tw:btn tw:text-white tw:btn-sm tw:float-right tw:mt-1'
>
{text}
</button>

6
src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx
View File

@ -13,15 +13,15 @@ export const PopupCheckboxInput = ({
item?: Item
}) => {
return (
<label htmlFor={item?.id} className='tw-label tw:justify-normal tw:pt-1 tw:pb-1'>
<label htmlFor={item?.id} className='tw:label tw:justify-normal tw:pt-1 tw:pb-1'>
<input
id={item?.id}
type='checkbox'
name={dataField}
className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
checked={item?.public_edit}
/>
<span className='tw:text-sm tw-label-text tw:mx-2 tw:cursor-pointer'>{label}</span>
<span className='tw:text-sm tw:label-text tw:mx-2 tw:cursor-pointer'>{label}</span>
</label>
)
}

6
src/Components/Map/Subcomponents/SelectPosition.tsx
View File

@ -1,16 +1,16 @@
/* eslint-disable @typescript-eslint/no-unsafe-call */
export const SelectPosition = ({ setSelectNewItemPosition }: { setSelectNewItemPosition }) => {
return (
<div className='tw:animate-pulseGrow tw-button tw:z-1000 tw:absolute tw:right-5 tw:top-4 tw:drop-shadow-md'>
<div className='tw:animate-pulseGrow tw:button tw:z-1000 tw:absolute tw:right-5 tw:top-4 tw:drop-shadow-md'>
<label
className='tw-btn tw-btn-sm tw:rounded-2xl tw-btn-circle tw-btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
className='tw:btn tw:btn-sm tw:rounded-2xl tw:btn-circle tw:btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
onClick={() => {
setSelectNewItemPosition(null)
}}
>
<p className='tw:text-center '>✕</p>
</label>
<div className='tw-alert tw:bg-base-100 tw:text-base-content'>
<div className='tw:alert tw:bg-base-100 tw:text-base-content'>
<div>
<span className='tw:text-lg'>Select position on the map!</span>
</div>

2
src/Components/Map/UtopiaMapInner.tsx
View File

@ -80,7 +80,7 @@ export function UtopiaMapInner({
}
/>
<a href='https://opencollective.com/utopia-project'>
<div className='tw-btn tw-btn-sm tw:float-right tw-btn-primary'>Donate</div>
<div className='tw:btn tw:btn-sm tw:float-right tw:btn-primary'>Donate</div>
</a>
</div>
</>,

2
src/Components/Profile/ProfileForm.tsx
View File

@ -203,7 +203,7 @@ export function ProfileForm() {
<div className='tw:mt-4'>
<button
className={loading ? ' tw-loading tw-btn tw:float-right' : 'tw-btn tw:float-right'}
className={loading ? ' tw:loading tw:btn tw:float-right' : 'tw:btn tw:float-right'}
type='submit'
style={{
// We could refactor this, it is used several times at different locations

2
src/Components/Profile/ProfileView.tsx
View File

@ -174,7 +174,7 @@ export function ProfileView({ attestationApi }: { attestationApi?: ItemsApi<any>
{item && (
<MapOverlayPage
key={item.id}
className={`tw:p-0! tw:mx-4 tw:mt-4 tw:mb-4 tw:md:w-[calc(50%-32px)] tw:w-[calc(100%-32px)] tw:min-w-80 tw:max-w-3xl tw:left-0! tw:sm:left-auto! tw:top-0 tw:bottom-0 tw:transition-opacity tw:duration-500 ${!selectPosition ? 'tw:opacity-100 tw:pointer-events-auto' : 'tw:opacity-0 tw:pointer-events-none'}`}
className={`tw:p-0! tw:m-4! tw:md:w-[calc(50%-32px)] tw:w-[calc(100%-32px)] tw:min-w-80 tw:max-w-3xl tw:left-0! tw:sm:left-auto! tw:top-0 tw:bottom-0 tw:transition-opacity tw:duration-500 ${!selectPosition ? 'tw:opacity-100 tw:pointer-events-auto' : 'tw:opacity-0 tw:pointer-events-none'}`}
>
<>
<div className={'tw:px-6 tw:pt-6'}>

6
src/Components/Profile/Subcomponents/ActionsButton.tsx
View File

@ -58,7 +58,7 @@ export function ActionButton({
{triggerItemSelected && (
<button
tabIndex={0}
className='tw:z-500 tw-btn tw-btn-circle tw:shadow'
className='tw:z-500 tw:btn tw:btn-circle tw:shadow'
onClick={() => {
setModalOpen(true)
}}
@ -73,7 +73,7 @@ export function ActionButton({
{triggerAddButton && (
<button
tabIndex={0}
className='tw:z-500 tw-btn tw-btn-circle tw:shadow tw:mt-2'
className='tw:z-500 tw:btn tw:btn-circle tw:shadow tw:mt-2'
onClick={() => {
triggerAddButton()
}}
@ -110,7 +110,7 @@ export function ActionButton({
.map((i) => (
<div
key={i.id}
className='tw:cursor-pointer tw-card tw:border-[1px] tw:border-base-300 tw-card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:mx-4 tw:p-4 tw:mb-4 tw:h-fit'
className='tw:cursor-pointer tw:card tw:border-[1px] tw:border-base-300 tw:card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:mx-4 tw:p-4 tw:mb-4 tw:h-fit'
onClick={() => {
triggerItemSelected(i.id)
setModalOpen(false)

8
src/Components/Profile/Subcomponents/AvatarWidget.tsx
View File

@ -166,10 +166,10 @@ export const AvatarWidget: React.FC<AvatarWidgetProps> = ({ avatar, setAvatar })
<input
type='file'
accept='image/*'
className='tw-file-input tw:w-full tw:max-w-xs'
className='tw:file-input tw:w-full tw:max-w-xs'
onChange={onImageChange}
/>
<div className='button tw-btn tw-btn-lg tw-btn-circle tw:animate-none'>
<div className='button tw:btn tw:btn-lg tw:btn-circle tw:animate-none'>
<ArrowUpTrayIcon className='tw:w-6 tw:h-6' />
</div>
{avatar ? (
@ -187,7 +187,7 @@ export const AvatarWidget: React.FC<AvatarWidgetProps> = ({ avatar, setAvatar })
</label>
) : (
<div className='tw:w-20 tw:flex tw:items-center tw:justify-center'>
<span className='tw-loading tw-loading-spinner'></span>
<span className='tw:loading tw:loading-spinner'></span>
</div>
)}
<DialogModal
@ -203,7 +203,7 @@ export const AvatarWidget: React.FC<AvatarWidgetProps> = ({ avatar, setAvatar })
<img src={image} ref={imgRef} onLoad={onImageLoad} />
</ReactCrop>
<button
className={'tw-btn tw-btn-primary'}
className={'tw:btn tw:btn-primary'}
onClick={() => {
setCropping(true)
setCropModalOpen(false)

2
src/Components/Profile/Subcomponents/ContactInfoView.tsx
View File

@ -30,7 +30,7 @@ export const ContactInfoView = ({ item, heading }: { item: Item; heading: string
{profileOwner?.image && (
<ConditionalLink url={'/item/' + profileOwner?.id}>
<div className='tw:mr-5 tw:flex tw:items-center tw:justify-center'>
<div className='tw-avatar'>
<div className='tw:avatar'>
<div className='tw:w-20 tw:h-20 tw:bg-gray-200 rounded-full tw:flex tw:items-center tw:justify-center overflow-hidden'>
<img
src={appState.assetsApi.url + profileOwner?.image}

4
src/Components/Profile/Subcomponents/FormHeader.tsx
View File

@ -40,7 +40,7 @@ export const FormHeader = ({ item, state, setState }) => {
name: v,
}))
}
containerStyle='tw:grow tw-input-md'
containerStyle='tw:grow tw:input-md'
/>
<TextInput
placeholder='Subtitle'
@ -52,7 +52,7 @@ export const FormHeader = ({ item, state, setState }) => {
subname: v,
}))
}
containerStyle='tw:grow tw-input-sm tw:px-4 tw:mt-1'
containerStyle='tw:grow tw:input-sm tw:px-4 tw:mt-1'
/>
</div>
</div>

8
src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx
View File

@ -53,16 +53,16 @@ export function LinkedItemsHeaderView({
</div>
<div className='tw:col-span-1' onClick={(e) => e.stopPropagation()}>
{unlinkPermission && (
<div className='tw-dropdown tw-dropdown-bottom'>
<div className='tw:dropdown tw:dropdown-bottom'>
<label
tabIndex={0}
className=' tw-btn tw:m-1 tw:leading-3 tw:border-none tw:min-h-0 tw:h-6'
className=' tw:btn tw:m-1 tw:leading-3 tw:border-none tw:min-h-0 tw:h-6'
>
<EllipsisVerticalIcon className='tw:h-5 tw:w-5' />
</label>
<ul
tabIndex={0}
className='tw-dropdown-content tw-menu tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:z-1000'
className='tw:dropdown-content tw:menu tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:z-1000'
>
{true && (
<li>
@ -71,7 +71,7 @@ export function LinkedItemsHeaderView({
onClick={() => unlinkCallback(item.id)}
>
{loading ? (
<span className='tw-loading tw-loading-spinner tw-loading-sm'></span>
<span className='tw:loading tw:loading-spinner tw:loading-sm'></span>
) : (
<LinkSlashIcon className='tw:h-5 tw:w-5 tw:stroke-3' />
)}

2
src/Components/Profile/Subcomponents/MarkdownHint.tsx
View File

@ -10,7 +10,7 @@ export const MarkdownHint = () => {
title='Markdown is supported'
className='flex tw:flex-row tw:text-gray-400 tw:cursor-pointer tw:items-center'
>
<img src={MarkdownSVG} alt='Markdown' className='octicon octicon-markdown tw-gray-400' />
<img src={MarkdownSVG} alt='Markdown' className='octicon octicon-markdown tw:gray-400' />
{expended && (
<a
href='https://www.markdownguide.org/cheat-sheet/#basic-syntax'

4
src/Components/Profile/Subcomponents/PlusButton.tsx
View File

@ -21,10 +21,10 @@ export function PlusButton({
return (
<>
{hasUserPermission(collection, 'create', undefined, layer) && (
<div className='tw-dropdown tw-dropdown-top tw-dropdown-end tw-dropdown-hover tw:z-3000 tw:absolute tw:right-4 tw:bottom-4'>
<div className='tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-3000 tw:absolute tw:right-4 tw:bottom-4'>
<button
tabIndex={0}
className='tw:z-500 tw-btn tw-btn-circle tw:shadow'
className='tw:z-500 tw:btn tw:btn-circle tw:shadow'
onClick={() => {
triggerAction()
}}

8
src/Components/Profile/Subcomponents/TagsWidget.tsx
View File

@ -107,18 +107,18 @@ export const TagsWidget = ({ placeholder, containerStyle, defaultTags, onUpdate
setFocusInput(false)
}, 200)
}}
className={`tw-input tw-input-bordered tw:cursor-text ${containerStyle}`}
className={`tw:input tw:input-bordered tw:cursor-text ${containerStyle}`}
>
<div className='tw:flex tw:flex-wrap tw:h-fit'>
{defaultTags.map((tag) => (
<div
key={tag.name}
className='tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl tw-card tw:mt-3 tw:mr-4'
className='tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl tw:card tw:mt-3 tw:mr-4'
style={{ backgroundColor: tag.color ? tag.color : '#666' }}
>
<div className='tw-card-actions tw:justify-end'>
<div className='tw:card-actions tw:justify-end'>
<label
className='tw-btn tw-btn-xs tw-btn-circle tw:absolute tw:-right-2 tw:-top-2 tw:bg-white tw:text-gray-600'
className='tw:btn tw:btn-xs tw:btn-circle tw:absolute tw:-right-2 tw:-top-2 tw:bg-white tw:text-gray-600'
onClick={() => deleteTag(tag)}
>
✕

16
src/Components/Profile/Templates/TabsForm.tsx
View File

@ -53,19 +53,19 @@ export const TabsForm = ({
}, [location.search])
return (
<div role='tablist' className='tw-tabs tw-tabs-lifted tw:mt-3'>
<div role='tablist' className='tw:tabs tw:tabs-lifted tw:mt-3'>
<input
type='radio'
name='my_tabs_2'
role='tab'
className={'tw-tab tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'}
className={'tw:tab tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'}
aria-label='Info'
checked={activeTab === 1 && true}
onChange={() => updateActiveTab(1)}
/>
<div
role='tabpanel'
className='tw-tab-content tw:bg-base-100 tw:border-(--fallback-bc,oklch(var(--bc)/0.2)) tw:rounded-box tw:h-[calc(100dvh-332px)] tw:min-h-56 tw:border-none'
className='tw:tab-content tw:bg-base-100 tw:border-(--fallback-bc,oklch(var(--bc)/0.2)) tw:rounded-box tw:h-[calc(100dvh-332px)] tw:min-h-56 tw:border-none'
>
<div
className={`tw:flex tw:flex-col tw:h-full ${item.layer.itemType.show_start_end_input && 'tw:pt-4'}`}
@ -125,7 +125,7 @@ export const TabsForm = ({
name='my_tabs_2'
role='tab'
className={
'tw-tab tw:min-w-[10em] tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
'tw:tab tw:min-w-[10em] tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
}
aria-label='Offers & Needs'
checked={activeTab === 3 && true}
@ -133,7 +133,7 @@ export const TabsForm = ({
/>
<div
role='tabpanel'
className='tw-tab-content tw:bg-base-100 tw:border-(--fallback-bc,oklch(var(--bc)/0.2)) tw:rounded-box tw:h-[calc(100dvh-332px)] tw:min-h-56 tw:border-none'
className='tw:tab-content tw:bg-base-100 tw:border-(--fallback-bc,oklch(var(--bc)/0.2)) tw:rounded-box tw:h-[calc(100dvh-332px)] tw:min-h-56 tw:border-none'
>
<div className='tw:h-full'>
<div className='tw:w-full tw:h-[calc(50%-0.75em)] tw:mb-4'>
@ -172,14 +172,14 @@ export const TabsForm = ({
type='radio'
name='my_tabs_2'
role='tab'
className='tw-tab tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
className='tw:tab tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
aria-label='Links'
checked={activeTab === 7 && true}
onChange={() => updateActiveTab(7)}
/>
<div
role='tabpanel'
className='tw-tab-content tw:bg-base-100 tw:rounded-box tw:h-[calc(100dvh-332px)] tw:overflow-y-auto tw:pt-4 tw:pb-1 tw:-mx-4 tw:overflow-x-hidden fade'
className='tw:tab-content tw:bg-base-100 tw:rounded-box tw:h-[calc(100dvh-332px)] tw:overflow-y-auto tw:pt-4 tw:pb-1 tw:-mx-4 tw:overflow-x-hidden fade'
>
<div className='tw:h-full'>
<div className='tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:md:grid-cols-1 tw:lg:grid-cols-1 tw:xl:grid-cols-1 tw:2xl:grid-cols-2 tw:mb-4'>
@ -187,7 +187,7 @@ export const TabsForm = ({
state.relations.map((i) => (
<div
key={i.id}
className='tw:cursor-pointer tw-card tw:bg-base-200 tw:border-[1px] tw:border-base-300 tw-card-body tw:shadow-xl tw:text-base-content tw:mx-4 tw:p-6 tw:mb-4'
className='tw:cursor-pointer tw:card tw:bg-base-200 tw:border-[1px] tw:border-base-300 tw:card-body tw:shadow-xl tw:text-base-content tw:mx-4 tw:p-6 tw:mb-4'
onClick={() => navigate('/item/' + i.id)}
>
<LinkedItemsHeaderView

28
src/Components/Profile/Templates/TabsView.tsx
View File

@ -85,13 +85,13 @@ export const TabsView = ({
}, [location.search])
return (
<div role='tablist' className='tw-tabs tw-tabs-lifted tw:mt-2 tw:mb-2 tw:px-6'>
<div role='tablist' className='tw:tabs tw:tabs-lifted tw:mt-2 tw:mb-2 tw:px-6'>
<input
type='radio'
name='my_tabs_2'
role='tab'
className={
'tw-tab tw:font-bold tw:ps-2! tw:pe-2! tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
'tw:tab tw:font-bold tw:ps-2! tw:pe-2! tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
}
aria-label={`${item.layer?.itemType.icon_as_labels && activeTab !== 1 ? '📝' : '📝\u00A0Info'}`}
checked={activeTab === 1 && true}
@ -99,7 +99,7 @@ export const TabsView = ({
/>
<div
role='tabpanel'
className='tw-tab-content tw:bg-base-100 tw:rounded-box tw:h-[calc(100dvh-280px)] tw:overflow-y-auto fade tw:pt-2 tw:pb-4 tw:mb-4 tw:overflow-x-hidden'
className='tw:tab-content tw:bg-base-100 tw:rounded-box tw:h-[calc(100dvh-280px)] tw:overflow-y-auto fade tw:pt-2 tw:pb-4 tw:mb-4 tw:overflow-x-hidden'
>
{item.layer?.itemType.show_start_end && (
<div className='tw:max-w-xs'>
@ -117,7 +117,7 @@ export const TabsView = ({
name='my_tabs_2'
role='tab'
className={
'tw-tab tw:font-bold tw:ps-2! tw:pe-2! tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
'tw:tab tw:font-bold tw:ps-2! tw:pe-2! tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
}
aria-label={`${item.layer.itemType.icon_as_labels && activeTab !== 2 ? '❤️' : '❤️\u00A0Trust'}`}
checked={activeTab === 2 && true}
@ -125,9 +125,9 @@ export const TabsView = ({
/>
<div
role='tabpanel'
className='tw-tab-content tw:bg-base-100 tw:rounded-box tw:h-[calc(100dvh-280px)] tw:overflow-y-auto fade tw:pt-2 tw:pb-4 tw:mb-4 tw:overflow-x-hidden'
className='tw:tab-content tw:bg-base-100 tw:rounded-box tw:h-[calc(100dvh-280px)] tw:overflow-y-auto fade tw:pt-2 tw:pb-4 tw:mb-4 tw:overflow-x-hidden'
>
<table className='sm:tw-table-sm md:tw-table-md'>
<table className='sm:tw:table-sm md:tw:table-md'>
<tbody>
{attestations
.filter((a) => a.to.some((t) => t.directus_users_id === item.user_created?.id))
@ -139,7 +139,7 @@ export const TabsView = ({
<tr key={i}>
<td>
<div
className={`tw:cursor-pointer tw:text-3xl tw-mask tw-mask-${a.shape} tw:p-3 tw:mr-2 tw:shadow-xl tw-bg-[${a.color}]`}
className={`tw:cursor-pointer tw:text-3xl tw:mask tw:mask-${a.shape} tw:p-3 tw:mr-2 tw:shadow-xl tw:bg-[${a.color}]`}
>
{a.emoji}
</div>
@ -153,8 +153,8 @@ export const TabsView = ({
{getUserProfile(a.user_created.id) ? (
<Link to={'/item/' + getUserProfile(a.user_created.id)?.id}>
<div className='flex items-center gap-3'>
<div className='tw-avatar'>
<div className='tw-mask tw:rounded-full tw:h-8 tw:w-8 tw:mr-2'>
<div className='tw:avatar'>
<div className='tw:mask tw:rounded-full tw:h-8 tw:w-8 tw:mr-2'>
{getUserProfile(a.user_created.id)?.image && (
<img
src={
@ -199,14 +199,14 @@ export const TabsView = ({
type='radio'
name='my_tabs_2'
role='tab'
className={`tw-tab tw:font-bold tw:ps-2! tw:pe-2! ${!(item.layer.itemType.icon_as_labels && activeTab !== 3) && 'tw:min-w-[10.4em]'} tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`}
className={`tw:tab tw:font-bold tw:ps-2! tw:pe-2! ${!(item.layer.itemType.icon_as_labels && activeTab !== 3) && 'tw:min-w-[10.4em]'} tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`}
aria-label={`${item.layer.itemType.icon_as_labels && activeTab !== 3 ? '♻️' : '♻️\u00A0Offers & Needs'}`}
checked={activeTab === 3 && true}
onChange={() => updateActiveTab(3)}
/>
<div
role='tabpanel'
className='tw-tab-content tw:bg-base-100 tw:rounded-box tw:h-[calc(100dvh-268px)] tw:overflow-y-auto fade tw:pt-4 tw:pb-1'
className='tw:tab-content tw:bg-base-100 tw:rounded-box tw:h-[calc(100dvh-268px)] tw:overflow-y-auto fade tw:pt-4 tw:pb-1'
>
<div className='tw:h-full'>
<div className='tw:grid tw:grid-cols-1'>
@ -252,14 +252,14 @@ export const TabsView = ({
type='radio'
name='my_tabs_2'
role='tab'
className='tw-tab tw:font-bold tw:ps-2! tw:pe-2! tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
className='tw:tab tw:font-bold tw:ps-2! tw:pe-2! tw:[--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
aria-label={`${item.layer.itemType.icon_as_labels && activeTab !== 7 ? '🔗' : '🔗\u00A0Links'}`}
checked={activeTab === 7 && true}
onChange={() => updateActiveTab(7)}
/>
<div
role='tabpanel'
className='tw-tab-content tw:bg-base-100 tw:rounded-box tw:h-[calc(100dvh-280px)] tw:overflow-y-auto tw:pt-4 tw:pb-1 tw:-mr-4 tw:-mb-4 tw:overflow-x-hidden'
className='tw:tab-content tw:bg-base-100 tw:rounded-box tw:h-[calc(100dvh-280px)] tw:overflow-y-auto tw:pt-4 tw:pb-1 tw:-mr-4 tw:-mb-4 tw:overflow-x-hidden'
>
<div className='tw:h-full'>
<div className='tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:md:grid-cols-1 tw:lg:grid-cols-1 tw:xl:grid-cols-1 tw:2xl:grid-cols-2 tw:pb-4'>
@ -267,7 +267,7 @@ export const TabsView = ({
relations.map((i) => (
<div
key={i.id}
className='tw:cursor-pointer tw-card tw:bg-base-200 tw:border-[1px] tw:border-base-300 tw-card-body tw:shadow-xl tw:text-base-content tw:p-6 tw:mr-4 tw:mb-4'
className='tw:cursor-pointer tw:card tw:bg-base-200 tw:border-[1px] tw:border-base-300 tw:card-body tw:shadow-xl tw:text-base-content tw:p-6 tw:mr-4 tw:mb-4'
onClick={() => navigate('/item/' + i.id)}
>
<LinkedItemsHeaderView

6
src/Components/Profile/UserSettings.tsx
View File

@ -56,7 +56,7 @@ export function UserSettings() {
className='tw:mx-4 tw:mt-4 tw:max-h-[calc(100dvh-96px)] tw:h-fit tw:md:w-[calc(50%-32px)] tw:w-[calc(100%-32px)] tw:max-w-xl tw:left-auto! tw:top-0 tw:bottom-0'
>
<div className={'tw:text-xl tw:font-semibold'}>Settings</div>
<div className='tw-divider tw:mt-2'></div>
<div className='tw:divider tw:mt-2'></div>
<div className='tw:grid tw:grid-cols-1 tw:gap-6'>
<TextInput
type='email'
@ -80,8 +80,8 @@ export function UserSettings() {
<button
className={
loading
? ' tw-loading tw-btn-disabled tw-btn tw-btn-primary tw:float-right'
: 'tw-btn tw-btn-primary tw:float-right'
? ' tw:loading tw:btn-disabled tw:btn tw:btn-primary tw:float-right'
: 'tw:btn tw:btn-primary tw:float-right'
}
onClick={() => onUpdateUser()}
>

10
src/Components/Templates/AttestationForm.tsx
View File

@ -96,8 +96,8 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
(u, k) => (
<div key={k} className='tw:flex tw:items-center tw:space-x-3 tw:mx-2 tw:my-1'>
{u.image ? (
<div className='tw-avatar'>
<div className='tw-mask tw-mask-circle tw:w-8 tw:h-8'>
<div className='avatar'>
<div className='mask mask-circle tw:w-8 tw:h-8'>
<img
src={appState.assetsApi.url + u.image + '?width=40&heigth=40'}
alt='Avatar'
@ -105,7 +105,7 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
</div>
</div>
) : (
<div className='tw-mask tw-mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
<div className='mask mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
)}
<div>
<div className='tw:font-bold'>{u.name}</div>
@ -136,12 +136,12 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
onChange={handleChange}
type='text'
placeholder='... and say some words'
className='tw-input tw:min-w-0 tw:w-fit tw:resize-none tw:overflow-hidden tw:text-center '
className='input tw:min-w-0 tw:w-fit tw:resize-none tw:overflow-hidden tw:text-center '
/>
</div>
</div>
<div className='tw:w-full tw:grid tw:mt-4'>
<button onClick={sendAttestation} className='tw-btn tw:place-self-center tw:px-8'>
<button onClick={sendAttestation} className='btn tw:place-self-center tw:px-8'>
Next
</button>
</div>

2
src/Components/Templates/CardPage.tsx
View File

@ -19,7 +19,7 @@ export function CardPage({
return (
<main className='tw:flex-1 tw:overflow-y-auto tw:overflow-x-hidden tw:pt-2 tw:px-6 tw:min-w-80 tw:flex tw:justify-center'>
<div className='tw:w-full tw:xl:max-w-6xl '>
<div className='tw:text-sm tw-breadcrumbs'>
<div className='tw:text-sm breadcrumbs'>
<ul>
<li>
<Link to={'/'}>Home</Link>

6
src/Components/Templates/DialogModal.tsx
View File

@ -44,20 +44,20 @@ const DialogModal = ({
if (isOpened) {
return (
<dialog
className={`${className ?? ''} tw-card tw:shadow-xl tw:absolute tw:right-0 tw:top-0 tw:bottom-0 tw:left-0 tw:m-auto tw:transition-opacity tw:duration-300 tw:p-4 tw:max-w-xl tw:bg-base-100`}
className={`${className ?? ''} card tw:shadow-xl tw:absolute tw:right-0 tw:top-0 tw:bottom-0 tw:left-0 tw:m-auto tw:transition-opacity tw:duration-300 tw:p-4 tw:max-w-xl tw:bg-base-100`}
ref={ref}
onCancel={onClose}
onClick={(e) =>
ref.current && !isClickInsideRectangle(e, ref.current) && closeOnClickOutside && onClose()
}
>
<div className='tw-card-body tw:p-2'>
<div className='card-body tw:p-2'>
<h2 className='tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center'>{title}</h2>
{children}
{showCloseButton && (
<button
className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw:absolute tw:right-2 tw:top-2'
className='btn btn-sm btn-circle btn-ghost tw:absolute tw:right-2 tw:top-2'
onClick={onClose}
>
✕

6
src/Components/Templates/EmojiPicker.tsx
View File

@ -97,7 +97,7 @@ export const EmojiPicker = ({
<>
<div
onClick={toggleDropdown}
className={`tw:cursor-pointer ${selectedEmoji === 'select badge' ? 'tw:text-sm tw:p-9! tw:text-center ' : 'tw:text-6xl'} tw-mask tw-mask-${selectedShape} tw:p-6 tw-bg-[${selectedColor}]`}
className={`tw:cursor-pointer ${selectedEmoji === 'select badge' ? 'tw:text-sm tw:p-9! tw:text-center ' : 'tw:text-6xl'} mask mask-${selectedShape} tw:p-6 bg-[${selectedColor}]`}
>
{selectedEmoji}
</div>
@ -123,7 +123,7 @@ export const EmojiPicker = ({
className={`tw:cursor-pointer tw:hover:bg-base-200 tw:rounded-md tw:p-2 ${shape === selectedShape ? 'tw:bg-base-300' : ''}`}
onClick={() => selectShape(shape)}
>
<div className={`tw:h-12 tw-mask tw-mask-${shape} tw:bg-neutral-content`}></div>
<div className={`tw:h-12 mask mask-${shape} tw:bg-neutral-content`}></div>
</div>
))}
</div>
@ -135,7 +135,7 @@ export const EmojiPicker = ({
className={`tw:cursor-pointer tw:hover:bg-base-200 tw:rounded-md tw:p-2 tw:flex tw:justify-center tw:items-center ${color === selectedColor ? 'tw:bg-base-300' : ''}`}
onClick={() => selectColor(color)}
>
<div className={`tw:h-8 tw:w-8 tw:rounded-full tw-bg-[${color}]`}></div>
<div className={`tw:h-8 tw:w-8 tw:rounded-full bg-[${color}]`}></div>
</div>
))}
</div>

2
src/Components/Templates/ItemCard.tsx
View File

@ -24,7 +24,7 @@ export const ItemCard = ({
return (
<div
className='tw:cursor-pointer tw-card tw:border-[1px] tw:border-base-300 tw-card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:p-4 tw:mb-4 tw:h-fit'
className='tw:cursor-pointer card tw:border-[1px] tw:border-base-300 card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:p-4 tw:mb-4 tw:h-fit'
onClick={() => {
// We could have an onClick callback instead
const params = new URLSearchParams(window.location.search)

4
src/Components/Templates/MapOverlayPage.tsx
View File

@ -45,11 +45,11 @@ export function MapOverlayPage({
>
<div
ref={overlayRef}
className={`${card ? 'tw-card tw-card-body' : ''} tw:shadow-xl tw:bg-base-100 tw:p-6 ${className ?? ''} ${backdrop ? '' : 'tw:z-2000'} tw:absolute tw:top-0 tw:bottom-0 tw:right-0 tw:left-0 tw:m-auto`}
className={`${card ? 'card card-body' : ''} tw:shadow-xl tw:bg-base-100 tw:p-6 ${className ?? ''} ${backdrop ? '' : 'tw:z-2000'} tw:absolute tw:top-0 tw:bottom-0 tw:right-0 tw:left-0 tw:m-auto`}
>
{children}
<button
className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw:absolute tw:right-2 tw:top-2'
className='btn btn-sm btn-circle btn-ghost tw:absolute tw:right-2 tw:top-2'
onClick={() => closeScreen()}
>
✕

10
src/Components/Templates/OverlayItemsIndexPage.tsx
View File

@ -176,9 +176,9 @@ export const OverlayItemsIndexPage = ({
))}
{addItemPopupType === 'place' && (
<form ref={tabRef} autoComplete='off' onSubmit={(e) => submitNewItem(e)}>
<div className='tw:cursor-pointer tw:break-inside-avoid tw-card tw:border-[1px] tw:border-base-300 tw-card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:p-6 tw:mb-10'>
<div className='tw:cursor-pointer tw:break-inside-avoid card tw:border-[1px] tw:border-base-300 card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:p-6 tw:mb-10'>
<label
className='tw-btn tw-btn-sm tw:rounded-2xl tw-btn-circle tw-btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
className='btn btn-sm tw:rounded-2xl btn-circle btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
onClick={() => setAddItemPopupType('')}
>
<p className='tw:text-center'>✕</p>
@ -201,12 +201,12 @@ export const OverlayItemsIndexPage = ({
<button
className={
loading
? 'tw-btn tw-btn-disabled tw:mt-5 tw:place-self-center'
: 'tw-btn tw:mt-5 tw:place-self-center'
? 'btn btn-disabled tw:mt-5 tw:place-self-center'
: 'btn tw:mt-5 tw:place-self-center'
}
type='submit'
>
{loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Save'}
{loading ? <span className='loading loading-spinner'></span> : 'Save'}
</button>
</div>
</div>

10
src/Components/Templates/SelectUser.tsx
View File

@ -32,14 +32,14 @@ export const SelectUser = () => {
<input
type='checkbox'
onChange={() => setSelectedUsers((prev) => [...prev, u.id])}
className='tw-checkbox tw-checkbox-sm'
className='checkbox checkbox-sm'
/>
</td>
<td>
<div className='tw:flex tw:items-center tw:space-x-3'>
{u.image ? (
<div className='tw-avatar'>
<div className='tw-mask tw-mask-circle tw:w-8 tw:h-8'>
<div className='avatar'>
<div className='mask mask-circle tw:w-8 tw:h-8'>
<img
src={appState.assetsApi.url + u.image + '?width=40&heigth=40'}
alt='Avatar'
@ -47,7 +47,7 @@ export const SelectUser = () => {
</div>
</div>
) : (
<div className='tw-mask tw-mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
<div className='mask mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
)}
<div>
<div className='tw:font-bold'>{u.name}</div>
@ -65,7 +65,7 @@ export const SelectUser = () => {
className='tw:place-self-center '
to={'/attestation-form' + '?to=' + selectedUsers.map((u) => u, ',')}
>
<button className='tw-btn tw:px-8'>Next</button>
<button className='btn tw:px-8'>Next</button>
</Link>
</div>
</MapOverlayPage>

2
src/Components/Templates/TagView.tsx
View File

@ -19,7 +19,7 @@ export const TagView = ({
<div
key={tag.name}
onClick={onClick}
className={`tw:flex tw:items-center tw:flex-row tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl tw-card tw:mt-3 tw:mr-4 tw:cursor-pointer tw:w-fit ${heighlight ? 'tw:border-4 tw:border-base-200 tw:shadow-lg' : ''}`}
className={`tw:flex tw:items-center tw:flex-row tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl card tw:mt-3 tw:mr-4 tw:cursor-pointer tw:w-fit ${heighlight ? 'tw:border-4 tw:border-base-200 tw:shadow-lg' : ''}`}
style={{ backgroundColor: tag.color ? tag.color : '#666' }}
>
<b>{decodeTag(tag.name)}</b>

4
src/Components/Templates/TitleCard.tsx
View File

@ -23,7 +23,7 @@ export function TitleCard({
return (
<div
className={
'tw-card tw:w-full tw:p-6 tw:bg-base-100 tw:shadow-xl tw:h-fit tw:mb-4 ' +
'card tw:w-full tw:p-6 tw:bg-base-100 tw:shadow-xl tw:h-fit tw:mb-4 ' +
(className ?? '') +
' ' +
(topMargin ?? 'tw:mt-6')
@ -39,7 +39,7 @@ export function TitleCard({
<div className='tw:inline-block tw:float-right'>{TopSideButtons}</div>
)}
</Subtitle>
<div className='tw-divider tw:mt-2'></div>
<div className='divider tw:mt-2'></div>
</>
)}

2
src/assets/chevron.svg
View File

@ -2,7 +2,7 @@
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 24 24'
fill='white'
className='tw-h-4 tw-w-4'
className='h-4 w-4'
>
<path d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z' />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 310 B

After

Width:  |  Height:  |  Size: 304 B

13
src/assets/css/leaflet.css
View File

@ -20,14 +20,14 @@
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
background-color: theme('colors.base-100');
color: theme('colors.base-content');
background-color: var(--color-base-100);
color: var(--color-base-content);
}
.leaflet-tooltip {
background-color: theme('colors.base-100');
color: theme('colors.base-content');
background-color: var(--color-base-100);
color: var(--color-base-content);
border-width: 0px;
}
@ -35,11 +35,10 @@
border-radius: 1em;
transition: opacity 500ms;
transition-delay: 50ms;
}
.leaflet-tooltip-top::before {
border-top-color: theme('colors.base-100');
.leaflet-tooltip::before {
border-top-color: var(--color-base-100);
}
.leaflet-container {

12
src/assets/css/tailwind.css
View File

@ -1,6 +1,6 @@
@import 'tailwindcss' prefix(tw);
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
themes: light --default, dark --prefersdark, cupcake, retro;
};
@theme {
@ -62,23 +62,23 @@
}
}
.tw-modal {
.modal {
z-index: 1200 !important;
}
.tw-menu li a {
.menu li a {
border-radius: 10px;
}
.tw-modal {
.modal {
z-index: 1200 !important;
max-height: 100dvh;
}
.tw-modal-box {
.modal-box {
max-height: calc(100dvh - 2em);
}
.tw-tab-content .container {
.tab-content .container {
height: 100%;
}

18
src/assets/css/toastify.css
View File

@ -1,20 +1,20 @@
:root {
--toastify-color-info: theme('colors.info');
--toastify-color-success: theme('colors.success');
--toastify-color-warning: theme('colors.warning');
--toastify-color-error: theme('colors.error');
--toastify-color-info: var(--color-info);
--toastify-color-success: var(--color-success);
--toastify-color-warning: var(--color-warning);
--toastify-color-error: var(--color-error);
}
.Toastify__toast {
border-radius: 1rem;
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
--shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow-colored: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);
box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--shadow);
margin-left: 1rem;
margin-right: 1rem;
margin-bottom: 1rem;
background-color: theme('colors.base-100');
color: theme('colors.base-content');
background-color: var(--color-base-100);
color: var(--color-base-content);
}
.Toastify__toast-container {

2
src/assets/plus.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="tw-w-5 tw-h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 226 B

After

Width:  |  Height:  |  Size: 220 B

2
src/assets/targetDot.svg
View File

@ -3,7 +3,7 @@
fill='currentColor'
strokeWidth='0'
viewBox='0 0 512 512'
className='tw-w-5 tw-h-5'
className='w-5 h-5'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M256 0c17.7 0 32 14.3 32 32V42.4c93.7 13.9 167.7 88 181.6 181.6H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H469.6c-13.9 93.7-88 167.7-181.6 181.6V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V469.6C130.3 455.7 56.3 381.7 42.4 288H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H42.4C56.3 130.3 130.3 56.3 224 42.4V32c0-17.7 14.3-32 32-32zM107.4 288c12.5 58.3 58.4 104.1 116.6 116.6V384c0-17.7 14.3-32 32-32s32 14.3 32 32v20.6c58.3-12.5 104.1-58.4 116.6-116.6H384c-17.7 0-32-14.3-32-32s14.3-32 32-32h20.6C392.1 165.7 346.3 119.9 288 107.4V128c0 17.7-14.3 32-32 32s-32-14.3-32-32V107.4C165.7 119.9 119.9 165.7 107.4 224H128c17.7 0 32 14.3 32 32s-14.3 32-32 32H107.4zM256 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'></path>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

2
src/assets/user.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 150 150" class="tw-w-20 tw-h-20 tw-rounded-full" style="background-color: rgb(238, 238, 238);"><path fill="#ccc" d="M 104.68731,56.689353 C 102.19435,80.640493 93.104981,97.26875 74.372196,97.26875 55.639402,97.26875 46.988823,82.308034 44.057005,57.289941 41.623314,34.938838 55.639402,15.800152 74.372196,15.800152 c 18.732785,0 32.451944,18.493971 30.315114,40.889201 z"></path><path fill="#ccc" d="M 92.5675 89.6048 C 90.79484 93.47893 89.39893 102.4504 94.86478 106.9039 C 103.9375 114.2963 106.7064 116.4723 118.3117 118.9462 C 144.0432 124.4314 141.6492 138.1543 146.5244 149.2206 L 4.268444 149.1023 C 8.472223 138.6518 6.505799 124.7812 32.40051 118.387 C 41.80992 116.0635 45.66513 113.8823 53.58659 107.0158 C 58.52744 102.7329 57.52583 93.99267 56.43084 89.26926 C 52.49275 88.83011 94.1739 88.14054 92.5675 89.6048 z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 150 150" class="w-20 h-20 rounded-full" style="background-color: rgb(238, 238, 238);"><path fill="#ccc" d="M 104.68731,56.689353 C 102.19435,80.640493 93.104981,97.26875 74.372196,97.26875 55.639402,97.26875 46.988823,82.308034 44.057005,57.289941 41.623314,34.938838 55.639402,15.800152 74.372196,15.800152 c 18.732785,0 32.451944,18.493971 30.315114,40.889201 z"></path><path fill="#ccc" d="M 92.5675 89.6048 C 90.79484 93.47893 89.39893 102.4504 94.86478 106.9039 C 103.9375 114.2963 106.7064 116.4723 118.3117 118.9462 C 144.0432 124.4314 141.6492 138.1543 146.5244 149.2206 L 4.268444 149.1023 C 8.472223 138.6518 6.505799 124.7812 32.40051 118.387 C 41.80992 116.0635 45.66513 113.8823 53.58659 107.0158 C 58.52744 102.7329 57.52583 93.99267 56.43084 89.26926 C 52.49275 88.83011 94.1739 88.14054 92.5675 89.6048 z"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 911 B

After

Width:  |  Height:  |  Size: 902 B